diff --git a/README.md b/README.md index 6d9e896..dd84290 100644 --- a/README.md +++ b/README.md @@ -18,7 +18,7 @@ const App = () => { fetch(`http://localhost:3001/api/search/cities?q=${encodeURIComponent(query)}&limit=${maxItems}`) .then(response => response.json()), - dataSearchType: 'startswith' + searchType: 'startswith' }, { name: 'Airports', @@ -27,7 +27,7 @@ const listbox = [ data: (query) => fetch(`http://localhost:3001/api/search/airports?q=${encodeURIComponent(query)}&limit=${maxItems}`) .then(response => response.json()), - dataSearchType: 'contains' + searchType: 'contains' } ] diff --git a/src/App.jsx b/src/App.jsx index 50623d1..14765a8 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -8,18 +8,18 @@ const styles = { const listbox1 = { data: fruits, - dataSearchType: 'startswith' + searchType: 'startswith' } const listbox2 = [ { data: fruits, - dataSearchType: 'startswith', + searchType: 'startswith', name: 'Fruits' }, { data: vegetables, - dataSearchType: 'contains', + searchType: 'contains', name: 'Vegetables' } ] diff --git a/src/lib/__tests__/turnstone.test.jsx b/src/lib/__tests__/turnstone.test.jsx index cc2ebdd..0f32e88 100644 --- a/src/lib/__tests__/turnstone.test.jsx +++ b/src/lib/__tests__/turnstone.test.jsx @@ -14,7 +14,7 @@ describe('Integration tests', () => { render() @@ -35,7 +35,7 @@ describe('Integration tests', () => { autoFocus={true} listbox={{ data: fruits, - dataSearchType: 'startswith' + searchType: 'startswith' }} text={text} />) @@ -52,7 +52,7 @@ describe('Integration tests', () => { render() @@ -67,7 +67,7 @@ describe('Integration tests', () => { disabled={true} listbox={{ data: fruits, - dataSearchType: 'startswith' + searchType: 'startswith' }} placeholder={placeholder} />) @@ -84,7 +84,7 @@ describe('Integration tests', () => { render() diff --git a/src/lib/components/container.test.jsx b/src/lib/components/container.test.jsx index 522f38b..71b04c1 100644 --- a/src/lib/components/container.test.jsx +++ b/src/lib/components/container.test.jsx @@ -31,7 +31,7 @@ describe('Container', () => { const props = { autoFocus: true, data: fruits, - dataSearchType: 'startswith', + searchType: 'startswith', debounceWait: 0, id: 'autocomplete', maxItems: 10, diff --git a/src/lib/components/hooks/useData.js b/src/lib/components/hooks/useData.js index dac08f3..9fe01f1 100644 --- a/src/lib/components/hooks/useData.js +++ b/src/lib/components/hooks/useData.js @@ -4,12 +4,12 @@ import swrLaggyMiddleware from '../../utils/swrLaggyMiddleware' import isUndefined from '../../utils/isUndefined' const filterSuppliedData = (group, query) => { - const { data, displayField, dataSearchType } = group - const searchType = dataSearchType - ? dataSearchType.toLowerCase() - : dataSearchType + const { data, displayField, searchType } = group + const caseInsensitiveSearchType = searchType + ? searchType.toLowerCase() + : searchType - switch (searchType) { + switch (caseInsensitiveSearchType) { case 'startswith': return data.filter((item) => itemText(item, displayField) @@ -101,7 +101,7 @@ export const fetcher = (query, listbox, defaultListbox, minQueryLength, maxItems text: itemText(item, listboxProp[groupIndex].displayField), groupIndex, groupName: listboxProp[groupIndex].name, - dataSearchType: listboxProp[groupIndex].dataSearchType, + searchType: listboxProp[groupIndex].searchType, defaultListbox: isDefaultListbox })) ] diff --git a/src/lib/components/hooks/useData.test.js b/src/lib/components/hooks/useData.test.js index 3bd480f..6030d02 100644 --- a/src/lib/components/hooks/useData.test.js +++ b/src/lib/components/hooks/useData.test.js @@ -100,19 +100,19 @@ describe('Fetching API data', () => { const singleGroupListbox = [{ name: '', data: fruits, - dataSearchType: 'startswith' + searchType: 'startswith' }] const multiGroupListbox = [ { name: 'Fruits', data: fruits, - dataSearchType: 'startswith' + searchType: 'startswith' }, { name: 'Vegetables', data: vegetables, - dataSearchType: 'startswith' + searchType: 'startswith' } ] @@ -120,15 +120,15 @@ describe('Fetching static data', () => { afterEach(() => { delete multiGroupListbox[0].ratio delete multiGroupListbox[1].ratio - multiGroupListbox[0].dataSearchType = 'startswith' - multiGroupListbox[1].dataSearchType = 'startswith' + multiGroupListbox[0].searchType = 'startswith' + multiGroupListbox[1].searchType = 'startswith' }) test('Returns expected results for a single group', () => { return fetcher('Pe', singleGroupListbox, undef, 1, 10).then(items => { expect(items).toEqual([ - { value: 'Peach', text: 'Peach', groupIndex: 0, groupName: '', dataSearchType: 'startswith'}, - { value: 'Pear', text: 'Pear', groupIndex: 0, groupName: '', dataSearchType: 'startswith' } + { value: 'Peach', text: 'Peach', groupIndex: 0, groupName: '', searchType: 'startswith'}, + { value: 'Pear', text: 'Pear', groupIndex: 0, groupName: '', searchType: 'startswith' } ]) }) }) @@ -136,16 +136,16 @@ describe('Fetching static data', () => { test('Returns expected results for multiple groups with equal ratios', () => { return fetcher('P', multiGroupListbox, undef, undef, 10).then(items => { expect(items).toEqual([ - { value: 'Peach', text: 'Peach', groupIndex: 0, groupName: 'Fruits', dataSearchType: 'startswith' }, - { value: 'Pear', text: 'Pear', groupIndex: 0, groupName: 'Fruits', dataSearchType: 'startswith' }, - { value: 'Physalis', text: 'Physalis', groupIndex: 0, groupName: 'Fruits', dataSearchType: 'startswith' }, - { value: 'Pineapple', text: 'Pineapple', groupIndex: 0, groupName: 'Fruits', dataSearchType: 'startswith' }, - { value: 'Pitaya', text: 'Pitaya', groupIndex: 0, groupName: 'Fruits', dataSearchType: 'startswith' }, - { value: 'Parsnip', text: 'Parsnip', groupIndex: 1, groupName: 'Vegetables', dataSearchType: 'startswith' }, - { value: 'Peanuts', text: 'Peanuts', groupIndex: 1, groupName: 'Vegetables', dataSearchType: 'startswith' }, - { value: 'Peas', text: 'Peas', groupIndex: 1, groupName: 'Vegetables', dataSearchType: 'startswith' }, - { value: 'Peppers', text: 'Peppers', groupIndex: 1, groupName: 'Vegetables', dataSearchType: 'startswith' }, - { value: 'Pinto Beans', text: 'Pinto Beans', groupIndex: 1, groupName: 'Vegetables', dataSearchType: 'startswith' } + { value: 'Peach', text: 'Peach', groupIndex: 0, groupName: 'Fruits', searchType: 'startswith' }, + { value: 'Pear', text: 'Pear', groupIndex: 0, groupName: 'Fruits', searchType: 'startswith' }, + { value: 'Physalis', text: 'Physalis', groupIndex: 0, groupName: 'Fruits', searchType: 'startswith' }, + { value: 'Pineapple', text: 'Pineapple', groupIndex: 0, groupName: 'Fruits', searchType: 'startswith' }, + { value: 'Pitaya', text: 'Pitaya', groupIndex: 0, groupName: 'Fruits', searchType: 'startswith' }, + { value: 'Parsnip', text: 'Parsnip', groupIndex: 1, groupName: 'Vegetables', searchType: 'startswith' }, + { value: 'Peanuts', text: 'Peanuts', groupIndex: 1, groupName: 'Vegetables', searchType: 'startswith' }, + { value: 'Peas', text: 'Peas', groupIndex: 1, groupName: 'Vegetables', searchType: 'startswith' }, + { value: 'Peppers', text: 'Peppers', groupIndex: 1, groupName: 'Vegetables', searchType: 'startswith' }, + { value: 'Pinto Beans', text: 'Pinto Beans', groupIndex: 1, groupName: 'Vegetables', searchType: 'startswith' } ]) }) }) @@ -153,12 +153,12 @@ describe('Fetching static data', () => { test('Returns expected results for multiple groups limited to 6 results', () => { return fetcher('P', multiGroupListbox, undef, 1, 6).then(items => { expect(items).toEqual([ - { value: 'Peach', text: 'Peach', groupIndex: 0, groupName: 'Fruits', dataSearchType: 'startswith' }, - { value: 'Pear', text: 'Pear', groupIndex: 0, groupName: 'Fruits', dataSearchType: 'startswith' }, - { value: 'Physalis', text: 'Physalis', groupIndex: 0, groupName: 'Fruits', dataSearchType: 'startswith' }, - { value: 'Parsnip', text: 'Parsnip', groupIndex: 1, groupName: 'Vegetables', dataSearchType: 'startswith' }, - { value: 'Peanuts', text: 'Peanuts', groupIndex: 1, groupName: 'Vegetables', dataSearchType: 'startswith' }, - { value: 'Peas', text: 'Peas', groupIndex: 1, groupName: 'Vegetables', dataSearchType: 'startswith' } + { value: 'Peach', text: 'Peach', groupIndex: 0, groupName: 'Fruits', searchType: 'startswith' }, + { value: 'Pear', text: 'Pear', groupIndex: 0, groupName: 'Fruits', searchType: 'startswith' }, + { value: 'Physalis', text: 'Physalis', groupIndex: 0, groupName: 'Fruits', searchType: 'startswith' }, + { value: 'Parsnip', text: 'Parsnip', groupIndex: 1, groupName: 'Vegetables', searchType: 'startswith' }, + { value: 'Peanuts', text: 'Peanuts', groupIndex: 1, groupName: 'Vegetables', searchType: 'startswith' }, + { value: 'Peas', text: 'Peas', groupIndex: 1, groupName: 'Vegetables', searchType: 'startswith' } ]) }) }) @@ -169,28 +169,28 @@ describe('Fetching static data', () => { return fetcher('P', multiGroupListbox, undef, 1, 6).then(items => { expect(items).toEqual([ - { value: 'Peach', text: 'Peach', groupIndex: 0, groupName: 'Fruits', dataSearchType: 'startswith' }, - { value: 'Pear', text: 'Pear', groupIndex: 0, groupName: 'Fruits', dataSearchType: 'startswith' }, - { value: 'Physalis', text: 'Physalis', groupIndex: 0, groupName: 'Fruits', dataSearchType: 'startswith' }, - { value: 'Pineapple', text: 'Pineapple', groupIndex: 0, groupName: 'Fruits', dataSearchType: 'startswith' }, - { value: 'Parsnip', text: 'Parsnip', groupIndex: 1, groupName: 'Vegetables', dataSearchType: 'startswith' }, - { value: 'Peanuts', text: 'Peanuts', groupIndex: 1, groupName: 'Vegetables', dataSearchType: 'startswith' } + { value: 'Peach', text: 'Peach', groupIndex: 0, groupName: 'Fruits', searchType: 'startswith' }, + { value: 'Pear', text: 'Pear', groupIndex: 0, groupName: 'Fruits', searchType: 'startswith' }, + { value: 'Physalis', text: 'Physalis', groupIndex: 0, groupName: 'Fruits', searchType: 'startswith' }, + { value: 'Pineapple', text: 'Pineapple', groupIndex: 0, groupName: 'Fruits', searchType: 'startswith' }, + { value: 'Parsnip', text: 'Parsnip', groupIndex: 1, groupName: 'Vegetables', searchType: 'startswith' }, + { value: 'Peanuts', text: 'Peanuts', groupIndex: 1, groupName: 'Vegetables', searchType: 'startswith' } ]) }) }) test('Returns results containing query', () => { - multiGroupListbox[0].dataSearchType = 'contains' - multiGroupListbox[1].dataSearchType = 'contains' + multiGroupListbox[0].searchType = 'contains' + multiGroupListbox[1].searchType = 'contains' return fetcher('Pe', multiGroupListbox, undef, 1, 6).then(items => { expect(items).toEqual([ - { value: 'Bartlett pear', text: 'Bartlett pear', groupIndex: 0, groupName: 'Fruits', dataSearchType: 'contains' }, - { value: 'Cantaloupe', text: 'Cantaloupe', groupIndex: 0, groupName: 'Fruits', dataSearchType: 'contains' }, - { value: 'Grape', text: 'Grape', groupIndex: 0, groupName: 'Fruits', dataSearchType: 'contains' }, - { value: 'Bell Pepper', text: 'Bell Pepper', groupIndex: 1, groupName: 'Vegetables', dataSearchType: 'contains' }, - { value: 'Black-Eyed Peas', text: 'Black-Eyed Peas', groupIndex: 1, groupName: 'Vegetables', dataSearchType: 'contains' }, - { value: 'Chickpeas', text: 'Chickpeas', groupIndex: 1, groupName: 'Vegetables', dataSearchType: 'contains' } + { value: 'Bartlett pear', text: 'Bartlett pear', groupIndex: 0, groupName: 'Fruits', searchType: 'contains' }, + { value: 'Cantaloupe', text: 'Cantaloupe', groupIndex: 0, groupName: 'Fruits', searchType: 'contains' }, + { value: 'Grape', text: 'Grape', groupIndex: 0, groupName: 'Fruits', searchType: 'contains' }, + { value: 'Bell Pepper', text: 'Bell Pepper', groupIndex: 1, groupName: 'Vegetables', searchType: 'contains' }, + { value: 'Black-Eyed Peas', text: 'Black-Eyed Peas', groupIndex: 1, groupName: 'Vegetables', searchType: 'contains' }, + { value: 'Chickpeas', text: 'Chickpeas', groupIndex: 1, groupName: 'Vegetables', searchType: 'contains' } ]) }) }) diff --git a/src/lib/components/item.jsx b/src/lib/components/item.jsx index 311d9de..5968007 100644 --- a/src/lib/components/item.jsx +++ b/src/lib/components/item.jsx @@ -14,7 +14,7 @@ export default function Item(props) { const { customStyles, highlighted, query } = state const ItemContents = state.props.ItemContents - const globalMatch = item.dataSearchType === 'contains' + const globalMatch = item.searchType === 'contains' const isHighlighted = highlighted && index === highlighted.index const divClassName = () => { @@ -44,7 +44,7 @@ export default function Item(props) { index={index} item={item.value} query={query} - searchType={item.dataSearchType} + searchType={item.searchType} totalItems={state.items.length} /> : (state.props.matchText diff --git a/src/lib/index.jsx b/src/lib/index.jsx index 83e5e0c..9330356 100644 --- a/src/lib/index.jsx +++ b/src/lib/index.jsx @@ -39,7 +39,7 @@ export default function Turnstone(props) { // Prop validation // ////////////////////////////////////////////////////// -const dataSearchTypes = ['startswith', 'contains'] +const searchTypes = ['startswith', 'contains'] const listboxRules = PropTypes.oneOfType([ PropTypes.arrayOf(PropTypes.exact({ @@ -47,7 +47,7 @@ const listboxRules = PropTypes.oneOfType([ PropTypes.func, PropTypes.array ]).isRequired, - dataSearchType: PropTypes.oneOf(dataSearchTypes), + searchType: PropTypes.oneOf(searchTypes), displayField: PropTypes.string, name: PropTypes.string.isRequired, ratio: PropTypes.number @@ -57,7 +57,7 @@ const listboxRules = PropTypes.oneOfType([ PropTypes.func, PropTypes.array ]).isRequired, - dataSearchType: PropTypes.oneOf(dataSearchTypes), + searchType: PropTypes.oneOf(searchTypes), displayField: PropTypes.string }) ]) diff --git a/src/lib/index.test.jsx b/src/lib/index.test.jsx index 523ff57..0c052b0 100644 --- a/src/lib/index.test.jsx +++ b/src/lib/index.test.jsx @@ -8,7 +8,7 @@ vi.mock('./components/container', () => ({ default: () => 'Container' })) const listbox = { data: ['foo', 'bar', 'foobar'], - dataSearchType: 'startswith' + searchType: 'startswith' } const component = renderer.create(