fix(connectBreadcrumb): allow unmounting (#2815)

* fix(connectBreadcrumb): allow unmounting

1. added `unmountFn`
2. copied the `dispose` function from `HierarchicalMenu`, but remove the part about limit

* chore: don't do anything with the facets
* fix(breadcrumb): allow unmounting of the widget
* chore: add novel
* chore: unmount widget on unmount

Author: Haroenv

dev/app/init-unmount-widgets.js

@@ -112,6 +112,31 @@ export default () => {
     )
   );
 
+  storiesOf('Breadcrumb').add(
+    'default',
+    wrapWithUnmount(
+      container =>
+        instantsearch.widgets.breadcrumb({
+          container,
+          attributes: [
+            'hierarchicalCategories.lvl0',
+            'hierarchicalCategories.lvl1',
+            'hierarchicalCategories.lvl2',
+          ],
+          rootPath: 'Cameras & Camcorders',
+        }),
+      {
+        searchParameters: {
+          hierarchicalFacetsRefinements: {
+            'hierarchicalCategories.lvl0': [
+              'Cameras & Camcorders > Digital Cameras',
+            ],
+          },
+        },
+      }
+    )
+  );
+
   storiesOf('Hits').add(
     'default',
     wrapWithUnmount(container => instantsearch.widgets.hits({ container }))

src/connectors/breadcrumb/connectBreadcrumb.js

@@ -50,9 +50,10 @@ Full documentation available at https://community.algolia.com/instantsearch.js/v
  * This is commonly used in websites that have a large amount of content organized in a hierarchical manner (usually e-commerce websites).
  * @type {Connector}
  * @param {function(BreadcrumbRenderingOptions, boolean)} renderFn Rendering function for the custom **Breadcrumb* widget.
+ * @param {function} unmountFn Unmount function called when the widget is disposed.
  * @return {function(CustomBreadcrumbWidgetOptions)} Re-usable widget factory for a custom **Breadcrumb** widget.
  */
-export default function connectBreadcrumb(renderFn) {
+export default function connectBreadcrumb(renderFn, unmountFn) {
   checkRendering(renderFn, usage);
   return (widgetParams = {}) => {
     const { attributes, separator = ' > ', rootPath = null } = widgetParams;
@@ -161,6 +162,10 @@ export default function connectBreadcrumb(renderFn) {
           false
         );
       },
+
+      dispose() {
+        unmountFn();
+      },
     };
   };
 }

src/widgets/breadcrumb/breadcrumb.js

@@ -1,8 +1,8 @@
-import React, { render } from 'preact-compat';
+import React, { render, unmountComponentAtNode } from 'preact-compat';
 import cx from 'classnames';
 
 import Breadcrumb from '../../components/Breadcrumb/Breadcrumb';
-import { connectBreadcrumb } from '../../connectors';
+import connectBreadcrumb from '../../connectors/breadcrumb/connectBreadcrumb';
 import defaultTemplates from './defaultTemplates.js';
 
 import {
@@ -183,7 +183,9 @@ export default function breadcrumb({
   });
 
   try {
-    const makeBreadcrumb = connectBreadcrumb(specializedRenderer);
+    const makeBreadcrumb = connectBreadcrumb(specializedRenderer, () =>
+      unmountComponentAtNode(containerNode)
+    );
     return makeBreadcrumb({ attributes, rootPath });
   } catch (e) {
     throw new Error(usage);