Loëck Vézien
7 years ago
committed by
GitHub
GitHub
8 changed files with 369 additions and 6 deletions
@ -0,0 +1,128 @@ |
|||||
|
// @flow
|
||||
|
|
||||
|
import React, { PureComponent, Fragment, createElement } from 'react' |
||||
|
import Fuse from 'fuse.js' |
||||
|
|
||||
|
import type { Element } from 'react' |
||||
|
import type FuseType from 'fuse.js' |
||||
|
|
||||
|
// eslint false positive detection on unused prop-type
|
||||
|
type Props = { |
||||
|
items: Array<Object>, // eslint-disable-line react/no-unused-prop-types
|
||||
|
value: string, |
||||
|
render: Function, |
||||
|
highlight?: boolean, |
||||
|
renderHighlight?: (string, string) => Element<*>, // eslint-disable-line react/no-unused-prop-types
|
||||
|
fuseOptions?: Object, // eslint-disable-line react/no-unused-prop-types
|
||||
|
|
||||
|
// if true, it will display no items when value is empty
|
||||
|
filterEmpty?: boolean, |
||||
|
} |
||||
|
|
||||
|
type State = { |
||||
|
results: Array<Object>, |
||||
|
} |
||||
|
|
||||
|
class Search extends PureComponent<Props, State> { |
||||
|
static defaultProps = { |
||||
|
fuseOptions: {}, |
||||
|
highlight: false, |
||||
|
filterEmpty: false, |
||||
|
renderHighlight: (chunk: string): * => <b>{chunk}</b>, |
||||
|
} |
||||
|
|
||||
|
state = { |
||||
|
results: [], |
||||
|
} |
||||
|
|
||||
|
componentWillMount() { |
||||
|
this.initFuse(this.props) |
||||
|
} |
||||
|
|
||||
|
componentWillReceiveProps(nextProps: Props) { |
||||
|
if (nextProps.value !== this.props.value) { |
||||
|
if (this._fuse) { |
||||
|
this.formatResults(this._fuse.search(nextProps.value), nextProps) |
||||
|
} |
||||
|
} |
||||
|
if (nextProps.highlight !== this.props.highlight) { |
||||
|
this.initFuse(nextProps) |
||||
|
} |
||||
|
if (nextProps.items !== this.props.items) { |
||||
|
this.initFuse(nextProps) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
_fuse: FuseType<*> | null = null |
||||
|
|
||||
|
initFuse(props: Props) { |
||||
|
const { fuseOptions, highlight, items, value } = props |
||||
|
|
||||
|
this._fuse = new Fuse(items, { |
||||
|
...fuseOptions, |
||||
|
includeMatches: highlight, |
||||
|
}) |
||||
|
|
||||
|
this.formatResults(this._fuse.search(value), props) |
||||
|
} |
||||
|
|
||||
|
formatResults(results: Array<Object>, props: Props) { |
||||
|
const { highlight, renderHighlight } = props |
||||
|
if (highlight) { |
||||
|
results = results.map(res => { |
||||
|
let { item } = res |
||||
|
const { matches } = res |
||||
|
|
||||
|
matches.forEach(match => { |
||||
|
const { key, value, indices } = match |
||||
|
let i = 0 |
||||
|
const res = [] |
||||
|
|
||||
|
indices.forEach(idx => { |
||||
|
const [start, end] = idx |
||||
|
|
||||
|
const prefix = value.substring(i, start) |
||||
|
if (prefix.length > 0) { |
||||
|
res.push(prefix) |
||||
|
} |
||||
|
|
||||
|
const v = value.substring(start, end + 1) |
||||
|
if (v && renderHighlight) { |
||||
|
res.push(renderHighlight(v, `${key}-${idx.join(',')}`)) |
||||
|
} |
||||
|
|
||||
|
i = end + 1 |
||||
|
}) |
||||
|
|
||||
|
const suffix = value.substring(indices[indices.length - 1][1] + 1) |
||||
|
if (suffix.length > 0) { |
||||
|
res.push(suffix) |
||||
|
} |
||||
|
|
||||
|
const fragment = createElement(Fragment, { |
||||
|
key: item[key], |
||||
|
children: res, |
||||
|
}) |
||||
|
|
||||
|
item = { |
||||
|
...item, |
||||
|
[`${key}_highlight`]: fragment, |
||||
|
} |
||||
|
}) |
||||
|
return item |
||||
|
}) |
||||
|
} |
||||
|
this.setState({ results }) |
||||
|
} |
||||
|
|
||||
|
render() { |
||||
|
const { render, value, items, filterEmpty } = this.props |
||||
|
const { results } = this.state |
||||
|
if (!filterEmpty && value === '') { |
||||
|
return render(items) |
||||
|
} |
||||
|
return render(results) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export default Search |
||||
@ -0,0 +1,77 @@ |
|||||
|
import React from 'react' |
||||
|
import PropTypes from 'prop-types' |
||||
|
import { storiesOf } from '@storybook/react' |
||||
|
import { text, boolean } from '@storybook/addon-knobs' |
||||
|
|
||||
|
import Search from 'components/base/Search' |
||||
|
|
||||
|
const stories = storiesOf('Search', module) |
||||
|
|
||||
|
const items = [ |
||||
|
{ key: 'aleksandr-grichtchouk', name: 'Aleksandr Grichtchouk' }, |
||||
|
{ key: 'fabiano-caruana', name: 'Fabiano Caruana' }, |
||||
|
{ key: 'garry-kasparov', name: 'Garry Kasparov' }, |
||||
|
{ key: 'hikaru-nakamura', name: 'Hikaru Nakamura' }, |
||||
|
{ key: 'levon-aronian', name: 'Levon Aronian' }, |
||||
|
{ key: 'magnus-carlsen', name: 'Magnus Carlsen' }, |
||||
|
{ key: 'maxime-vachier-lagrave', name: 'Maxime Vachier-Lagrave' }, |
||||
|
{ key: 'shakhriyar-mamedyarov', name: 'Shakhriyar Mamedyarov' }, |
||||
|
{ key: 'veselin-topalov', name: 'Veselin Topalov' }, |
||||
|
{ key: 'viswanathan-anand', name: 'Viswanathan Anand' }, |
||||
|
{ key: 'vladimir-kramnik', name: 'Vladimir Kramnik' }, |
||||
|
] |
||||
|
|
||||
|
const Wrapper = ({ children }) => ( |
||||
|
<div> |
||||
|
<div style={{ opacity: 0.2 }}>{'(Change the search value in knobs)'}</div> |
||||
|
{children} |
||||
|
</div> |
||||
|
) |
||||
|
|
||||
|
Wrapper.propTypes = { |
||||
|
children: PropTypes.any.isRequired, |
||||
|
} |
||||
|
|
||||
|
stories.add('basic', () => { |
||||
|
const value = text('value', '') |
||||
|
const filterEmpty = boolean('filterEmpty', false) |
||||
|
return ( |
||||
|
<Wrapper> |
||||
|
<Search |
||||
|
value={value} |
||||
|
items={items} |
||||
|
filterEmpty={filterEmpty} |
||||
|
fuseOptions={{ |
||||
|
keys: ['name'], |
||||
|
}} |
||||
|
render={items => items.map(item => <div key={item.name}>{item.name}</div>)} |
||||
|
/> |
||||
|
</Wrapper> |
||||
|
) |
||||
|
}) |
||||
|
|
||||
|
stories.add('highlight matches', () => { |
||||
|
const value = text('value', '') |
||||
|
const filterEmpty = boolean('filterEmpty', false) |
||||
|
return ( |
||||
|
<Wrapper> |
||||
|
<Search |
||||
|
value={value} |
||||
|
items={items} |
||||
|
filterEmpty={filterEmpty} |
||||
|
highlight |
||||
|
fuseOptions={{ |
||||
|
keys: ['name'], |
||||
|
}} |
||||
|
renderHighlight={(text, key) => ( |
||||
|
<b key={key} style={{ textDecoration: 'underline', color: 'red' }}> |
||||
|
{text} |
||||
|
</b> |
||||
|
)} |
||||
|
render={items => |
||||
|
items.map(item => <div key={item.key}>{item.name_highlight || item.name}</div>) |
||||
|
} |
||||
|
/> |
||||
|
</Wrapper> |
||||
|
) |
||||
|
}) |
||||
@ -0,0 +1,107 @@ |
|||||
|
// @flow
|
||||
|
|
||||
|
import React, { PureComponent } from 'react' |
||||
|
import Downshift from 'downshift' |
||||
|
import styled from 'styled-components' |
||||
|
|
||||
|
import type { Element } from 'react' |
||||
|
|
||||
|
import Box from 'components/base/Box' |
||||
|
import Input from 'components/base/Input' |
||||
|
import Search from 'components/base/Search' |
||||
|
|
||||
|
type Props = { |
||||
|
items: Array<Object>, |
||||
|
itemToString: Function, |
||||
|
onChange: Function, |
||||
|
fuseOptions?: Object, |
||||
|
highlight?: boolean, |
||||
|
renderHighlight?: string => Element<*>, |
||||
|
} |
||||
|
|
||||
|
const Container = styled(Box).attrs({ relative: true, color: 'steel' })`` |
||||
|
|
||||
|
const SearchInput = styled(Input)` |
||||
|
border-bottom-left-radius: ${p => (p.isOpen ? 0 : '')}; |
||||
|
border-bottom-right-radius: ${p => (p.isOpen ? 0 : '')}; |
||||
|
` |
||||
|
|
||||
|
const Item = styled(Box).attrs({ |
||||
|
p: 2, |
||||
|
})` |
||||
|
background: ${p => (p.highlighted ? p.theme.colors.cream : p.theme.colors.white)}; |
||||
|
` |
||||
|
|
||||
|
const ItemWrapper = styled(Box)` |
||||
|
& + & { |
||||
|
border-top: 1px solid ${p => p.theme.colors.mouse}; |
||||
|
} |
||||
|
` |
||||
|
|
||||
|
const Dropdown = styled(Box)` |
||||
|
position: absolute; |
||||
|
top: 100%; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
border: 1px solid ${p => p.theme.colors.mouse}; |
||||
|
border-top: none; |
||||
|
max-height: 300px; |
||||
|
overflow-y: auto; |
||||
|
border-bottom-left-radius: 3px; |
||||
|
border-bottom-right-radius: 3px; |
||||
|
box-shadow: rgba(0, 0, 0, 0.05) 0 2px 2px; |
||||
|
` |
||||
|
|
||||
|
class Select extends PureComponent<Props> { |
||||
|
render() { |
||||
|
const { items, itemToString, fuseOptions, highlight, renderHighlight, onChange } = this.props |
||||
|
return ( |
||||
|
<Downshift |
||||
|
itemToString={itemToString} |
||||
|
onChange={onChange} |
||||
|
render={({ |
||||
|
getInputProps, |
||||
|
getItemProps, |
||||
|
getRootProps, |
||||
|
isOpen, |
||||
|
inputValue, |
||||
|
highlightedIndex, |
||||
|
openMenu, |
||||
|
}) => ( |
||||
|
<Container {...getRootProps({ refKey: 'innerRef' })}> |
||||
|
<SearchInput |
||||
|
keepEvent |
||||
|
{...getInputProps({ placeholder: 'Chess?' })} |
||||
|
isOpen={isOpen} |
||||
|
onClick={openMenu} |
||||
|
/> |
||||
|
{isOpen && ( |
||||
|
<Search |
||||
|
value={inputValue} |
||||
|
items={items} |
||||
|
fuseOptions={fuseOptions} |
||||
|
highlight={highlight} |
||||
|
renderHighlight={renderHighlight} |
||||
|
render={items => |
||||
|
items.length ? ( |
||||
|
<Dropdown> |
||||
|
{items.map((item, i) => ( |
||||
|
<ItemWrapper key={item.key} {...getItemProps({ item })}> |
||||
|
<Item highlighted={i === highlightedIndex}> |
||||
|
<span>{item.name_highlight || item.name}</span> |
||||
|
</Item> |
||||
|
</ItemWrapper> |
||||
|
))} |
||||
|
</Dropdown> |
||||
|
) : null |
||||
|
} |
||||
|
/> |
||||
|
)} |
||||
|
</Container> |
||||
|
)} |
||||
|
/> |
||||
|
) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export default Select |
||||
@ -0,0 +1,35 @@ |
|||||
|
import React from 'react' |
||||
|
import { storiesOf } from '@storybook/react' |
||||
|
|
||||
|
import Select from 'components/base/Select' |
||||
|
import Text from 'components/base/Text' |
||||
|
|
||||
|
const stories = storiesOf('Select', module) |
||||
|
|
||||
|
const items = [ |
||||
|
{ key: 'aleksandr-grichtchouk', name: 'Aleksandr Grichtchouk' }, |
||||
|
{ key: 'fabiano-caruana', name: 'Fabiano Caruana' }, |
||||
|
{ key: 'garry-kasparov', name: 'Garry Kasparov' }, |
||||
|
{ key: 'hikaru-nakamura', name: 'Hikaru Nakamura' }, |
||||
|
{ key: 'levon-aronian', name: 'Levon Aronian' }, |
||||
|
{ key: 'magnus-carlsen', name: 'Magnus Carlsen' }, |
||||
|
{ key: 'maxime-vachier-lagrave', name: 'Maxime Vachier-Lagrave' }, |
||||
|
{ key: 'shakhriyar-mamedyarov', name: 'Shakhriyar Mamedyarov' }, |
||||
|
{ key: 'veselin-topalov', name: 'Veselin Topalov' }, |
||||
|
{ key: 'viswanathan-anand', name: 'Viswanathan Anand' }, |
||||
|
{ key: 'vladimir-kramnik', name: 'Vladimir Kramnik' }, |
||||
|
] |
||||
|
|
||||
|
stories.add('basic', () => ( |
||||
|
<Select |
||||
|
items={items} |
||||
|
highlight |
||||
|
fuseOptions={{ keys: ['name'] }} |
||||
|
itemToString={item => (item ? item.name : '')} |
||||
|
renderHighlight={(text, key) => ( |
||||
|
<Text key={key} fontWeight="bold"> |
||||
|
{text} |
||||
|
</Text> |
||||
|
)} |
||||
|
/> |
||||
|
)) |
||||
Loading…
Reference in new issue