fergalmoran/turnstone
1
0
Fork 0
mirror of https://github.com/fergalmoran/turnstone.git synced 2025-12-22 09:49:56 +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
autoFocus={true}
data={fruits}
dataSearchType={'startswith'}
searchType={'startswith'}
debounceWait={0}
maxItems={10}
noItemsMessage={'No matching fruit found'}

4
examples/geo/App.jsx
View File

@@ -18,7 +18,7 @@ const listbox = [
data: (query) =>
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'
}
]

6
src/App.jsx
View File

@@ -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'
}
]

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

@@ -14,7 +14,7 @@ describe('Integration tests', () => {
render(<Turnstone
listbox={{
data: fruits,
dataSearchType: 'startswith'
searchType: 'startswith'
}}
placeholder={placeholder}
/>)
@@ -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(<Turnstone
listbox={{
data: fruits,
dataSearchType: 'startswith'
searchType: 'startswith'
}}
text={text}
/>)
@@ -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(<Turnstone
listbox={{
data: fruits,
dataSearchType: 'startswith'
searchType: 'startswith'
}}
placeholder={placeholder}
/>)

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

@@ -31,7 +31,7 @@ describe('Container', () => {
const props = {
autoFocus: true,
data: fruits,
dataSearchType: 'startswith',
searchType: 'startswith',
debounceWait: 0,
id: 'autocomplete',
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'
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
}))
]

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

@@ -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' }
])
})
})

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

@@ -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

6
src/lib/index.jsx
View File

@@ -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
})
])

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

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