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