refactor(RefinementList): use headerFooter decorator

algolia · Sep 24, 2015 · 1207ba7 · 1207ba7
1 parent 02be5f1
commit 1207ba7
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 40 deletions.
diff --git a/components/HeaderFooter.js b/components/HeaderFooter.js
diff --git a/components/RefinementList.js b/components/RefinementList.js
@@ -2,6 +2,7 @@ var React = require('react');
 
 var Template = require('./Template');
 var autoHide = require('../decorators/autoHide');
+var headerFooter = require('../decorators/headerFooter');
 var cx = require('classnames');
 
 class RefinementList extends React.Component {
@@ -43,41 +44,30 @@ class RefinementList extends React.Component {
   }
 
   render() {
-    var facetValues = this.props.facetValues;
-    var templates = this.props.templates;
-    var transformData = this.props.transformData;
-    var rootClass = cx(this.props.cssClasses.root);
-    var listClass = cx(this.props.cssClasses.list);
-    var itemClass = cx(this.props.cssClasses.item);
-
     return (
-      <div className={rootClass}>
-        <Template template={templates.header} />
-        <div className={listClass}>
-        {facetValues.map(facetValue => {
-          return (
-            <div className={itemClass} key={facetValue.name} onClick={this.handleClick.bind(this, facetValue.name)}>
-              <Template
-                data={facetValue}
-                transformData={transformData}
-                template={templates.item}
-              />
-            </div>
-          );
-        })}
-        </div>
-        <Template template={templates.footer} />
+      <div className={cx(this.props.cssClasses.list)}>
+      {this.props.facetValues.map(facetValue => {
+        return (
+          <div
+            className={cx(this.props.cssClasses.item)}
+            key={facetValue.name}
+            onClick={this.handleClick.bind(this, facetValue.name)}
+          >
+            <Template
+              data={facetValue}
+              transformData={this.props.transformData}
+              template={this.props.templates.item}
+            />
+          </div>
+        );
+      })}
       </div>
     );
   }
 }
 
 RefinementList.propTypes = {
   cssClasses: React.PropTypes.shape({
-    root: React.PropTypes.oneOfType([
-      React.PropTypes.string,
-      React.PropTypes.arrayOf(React.PropTypes.string)
-    ]),
     item: React.PropTypes.oneOfType([
       React.PropTypes.string,
       React.PropTypes.arrayOf(React.PropTypes.string)
@@ -89,29 +79,20 @@ RefinementList.propTypes = {
   }),
   facetValues: React.PropTypes.array,
   templates: React.PropTypes.shape({
-    header: React.PropTypes.oneOfType([
-      React.PropTypes.string,
-      React.PropTypes.func
-    ]),
     item: React.PropTypes.oneOfType([
       React.PropTypes.string,
       React.PropTypes.func
-    ]).isRequired,
-    footer: React.PropTypes.oneOfType([
-      React.PropTypes.string,
-      React.PropTypes.func
-    ])
+    ]).isRequired
   }),
   transformData: React.PropTypes.func,
   toggleRefinement: React.PropTypes.func.isRequired
 };
 
 RefinementList.defaultProps = {
   cssClasses: {
-    root: null,
     item: null,
     list: null
   }
 };
 
-module.exports = autoHide(RefinementList);
+module.exports = autoHide(headerFooter(RefinementList));
diff --git a/decorators/headerFooter.js b/decorators/headerFooter.js
@@ -0,0 +1,55 @@
+var React = require('react');
+
+var Template = require('../components/Template');
+
+var cx = require('classnames');
+
+function headerFooter(ComposedComponent) {
+  class HeaderFooter extends React.Component {
+    render() {
+      return (
+        <div className={cx(this.props.cssClasses.root)}>
+          <Template template={this.props.templates.header} />
+          <ComposedComponent {...this.props} />
+          <Template template={this.props.templates.footer} />
+        </div>
+      );
+    }
+  }
+
+  HeaderFooter.propTypes = {
+    templates: React.PropTypes.shape({
+      header: React.PropTypes.oneOfType([
+        React.PropTypes.string,
+        React.PropTypes.func
+      ]),
+      footer: React.PropTypes.oneOfType([
+        React.PropTypes.string,
+        React.PropTypes.func
+      ])
+    }),
+    cssClasses: React.PropTypes.shape({
+      root: React.PropTypes.oneOfType([
+        React.PropTypes.string,
+        React.PropTypes.arrayOf(React.PropTypes.string)
+      ])
+    })
+  };
+
+  HeaderFooter.defaultProps = {
+    templates: {
+      header: '',
+      footer: ''
+    },
+    cssClasses: {
+      root: null
+    }
+  };
+
+  // precise displayName for ease of debugging (react dev tool, react warnings)
+  HeaderFooter.displayName = ComposedComponent.name + '-HeaderFooter';
+
+  return HeaderFooter;
+}
+
+module.exports = headerFooter;
diff --git a/widgets/refinement-list.js b/widgets/refinement-list.js
@@ -24,11 +24,11 @@ var defaults = require('lodash/object/defaults');
  * @param  {String|String[]} [options.cssClasses.list]
  * @param  {String|String[]} [options.cssClasses.item]
  * @param  {Object} [options.templates] Templates to use for the widget
- * @param  {String|Function} [options.templates.header] Header template
+ * @param  {String|Function} [options.templates.header=''] Header template
  * @param  {String|Function} [options.templates.item=`<label>
   <input type="checkbox" value="{{name}}" {{#isRefined}}checked{{/isRefined}} />{{name}} <span>{{count}}</span>
 </label>`] Item template, provided with `name`, `count`, `isRefined`
- * @param  {String|Function} [options.templates.footer] Footer template
+ * @param  {String|Function} [options.templates.footer=''] Footer template
  * @param  {Function} [options.transformData] Function to change the object passed to the item template
  * @param  {String|Function} [options.singleRefine=true] Are multiple refinements allowed or only one at the same time. You can use this
  *                                                       to build radio based refinement lists for example