feat(rangeSlider): add headerFooter decorator

Author: vvo

README.md

@@ -498,6 +498,12 @@ search.addWidget(
  * You can also provide
  * tooltips: {format: function(formattedValue, rawValue) {return '$' + formattedValue}}
  * So that you can format the tooltip display value as you want
+ * @param  {Object} [options.cssClasses] Css classes to add to the wrapping elements: root, body
+ * @param  {String|String[]} [options.cssClasses.root]
+ * @param  {String|String[]} [options.cssClasses.body]
+ * @param  {Object} [options.templates] Templates to use for the widget
+ * @param  {String|Function} [options.templates.header=''] Header template
+ * @param  {String|Function} [options.templates.footer=''] Footer template
  * @param  {boolean} [hideWhenNoResults=true] Hide the container when no results match
  * @return {Object}
  */

components/Slider/index.js

@@ -1,7 +1,9 @@
+var cx = require('classnames');
 var React = require('react');
 
 var Nouislider = require('react-nouislider');
 var autoHide = require('../../decorators/autoHide');
+var headerFooter = require('../../decorators/headerFooter');
 
 require('style?prepend!raw!./index.css');
 
@@ -16,14 +18,16 @@ class Slider extends React.Component {
 
   render() {
     return (
-      <Nouislider
-        {...this.props}
-        onChange={this.handleChange.bind(this)}
-        animate={false}
-        behaviour={'snap'}
-        connect
-        cssPrefix={cssPrefix}
-      />
+      <div className={cx(this.props.cssClasses.body)}>
+        <Nouislider
+          {...this.props}
+          onChange={this.handleChange.bind(this)}
+          animate={false}
+          behaviour={'snap'}
+          connect
+          cssPrefix={cssPrefix}
+        />
+      </div>
     );
   }
 }
@@ -36,7 +40,13 @@ Slider.propTypes = {
   tooltips: React.PropTypes.oneOfType([
     React.PropTypes.bool,
     React.PropTypes.object
-  ])
+  ]),
+  cssClasses: React.PropTypes.shape({
+    body: React.PropTypes.oneOfType([
+      React.PropTypes.string,
+      React.PropTypes.arrayOf(React.PropTypes.string)
+    ])
+  })
 };
 
-module.exports = autoHide(Slider);
+module.exports = autoHide(headerFooter(Slider));

example/app.js

@@ -128,6 +128,12 @@ search.addWidget(
   instantsearch.widgets.rangeSlider({
     container: '#price',
     facetName: 'price',
+    cssClasses: {
+      body: 'panel-body'
+    },
+    templates: {
+      header: '<div class="panel-heading">Price</div>'
+    },
     tooltips: {
       format: function(formattedValue) {
         return '$' + formattedValue;

example/index.html

@@ -31,12 +31,7 @@ <h1>Instant search demo <small>using instantsearch.js</small></h1>
 
         <div class="panel panel-default" id="free-shipping"></div>
 
-        <div class="panel panel-default">
-          <div class="panel-heading">Price</div>
-          <div class="panel-body">
-            <div id="price"></div>
-          </div>
-        </div>
+        <div class="panel panel-default" id="price"></div>
 
       </div>
       <div class="col-md-9">

example/style.css

@@ -36,8 +36,8 @@ body {
   height: 125px;
 }
 
-#price {
-  padding: 30px 0;
+#price .panel-body {
+  padding: 45px 15px;
 }
 
 .panel-heading {

widgets/range-slider.js

@@ -2,6 +2,11 @@ var React = require('react');
 
 var utils = require('../lib/utils.js');
 
+var defaultTemplates = {
+  header: '',
+  footer: ''
+};
+
 /**
  * Instantiate a slider based on a numeric attribute
  * @param  {String|DOMElement} options.container CSS Selector or DOMElement to insert the widget
@@ -11,13 +16,24 @@ var utils = require('../lib/utils.js');
  * You can also provide
  * tooltips: {format: function(formattedValue, rawValue) {return '$' + formattedValue}}
  * So that you can format the tooltip display value as you want
+ * @param  {Object} [options.cssClasses] Css classes to add to the wrapping elements: root, body
+ * @param  {String|String[]} [options.cssClasses.root]
+ * @param  {String|String[]} [options.cssClasses.body]
+ * @param  {Object} [options.templates] Templates to use for the widget
+ * @param  {String|Function} [options.templates.header=''] Header template
+ * @param  {String|Function} [options.templates.footer=''] Footer template
  * @param  {boolean} [hideWhenNoResults=true] Hide the container when no results match
  * @return {Object}
  */
 function rangeSlider({
     container = null,
     facetName = null,
     tooltips = true,
+    templates = defaultTemplates,
+    cssClasses = {
+      root: null,
+      body: null
+    },
     hideWhenNoResults = true
   }) {
   var Slider = require('../components/Slider');
@@ -71,6 +87,8 @@ function rangeSlider({
         <Slider
           start={[currentRefinement.min, currentRefinement.max]}
           range={{min: stats.min, max: stats.max}}
+          cssClasses={cssClasses}
+          templates={templates}
           hideWhenNoResults={hideWhenNoResults}
           hasResults={stats.min !== null && stats.max !== null}
           onChange={this._refine.bind(this, helper)}