fergalmoran/turnstone
1
0
Fork 0
mirror of https://github.com/fergalmoran/turnstone.git synced 2025-12-26 11:49:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

Rename dataSearchType prop to searchType

Browse Source
This commit is contained in:
Tom Southall
2022-02-25 00:39:01 +00:00
parent 70573f6e22
commit f74b64bd5a
10 changed files with 61 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@@ -18,7 +18,7 @@ const App = () => {
<Turnstone <Turnstone
autoFocus={true} autoFocus={true}
data={fruits} data={fruits}
dataSearchType={'startswith'} searchType={'startswith'}
debounceWait={0} debounceWait={0}
maxItems={10} maxItems={10}
noItemsMessage={'No matching fruit found'} noItemsMessage={'No matching fruit found'}

4
examples/geo/App.jsx
View File

@@ -18,7 +18,7 @@ const listbox = [
data: (query) => data: (query) =>
fetch(`http://localhost:3001/api/search/cities?q=${encodeURIComponent(query)}&limit=${maxItems}`) fetch(`http://localhost:3001/api/search/cities?q=${encodeURIComponent(query)}&limit=${maxItems}`)
.then(response => response.json()), .then(response => response.json()),
dataSearchType: 'startswith' searchType: 'startswith'
}, },
{ {
name: 'Airports', name: 'Airports',
@@ -27,7 +27,7 @@ const listbox = [
data: (query) => data: (query) =>
fetch(`http://localhost:3001/api/search/airports?q=${encodeURIComponent(query)}&limit=${maxItems}`) fetch(`http://localhost:3001/api/search/airports?q=${encodeURIComponent(query)}&limit=${maxItems}`)
.then(response => response.json()), .then(response => response.json()),
dataSearchType: 'contains' searchType: 'contains'
} }
] ]

6
src/App.jsx
View File

