diff --git a/dev/app/builtin/stories/sort-by.stories.js b/dev/app/builtin/stories/sort-by.stories.js index 87092d05d1..6c88dea128 100644 --- a/dev/app/builtin/stories/sort-by.stories.js +++ b/dev/app/builtin/stories/sort-by.stories.js @@ -15,9 +15,9 @@ export default () => { instantsearch.widgets.sortBy({ container, items: [ - { name: 'instant_search', label: 'Most relevant' }, - { name: 'instant_search_price_asc', label: 'Lowest price' }, - { name: 'instant_search_price_desc', label: 'Highest price' }, + { value: 'instant_search', label: 'Most relevant' }, + { value: 'instant_search_price_asc', label: 'Lowest price' }, + { value: 'instant_search_price_desc', label: 'Highest price' }, ], }) ); @@ -30,14 +30,14 @@ export default () => { instantsearch.widgets.sortBy({ container, items: [ - { name: 'instant_search', label: 'Most relevant' }, - { name: 'instant_search_price_asc', label: 'Lowest price' }, - { name: 'instant_search_price_desc', label: 'Highest price' }, + { value: 'instant_search', label: 'Most relevant' }, + { value: 'instant_search_price_asc', label: 'Lowest price' }, + { value: 'instant_search_price_desc', label: 'Highest price' }, ], transformItems: items => items.map(item => ({ ...item, - label: `${item.label} (transformed)`, + label: item.label.toUpperCase(), })), }) ); diff --git a/dev/app/init-unmount-widgets.js b/dev/app/init-unmount-widgets.js index c7c46c15b7..fabd6001b4 100644 --- a/dev/app/init-unmount-widgets.js +++ b/dev/app/init-unmount-widgets.js @@ -248,9 +248,9 @@ export default () => { instantsearch.widgets.sortBy({ container, items: [ - { name: 'instant_search', label: 'Most relevant' }, - { name: 'instant_search_price_asc', label: 'Lowest price' }, - { name: 'instant_search_price_desc', label: 'Highest price' }, + { value: 'instant_search', label: 'Most relevant' }, + { value: 'instant_search_price_asc', label: 'Lowest price' }, + { value: 'instant_search_price_desc', label: 'Highest price' }, ], }) ) diff --git a/dev/app/jquery/stories/sort-by.stories.js b/dev/app/jquery/stories/sort-by.stories.js index f27704af69..df4f526a0b 100644 --- a/dev/app/jquery/stories/sort-by.stories.js +++ b/dev/app/jquery/stories/sort-by.stories.js @@ -12,9 +12,9 @@ export default () => { widgets.sortBy({ containerNode, items: [ - { name: 'instant_search', label: 'Most relevant' }, - { name: 'instant_search_price_asc', label: 'Lowest price' }, - { name: 'instant_search_price_desc', label: 'Highest price' }, + { value: 'instant_search', label: 'Most relevant' }, + { value: 'instant_search_price_asc', label: 'Lowest price' }, + { value: 'instant_search_price_desc', label: 'Highest price' }, ], }) ); diff --git a/docgen/src/guides/v3-migration.md b/docgen/src/guides/v3-migration.md index 45ceeeecb6..44568c3b9c 100644 --- a/docgen/src/guides/v3-migration.md +++ b/docgen/src/guides/v3-migration.md @@ -1103,6 +1103,15 @@ Finally, `autofocus` is now set to `false` by default and does not support the ` | --------- | ------- | | `indices` | `items` | +- A `sortBy` item value is now `value` instead of `name`: + +```js +const sortByItem = { + value: string, + label: string, +} +``` + #### CSS classes | Before | After | diff --git a/src/connectors/sort-by/__tests__/connectSortBy-test.js b/src/connectors/sort-by/__tests__/connectSortBy-test.js index fb90829b54..32e413e3aa 100644 --- a/src/connectors/sort-by/__tests__/connectSortBy-test.js +++ b/src/connectors/sort-by/__tests__/connectSortBy-test.js @@ -18,14 +18,14 @@ describe('connectSortBy', () => { }); const items = [ - { label: 'Sort products by relevance', name: 'relevance' }, - { label: 'Sort products by price', name: 'priceASC' }, + { label: 'Sort products by relevance', value: 'relevance' }, + { label: 'Sort products by price', value: 'priceASC' }, ]; const widget = makeWidget({ items }); expect(widget.getConfiguration).toBe(undefined); - const helper = jsHelper({}, items[0].name); + const helper = jsHelper({}, items[0].value); helper.search = jest.fn(); widget.init({ @@ -81,8 +81,8 @@ describe('connectSortBy', () => { }); const items = [ - { label: 'Sort products by relevance', name: 'relevance' }, - { label: 'Sort products by price', name: 'priceASC' }, + { label: 'Sort products by relevance', value: 'relevance' }, + { label: 'Sort products by price', value: 'priceASC' }, ]; const widget = makeWidget({ items, @@ -90,7 +90,7 @@ describe('connectSortBy', () => { allItems.map(item => ({ ...item, label: 'transformed' })), }); - const helper = jsHelper({}, items[0].name); + const helper = jsHelper({}, items[0].value); helper.search = jest.fn(); widget.init({ @@ -136,14 +136,14 @@ describe('connectSortBy', () => { }); const items = [ - { label: 'Sort products by relevance', name: 'relevance' }, - { label: 'Sort products by price', name: 'priceASC' }, + { label: 'Sort products by relevance', value: 'relevance' }, + { label: 'Sort products by price', value: 'priceASC' }, ]; const widget = makeWidget({ items, }); - const helper = jsHelper({}, items[0].name); + const helper = jsHelper({}, items[0].value); helper.search = jest.fn(); widget.init({ @@ -156,7 +156,7 @@ describe('connectSortBy', () => { { // first rendering - expect(helper.state.index).toBe(items[0].name); + expect(helper.state.index).toBe(items[0].value); const renderOptions = rendering.mock.calls[rendering.mock.calls.length - 1][0]; const { refine, currentRefinement } = renderOptions; @@ -195,9 +195,9 @@ describe('connectSortBy', () => { searchClient: { search() {} }, }); const items = [ - { label: 'Sort products by relevance', name: 'relevance' }, - { label: 'Sort products by price', name: 'priceASC' }, - { label: 'Sort products by magic', name: 'other' }, + { label: 'Sort products by relevance', value: 'relevance' }, + { label: 'Sort products by price', value: 'priceASC' }, + { label: 'Sort products by magic', value: 'other' }, ]; const widget = makeWidget({ diff --git a/src/connectors/sort-by/connectSortBy.js b/src/connectors/sort-by/connectSortBy.js index 177d3a0f22..fed5a70249 100644 --- a/src/connectors/sort-by/connectSortBy.js +++ b/src/connectors/sort-by/connectSortBy.js @@ -23,8 +23,8 @@ Full documentation available at https://community.algolia.com/instantsearch.js/v /** * @typedef {Object} SortByItem - * @property {string} name Name of the index to target. - * @property {string} label Label to display for the targeted index. + * @property {string} value The name of the index to target. + * @property {string} label The label of the index to display. */ /** @@ -91,9 +91,9 @@ Full documentation available at https://community.algolia.com/instantsearch.js/v * customSortBy({ * containerNode: $('#custom-sort-by-container'), * items: [ - * {name: 'instant_search', label: 'Most relevant'}, - * {name: 'instant_search_price_asc', label: 'Lowest price'}, - * {name: 'instant_search_price_desc', label: 'Highest price'}, + * { value: 'instant_search', label: 'Most relevant' }, + * { value: 'instant_search_price_asc', label: 'Lowest price' }, + * { value: 'instant_search_price_desc', label: 'Highest price' }, * ], * }) * ); @@ -108,15 +108,10 @@ export default function connectSortBy(renderFn, unmountFn) { throw new Error(usage); } - const selectorOptions = items.map(({ label, name }) => ({ - label, - value: name, - })); - return { init({ helper, instantSearchInstance }) { const currentIndex = helper.getIndex(); - const isIndexInList = find(items, ({ name }) => name === currentIndex); + const isIndexInList = find(items, item => item.value === currentIndex); if (!isIndexInList) { throw new Error( @@ -130,7 +125,7 @@ export default function connectSortBy(renderFn, unmountFn) { renderFn( { currentRefinement: currentIndex, - options: transformItems(selectorOptions), + options: transformItems(items), refine: this.setIndex, hasNoResults: true, widgetParams, @@ -144,7 +139,7 @@ export default function connectSortBy(renderFn, unmountFn) { renderFn( { currentRefinement: helper.getIndex(), - options: transformItems(selectorOptions), + options: transformItems(items), refine: this.setIndex, hasNoResults: results.nbHits === 0, widgetParams, diff --git a/src/widgets/sort-by/__tests__/sort-by-test.js b/src/widgets/sort-by/__tests__/sort-by-test.js index 9688963983..7a299dc202 100644 --- a/src/widgets/sort-by/__tests__/sort-by-test.js +++ b/src/widgets/sort-by/__tests__/sort-by-test.js @@ -35,8 +35,8 @@ describe('sortBy()', () => { container = document.createElement('div'); items = [ - { name: 'index-a', label: 'Index A' }, - { name: 'index-b', label: 'Index B' }, + { value: 'index-a', label: 'Index A' }, + { value: 'index-b', label: 'Index B' }, ]; cssClasses = { root: ['custom-root', 'cx'], diff --git a/src/widgets/sort-by/sort-by.js b/src/widgets/sort-by/sort-by.js index 6db8088714..ffe5b08744 100644 --- a/src/widgets/sort-by/sort-by.js +++ b/src/widgets/sort-by/sort-by.js @@ -45,8 +45,8 @@ sortBy({ /** * @typedef {Object} SortByIndexDefinition - * @property {string} name The name of the index in Algolia. - * @property {string} label The name of the index, for user usage. + * @property {string} value The name of the index to target. + * @property {string} label The label of the index to display. */ /** @@ -72,9 +72,9 @@ sortBy({ * instantsearch.widgets.sortBy({ * container: '#sort-by-container', * items: [ - * {name: 'instant_search', label: 'Most relevant'}, - * {name: 'instant_search_price_asc', label: 'Lowest price'}, - * {name: 'instant_search_price_desc', label: 'Highest price'} + * {value: 'instant_search', label: 'Most relevant'}, + * {value: 'instant_search_price_asc', label: 'Lowest price'}, + * {value: 'instant_search_price_desc', label: 'Highest price'} * ] * }) * );