diff --git a/examples/geo/App.jsx b/examples/geo/App.jsx index b7bcc45..cd8ba4e 100644 --- a/examples/geo/App.jsx +++ b/examples/geo/App.jsx @@ -7,7 +7,6 @@ import Item from './components/item/item' const maxItems = 10 const placeholder = 'Enter a city or airport' -const separator = ',' const noItemsMessage = 'We found no places that match your search' const listbox = [ @@ -70,7 +69,6 @@ const App = () => { onEnter={onEnter} onTab={onTab} placeholder={placeholder} - separator={separator} styles={autocompleteStyles} /> diff --git a/examples/geo/components/item/item.jsx b/examples/geo/components/item/item.jsx index 7678ae8..d52ea82 100644 --- a/examples/geo/components/item/item.jsx +++ b/examples/geo/components/item/item.jsx @@ -39,7 +39,7 @@ export default function Item(props) { globalSplit={false} caseSensitiveMatch={false} caseSensitiveSplit={false} - separator=", " + separator="," includeSeparator={includeSeparator} MatchComponent={MatchComponent} SplitComponent={SplitComponent}>{item.name} diff --git a/examples/geo/styles/autocomplete.module.css b/examples/geo/styles/autocomplete.module.css index 1a428c3..f56851a 100644 --- a/examples/geo/styles/autocomplete.module.css +++ b/examples/geo/styles/autocomplete.module.css @@ -69,17 +69,3 @@ background-color: #f0f0f0; } -/* Get rid */ -.topItem { - font-size: 18px; -} - -/* Get rid */ -.split:not(:first-child) { - font-size: 15px; -} - -.match { - font-weight: bold -} - diff --git a/src/App.jsx b/src/App.jsx index d60b7df..4b22b3c 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,32 +1,62 @@ import React from 'react' import Turnstone from './lib' -import { fruits } from './data' +import { fruits, vegetables } from './data' const styles = { highlightedItem: 'highlightedItem' } -const listbox = { +const listbox1 = { data: fruits, dataSearchType: 'startswith' } +const listbox2 = [ + { + data: fruits, + dataSearchType: 'startswith', + name: 'Fruits' + }, + { + data: vegetables, + dataSearchType: 'contains', + name: 'Vegetables' + } +] + const App = () => { return ( <> -   - +
+   + +           +   + +
) } diff --git a/src/lib/components/item.jsx b/src/lib/components/item.jsx index de8bc69..771a00a 100644 --- a/src/lib/components/item.jsx +++ b/src/lib/components/item.jsx @@ -2,7 +2,6 @@ import React, { useContext } from 'react' import defaultStyles from './styles/item.styles.js' import MatchingText from './matchingText' import { StateContext } from '../context/state' -import escapeStringRegExp from 'escape-string-regexp' import { setHighlighted, setSelected } from '../actions/actions' export default function Item(props) { @@ -13,20 +12,9 @@ export default function Item(props) { dispatch } = useContext(StateContext) - const { customStyles, highlighted, separator, query } = state + const { customStyles, highlighted, query } = state const CustomItem = state.props.itemComponent - - const startsWith = item.dataSearchType !== 'contains' - - const split = (str, separator) => { - if(!separator) return [str] - const regex = new RegExp(`(${escapeStringRegExp(separator)})`, 'g') - return str.split(regex).filter(part => part.length) - } - - const splitText = split(item.text, separator) - const splitQuery = split(query, separator) - + const globalMatch = item.dataSearchType === 'contains' const isHighlighted = highlighted && index === highlighted.index const divClassName = () => { @@ -49,11 +37,6 @@ export default function Item(props) { dispatch(setSelected(index)) } - const matchedText = splitText.map((part, index) => { - const match = startsWith ? (splitQuery[index] || '') : query - return - }) - const itemContents = (CustomItem) ? - : matchedText + : (state.props.matchText + ? + : <>{item.text}) return (
part.length) + const parts = match ? text.split(regex).filter(part => part.length) : [text] const matchingText = parts.map((part, index) => { const isMatch = part.toLowerCase() === match.toLowerCase() return (isMatch) - ? {parts[index]} + ? {parts[index]} : {parts[index]} }) - return {matchingText} + return <>{matchingText} } diff --git a/src/lib/context/state.jsx b/src/lib/context/state.jsx index 980011f..3822828 100644 --- a/src/lib/context/state.jsx +++ b/src/lib/context/state.jsx @@ -6,7 +6,7 @@ import undef from '../utils/undef' const StateContext = createContext() const StateContextProvider = (props) => { - const { separator, styles = {}, text = '', items = [] } = props + const { styles = {}, text = '', items = [] } = props const { children, ...propsMinusChildren} = props const [state, dispatch] = useReducer(reducer, { query: text, @@ -15,7 +15,6 @@ const StateContextProvider = (props) => { highlighted: undef, selected: undef, customStyles: styles, - separator, props: propsMinusChildren }) diff --git a/src/lib/index.jsx b/src/lib/index.jsx index 1b026e4..dcb9ee3 100644 --- a/src/lib/index.jsx +++ b/src/lib/index.jsx @@ -76,6 +76,7 @@ Turnstone.propTypes = { itemComponent: PropTypes.elementType, listbox: listboxRules.isRequired, listboxIsImmutable: PropTypes.bool, + matchText: PropTypes.bool, minQueryLength: (props) => { PropTypes.checkPropTypes( {minQueryLength: PropTypes.number}, @@ -95,7 +96,6 @@ Turnstone.propTypes = { onTab: PropTypes.func, placeholder: PropTypes.string, maxItems: PropTypes.number, - separator: PropTypes.string, styles: PropTypes.object, tabIndex: PropTypes.number, text: PropTypes.string