@@ -8,18 +8,18 @@ const styles = {
const listbox1 = { const listbox1 = {
data: fruits, data: fruits,
dataSearchType: 'startswith' searchType: 'startswith'
} }
const listbox2 = [ const listbox2 = [
{ {
data: fruits, data: fruits,
dataSearchType: 'startswith', searchType: 'startswith',
name: 'Fruits' name: 'Fruits'
}, },
{ {
data: vegetables, data: vegetables,
dataSearchType: 'contains', searchType: 'contains',
name: 'Vegetables' name: 'Vegetables'
} }
] ]

10
src/lib/__tests__/turnstone.test.jsx
View File

@@ -14,7 +14,7 @@ describe('Integration tests', () => {
render(<Turnstone render(<Turnstone
listbox={{ listbox={{
data: fruits, data: fruits,
dataSearchType: 'startswith' searchType: 'startswith'
}} }}
placeholder={placeholder} placeholder={placeholder}
/>) />)
@@ -35,7 +35,7 @@ describe('Integration tests', () => {
autoFocus={true} autoFocus={true}
listbox={{ listbox={{
data: fruits, data: fruits,
dataSearchType: 'startswith' searchType: 'startswith'
}} }}
text={text} text={text}
/>) />)
@@ -52,7 +52,7 @@ describe('Integration tests', () => {
render(<Turnstone render(<Turnstone
listbox={{ listbox={{
data: fruits, data: fruits,
dataSearchType: 'startswith' searchType: 'startswith'
}} }}
text={text} text={text}
/>) />)
@@ -67,7 +67,7 @@ describe('Integration tests', () => {
disabled={true} disabled={true}
listbox={{ listbox={{
data: fruits, data: fruits,
dataSearchType: 'startswith' searchType: 'startswith'
}} }}
placeholder={placeholder} placeholder={placeholder}
/>) />)
@@ -84,7 +84,7 @@ describe('Integration tests', () => {
render(<Turnstone render(<Turnstone
listbox={{ listbox={{
data: fruits, data: fruits,
dataSearchType: 'startswith' searchType: 'startswith'
}} }}
placeholder={placeholder} placeholder={placeholder}
/>) />)

2
src/lib/components/container.test.jsx
View File

@@ -31,7 +31,7 @@ describe('Container', () => {
const props = { const props = {
autoFocus: true, autoFocus: true,
data: fruits, data: fruits,
dataSearchType: 'startswith', searchType: 'startswith',
debounceWait: 0, debounceWait: 0,
id: 'autocomplete', id: 'autocomplete',
maxItems: 10, maxItems: 10,

12
src/lib/components/hooks/useData.js
View File

@@ -4,12 +4,12 @@ import swrLaggyMiddleware from '../../utils/swrLaggyMiddleware'
import isUndefined from '../../utils/isUndefined' import isUndefined from '../../utils/isUndefined'
const filterSuppliedData = (group, query) => { const filterSuppliedData = (group, query) => {
const { data, displayField, dataSearchType } = group const { data, displayField, searchType } = group
const searchType = dataSearchType const caseInsensitiveSearchType = searchType
? dataSearchType.toLowerCase() ? searchType.toLowerCase()
: dataSearchType : searchType
switch (searchType) { switch (caseInsensitiveSearchType) {
case 'startswith': case 'startswith':
return data.filter((item) => return data.filter((item) =>
itemText(item, displayField) itemText(item, displayField)
@@ -101,7 +101,7 @@ export const fetcher = (query, listbox, defaultListbox, minQueryLength, maxItems
text: itemText(item, listboxProp[groupIndex].displayField), text: itemText(item, listboxProp[groupIndex].displayField),
groupIndex, groupIndex,
groupName: listboxProp[groupIndex].name, groupName: listboxProp[groupIndex].name,
dataSearchType: listboxProp[groupIndex].dataSearchType, searchType: listboxProp[groupIndex].searchType,
defaultListbox: isDefaultListbox defaultListbox: isDefaultListbox
})) }))
] ]

74
src/lib/components/hooks/useData.test.js
View File

@@ -100,19 +100,19 @@ describe('Fetching API data', () => {
const singleGroupListbox = [{ const singleGroupListbox = [{
name: '', name: '',
data: fruits, data: fruits,
dataSearchType: 'startswith' searchType: 'startswith'
}] }]
const multiGroupListbox = [ const multiGroupListbox = [
{ {
name: 'Fruits', name: 'Fruits',
data: fruits, data: fruits,
dataSearchType: 'startswith' searchType: 'startswith'
}, },
{ {
name: 'Vegetables', name: 'Vegetables',
data: vegetables, data: vegetables,
dataSearchType: 'startswith' searchType: 'startswith'
} }
] ]
@@ -120,15 +120,15 @@ describe('Fetching static data', () => {
afterEach(() => { afterEach(() => {
delete multiGroupListbox[0].ratio delete multiGroupListbox[0].ratio
delete multiGroupListbox[1].ratio delete multiGroupListbox[1].ratio
multiGroupListbox[0].dataSearchType = 'startswith' multiGroupListbox[0].searchType = 'startswith'
multiGroupListbox[1].dataSearchType = 'startswith' multiGroupListbox[1].searchType = 'startswith'
}) })
test('Returns expected results for a single group', () => { test('Returns expected results for a single group', () => {
return fetcher('Pe', singleGroupListbox, undef, 1, 10).then(items => { return fetcher('Pe', singleGroupListbox, undef, 1, 10).then(items => {
expect(items).toEqual([ expect(items).toEqual([
{ value: 'Peach', text: 'Peach', groupIndex: 0, groupName: '', dataSearchType: 'startswith'}, { value: 'Peach', text: 'Peach', groupIndex: 0, groupName: '', searchType: 'startswith'},
{ value: 'Pear', text: 'Pear', groupIndex: 0, groupName: '', dataSearchType: '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', () => { test('Returns expected results for multiple groups with equal ratios', () => {
return fetcher('P', multiGroupListbox, undef, undef, 10).then(items => { return fetcher('P', multiGroupListbox, undef, undef, 10).then(items => {
expect(items).toEqual([ expect(items).toEqual([
{ value: 'Peach', text: 'Peach', groupIndex: 0, groupName: 'Fruits', dataSearchType: 'startswith' }, { value: 'Peach', text: 'Peach', groupIndex: 0, groupName: 'Fruits', searchType: 'startswith' },
{ value: 'Pear', text: 'Pear', groupIndex: 0, groupName: 'Fruits', dataSearchType: 'startswith' }, { value: 'Pear', text: 'Pear', groupIndex: 0, groupName: 'Fruits', searchType: 'startswith' },
{ value: 'Physalis', text: 'Physalis', groupIndex: 0, groupName: 'Fruits', dataSearchType: 'startswith' }, { value: 'Physalis', text: 'Physalis', groupIndex: 0, groupName: 'Fruits', searchType: 'startswith' },
{ value: 'Pineapple', text: 'Pineapple', groupIndex: 0, groupName: 'Fruits', dataSearchType: 'startswith' }, { value: 'Pineapple', text: 'Pineapple', groupIndex: 0, groupName: 'Fruits', searchType: 'startswith' },
{ value: 'Pitaya', text: 'Pitaya', groupIndex: 0, groupName: 'Fruits', dataSearchType: 'startswith' }, { value: 'Pitaya', text: 'Pitaya', groupIndex: 0, groupName: 'Fruits', searchType: 'startswith' },
{ value: 'Parsnip', text: 'Parsnip', groupIndex: 1, groupName: 'Vegetables', dataSearchType: 'startswith' }, { value: 'Parsnip', text: 'Parsnip', groupIndex: 1, groupName: 'Vegetables', searchType: 'startswith' },
{ value: 'Peanuts', text: 'Peanuts', groupIndex: 1, groupName: 'Vegetables', dataSearchType: 'startswith' }, { value: 'Peanuts', text: 'Peanuts', groupIndex: 1, groupName: 'Vegetables', searchType: 'startswith' },
{ value: 'Peas', text: 'Peas', groupIndex: 1, groupName: 'Vegetables', dataSearchType: 'startswith' }, { value: 'Peas', text: 'Peas', groupIndex: 1, groupName: 'Vegetables', searchType: 'startswith' },
{ value: 'Peppers', text: 'Peppers', groupIndex: 1, groupName: 'Vegetables', dataSearchType: 'startswith' }, { value: 'Peppers', text: 'Peppers', groupIndex: 1, groupName: 'Vegetables', searchType: 'startswith' },
{ value: 'Pinto Beans', text: 'Pinto Beans', groupIndex: 1, groupName: 'Vegetables', dataSearchType: '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', () => { test('Returns expected results for multiple groups limited to 6 results', () => {
return fetcher('P', multiGroupListbox, undef, 1, 6).then(items => { return fetcher('P', multiGroupListbox, undef, 1, 6).then(items => {
expect(items).toEqual([ expect(items).toEqual([
{ value: 'Peach', text: 'Peach', groupIndex: 0, groupName: 'Fruits', dataSearchType: 'startswith' }, { value: 'Peach', text: 'Peach', groupIndex: 0, groupName: 'Fruits', searchType: 'startswith' },
{ value: 'Pear', text: 'Pear', groupIndex: 0, groupName: 'Fruits', dataSearchType: 'startswith' }, { value: 'Pear', text: 'Pear', groupIndex: 0, groupName: 'Fruits', searchType: 'startswith' },
{ value: 'Physalis', text: 'Physalis', groupIndex: 0, groupName: 'Fruits', dataSearchType: 'startswith' }, { value: 'Physalis', text: 'Physalis', groupIndex: 0, groupName: 'Fruits', searchType: 'startswith' },
{ value: 'Parsnip', text: 'Parsnip', groupIndex: 1, groupName: 'Vegetables', dataSearchType: 'startswith' }, { value: 'Parsnip', text: 'Parsnip', groupIndex: 1, groupName: 'Vegetables', searchType: 'startswith' },
{ value: 'Peanuts', text: 'Peanuts', groupIndex: 1, groupName: 'Vegetables', dataSearchType: 'startswith' }, { value: 'Peanuts', text: 'Peanuts', groupIndex: 1, groupName: 'Vegetables', searchType: 'startswith' },
{ value: 'Peas', text: 'Peas', groupIndex: 1, groupName: 'Vegetables', dataSearchType: '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 => { return fetcher('P', multiGroupListbox, undef, 1, 6).then(items => {
expect(items).toEqual([ expect(items).toEqual([
{ value: 'Peach', text: 'Peach', groupIndex: 0, groupName: 'Fruits', dataSearchType: 'startswith' }, { value: 'Peach', text: 'Peach', groupIndex: 0, groupName: 'Fruits', searchType: 'startswith' },
{ value: 'Pear', text: 'Pear', groupIndex: 0, groupName: 'Fruits', dataSearchType: 'startswith' }, { value: 'Pear', text: 'Pear', groupIndex: 0, groupName: 'Fruits', searchType: 'startswith' },
{ value: 'Physalis', text: 'Physalis', groupIndex: 0, groupName: 'Fruits', dataSearchType: 'startswith' }, { value: 'Physalis', text: 'Physalis', groupIndex: 0, groupName: 'Fruits', searchType: 'startswith' },
{ value: 'Pineapple', text: 'Pineapple', groupIndex: 0, groupName: 'Fruits', dataSearchType: 'startswith' }, { value: 'Pineapple', text: 'Pineapple', groupIndex: 0, groupName: 'Fruits', searchType: 'startswith' },
{ value: 'Parsnip', text: 'Parsnip', groupIndex: 1, groupName: 'Vegetables', dataSearchType: 'startswith' }, { value: 'Parsnip', text: 'Parsnip', groupIndex: 1, groupName: 'Vegetables', searchType: 'startswith' },
{ value: 'Peanuts', text: 'Peanuts', groupIndex: 1, groupName: 'Vegetables', dataSearchType: 'startswith' } { value: 'Peanuts', text: 'Peanuts', groupIndex: 1, groupName: 'Vegetables', searchType: 'startswith' }
]) ])
}) })
}) })
test('Returns results containing query', () => { test('Returns results containing query', () => {
multiGroupListbox[0].dataSearchType = 'contains' multiGroupListbox[0].searchType = 'contains'
multiGroupListbox[1].dataSearchType = 'contains' multiGroupListbox[1].searchType = 'contains'
return fetcher('Pe', multiGroupListbox, undef, 1, 6).then(items => { return fetcher('Pe', multiGroupListbox, undef, 1, 6).then(items => {
expect(items).toEqual([ expect(items).toEqual([
{ value: 'Bartlett pear', text: 'Bartlett pear', groupIndex: 0, groupName: 'Fruits', dataSearchType: 'contains' }, { value: 'Bartlett pear', text: 'Bartlett pear', groupIndex: 0, groupName: 'Fruits', searchType: 'contains' },
{ value: 'Cantaloupe', text: 'Cantaloupe', groupIndex: 0, groupName: 'Fruits', dataSearchType: 'contains' }, { value: 'Cantaloupe', text: 'Cantaloupe', groupIndex: 0, groupName: 'Fruits', searchType: 'contains' },
{ value: 'Grape', text: 'Grape', groupIndex: 0, groupName: 'Fruits', dataSearchType: 'contains' }, { value: 'Grape', text: 'Grape', groupIndex: 0, groupName: 'Fruits', searchType: 'contains' },
{ value: 'Bell Pepper', text: 'Bell Pepper', groupIndex: 1, groupName: 'Vegetables', dataSearchType: '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', dataSearchType: 'contains' }, { value: 'Black-Eyed Peas', text: 'Black-Eyed Peas', groupIndex: 1, groupName: 'Vegetables', searchType: 'contains' },
{ value: 'Chickpeas', text: 'Chickpeas', groupIndex: 1, groupName: 'Vegetables', dataSearchType: 'contains' } { value: 'Chickpeas', text: 'Chickpeas', groupIndex: 1, groupName: 'Vegetables', searchType: 'contains' }
]) ])
}) })
}) })

4
src/lib/components/item.jsx
View File

@@ -14,7 +14,7 @@ export default function Item(props) {
const { customStyles, highlighted, query } = state const { customStyles, highlighted, query } = state
const ItemContents = state.props.ItemContents const ItemContents = state.props.ItemContents
const globalMatch = item.dataSearchType === 'contains' const globalMatch = item.searchType === 'contains'
const isHighlighted = highlighted && index === highlighted.index const isHighlighted = highlighted && index === highlighted.index
const divClassName = () => { const divClassName = () => {
@@ -44,7 +44,7 @@ export default function Item(props) {
index={index} index={index}
item={item.value} item={item.value}
query={query} query={query}
searchType={item.dataSearchType} searchType={item.searchType}
totalItems={state.items.length} totalItems={state.items.length}
/> />
: (state.props.matchText : (state.props.matchText

6
src/lib/index.jsx
View File

@@ -39,7 +39,7 @@ export default function Turnstone(props) {
// Prop validation // // Prop validation //
////////////////////////////////////////////////////// //////////////////////////////////////////////////////
const dataSearchTypes = ['startswith', 'contains'] const searchTypes = ['startswith', 'contains']
const listboxRules = PropTypes.oneOfType([ const listboxRules = PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.exact({ PropTypes.arrayOf(PropTypes.exact({
@@ -47,7 +47,7 @@ const listboxRules = PropTypes.oneOfType([
PropTypes.func, PropTypes.func,
PropTypes.array PropTypes.array
]).isRequired, ]).isRequired,
dataSearchType: PropTypes.oneOf(dataSearchTypes), searchType: PropTypes.oneOf(searchTypes),
displayField: PropTypes.string, displayField: PropTypes.string,
name: PropTypes.string.isRequired, name: PropTypes.string.isRequired,
ratio: PropTypes.number ratio: PropTypes.number
@@ -57,7 +57,7 @@ const listboxRules = PropTypes.oneOfType([
PropTypes.func, PropTypes.func,
PropTypes.array PropTypes.array
]).isRequired, ]).isRequired,
dataSearchType: PropTypes.oneOf(dataSearchTypes), searchType: PropTypes.oneOf(searchTypes),
displayField: PropTypes.string displayField: PropTypes.string
}) })
]) ])

2
src/lib/index.test.jsx
View File

@@ -8,7 +8,7 @@ vi.mock('./components/container', () => ({ default: () => 'Container' }))
const listbox = { const listbox = {
data: ['foo', 'bar', 'foobar'], data: ['foo', 'bar', 'foobar'],
dataSearchType: 'startswith' searchType: 'startswith'
} }
const component = renderer.create( const component = renderer.create(