🏷️ Export Typings

anubra266 · May 31, 2021 · 2453f75 · 2453f75
1 parent 9db78de
commit 2453f75
Show file tree

Hide file tree

Showing 9 changed files with 101 additions and 86 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,5 @@
 <div align="center">
 
-
   <h1>
     <br/>
     🏇
@@ -25,9 +24,10 @@
 <a><img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/anubra266/choc-autocomplete?logo=github&style=for-the-badge">
 
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+
 [![All Contributors](https://img.shields.io/badge/all_contributors-3-orange.svg?style=flat-square)](#contributors-)
-<!-- ALL-CONTRIBUTORS-BADGE:END -->
 
+<!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 </a>
     <br />

diff --git a/example/app.tsx b/example/app.tsx
@@ -23,17 +23,18 @@ const App = () => {
       <AutoComplete
         rollNavigation
         focusInputOnSelect
-        // openOnFocus
+        openOnFocus
         emphasize
         // freeSolo
         // creatable
         suggestWhenEmpty
+        closeOnselect={false}
       >
         <AutoCompleteInput
           variant="filled"
           placeholder="Search..."
           // defaultValue="app"
-          // autoFocus
+          autoFocus
         />
         <AutoCompleteList>
           {options.map((option, oid) => (
@@ -53,6 +54,12 @@ const App = () => {
               </AutoCompleteItem>
             ))}
           </AutoCompleteGroup>
+          <AutoCompleteItem
+            fixed
+            onClick={() => setOptions(o => [...o, 'new'])}
+          >
+            Create New
+          </AutoCompleteItem>
         </AutoCompleteList>
       </AutoComplete>
       <Button
@@ -62,7 +69,7 @@ const App = () => {
       >
         Add Option
       </Button>
-      <AutoComplete
+      {/* <AutoComplete
         rollNavigation
         focusInputOnSelect
         freeSolo
@@ -86,7 +93,7 @@ const App = () => {
                 variant="filled"
                 placeholder="Search..."
                 defaultValue="app"
-                autoFocus
+                // autoFocus
               />
               {!inputIsEmpty && (
                 <InputRightElement cursor="pointer" onClick={resetInput}>
@@ -114,7 +121,7 @@ const App = () => {
             </AutoCompleteList>
           </>
         )}
-      </AutoComplete>
+      </AutoComplete> */}
     </Flex>
   );
 };

diff --git a/src/auto-complete-group.tsx b/src/auto-complete-group.tsx
@@ -12,15 +12,15 @@ import React, { useContext } from 'react';
 import { hasFirstOption } from './helpers/group';
 import { StoreContext } from './store';
 
-interface AutoCompleteGroup extends StackProps {
+export interface AutoCompleteGroupProps extends StackProps {
   children?: any;
   title?: string;
   titleStyles?: TextProps;
   showDivider?: boolean;
   dividerColor?: string;
 }
 
-export const AutoCompleteGroup = forwardRef<AutoCompleteGroup, 'div'>(
+export const AutoCompleteGroup = forwardRef<AutoCompleteGroupProps, 'div'>(
   (props, ref) => {
     const {
       title,

diff --git a/src/auto-complete-input.tsx b/src/auto-complete-input.tsx
@@ -8,9 +8,9 @@ import { ListAction } from './store/reducers/list';
 import { AutoCompleteAction } from './store/reducers/autocomplete';
 import { closeList } from './helpers/list';
 
-interface AutoCompleteInput extends InputProps {}
+export interface AutoCompleteInputProps extends InputProps {}
 
-export const AutoCompleteInput = forwardRef<AutoCompleteInput, 'input'>(
+export const AutoCompleteInput = forwardRef<AutoCompleteInputProps, 'input'>(
   (props, ref) => {
     const { onChange, onKeyDown, onFocus, onBlur, onClick, ...rest } = props;
     const internalRef = useRef<HTMLInputElement>(null);

diff --git a/src/auto-complete-list.tsx b/src/auto-complete-list.tsx
@@ -8,6 +8,7 @@ import React, { useContext, useEffect, useRef } from 'react';
 import { CreateInput } from './components/create-input';
 import { EmptyState } from './components/empty-state';
 import {
+  assignChildKey,
   closeList,
   getItemKeys,
   handleItemGroup,
@@ -18,9 +19,9 @@ import { Item, ItemAction } from './store/reducers/item';
 import { ListAction } from './store/reducers/list';
 import { isChild } from './utils/components';
 
-interface AutoCompleteList extends PopoverContentProps {}
+export interface AutoCompleteListProps extends PopoverContentProps {}
 
-export const AutoCompleteList = forwardRef<AutoCompleteList, 'div'>(
+export const AutoCompleteList = forwardRef<AutoCompleteListProps, 'div'>(
   (props, outRef) => {
     const ref = useRef<HTMLDivElement>(null);
     const refs = useMergeRefs(ref, outRef);
@@ -51,7 +52,7 @@ export const AutoCompleteList = forwardRef<AutoCompleteList, 'div'>(
       >
         {React.Children.map(children, (child: any) =>
           isChild(child, 'AutoCompleteItem')
-            ? React.cloneElement(child, { optionKey: child.key })
+            ? assignChildKey(child)
             : handleItemGroup(child, state)
         )}
         <CreateInput />

diff --git a/src/auto-complete-provider.tsx b/src/auto-complete-provider.tsx
@@ -38,82 +38,86 @@ export interface AutoComplete extends Omit<BoxProps, 'onChange'> {
   closeOnBlur?: boolean;
 }
 
-export const AutoComplete = forwardRef<AutoComplete, 'div'>((props, ref) => {
-  const {
-    emptyState = true,
-    rollNavigation,
-    focusInputOnSelect,
-    freeSolo,
-    creatable,
-    selectOnFocus,
-    openOnFocus,
-    emphasize,
-    defaultIsOpen,
-    onSelectOption,
-    onOptionHighlight,
-    suggestWhenEmpty,
-    closeOnselect = true,
-    closeOnBlur = true,
-    ...rest
-  } = props;
+export type AutoCompleteProps = AutoComplete;
 
-  const initialState: State = {
-    autocomplete: {
-      value: '',
-      emptyState,
+export const AutoComplete = forwardRef<AutoCompleteProps, 'div'>(
+  (props, ref) => {
+    const {
+      emptyState = true,
       rollNavigation,
       focusInputOnSelect,
       freeSolo,
       creatable,
       selectOnFocus,
       openOnFocus,
       emphasize,
+      defaultIsOpen,
       onSelectOption,
       onOptionHighlight,
       suggestWhenEmpty,
-      closeOnselect,
-      closeOnBlur,
-    },
-    input: {
-      value: '',
-      ref: undefined,
-    },
-    item: {
-      active: -1,
-      list: [],
-      filtered: [],
-    },
-    list: {
-      visible: defaultIsOpen || false,
-      ref: undefined,
-    },
-  };
+      closeOnselect = true,
+      closeOnBlur = true,
+      ...rest
+    } = props;
 
-  const mainReducer = (
-    { autocomplete, input, item, list }: State,
-    action: any
-  ) => ({
-    autocomplete: AutoCompleteReducer(autocomplete, action),
-    input: inputReducer(input, action),
-    item: itemReducer(item, action),
-    list: listReducer(list, action),
-  });
+    const initialState: State = {
+      autocomplete: {
+        value: '',
+        emptyState,
+        rollNavigation,
+        focusInputOnSelect,
+        freeSolo,
+        creatable,
+        selectOnFocus,
+        openOnFocus,
+        emphasize,
+        onSelectOption,
+        onOptionHighlight,
+        suggestWhenEmpty,
+        closeOnselect,
+        closeOnBlur,
+      },
+      input: {
+        value: '',
+        ref: undefined,
+      },
+      item: {
+        active: -1,
+        list: [],
+        filtered: [],
+      },
+      list: {
+        visible: defaultIsOpen || false,
+        ref: undefined,
+      },
+    };
 
-  const [state, dispatch] = useReducer(mainReducer, initialState);
+    const mainReducer = (
+      { autocomplete, input, item, list }: State,
+      action: any
+    ) => ({
+      autocomplete: AutoCompleteReducer(autocomplete, action),
+      input: inputReducer(input, action),
+      item: itemReducer(item, action),
+      list: listReducer(list, action),
+    });
 
-  const providerValue = useMemo(
-    () => ({
-      state,
-      dispatch,
-    }),
-    [state, dispatch]
-  );
+    const [state, dispatch] = useReducer(mainReducer, initialState);
 
-  useParseProps(props);
+    const providerValue = useMemo(
+      () => ({
+        state,
+        dispatch,
+      }),
+      [state, dispatch]
+    );
 
-  return (
-    <StoreProvider value={providerValue}>
-      <AutoCompleteBody ref={ref} {...rest} />
-    </StoreProvider>
-  );
-});
+    useParseProps(props);
+
+    return (
+      <StoreProvider value={providerValue}>
+        <AutoCompleteBody ref={ref} {...rest} />
+      </StoreProvider>
+    );
+  }
+);
diff --git a/src/helpers/autocomplete-props/onSelectOption.ts b/src/helpers/autocomplete-props/onSelectOption.ts
@@ -18,7 +18,7 @@ export const runOnSelect = (
   cb?: Function
 ) => {
   const {
-    autocomplete: { onSelectOption, focusInputOnSelect },
+    autocomplete: { onSelectOption, focusInputOnSelect, closeOnselect },
     item,
     input: { ref: inputRef },
   } = state;
@@ -38,7 +38,7 @@ export const runOnSelect = (
     returnT(inputRef?.current).value = activeItem.value;
     dispatch({ type: InputAction.Set, payload: activeItem.value });
     dispatch({ type: AutoCompleteAction.Set, payload: activeItem.value });
-    closeList(state, dispatch);
+    if (closeOnselect) closeList(state, dispatch);
     runIfFn(cb);
   }
   if (inputRef?.current && focusInputOnSelect) inputRef.current.focus();

diff --git a/src/helpers/list.ts b/src/helpers/list.ts
@@ -14,9 +14,7 @@ export const handleItemGroup = (group: any, state: State) => {
     const children: any[] = group.props.children;
     const childrenWithKeys = children.reduce((acc, child) => {
       acc.push(
-        isChild(child, 'AutoCompleteItem')
-          ? React.cloneElement(child, { optionKey: child.key })
-          : child
+        isChild(child, 'AutoCompleteItem') ? assignChildKey(child) : child
       );
       return acc;
     }, []);
@@ -28,6 +26,11 @@ export const handleItemGroup = (group: any, state: State) => {
   } else return group;
 };
 
+export const assignChildKey = (child: any) =>
+  React.cloneElement(child, {
+    optionKey: child.key,
+  });
+
 export const getItemKeys: string[] | any = (children: ReactNode) => {
   const items: Item[] = [];
 

diff --git a/src/index.tsx b/src/index.tsx
@@ -2,10 +2,10 @@ export {
   AutoComplete,
   ChildrenProps as AutoCompleteChildProps,
 } from './auto-complete-provider';
-export { AutoCompleteInput } from './auto-complete-input';
-export { AutoCompleteList } from './auto-complete-list';
-export { AutoCompleteItem } from './auto-complete-item';
-export { AutoCompleteGroup } from './auto-complete-group';
+export * from './auto-complete-input';
+export * from './auto-complete-list';
+export * from './auto-complete-item';
+export * from './auto-complete-group';
 // export { AutoCompleteTags } from './auto-complete-tags';
 
 //TODO in-Input tags will be inserted by user as leftElement in AutoCompleteInputGroup. It will clone the input and pass a `tagPadding` prop that will be added in the component. Any further padding from user prop will be added to the `tagPadding`