From f209f5d8446b71892aff257616d9b263c141bf0b Mon Sep 17 00:00:00 2001 From: Sylvain UTARD Date: Tue, 3 Nov 2015 15:04:38 +0100 Subject: [PATCH] fix(numerical widgets): s/facetName/attributeName Fix #431 BREAKING CHANGE: the priceRanges and rangeSlider widgets are now using `attributeName` instead of `facetName`. --- dev/app.js | 4 +-- docs/_includes/widget-jsdoc/priceRanges.md | 2 +- docs/_includes/widget-jsdoc/rangeSlider.md | 2 +- docs/documentation.md | 4 +-- .../__tests__/price-ranges-test.js | 4 +-- widgets/price-ranges/price-ranges.js | 26 +++++++++---------- .../__tests__/range-slider-test.js | 12 ++++----- widgets/range-slider/range-slider.js | 18 ++++++------- 8 files changed, 36 insertions(+), 36 deletions(-) diff --git a/dev/app.js b/dev/app.js index c9b9355ae5..85e6baaf2b 100644 --- a/dev/app.js +++ b/dev/app.js @@ -151,7 +151,7 @@ search.addWidget( search.addWidget( instantsearch.widgets.rangeSlider({ container: '#price', - facetName: 'price', + attributeName: 'price', cssClasses: { header: 'facet-title' }, @@ -189,7 +189,7 @@ search.once('render', function() { search.addWidget( instantsearch.widgets.priceRanges({ container: '#price-ranges', - facetName: 'price', + attributeName: 'price', templates: { header: 'Price ranges' }, diff --git a/docs/_includes/widget-jsdoc/priceRanges.md b/docs/_includes/widget-jsdoc/priceRanges.md index b82edaed88..1b09caef32 100644 --- a/docs/_includes/widget-jsdoc/priceRanges.md +++ b/docs/_includes/widget-jsdoc/priceRanges.md @@ -1,7 +1,7 @@ | Param | Description | | --- | --- | | `options.container` | Valid CSS Selector as a string or DOMElement | -| `options.facetName` | Name of the attribute for faceting | +| `options.attributeName` | Name of the attribute for faceting | | `options.cssClasses` | CSS classes to add | | `options.cssClasses.root` | CSS class to add to the root element | | `options.cssClasses.header` | CSS class to add to the header element | diff --git a/docs/_includes/widget-jsdoc/rangeSlider.md b/docs/_includes/widget-jsdoc/rangeSlider.md index 02840b8616..33d2fb4180 100644 --- a/docs/_includes/widget-jsdoc/rangeSlider.md +++ b/docs/_includes/widget-jsdoc/rangeSlider.md @@ -1,7 +1,7 @@ | Param | Description | | --- | --- | | `options.container` | CSS Selector or DOMElement to insert the widget | -| `options.facetName` | Name of the attribute for faceting | +| `options.attributeName` | Name of the attribute for faceting | | `options.tooltips` | Should we show tooltips or not. The default tooltip will show the formatted corresponding value without any other token. You can also provide tooltips: {format: function(formattedValue, rawValue) {return '$' + formattedValue}} So that you can format the tooltip display value as you want | | `options.templates` | Templates to use for the widget | | `options.templates.header` | Header template | diff --git a/docs/documentation.md b/docs/documentation.md index 373591baac..f1667f76a2 100644 --- a/docs/documentation.md +++ b/docs/documentation.md @@ -583,7 +583,7 @@ This filtering widget lets the user choose either or not to filter values to `tr search.addWidget( instantsearch.widgets.rangeSlider({ container: '#price', - facetName: 'price', + attributeName: 'price', templates: { header: 'Price' }, @@ -618,7 +618,7 @@ The range slider filters values of a single numeric attribute using 2 cursors: t search.addWidget( instantsearch.widgets.priceRanges({ container: '#priceranges.widget-container', - facetName: 'price', + attributeName: 'price', labels: { currency: '$', separator: 'to', diff --git a/widgets/price-ranges/__tests__/price-ranges-test.js b/widgets/price-ranges/__tests__/price-ranges-test.js index f457d9cb9d..bc3b4ad93c 100644 --- a/widgets/price-ranges/__tests__/price-ranges-test.js +++ b/widgets/price-ranges/__tests__/price-ranges-test.js @@ -33,7 +33,7 @@ describe('priceRanges()', () => { priceRanges.__Rewire__('headerFooter', headerFooter); container = document.createElement('div'); - widget = priceRanges({container, facetName: 'aFacetname'}); + widget = priceRanges({container, attributeName: 'aNumAttr'}); results = { hits: [1], nbHits: 1, @@ -47,7 +47,7 @@ describe('priceRanges()', () => { }); it('adds the attribute as a facet', () => { - expect(widget.getConfiguration()).toEqual({facets: ['aFacetname']}); + expect(widget.getConfiguration()).toEqual({facets: ['aNumAttr']}); }); context('without refinements', function() { diff --git a/widgets/price-ranges/price-ranges.js b/widgets/price-ranges/price-ranges.js index 6bde34de5d..8f1c3c3f46 100644 --- a/widgets/price-ranges/price-ranges.js +++ b/widgets/price-ranges/price-ranges.js @@ -15,7 +15,7 @@ let cx = require('classnames'); /** * Instantiate a price ranges on a numerical facet * @param {string|DOMElement} options.container Valid CSS Selector as a string or DOMElement - * @param {string} options.facetName Name of the attribute for faceting + * @param {string} options.attributeName Name of the attribute for faceting * @param {Object} [options.cssClasses] CSS classes to add * @param {string} [options.cssClasses.root] CSS class to add to the root element * @param {string} [options.cssClasses.header] CSS class to add to the header element @@ -42,7 +42,7 @@ let cx = require('classnames'); */ function priceRanges({ container, - facetName, + attributeName, cssClasses: userCssClasses = {}, templates = defaultTemplates, labels = { @@ -53,29 +53,29 @@ function priceRanges({ hideContainerWhenNoResults = true }) { let containerNode = utils.getContainerNode(container); - let usage = 'Usage: priceRanges({container, facetName, [cssClasses.{root,header,body,list,item,active,link,form,label,input,currency,separator,button,footer}, templates.{header,item,footer}, labels.{currency,separator,button}, hideContainerWhenNoResults]})'; + let usage = 'Usage: priceRanges({container, attributeName, [cssClasses.{root,header,body,list,item,active,link,form,label,input,currency,separator,button,footer}, templates.{header,item,footer}, labels.{currency,separator,button}, hideContainerWhenNoResults]})'; let PriceRanges = headerFooter(require('../../components/PriceRanges/PriceRanges')); if (hideContainerWhenNoResults === true) { PriceRanges = autoHideContainer(PriceRanges); } - if (!container || !facetName) { + if (!container || !attributeName) { throw new Error(usage); } return { getConfiguration: () => ({ - facets: [facetName] + facets: [attributeName] }), _generateRanges: function(results) { - let stats = results.getFacetStats(facetName); + let stats = results.getFacetStats(attributeName); return generateRanges(stats); }, _extractRefinedRange: function(helper) { - let refinements = helper.getRefinements(facetName); + let refinements = helper.getRefinements(attributeName); let from; let to; @@ -96,13 +96,13 @@ function priceRanges({ _refine: function(helper, from, to) { let facetValues = this._extractRefinedRange(helper); - helper.clearRefinements(facetName); + helper.clearRefinements(attributeName); if (facetValues.length === 0 || facetValues[0].from !== from || facetValues[0].to !== to) { if (typeof from !== 'undefined') { - helper.addNumericRefinement(facetName, '>', from - 1); + helper.addNumericRefinement(attributeName, '>', from - 1); } if (typeof to !== 'undefined') { - helper.addNumericRefinement(facetName, '<', to + 1); + helper.addNumericRefinement(attributeName, '<', to + 1); } } @@ -149,13 +149,13 @@ function priceRanges({ ReactDOM.render( { - let newState = state.clearRefinements(facetName); + let newState = state.clearRefinements(attributeName); if (!isRefined) { if (typeof from !== 'undefined') { - newState = newState.addNumericRefinement(facetName, '>', from - 1); + newState = newState.addNumericRefinement(attributeName, '>', from - 1); } if (typeof to !== 'undefined') { - newState = newState.addNumericRefinement(facetName, '<', to + 1); + newState = newState.addNumericRefinement(attributeName, '<', to + 1); } } return createURL(newState); diff --git a/widgets/range-slider/__tests__/range-slider-test.js b/widgets/range-slider/__tests__/range-slider-test.js index c3499d38a1..1c961cf08a 100644 --- a/widgets/range-slider/__tests__/range-slider-test.js +++ b/widgets/range-slider/__tests__/range-slider-test.js @@ -33,7 +33,7 @@ describe('rangeSlider()', () => { rangeSlider.__Rewire__('headerFooter', headerFooter); container = document.createElement('div'); - widget = rangeSlider({container, facetName: 'aFacetName'}); + widget = rangeSlider({container, attributeName: 'aNumAttr'}); results = { getFacetStats: sinon.stub().returns({ min: 1.99, @@ -53,7 +53,7 @@ describe('rangeSlider()', () => { }); it('configures the disjunctiveFacets', () => { - expect(widget.getConfiguration()).toEqual({disjunctiveFacets: ['aFacetName']}); + expect(widget.getConfiguration()).toEqual({disjunctiveFacets: ['aNumAttr']}); }); it('calls twice ReactDOM.render(, container)', () => { @@ -97,7 +97,7 @@ describe('rangeSlider()', () => { widget._refine(helper, stats, [stats.min + 1, stats.max]); expect(helper.clearRefinements.calledOnce).toBe(true, 'clearRefinements called once'); expect(helper.addNumericRefinement.calledOnce).toBe(true, 'clearRefinements called once'); - expect(helper.addNumericRefinement.getCall(0).args).toEqual(['aFacetName', '>=', stats.min + 1]); + expect(helper.addNumericRefinement.getCall(0).args).toEqual(['aNumAttr', '>=', stats.min + 1]); expect(helper.search.calledOnce).toBe(true, 'search called once'); }); @@ -106,7 +106,7 @@ describe('rangeSlider()', () => { widget._refine(helper, stats, [stats.min, stats.max - 1]); expect(helper.clearRefinements.calledOnce).toBe(true, 'clearRefinements called once'); expect(helper.addNumericRefinement.calledOnce).toBe(true, 'addNumericRefinement called once'); - expect(helper.addNumericRefinement.getCall(0).args).toEqual(['aFacetName', '<=', stats.max - 1]); + expect(helper.addNumericRefinement.getCall(0).args).toEqual(['aNumAttr', '<=', stats.max - 1]); expect(helper.search.calledOnce).toBe(true, 'search called once'); }); @@ -115,8 +115,8 @@ describe('rangeSlider()', () => { widget._refine(helper, stats, [stats.min + 1, stats.max - 1]); expect(helper.clearRefinements.calledOnce).toBe(true, 'clearRefinements called once'); expect(helper.addNumericRefinement.calledTwice).toBe(true, 'addNumericRefinement called twice'); - expect(helper.addNumericRefinement.getCall(0).args).toEqual(['aFacetName', '>=', stats.min + 1]); - expect(helper.addNumericRefinement.getCall(1).args).toEqual(['aFacetName', '<=', stats.max - 1]); + expect(helper.addNumericRefinement.getCall(0).args).toEqual(['aNumAttr', '>=', stats.min + 1]); + expect(helper.addNumericRefinement.getCall(1).args).toEqual(['aNumAttr', '<=', stats.max - 1]); expect(helper.search.calledOnce).toBe(true, 'search called once'); }); diff --git a/widgets/range-slider/range-slider.js b/widgets/range-slider/range-slider.js index 986411af73..d139b46d47 100644 --- a/widgets/range-slider/range-slider.js +++ b/widgets/range-slider/range-slider.js @@ -13,7 +13,7 @@ let defaultTemplates = { /** * Instantiate a slider based on a numeric attribute * @param {string|DOMElement} options.container CSS Selector or DOMElement to insert the widget - * @param {string} options.facetName Name of the attribute for faceting + * @param {string} options.attributeName Name of the attribute for faceting * @param {boolean|Object} [options.tooltips=true] Should we show tooltips or not. * The default tooltip will show the formatted corresponding value without any other token. * You can also provide @@ -30,7 +30,7 @@ let defaultTemplates = { */ function rangeSlider({ container = null, - facetName = null, + attributeName = null, tooltips = true, templates = defaultTemplates, cssClasses = { @@ -48,11 +48,11 @@ function rangeSlider({ return { getConfiguration: () => ({ - disjunctiveFacets: [facetName] + disjunctiveFacets: [attributeName] }), _getCurrentRefinement(helper) { - let min = helper.state.getNumericRefinement(facetName, '>='); - let max = helper.state.getNumericRefinement(facetName, '<='); + let min = helper.state.getNumericRefinement(attributeName, '>='); + let max = helper.state.getNumericRefinement(attributeName, '<='); if (min && min.length) { min = min[0]; @@ -72,17 +72,17 @@ function rangeSlider({ }; }, _refine(helper, stats, newValues) { - helper.clearRefinements(facetName); + helper.clearRefinements(attributeName); if (newValues[0] > stats.min) { - helper.addNumericRefinement(facetName, '>=', newValues[0]); + helper.addNumericRefinement(attributeName, '>=', newValues[0]); } if (newValues[1] < stats.max) { - helper.addNumericRefinement(facetName, '<=', newValues[1]); + helper.addNumericRefinement(attributeName, '<=', newValues[1]); } helper.search(); }, render({results, helper, templatesConfig}) { - let stats = results.getFacetStats(facetName); + let stats = results.getFacetStats(attributeName); let currentRefinement = this._getCurrentRefinement(helper);