feat(core): support onReset prop

algolia · Dec 3, 2020 · b7a66a8 · b7a66a8
1 parent 676a3ab
commit b7a66a8
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 3 deletions.
diff --git a/packages/autocomplete-core/src/__tests__/onReset.test.ts b/packages/autocomplete-core/src/__tests__/onReset.test.ts
@@ -0,0 +1,41 @@
+import userEvent from '@testing-library/user-event';
+
+import { createAutocomplete } from '../createAutocomplete';
+
+describe('onReset', () => {
+  test('calls the user provided onReset function', () => {
+    const onResetProp = jest.fn();
+    const { getFormProps } = createAutocomplete({ onReset: onResetProp });
+
+    const form = document.createElement('form');
+    const { onReset } = getFormProps({ inputElement: null });
+    form.addEventListener('reset', onReset);
+    const resetButton = document.createElement('button');
+    resetButton.type = 'reset';
+
+    document.body.appendChild(form);
+    form.appendChild(resetButton);
+
+    userEvent.click(resetButton);
+
+    expect(onResetProp).toHaveBeenCalledTimes(1);
+    expect(onResetProp).toHaveBeenCalledWith({
+      event: expect.any(Event),
+      setCollections: expect.any(Function),
+      setContext: expect.any(Function),
+      setIsOpen: expect.any(Function),
+      setQuery: expect.any(Function),
+      setSelectedItemId: expect.any(Function),
+      setStatus: expect.any(Function),
+      state: {
+        collections: [],
+        completion: null,
+        context: {},
+        isOpen: false,
+        query: '',
+        selectedItemId: null,
+        status: 'idle',
+      },
+    });
+  });
+});
diff --git a/packages/autocomplete-core/src/getDefaultProps.ts b/packages/autocomplete-core/src/getDefaultProps.ts
@@ -60,6 +60,12 @@ export function getDefaultProps<TItem extends BaseItem>(
         plugin.onSubmit?.(params);
       });
     },
+    onReset(params) {
+      props.onReset?.(params);
+      plugins.forEach((plugin) => {
+        plugin.onReset?.(params);
+      });
+    },
     getSources(options) {
       return Promise.all(
         [...plugins.map((plugin) => plugin.getSources), props.getSources]

diff --git a/packages/autocomplete-core/src/getPropGetters.ts b/packages/autocomplete-core/src/getPropGetters.ts
@@ -133,6 +133,17 @@ export function getPropGetters<
       onReset: (event) => {
         ((event as unknown) as Event).preventDefault();
 
+        props.onReset({
+          state: store.getState(),
+          setSelectedItemId,
+          setQuery,
+          setCollections,
+          setIsOpen,
+          setStatus,
+          setContext,
+          event,
+        });
+
         if (props.openOnFocus) {
           onInput({
             query: '',

diff --git a/packages/autocomplete-core/src/types/api.ts b/packages/autocomplete-core/src/types/api.ts
@@ -67,6 +67,8 @@ interface OnSubmitParams<TItem extends BaseItem>
   event: any;
 }
 
+type OnResetParams<TItem extends BaseItem> = OnSubmitParams<TItem>;
+
 interface OnInputParams<TItem extends BaseItem>
   extends AutocompleteSetters<TItem> {
   query: string;
@@ -248,9 +250,13 @@ export interface AutocompleteOptions<TItem extends BaseItem> {
    */
   shouldPanelShow?(params: { state: AutocompleteState<TItem> }): boolean;
   /**
-   * The function called when the autocomplete form is submitted.
+   * The function called when the Autocomplete form is submitted.
    */
   onSubmit?(params: OnSubmitParams<TItem>): void;
+  /**
+   * The function called when the Autocomplete form is reset.
+   */
+  onReset?(params: OnResetParams<TItem>): void;
   /**
    * The function called when the input changes.
    *
@@ -285,5 +291,6 @@ export interface InternalAutocompleteOptions<TItem extends BaseItem>
   plugins: Array<AutocompletePlugin<TItem, unknown>>;
   shouldPanelShow(params: { state: AutocompleteState<TItem> }): boolean;
   onSubmit(params: OnSubmitParams<TItem>): void;
+  onReset(params: OnResetParams<TItem>): void;
   onInput?(params: OnInputParams<TItem>): void | Promise<any>;
 }
diff --git a/packages/autocomplete-core/src/types/plugins.ts b/packages/autocomplete-core/src/types/plugins.ts
@@ -18,7 +18,10 @@ export type AutocompletePlugin<
   TItem extends BaseItem,
   TData = unknown
 > = Partial<
-  Pick<AutocompleteOptions<TItem>, 'onStateChange' | 'onSubmit' | 'getSources'>
+  Pick<
+    AutocompleteOptions<TItem>,
+    'onStateChange' | 'onSubmit' | 'onReset' | 'getSources'
+  >
 > & {
   /**
    * Function called when Autocomplete starts.

diff --git a/packages/website/docs/partials/createAutocomplete-props.md b/packages/website/docs/partials/createAutocomplete-props.md
@@ -82,7 +82,13 @@ By default, it opens when there are items in the state.
 
 > `(params: { state: AutocompleteState, event: Event, ...setters }) => void`
 
-The function called when the autocomplete form is submitted.
+The function called when the Autocomplete form is submitted.
+
+### `onReset`
+
+> `(params: { state: AutocompleteState, event: Event, ...setters }) => void`
+
+The function called when the Autocomplete form is reset.
 
 ### `onInput`