feat(DynamicWidgets): add fallbackComponent (#3066)

* feat(DynamicWidgets): add fallbackWidget

This was brought up by @Shipow as a possible use case: you want to have dynamic widgets, but don't know what the facets could be in advance.

The fallbackWidget prop caters for this use case, allowing you to special-case some widgets (like hierarchical for example), but use the same widget for the rest.

```jsx
<ExperimentalDynamicWidgets fallbackWidget={RefinementList}>
  <HierarchicalMenu attributes={['hierarchy', 'subHierarchy']} />
</ExperimentalDynamicWidgets>

<ExperimentalDynamicWidgets fallbackWidget={({attribute}) => <CustomWidget facet={attribute} />}>
  <HierarchicalMenu attributes={['hierarchy', 'subHierarchy']} />
</ExperimentalDynamicWidgets>
```

* replace to fallbackComponent

Author: Haroenv

packages/react-instantsearch-core/src/widgets/DynamicWidgets.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment, ReactChild, ReactNode } from 'react';
+import React, { Fragment, ReactChild, ComponentType, ReactNode } from 'react';
 import { getDisplayName } from '../core/utils';
 import connectDynamicWidgets from '../connectors/connectDynamicWidgets';
 
@@ -23,9 +23,14 @@ function getAttribute(component: ReactChild): string | undefined {
 type DynamicWidgetsProps = {
   children: ReactNode;
   attributesToRender: string[];
+  fallbackComponent?: ComponentType<{ attribute: string }>;
 };
 
-function DynamicWidgets({ children, attributesToRender }: DynamicWidgetsProps) {
+function DynamicWidgets({
+  children,
+  attributesToRender,
+  fallbackComponent: Fallback = () => null,
+}: DynamicWidgetsProps) {
   const widgets: Map<string, ReactChild> = new Map();
 
   React.Children.forEach(children, child => {
@@ -43,7 +48,9 @@ function DynamicWidgets({ children, attributesToRender }: DynamicWidgetsProps) {
   return (
     <>
       {attributesToRender.map(attribute => (
-        <Fragment key={attribute}>{widgets.get(attribute)}</Fragment>
+        <Fragment key={attribute}>
+          {widgets.get(attribute) || <Fallback attribute={attribute} />}
+        </Fragment>
       ))}
     </>
   );

packages/react-instantsearch-core/src/widgets/__tests__/DynamicWidgets.test.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import {
   connectHierarchicalMenu,
+  connectMenu,
   connectPagination,
   connectRefinementList,
 } from '../..';
@@ -39,7 +40,12 @@ const RefinementList = connectRefinementList(
 );
 
 const HierarchicalMenu = connectHierarchicalMenu(
-  ({ attributes }) => `HierarchicalMenu(${attributes.join(',')})`
+  ({ attributes }) => `HierarchicalMenu([${attributes.join(', ')}])`
+);
+
+const Menu = connectMenu(
+  ({ attribute, otherProp }) =>
+    `Menu(${attribute})${otherProp ? ` ${JSON.stringify({ otherProp })}` : ''}`
 );
 
 const Pagination = connectPagination(() => {
@@ -184,7 +190,7 @@ describe('DynamicWidgets', () => {
         expect(container).toMatchInlineSnapshot(`
           <div>
             RefinementList(test1)
-            HierarchicalMenu(test2,test3)
+            HierarchicalMenu([test2, test3])
           </div>
         `);
       }
@@ -198,7 +204,7 @@ describe('DynamicWidgets', () => {
 
         expect(container).toMatchInlineSnapshot(`
           <div>
-            HierarchicalMenu(test2,test3)
+            HierarchicalMenu([test2, test3])
             RefinementList(test1)
           </div>
         `);
@@ -229,7 +235,7 @@ describe('DynamicWidgets', () => {
           // @ts-ignore resultsState in InstantSearch is typed wrongly to deal with multi-index
           resultsState={resultsState}
         >
-          <DynamicWidgets transformItems={() => ['test1', 'test3']}>
+          <DynamicWidgets transformItems={() => ['test1', 'test3', 'test5']}>
             <RefinementList attribute="test1" />
             <RefinementList attribute="test2" />
             <Panel>
@@ -238,6 +244,12 @@ describe('DynamicWidgets', () => {
             <Panel>
               <RefinementList attribute="test4" />
             </Panel>
+            <Panel>
+              <HierarchicalMenu attributes={['test5', 'test5.1']} />
+            </Panel>
+            <Panel>
+              <HierarchicalMenu attributes={['test6', 'test6.1']} />
+            </Panel>
           </DynamicWidgets>
         </InstantSearch>
       );
@@ -254,6 +266,15 @@ describe('DynamicWidgets', () => {
               RefinementList(test3)
             </div>
           </div>
+          <div
+            class="ais-Panel"
+          >
+            <div
+              class="ais-Panel-body"
+            >
+              HierarchicalMenu([test5, test5.1])
+            </div>
+          </div>
         </div>
       `);
     });
@@ -327,5 +348,86 @@ describe('DynamicWidgets', () => {
         `[Error: Could not find "attribute" prop for UnknownComponent.]`
       );
     });
+
+    test('does not render attributes without widget by default', () => {
+      const searchClient = createSearchClient();
+
+      const { container } = render(
+        <InstantSearch
+          searchClient={searchClient}
+          indexName="test"
+          // @ts-ignore resultsState in InstantSearch is typed wrongly to deal with multi-index
+          resultsState={resultsState}
+        >
+          <DynamicWidgets transformItems={() => ['test1', 'test2', 'test3']}>
+            <RefinementList attribute="test1" />
+          </DynamicWidgets>
+        </InstantSearch>
+      );
+
+      expect(container).toMatchInlineSnapshot(`
+        <div>
+          RefinementList(test1)
+        </div>
+      `);
+    });
+
+    test("uses fallbackComponent component to create widgets that aren't explicitly declared", () => {
+      const searchClient = createSearchClient();
+
+      const { container } = render(
+        <InstantSearch
+          searchClient={searchClient}
+          indexName="test"
+          // @ts-ignore resultsState in InstantSearch is typed wrongly to deal with multi-index
+          resultsState={resultsState}
+        >
+          <DynamicWidgets
+            transformItems={() => ['test1', 'test2', 'test3']}
+            fallbackComponent={Menu}
+          >
+            <RefinementList attribute="test1" />
+          </DynamicWidgets>
+        </InstantSearch>
+      );
+
+      expect(container).toMatchInlineSnapshot(`
+        <div>
+          RefinementList(test1)
+          Menu(test2)
+          Menu(test3)
+        </div>
+      `);
+    });
+
+    test("uses fallbackComponent callback to create widgets that aren't explicitly declared", () => {
+      const searchClient = createSearchClient();
+
+      const { container } = render(
+        <InstantSearch
+          searchClient={searchClient}
+          indexName="test"
+          // @ts-ignore resultsState in InstantSearch is typed wrongly to deal with multi-index
+          resultsState={resultsState}
+        >
+          <DynamicWidgets
+            transformItems={() => ['test1', 'test2', 'test3']}
+            fallbackComponent={({ attribute }) => (
+              <Menu attribute={attribute} otherProp />
+            )}
+          >
+            <RefinementList attribute="test1" />
+          </DynamicWidgets>
+        </InstantSearch>
+      );
+
+      expect(container).toMatchInlineSnapshot(`
+        <div>
+          RefinementList(test1)
+          Menu(test2) {"otherProp":true}
+          Menu(test3) {"otherProp":true}
+        </div>
+      `);
+    });
   });
 });