feat(connector): Add hierarchical menu connector

Author: Alexandre Stanislawski

src/components/RefinementList/RefinementList.js

@@ -8,7 +8,10 @@ import isEqual from 'lodash/isEqual';
 
 import SearchBox from '../SearchBox';
 
-class RefinementList extends React.Component {
+import autoHideContainerHOC from '../../decorators/autoHideContainer.js';
+import headerFooterHOC from '../../decorators/headerFooter.js';
+
+export class RawRefinementList extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -33,7 +36,7 @@ class RefinementList extends React.Component {
     let subItems;
     const hasChildren = facetValue.data && facetValue.data.length > 0;
     if (hasChildren) {
-      subItems = <RefinementList
+      subItems = <RawRefinementList
                   {...this.props}
                   depth={this.props.depth + 1}
                   facetValues={facetValue.data}
@@ -185,7 +188,7 @@ class RefinementList extends React.Component {
   }
 }
 
-RefinementList.propTypes = {
+RawRefinementList.propTypes = {
   Template: React.PropTypes.func,
   attributeNameKey: React.PropTypes.string,
   createURL: React.PropTypes.func,
@@ -207,10 +210,10 @@ RefinementList.propTypes = {
   isFromSearch: React.PropTypes.bool,
 };
 
-RefinementList.defaultProps = {
+RawRefinementList.defaultProps = {
   cssClasses: {},
   depth: 0,
   attributeNameKey: 'name',
 };
 
-export default RefinementList;
+export default autoHideContainerHOC(headerFooterHOC(RawRefinementList));

src/components/RefinementList/__tests__/RefinementList-test.js

@@ -5,7 +5,7 @@ import {shallow} from 'enzyme';
 import expect from 'expect';
 import sinon from 'sinon';
 
-import RefinementList from '../RefinementList';
+import {RawRefinementList as RefinementList} from '../RefinementList';
 import RefinementListItem from '../RefinementListItem';
 
 import expectJSX from 'expect-jsx';

src/connectors/hierarchical-menu/connectHierarchicalMenu.js

@@ -0,0 +1,173 @@
+import {
+  bemHelper,
+  prepareTemplateProps,
+  getContainerNode,
+} from '../../lib/utils.js';
+import cx from 'classnames';
+import defaultTemplates from './defaultTemplates.js';
+
+const bem = bemHelper('ais-hierarchical-menu');
+/**
+ * Create a hierarchical menu using multiple attributes
+ * @function hierarchicalMenu
+ * @param  {string|DOMElement} options.container CSS Selector or DOMElement to insert the widget
+ * @param  {string[]} options.attributes Array of attributes to use to generate the hierarchy of the menu.
+ * See the example for the convention to follow.
+ * @param  {number} [options.limit=10] How much facet values to get [*]
+ * @param  {string} [options.separator=">"] Separator used in the attributes to separate level values. [*]
+ * @param  {string} [options.rootPath] Prefix path to use if the first level is not the root level.
+ * @param  {string} [options.showParentLevel=false] Show the parent level of the current refined value
+ * @param  {string[]|Function} [options.sortBy=['name:asc']] How to sort refinements. Possible values: `count|isRefined|name:asc|name:desc`.
+ *   You can also use a sort function that behaves like the standard Javascript [compareFunction](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#Syntax).
+ * @param  {Object} [options.templates] Templates to use for the widget
+ * @param  {string|Function} [options.templates.header=''] Header template (root level only)
+ * @param  {string|Function} [options.templates.item] Item template, provided with `name`, `count`, `isRefined`, `url` data properties
+ * @param  {string|Function} [options.templates.footer=''] Footer template (root level only)
+ * @param  {Function} [options.transformData.item] Method to change the object passed to the `item` template
+ * @param  {boolean} [options.autoHideContainer=true] Hide the container when there are no items in the menu
+ * @param  {Object} [options.cssClasses] CSS classes to add to the wrapping elements
+ * @param  {string|string[]} [options.cssClasses.root] CSS class to add to the root element
+ * @param  {string|string[]} [options.cssClasses.header] CSS class to add to the header element
+ * @param  {string|string[]} [options.cssClasses.body] CSS class to add to the body element
+ * @param  {string|string[]} [options.cssClasses.footer] CSS class to add to the footer element
+ * @param  {string|string[]} [options.cssClasses.list] CSS class to add to the list element
+ * @param  {string|string[]} [options.cssClasses.item] CSS class to add to each item element
+ * @param  {string|string[]} [options.cssClasses.depth] CSS class to add to each item element to denote its depth. The actual level will be appended to the given class name (ie. if `depth` is given, the widget will add `depth0`, `depth1`, ... according to the level of each item).
+ * @param  {string|string[]} [options.cssClasses.active] CSS class to add to each active element
+ * @param  {string|string[]} [options.cssClasses.link] CSS class to add to each link (when using the default template)
+ * @param  {string|string[]} [options.cssClasses.count] CSS class to add to each count element (when using the default template)
+ * @param  {object|boolean} [options.collapsible=false] Hide the widget body and footer when clicking on header
+ * @param  {boolean} [options.collapsible.collapsed] Initial collapsed state of a collapsible widget
+ * @return {Object}
+ */
+const usage = `Usage:
+hierarchicalMenu({
+  container,
+  attributes,
+  [ separator=' > ' ],
+  [ rootPath ],
+  [ showParentLevel=true ],
+  [ limit=10 ],
+  [ sortBy=['name:asc'] ],
+  [ cssClasses.{root , header, body, footer, list, depth, item, active, link}={} ],
+  [ templates.{header, item, footer} ],
+  [ transformData.{item} ],
+  [ autoHideContainer=true ],
+  [ collapsible=false ]
+})`;
+const connectHierarchicalMenu = renderHierarchicalMenu => ({
+    container,
+    attributes,
+    separator = ' > ',
+    rootPath = null,
+    showParentLevel = true,
+    limit = 10,
+    sortBy = ['name:asc'],
+    cssClasses: userCssClasses = {},
+    autoHideContainer = true,
+    templates = defaultTemplates,
+    collapsible = false,
+    transformData,
+  } = {}) => {
+  if (!container || !attributes || !attributes.length) {
+    throw new Error(usage);
+  }
+
+  const containerNode = getContainerNode(container);
+
+  // we need to provide a hierarchicalFacet name for the search state
+  // so that we can always map $hierarchicalFacetName => real attributes
+  // we use the first attribute name
+  const hierarchicalFacetName = attributes[0];
+
+  const cssClasses = {
+    root: cx(bem(null), userCssClasses.root),
+    header: cx(bem('header'), userCssClasses.header),
+    body: cx(bem('body'), userCssClasses.body),
+    footer: cx(bem('footer'), userCssClasses.footer),
+    list: cx(bem('list'), userCssClasses.list),
+    depth: bem('list', 'lvl'),
+    item: cx(bem('item'), userCssClasses.item),
+    active: cx(bem('item', 'active'), userCssClasses.active),
+    link: cx(bem('link'), userCssClasses.link),
+    count: cx(bem('count'), userCssClasses.count),
+  };
+
+  return {
+    getConfiguration: currentConfiguration => ({
+      hierarchicalFacets: [{
+        name: hierarchicalFacetName,
+        attributes,
+        separator,
+        rootPath,
+        showParentLevel,
+      }],
+      maxValuesPerFacet: currentConfiguration.maxValuesPerFacet !== undefined ?
+        Math.max(currentConfiguration.maxValuesPerFacet, limit) :
+        limit,
+    }),
+    init({helper, templatesConfig, createURL}) {
+      this._toggleRefinement = facetValue => helper
+        .toggleRefinement(hierarchicalFacetName, facetValue)
+        .search();
+
+      this._templateProps = prepareTemplateProps({
+        transformData,
+        defaultTemplates,
+        templatesConfig,
+        templates,
+      });
+
+      // Bind createURL to this specific attribute
+      function _createURL(facetValue) {
+        return createURL(helper.state.toggleRefinement(hierarchicalFacetName, facetValue));
+      }
+
+      renderHierarchicalMenu({
+        attributeNameKey: 'path',
+        collapsible,
+        createURL: _createURL,
+        cssClasses,
+        facetValues: undefined,
+        shouldAutoHideContainer: autoHideContainer,
+        templateProps: this._templateProps,
+        toggleRefinement: this._toggleRefinement,
+        containerNode,
+      }, true);
+    },
+    _prepareFacetValues(facetValues, state) {
+      return facetValues
+        .slice(0, limit)
+        .map(subValue => {
+          if (Array.isArray(subValue.data)) {
+            subValue.data = this._prepareFacetValues(subValue.data, state);
+          }
+
+          return subValue;
+        });
+    },
+    render({results, state, createURL}) {
+      let facetValues = results.getFacetValues(hierarchicalFacetName, {sortBy}).data || [];
+      facetValues = this._prepareFacetValues(facetValues, state);
+
+      // Bind createURL to this specific attribute
+      function _createURL(facetValue) {
+        return createURL(state.toggleRefinement(hierarchicalFacetName, facetValue));
+      }
+
+      renderHierarchicalMenu({
+        attributeNameKey: 'path',
+        collapsible,
+        createURL: _createURL,
+        cssClasses,
+        facetValues,
+        shouldAutoHideContainer: autoHideContainer && facetValues.length === 0,
+        templateProps: this._templateProps,
+        toggleRefinement: this._toggleRefinement,
+        containerNode,
+      }, false);
+    },
+  };
+};
+
+export default connectHierarchicalMenu;

…ts/hierarchical-menu/defaultTemplates.js …rs/hierarchical-menu/defaultTemplates.jssrc/widgets/hierarchical-menu/defaultTemplates.js renamed to src/connectors/hierarchical-menu/defaultTemplates.js src/widgets/hierarchical-menu/defaultTemplates.js renamed to src/connectors/hierarchical-menu/defaultTemplates.js

@@ -7,12 +7,11 @@ import expectJSX from 'expect-jsx';
 expect.extend(expectJSX);
 import hierarchicalMenu from '../hierarchical-menu';
 import RefinementList from '../../../components/RefinementList/RefinementList';
+import defaultTemplates from '../../../connectors/hierarchical-menu/defaultTemplates.js';
 
 describe('hierarchicalMenu()', () => {
-  let autoHideContainer;
   let container;
   let attributes;
-  let headerFooter;
   let options;
   let widget;
   let ReactDOM;
@@ -23,10 +22,6 @@ describe('hierarchicalMenu()', () => {
     options = {};
     ReactDOM = {render: sinon.spy()};
     hierarchicalMenu.__Rewire__('ReactDOM', ReactDOM);
-    autoHideContainer = sinon.stub().returnsArg(0);
-    hierarchicalMenu.__Rewire__('autoHideContainerHOC', autoHideContainer);
-    headerFooter = sinon.stub().returnsArg(0);
-    hierarchicalMenu.__Rewire__('headerFooterHOC', headerFooter);
   });
 
   context('instantiated with wrong parameters', () => {
@@ -46,26 +41,6 @@ describe('hierarchicalMenu()', () => {
     });
   });
 
-  context('autoHideContainer', () => {
-    beforeEach(() => { options = {container, attributes}; });
-
-    it('should be called if autoHideContainer set to true', () => {
-      hierarchicalMenu({...options, autoHideContainer: true});
-      expect(autoHideContainer.calledOnce).toBe(true);
-    });
-
-    it('should not be called if autoHideContainer set to false', () => {
-      hierarchicalMenu({container, attributes, autoHideContainer: false});
-      expect(autoHideContainer.called).toBe(false);
-    });
-  });
-
-  it('uses headerFooter', () => {
-    options = {container, attributes};
-    hierarchicalMenu(options);
-    expect(headerFooter.calledOnce).toBe(true);
-  });
-
   context('getConfiguration', () => {
     beforeEach(() => { options = {container, attributes}; });
 
@@ -160,18 +135,12 @@ describe('hierarchicalMenu()', () => {
     let results;
     let data;
     let cssClasses;
-    const defaultTemplates = {
-      header: 'header',
-      item: 'item',
-      footer: 'footer',
-    };
     let templateProps;
     let helper;
     let state;
     let createURL;
 
     beforeEach(() => {
-      hierarchicalMenu.__Rewire__('defaultTemplates', defaultTemplates);
       templateProps = {
         transformData: undefined,
         templatesConfig: undefined,