fix(autohide): Rename attribute to hideContainerWhenNoResults

BREAKING CHANGE: Widget attribute is now named
`hideContainerWhenNoResults` instead of `hideWhenNoResults` to be more
explicit on what it is really doing.

Also internally renamed the `autoHide` decorator to
`autoHideContainer`

Fixes #325

Author: pixelastic

Diff for: README.md

@@ -386,7 +386,7 @@ search.addWidget(
  * @param  {String|Function} [options.templates.body] Body template
  * @param  {String|Function} [options.templates.footer=''] Footer template
  * @param  {Function} [options.transformData] Function to change the object passed to the `body` template
- * @param  {boolean} [hideWhenNoResults=true] Hide the container when there's no results
+ * @param  {boolean} [hideContainerWhenNoResults=true] Hide the container when there's no results
  * @return {Object}
  */
 ```
@@ -455,7 +455,7 @@ you'll need several indices. This widget lets you easily change it.
  * @param  {Object} [options.cssClasses] CSS classes to be added
  * @param  {String} [options.cssClasses.root] CSS classes added to the parent <select>
  * @param  {String} [options.cssClasses.item] CSS classes added to each <option>
- * @param  {boolean} [hideWhenNoResults=false] Hide the container when no results match
+ * @param  {boolean} [hideContainerWhenNoResults=false] Hide the container when no results match
  * @return {Object}
  */
 ```
@@ -518,7 +518,7 @@ search.addWidget(
  * @param  {Number} [maxPages=20] The max number of pages to browse
  * @param  {String|DOMElement|boolean} [scrollTo='body'] Where to scroll after a click, set to `false` to disable
  * @param  {boolean} [showFirstLast=true] Define if the First and Last links should be displayed
- * @param  {boolean} [hideWhenNoResults=true] Hide the container when no results match
+ * @param  {boolean} [hideContainerWhenNoResults=true] Hide the container when no results match
  * @return {Object}
  */
 ```
@@ -660,7 +660,7 @@ Note that we are not toggling from `true` to `false` here, but from `true` to
  * @param  {String|Function} [options.templates.item] Item template
  * @param  {String|Function} [options.templates.footer=''] Footer template
  * @param  {Function} [options.transformData] Function to change the object passed to the item template
- * @param  {boolean} [hideWhenNoResults=true] Hide the container when there's no results
+ * @param  {boolean} [hideContainerWhenNoResults=true] Hide the container when there's no results
  * @return {Object}
  */
 ```
@@ -755,7 +755,7 @@ search.addWidget(
  * @param  {String|Function} [options.templates.item] Item template, provided with `name`, `count`, `isRefined`
  * @param  {String|Function} [options.templates.footer] Footer template
  * @param  {Function} [options.transformData] Function to change the object passed to the item template
- * @param  {boolean} [hideWhenNoResults=true] Hide the container when there's no results
+ * @param  {boolean} [hideContainerWhenNoResults=true] Hide the container when there's no results
  * @return {Object}
  */
 ```
@@ -851,7 +851,7 @@ search.addWidget(
  * @param  {String|Function} [options.templates.item] Item template, provided with `name`, `count`, `isRefined`
  * @param  {String|Function} [options.templates.footer=''] Footer template
  * @param  {Function} [options.transformData] Method to change the object passed to the item template
- * @param  {boolean} [hideWhenNoResults=true] Hide the container when there's no results
+ * @param  {boolean} [hideContainerWhenNoResults=true] Hide the container when there's no results
  * @return {Object}
  */
 ```
@@ -940,7 +940,7 @@ search.addWidget(
  * @param  {Object} [options.cssClasses] CSS classes to add to the wrapping elements: root, body
  * @param  {String|String[]} [options.cssClasses.root] CSS class to add to the root element
  * @param  {String|String[]} [options.cssClasses.body] CSS class to add to the body element
- * @param  {boolean} [hideWhenNoResults=true] Hide the container when no results match
+ * @param  {boolean} [hideContainerWhenNoResults=true] Hide the container when no results match
  * @return {Object}
  */
 ```
@@ -990,7 +990,7 @@ search.addWidget(
  * @param  {String|Function} [options.labels.button] Button label
  * @param  {String|Function} [options.labels.currency] Currency label
  * @param  {String|Function} [options.labels.to] To label
- * @param  {boolean} [hideWhenNoResults=true] Hide the container when no results match
+ * @param  {boolean} [hideContainerWhenNoResults=true] Hide the container when no results match
  * @return {Object}
  */
 ```
@@ -1045,7 +1045,7 @@ search.addWidget(
  * @param  {String|Function} [options.templates.item] Item template
  * @param  {String|Function} [options.templates.footer=''] Footer template (root level only)
  * @param  {Function} [options.transformData] Method to change the object passed to the item template
- * @param  {boolean} [hideWhenNoResults=true] Hide the container when there's no results
+ * @param  {boolean} [hideContainerWhenNoResults=true] Hide the container when there's no results
  * @return {Object}
  */
 ```

Diff for: components/RefinementList/__tests__/RefinementList-test.js

@@ -55,7 +55,7 @@ describe('RefinementList', () => {
   });
 
   context('sublist', () => {
-    it('uses autoHide() and headerFooter()', () => {
+    it('uses autoHideContainer() and headerFooter()', () => {
       var customProps = {
         cssClasses: {
           depth: 'depth',

Diff for: decorators/__tests__/autoHide-test.js

@@ -3,31 +3,31 @@
 import React from 'react';
 import expect from 'expect';
 import TestUtils from 'react-addons-test-utils';
-import autoHide from '../autoHide';
+import autoHideContainer from '../autoHideContainer';
 
 import expectJSX from 'expect-jsx';
 expect.extend(expectJSX);
 
-describe('autoHide', () => {
+describe('autoHideContainer', () => {
   var renderer;
 
   beforeEach(() => {
     let {createRenderer} = TestUtils;
     renderer = createRenderer();
   });
 
-  it('should render autoHide(<span />)', () => {
+  it('should render autoHideContainer(<span />)', () => {
     var out = render();
     expect(out).toEqualJSX(<span />);
   });
 
-  it('should not render autoHide(<span />)', () => {
-    var out = render({hasResults: false, hideWhenNoResults: true});
+  it('should not render autoHideContainer(<span />)', () => {
+    var out = render({hasResults: false, hideContainerWhenNoResults: true});
     expect(out).toEqualJSX(<div />);
   });
 
   function render(props = {}) {
-    var AutoHide = autoHide(<span />);
+    var AutoHide = autoHideContainer(<span />);
     renderer.render(<AutoHide {...props} />);
     return renderer.getRenderOutput();
   }

Diff for: decorators/autoHide.js renamed to decorators/autoHideContainer.js

@@ -1,7 +1,7 @@
 var React = require('react');
 var ReactDOM = require('react-dom');
 
-function autoHide(ComposedComponent) {
+function autoHideContainer(ComposedComponent) {
   class AutoHide extends React.Component {
     componentDidMount() {
       this._hideOrShowContainer(this.props);
@@ -13,16 +13,16 @@ function autoHide(ComposedComponent) {
 
     _hideOrShowContainer(props) {
       var container = ReactDOM.findDOMNode(this).parentNode;
-      if (props.hideWhenNoResults === true && props.hasResults === false) {
+      if (props.hideContainerWhenNoResults === true && props.hasResults === false) {
         container.style.display = 'none';
-      } else if (props.hideWhenNoResults === true) {
+      } else if (props.hideContainerWhenNoResults === true) {
         container.style.display = '';
       }
     }
 
     render() {
       if (this.props.hasResults === false &&
-        this.props.hideWhenNoResults === true) {
+        this.props.hideContainerWhenNoResults === true) {
         return <div />;
       }
 
@@ -32,7 +32,7 @@ function autoHide(ComposedComponent) {
 
   AutoHide.propTypes = {
     hasResults: React.PropTypes.bool.isRequired,
-    hideWhenNoResults: React.PropTypes.bool.isRequired
+    hideContainerWhenNoResults: React.PropTypes.bool.isRequired
   };
 
   // precise displayName for ease of debugging (react dev tool, react warnings)
@@ -41,4 +41,4 @@ function autoHide(ComposedComponent) {
   return AutoHide;
 }
 
-module.exports = autoHide;
+module.exports = autoHideContainer;

Diff for: widgets/hierarchical-menu/hierarchical-menu.js

@@ -4,9 +4,9 @@ var ReactDOM = require('react-dom');
 var utils = require('../../lib/utils.js');
 var bem = utils.bemHelper('ais-hierarchical-menu');
 var cx = require('classnames/dedupe');
-var autoHide = require('../../decorators/autoHide');
+var autoHideContainer = require('../../decorators/autoHideContainer');
 var headerFooter = require('../../decorators/headerFooter');
-var RefinementList = autoHide(headerFooter(require('../../components/RefinementList/RefinementList.js')));
+var RefinementList = autoHideContainer(headerFooter(require('../../components/RefinementList/RefinementList.js')));
 
 var defaultTemplates = require('./defaultTemplates.js');
 
@@ -32,7 +32,7 @@ var defaultTemplates = require('./defaultTemplates.js');
  * @param  {String|Function} [options.templates.item] Item template
  * @param  {String|Function} [options.templates.footer=''] Footer template (root level only)
  * @param  {Function} [options.transformData] Method to change the object passed to the item template
- * @param  {boolean} [hideWhenNoResults=true] Hide the container when there's no results
+ * @param  {boolean} [hideContainerWhenNoResults=true] Hide the container when there's no results
  * @return {Object}
  */
 function hierarchicalMenu({
@@ -42,7 +42,7 @@ function hierarchicalMenu({
     limit = 100,
     sortBy = ['name:asc'],
     cssClasses = {},
-    hideWhenNoResults = true,
+    hideContainerWhenNoResults = true,
     templates = defaultTemplates,
     transformData
   }) {
@@ -96,7 +96,7 @@ function hierarchicalMenu({
           facetNameKey="path"
           facetValues={facetValues}
           hasResults={facetValues.length > 0}
-          hideWhenNoResults={hideWhenNoResults}
+          hideContainerWhenNoResults={hideContainerWhenNoResults}
           limit={limit}
           templateProps={templateProps}
           toggleRefinement={toggleRefinement.bind(null, helper, hierarchicalFacetName)}

Diff for: widgets/index-selector/__tests__/index-selector-test.js

@@ -22,14 +22,14 @@ describe('indexSelector()', () => {
   var props;
   var helper;
   var results;
-  var autoHide;
+  var autoHideContainer;
 
   beforeEach(() => {
-    autoHide = sinon.stub().returns(IndexSelector);
+    autoHideContainer = sinon.stub().returns(IndexSelector);
 
     ReactDOM = {render: sinon.spy()};
     indexSelector.__Rewire__('ReactDOM', ReactDOM);
-    indexSelector.__Rewire__('autoHide', autoHide);
+    indexSelector.__Rewire__('autoHideContainer', autoHideContainer);
 
     container = document.createElement('div');
     indices = ['index-a', 'index-b'];
@@ -61,7 +61,7 @@ describe('indexSelector()', () => {
       },
       currentIndex: 'index-a',
       hasResults: false,
-      hideWhenNoResults: false,
+      hideContainerWhenNoResults: false,
       indices: ['index-a', 'index-b'],
       setIndex: () => {}
     };
@@ -85,6 +85,6 @@ describe('indexSelector()', () => {
 
   afterEach(() => {
     indexSelector.__ResetDependency__('ReactDOM');
-    indexSelector.__ResetDependency__('autoHide');
+    indexSelector.__ResetDependency__('autoHideContainer');
   });
 });

Diff for: widgets/index-selector/index-selector.js

@@ -5,7 +5,7 @@ var findIndex = require('lodash/array/findIndex');
 var utils = require('../../lib/utils.js');
 var bem = utils.bemHelper('ais-index-selector');
 var cx = require('classnames');
-var autoHide = require('../../decorators/autoHide');
+var autoHideContainer = require('../../decorators/autoHideContainer');
 
 /**
  * Instantiate a dropdown element to choose the current targeted index
@@ -16,18 +16,18 @@ var autoHide = require('../../decorators/autoHide');
  * @param  {Object} [options.cssClasses] CSS classes to be added
  * @param  {String} [options.cssClasses.root] CSS classes added to the parent <select>
  * @param  {String} [options.cssClasses.item] CSS classes added to each <option>
- * @param  {boolean} [hideWhenNoResults=false] Hide the container when no results match
+ * @param  {boolean} [hideContainerWhenNoResults=false] Hide the container when no results match
  * @return {Object}
  */
 function indexSelector({
     container,
     indices,
     cssClasses = {},
-    hideWhenNoResults = false
+    hideContainerWhenNoResults = false
   }) {
   var containerNode = utils.getContainerNode(container);
 
-  var usage = 'Usage: indexSelector({container, indices[, cssClasses.{select,option}, hideWhenNoResults]})';
+  var usage = 'Usage: indexSelector({container, indices[, cssClasses.{select,option}, hideContainerWhenNoResults]})';
   if (!container || !indices) {
     throw new Error(usage);
   }
@@ -50,7 +50,7 @@ function indexSelector({
       let currentIndex = helper.getIndex();
       let hasResults = results.hits.length > 0;
       let setIndex = this.setIndex.bind(this, helper);
-      var IndexSelector = autoHide(require('../../components/IndexSelector'));
+      var IndexSelector = autoHideContainer(require('../../components/IndexSelector'));
 
       cssClasses = {
         root: cx(bem(null), cssClasses.root),
@@ -61,7 +61,7 @@ function indexSelector({
           cssClasses={cssClasses}
           currentIndex={currentIndex}
           hasResults={hasResults}
-          hideWhenNoResults={hideWhenNoResults}
+          hideContainerWhenNoResults={hideContainerWhenNoResults}
           indices={indices}
           setIndex={setIndex}
         />,

Diff for: widgets/menu/menu.js

@@ -4,9 +4,9 @@ var ReactDOM = require('react-dom');
 var utils = require('../../lib/utils.js');
 var bem = utils.bemHelper('ais-menu');
 var cx = require('classnames/dedupe');
-var autoHide = require('../../decorators/autoHide');
+var autoHideContainer = require('../../decorators/autoHideContainer');
 var headerFooter = require('../../decorators/headerFooter');
-var RefinementList = autoHide(headerFooter(require('../../components/RefinementList/RefinementList.js')));
+var RefinementList = autoHideContainer(headerFooter(require('../../components/RefinementList/RefinementList.js')));
 
 var defaultTemplates = require('./defaultTemplates.js');
 
@@ -31,7 +31,7 @@ var defaultTemplates = require('./defaultTemplates.js');
  * @param  {String|Function} [options.templates.item] Item template, provided with `name`, `count`, `isRefined`
  * @param  {String|Function} [options.templates.footer=''] Footer template
  * @param  {Function} [options.transformData] Method to change the object passed to the item template
- * @param  {boolean} [hideWhenNoResults=true] Hide the container when there's no results
+ * @param  {boolean} [hideContainerWhenNoResults=true] Hide the container when there's no results
  * @return {Object}
  */
 function menu({
@@ -42,7 +42,7 @@ function menu({
     cssClasses = {},
     templates = defaultTemplates,
     transformData,
-    hideWhenNoResults = true
+    hideContainerWhenNoResults = true
   }) {
   var containerNode = utils.getContainerNode(container);
   var usage = 'Usage: menu({container, facetName, [sortBy, limit, cssClasses.{root,list,item}, templates.{header,item,footer}, transformData, hideWhenResults]})';
@@ -90,7 +90,7 @@ function menu({
           cssClasses={cssClasses}
           facetValues={facetValues}
           hasResults={facetValues.length > 0}
-          hideWhenNoResults={hideWhenNoResults}
+          hideContainerWhenNoResults={hideContainerWhenNoResults}
           templateProps={templateProps}
           toggleRefinement={toggleRefinement.bind(null, helper, hierarchicalFacetName)}
         />,

Diff for: widgets/pagination/__tests__/pagination-test.js

@@ -23,7 +23,7 @@ describe('pagination()', () => {
   beforeEach(() => {
     ReactDOM = {render: sinon.spy()};
     pagination.__Rewire__('ReactDOM', ReactDOM);
-    pagination.__Rewire__('autoHide', sinon.stub().returns(Pagination));
+    pagination.__Rewire__('autoHideContainer', sinon.stub().returns(Pagination));
 
     container = document.createElement('div');
     widget = pagination({container, scrollTo: false});
@@ -84,15 +84,15 @@ describe('pagination()', () => {
 
   afterEach(() => {
     pagination.__ResetDependency__('ReactDOM');
-    pagination.__ResetDependency__('autoHide');
+    pagination.__ResetDependency__('autoHideContainer');
   });
 
   function getProps(extraProps = {}) {
     return {
       cssClasses: {},
       currentPage: 0,
       hasResults: true,
-      hideWhenNoResults: true,
+      hideContainerWhenNoResults: true,
       labels: {first: '«', last: '»', next: '›', previous: '‹'},
       nbHits: results.nbHits,
       nbPages: results.nbPages,