feat(onInput): support onInput prop for controlled mode

francoischalifour · Feb 21, 2020 · 7345eb9 · 7345eb9
1 parent 3cbedc5
commit 7345eb9
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -399,13 +399,13 @@ autocomplete({
 
 </details>
 
-#### `onInput` 🚧
+#### `onInput`
 
-> `(params: { query: string, state: AutocompleteState, ...setters }) => void | Promise <void | { state: AutocompleteState }>`
+> `(params: { query: string, props: AutocompleteOptions, state: AutocompleteState, ...setters }) => void | Promise <any>`
 
 Called when the input changes.
 
-This turns experience is "controlled" mode. You'll be in charge of updating the state with the [top-level API](#autocomplete).
+This turns experience in "controlled" mode. You'll be in charge of updating the state.
 
 #### `shouldDropdownShow`
 

diff --git a/packages/autocomplete-core/src/onInput.ts b/packages/autocomplete-core/src/onInput.ts
@@ -1,13 +1,13 @@
 import {
-  AutocompleteStore,
-  AutocompleteSetters,
   AutocompleteOptions,
+  AutocompleteSetters,
+  AutocompleteStore,
   AutocompleteState,
 } from './types';
 
 let lastStalledId: number | null = null;
 
-interface OnInputOptions<TItem> extends AutocompleteSetters<TItem> {
+interface OnInputParams<TItem> extends AutocompleteSetters<TItem> {
   query: string;
   store: AutocompleteStore<TItem>;
   props: AutocompleteOptions<TItem>;
@@ -32,7 +32,22 @@ export function onInput<TItem>({
   setStatus,
   setContext,
   nextState = {},
-}: OnInputOptions<TItem>): Promise<void> {
+}: OnInputParams<TItem>): Promise<void> {
+  if (props.onInput) {
+    return Promise.resolve(
+      props.onInput({
+        query,
+        state: store.getState(),
+        setHighlightedIndex,
+        setQuery,
+        setSuggestions,
+        setIsOpen,
+        setStatus,
+        setContext,
+      })
+    );
+  }
+
   if (lastStalledId) {
     clearTimeout(lastStalledId);
   }

diff --git a/packages/autocomplete-core/src/types/api.ts b/packages/autocomplete-core/src/types/api.ts
@@ -39,6 +39,11 @@ interface OnSubmitParams<TItem> extends AutocompleteSetters<TItem> {
   event: Event;
 }
 
+interface OnInputParams<TItem> extends AutocompleteSetters<TItem> {
+  query: string;
+  state: AutocompleteState<TItem>;
+}
+
 export interface PublicAutocompleteSource<TItem> {
   /**
    * Get the string value of the suggestion. The value is used to fill the search box.
@@ -209,6 +214,13 @@ export interface PublicAutocompleteOptions<TItem> {
    * The function called when the autocomplete form is submitted.
    */
   onSubmit?(params: OnSubmitParams<TItem>): void;
+  /**
+   * The function called when the input changes.
+   *
+   * This turns the experience in controlled mode, leaving you in charge of
+   * updating the state.
+   */
+  onInput?(params: OnInputParams<TItem>): void | Promise<any>;
 }
 
 // Props manipulated internally with default values.
@@ -227,4 +239,5 @@ export interface AutocompleteOptions<TItem> {
   navigator: Navigator<TItem>;
   shouldDropdownShow(params: { state: AutocompleteState<TItem> }): boolean;
   onSubmit(params: OnSubmitParams<TItem>): void;
+  onInput?(params: OnInputParams<TItem>): void | Promise<any>;
 }
diff --git a/stories/react.stories.tsx b/stories/react.stories.tsx
@@ -170,6 +170,76 @@ storiesOf('React', module)
         container
       );
 
+      return container;
+    })
+  )
+  .add(
+    'Controlled mode',
+    withPlayground(({ container, dropdownContainer }) => {
+      render(
+        <Autocomplete
+          placeholder="Search items…"
+          dropdownContainer={dropdownContainer}
+          onInput={({
+            query,
+            setHighlightedIndex,
+            setQuery,
+            setSuggestions,
+            setIsOpen,
+          }) => {
+            setQuery(query);
+
+            if (query.length < 1) {
+              setHighlightedIndex(null);
+              setIsOpen(false);
+              setSuggestions([
+                {
+                  source: {
+                    getInputValue: ({ suggestion }) => suggestion.query,
+                    getSuggestionUrl: () => undefined,
+                    getSuggestions: () => [],
+                    onSelect: () => {},
+                    onHighlight: () => {},
+                  },
+                  items: [],
+                },
+              ]);
+
+              return;
+            }
+
+            getAlgoliaHits({
+              searchClient,
+              queries: [
+                {
+                  indexName: 'instant_search_demo_query_suggestions',
+                  query,
+                },
+              ],
+            }).then(items => {
+              setHighlightedIndex(null);
+              setIsOpen(items.length > 0);
+              setSuggestions([
+                {
+                  source: {
+                    getInputValue: ({ suggestion }) => suggestion.query,
+                    getSuggestionUrl: () => undefined,
+                    getSuggestions: () => items,
+                    onSelect: () => {},
+                    onHighlight: () => {},
+                  },
+                  items,
+                },
+              ]);
+            });
+          }}
+          getSources={() => {
+            return [];
+          }}
+        />,
+        container
+      );
+
       return container;
     })
   );