diff --git a/components/HeaderFooter.js b/components/HeaderFooter.js
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/components/RefinementList.js b/components/RefinementList.js
index 43423da21e..2586df5397 100644
--- 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,30 +44,23 @@ 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 (
-
-
-
- {facetValues.map(facetValue => {
- return (
-
-
-
- );
- })}
-
-
+
+ {this.props.facetValues.map(facetValue => {
+ return (
+
+
+
+ );
+ })}
);
}
@@ -74,10 +68,6 @@ class RefinementList extends React.Component {
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,18 +79,10 @@ 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
@@ -108,10 +90,9 @@ RefinementList.propTypes = {
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
new file mode 100644
index 0000000000..18e03b7544
--- /dev/null
+++ 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 (
+
+
+
+
+
+ );
+ }
+ }
+
+ 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
index eff54c8d64..d7346622fe 100644
--- 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=`
`] 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