feat(menu): add showMore option

much like the refinementList widget

fixes #815

Author: vvo

dev/app.js

@@ -137,8 +137,8 @@ search.addWidget(
     },
     showMore: {
       templates: {
-        'active': '<button>Show less</button>',
-        'inactive': '<button>Show more</button>'
+        active: '<button>Show less</button>',
+        inactive: '<button>Show more</button>'
       },
       limit: 10
     }
@@ -230,7 +230,14 @@ search.addWidget(
   instantsearch.widgets.menu({
     container: '#categories',
     attributeName: 'categories',
-    limit: 10,
+    limit: 3,
+    showMore: {
+      templates: {
+        active: '<button>Show less</button>',
+        inactive: '<button>Show more</button>'
+      },
+      limit: 10
+    },
     cssClasses: {
       header: 'facet-title',
       link: 'facet-value',

src/widgets/refinement-list/defaultShowMoreTemplates.js src/lib/show-more/defaultShowMoreTemplates.js

@@ -0,0 +1,23 @@
+import templates from './defaultShowMoreTemplates.js';
+
+const defaultShowMoreConfig = {
+  templates,
+  limit: 100
+};
+
+export default function getShowMoreConfig(showMoreOptions) {
+  if (!showMoreOptions) return null;
+
+  if (showMoreOptions === true) {
+    return defaultShowMoreConfig;
+  }
+
+  let config = {...showMoreOptions};
+  if (!showMoreOptions.templates) {
+    config.templates = defaultShowMoreConfig.templates;
+  }
+  if (!showMoreOptions.limit) {
+    config.limit = defaultShowMoreConfig.limit;
+  }
+  return config;
+}

src/lib/show-more/getShowMoreConfig.js

@@ -5,6 +5,7 @@ import get from 'lodash/object/get';
 import isEmpty from 'lodash/lang/isEmpty';
 import keys from 'lodash/object/keys';
 import uniq from 'lodash/array/uniq';
+import mapKeys from 'lodash/object/mapKeys';
 
 let utils = {
   getContainerNode,
@@ -14,7 +15,8 @@ let utils = {
   isDomElement,
   getRefinements,
   clearRefinementsFromState,
-  clearRefinementsAndSearch
+  clearRefinementsAndSearch,
+  prefixKeys
 };
 
 /**
@@ -218,4 +220,12 @@ function clearRefinementsAndSearch(helper, attributeNames) {
   helper.setState(clearRefinementsFromState(helper.state, attributeNames)).search();
 }
 
+function prefixKeys(prefix, obj) {
+  if (obj) {
+    return mapKeys(obj, function(v, k) {
+      return prefix + k;
+    });
+  }
+}
+
 export default utils;

src/lib/utils.js

@@ -18,7 +18,7 @@ import defaultTemplates from './defaultTemplates.js';
  * @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  {number} [options.limit=100] How much facet values to get
+ * @param  {number} [options.limit=10] How much facet values to get
  * @param  {string[]|Function} [options.sortBy=['name:asc']] How to sort refinements. Possible values: `count|isRefined|name:asc|desc`
  * @param  {Object} [options.templates] Templates to use for the widget
  * @param  {string|Function} [options.templates.header=''] Header template (root level only)
@@ -46,7 +46,7 @@ hierarchicalMenu({
   [ separator=' > ' ],
   [ rootPath ],
   [ showParentLevel=true ],
-  [ limit=1000 ],
+  [ limit=10 ],
   [ sortBy=['name:asc'] ],
   [ cssClasses.{root , header, body, footer, list, depth, item, active, link}={} ],
   [ templates.{header, item, footer} ],
@@ -59,7 +59,7 @@ function hierarchicalMenu({
     separator = ' > ',
     rootPath = null,
     showParentLevel = true,
-    limit = 1000,
+    limit = 10,
     sortBy = ['name:asc'],
     cssClasses: userCssClasses = {},
     autoHideContainer = true,

src/widgets/hierarchical-menu/hierarchical-menu.js

@@ -6,6 +6,7 @@ let bem = utils.bemHelper('ais-menu');
 import cx from 'classnames';
 import autoHideContainerHOC from '../../decorators/autoHideContainer.js';
 import headerFooterHOC from '../../decorators/headerFooter.js';
+import getShowMoreConfig from '../../lib/show-more/getShowMoreConfig.js';
 
 import defaultTemplates from './defaultTemplates.js';
 
@@ -15,7 +16,12 @@ import defaultTemplates from './defaultTemplates.js';
  * @param  {string|DOMElement} options.container CSS Selector or DOMElement to insert the widget
  * @param  {string} options.attributeName Name of the attribute for faceting
  * @param  {string[]|Function} [options.sortBy=['count:desc']] How to sort refinements. Possible values: `count|isRefined|name:asc|desc`
- * @param  {string} [options.limit=100] How many facets values to retrieve
+ * @param  {string} [options.limit=10] How many facets values to retrieve
+ * @param  {object|boolean} [options.showMore=false] Limit the number of results and display a showMore button
+ * @param  {object} [options.showMore.templates] Templates to use for showMore
+ * @param  {object} [options.showMore.templates.active] Template used when showMore was clicked
+ * @param  {object} [options.showMore.templates.inactive] Template used when showMore not clicked
+ * @param  {object} [options.showMore.limit] Max number of facets values to display when showMore is clicked
  * @param  {Object} [options.templates] Templates to use for the widget
  * @param  {string|Function} [options.templates.header=''] Header template
  * @param  {string|Function} [options.templates.item] Item template, provided with `name`, `count`, `isRefined`, `url` data properties
@@ -39,22 +45,30 @@ menu({
   container,
   attributeName,
   [sortBy],
-  [limit],
+  [limit=10],
   [cssClasses.{root,list,item}],
   [templates.{header,item,footer}],
   [transformData],
   [autoHideContainer]
+  [showMore.{templates: {active, inactive}, limit}]
 })`;
 function menu({
     container,
     attributeName,
     sortBy = ['count:desc'],
-    limit = 100,
+    limit = 10,
     cssClasses: userCssClasses = {},
     templates = defaultTemplates,
     transformData,
-    autoHideContainer = true
+    autoHideContainer = true,
+    showMore = false
   } = {}) {
+  let showMoreConfig = getShowMoreConfig(showMore);
+  if (showMoreConfig && showMoreConfig.limit < limit) {
+    throw new Error('showMore.limit configuration should be > than the limit in the main configuration'); // eslint-disable-line
+  }
+  let widgetMaxValuesPerFacet = (showMoreConfig && showMoreConfig.limit) || limit;
+
   if (!container || !attributeName) {
     throw new Error(usage);
   }
@@ -69,22 +83,35 @@ function menu({
   // of hierarchicalFacet: a flat menu
   let hierarchicalFacetName = attributeName;
 
+  const showMoreTemplates = showMoreConfig && utils.prefixKeys('show-more-', showMoreConfig.templates);
+  const allTemplates =
+    showMoreTemplates ?
+      {...templates, ...showMoreTemplates} :
+      templates;
+
   return {
-    getConfiguration: () => ({
-      hierarchicalFacets: [{
-        name: hierarchicalFacetName,
-        attributes: [attributeName]
-      }]
-    }),
+    getConfiguration: configuration => {
+      let widgetConfiguration = {
+        hierarchicalFacets: [{
+          name: hierarchicalFacetName,
+          attributes: [attributeName]
+        }]
+      };
+
+      let currentMaxValuesPerFacet = configuration.maxValuesPerFacet || 0;
+      widgetConfiguration.maxValuesPerFacet = Math.max(currentMaxValuesPerFacet, widgetMaxValuesPerFacet);
+
+      return widgetConfiguration;
+    },
     render: function({results, helper, templatesConfig, state, createURL}) {
-      let facetValues = getFacetValues(results, hierarchicalFacetName, sortBy, limit);
+      let facetValues = getFacetValues(results, hierarchicalFacetName, sortBy);
       let hasNoFacetValues = facetValues.length === 0;
 
       let templateProps = utils.prepareTemplateProps({
         transformData,
         defaultTemplates,
         templatesConfig,
-        templates
+        templates: allTemplates
       });
 
       let cssClasses = {
@@ -104,7 +131,10 @@ function menu({
           createURL={(facetValue) => createURL(state.toggleRefinement(hierarchicalFacetName, facetValue))}
           cssClasses={cssClasses}
           facetValues={facetValues}
+          limitMax={widgetMaxValuesPerFacet}
+          limitMin={limit}
           shouldAutoHideContainer={hasNoFacetValues}
+          showMore={showMoreConfig !== null}
           templateProps={templateProps}
           toggleRefinement={toggleRefinement.bind(null, helper, hierarchicalFacetName)}
         />,
@@ -120,11 +150,11 @@ function toggleRefinement(helper, attributeName, facetValue) {
     .search();
 }
 
-function getFacetValues(results, hierarchicalFacetName, sortBy, limit) {
+function getFacetValues(results, hierarchicalFacetName, sortBy) {
   let values = results
     .getFacetValues(hierarchicalFacetName, {sortBy: sortBy});
 
-  return values.data && values.data.slice(0, limit) || [];
+  return values.data || [];
 }
 
 export default menu;

src/widgets/menu/menu.js

@@ -1,16 +1,15 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import mapKeys from 'lodash/object/mapKeys';
 
 import utils from '../../lib/utils.js';
 let bem = utils.bemHelper('ais-refinement-list');
 import cx from 'classnames';
 
 import autoHideContainerHOC from '../../decorators/autoHideContainer.js';
 import headerFooterHOC from '../../decorators/headerFooter.js';
+import getShowMoreConfig from '../../lib/show-more/getShowMoreConfig.js';
 
 import defaultTemplates from './defaultTemplates.js';
-import defaultShowMoreTemplates from './defaultShowMoreTemplates.js';
 
 /**
  * Instantiate a list of refinements based on a facet
@@ -20,11 +19,11 @@ import defaultShowMoreTemplates from './defaultShowMoreTemplates.js';
  * @param  {string} [options.operator='or'] How to apply refinements. Possible values: `or`, `and`
  * @param  {string[]|Function} [options.sortBy=['count:desc']] How to sort refinements. Possible values: `count|isRefined|name:asc|desc`
  * @param  {string} [options.limit=10] How much facet values to get. When the show more feature is activated this is the minimun number of facets requested (the show more button is not in active state).
- * @param  {object|boolean} [options.showMore] pass a configuration object, or true to use the default configuration
- * @param  {object} [options.showMore.templates] templates to use
- * @param  {object} [options.showMore.templates.active] template used when more facets are displayed
- * @param  {object} [options.showMore.templates.inactive] template used when less facets are displayed
- * @param  {object} [options.showMore.limit] the max number of facets values to display when the show more feature is active
+ * @param  {object|boolean} [options.showMore=false] Limit the number of results and display a showMore button
+ * @param  {object} [options.showMore.templates] Templates to use for showMore
+ * @param  {object} [options.showMore.templates.active] Template used when showMore was clicked
+ * @param  {object} [options.showMore.templates.inactive] Template used when showMore not clicked
+ * @param  {object} [options.showMore.limit] Max number of facets values to display when showMore is clicked
  * @param  {Object} [options.templates] Templates to use for the widget
  * @param  {string|Function} [options.templates.header] Header template
  * @param  {string|Function} [options.templates.item] Item template, provided with `name`, `count`, `isRefined`, `url` data properties
@@ -67,7 +66,7 @@ function refinementList({
     templates = defaultTemplates,
     transformData,
     autoHideContainer = true,
-    showMore
+    showMore = false
   }) {
   let showMoreConfig = getShowMoreConfig(showMore);
   if (showMoreConfig && showMoreConfig.limit < limit) {
@@ -94,7 +93,7 @@ function refinementList({
     }
   }
 
-  const showMoreTemplates = showMoreConfig && prefixKeys('show-more-', showMoreConfig.templates);
+  const showMoreTemplates = showMoreConfig && utils.prefixKeys('show-more-', showMoreConfig.templates);
   const allTemplates =
     showMoreTemplates ?
       {...templates, ...showMoreTemplates} :
@@ -161,33 +160,4 @@ function refinementList({
   };
 }
 
-const defaultShowMoreConfig = {
-  templates: defaultShowMoreTemplates,
-  limit: 100
-};
-
-function getShowMoreConfig(showMoreOptions) {
-  if (showMoreOptions === true) {
-    return defaultShowMoreConfig;
-  } else if (showMoreOptions) {
-    let config = {...showMoreOptions};
-    if (!showMoreOptions.templates) {
-      config.templates = defaultShowMoreConfig.templates;
-    }
-    if (!showMoreOptions.limit) {
-      config.limit = defaultShowMoreConfig.limit;
-    }
-    return config;
-  }
-  return null;
-}
-
-function prefixKeys(prefix, obj) {
-  if (obj) {
-    return mapKeys(obj, function(v, k) {
-      return prefix + k;
-    });
-  }
-}
-
 export default refinementList;