2.19.9 • Published 6 years ago
evergreen-autocomplete v2.19.9
Autocomplete
This package implements a Autocomplete
component. This component only deals with rendering the list, not the actual input element.
Example
Key points
- Uses Downshift for autocomplete
- Uses react-tiny-virtual-list for performant list rendering
- Uses fuzzaldrin-plus for fuzzy filtering
- Uses
evergreen-popover
for the popover
Usage
<Autocomplete onChange={handleChange} items={items}>
{({ key, getInputProps, getRef }) => (
<TextInput key={key} innerRef={ref => getRef(ref)} {...getInputProps()} />
)}
</Autocomplete>
Prop types and default props
static propTypes = {
items: PropTypes.array.isRequired,
selectedItem: PropTypes.any,
defaultSelectedItem: PropTypes.any,
children: PropTypes.func.isRequired,
itemSize: PropTypes.number,
renderItem: PropTypes.func,
itemsFilter: PropTypes.func,
isFilterDisabled: PropTypes.bool,
popoverMinWidth: PropTypes.number,
popoverMaxHeight: PropTypes.number,
useSmartPositioning: PropTypes.bool,
...Downshift.propTypes,
}
static defaultProps = {
itemToString: i => (i == null ? '' : String(i)),
itemSize: 32,
itemsFilter: fuzzyFilter,
isFilterDisabled: false,
popoverMinWidth: 200,
popoverMaxHeight: 240,
useSmartPositioning: false,
renderItem: autocompleteItemRenderer,
}
Complete Story
import { storiesOf } from '@storybook/react'
import React from 'react'
import Box from 'ui-box'
import starWarsNames from 'starwars-names'
import { TextInput } from 'evergreen-text-input'
import { Autocomplete } from '../src/'
// Generate a big list of items
const items = [
...starWarsNames.all,
...starWarsNames.all.map(x => `${x} 2`),
...starWarsNames.all.map(x => `${x} 3`)
].sort((a, b) => {
const nameA = a.toUpperCase()
const nameB = b.toUpperCase()
if (nameA < nameB) {
return -1
}
if (nameA > nameB) {
return 1
}
return 0
})
const handleChange = selectedItem => {
console.log(selectedItem)
}
storiesOf('autocomplete', module).add('Autocomplete', () => (
<Box padding={40}>
{(() => {
document.body.style.margin = '0'
document.body.style.height = '100vh'
})()}
<Autocomplete onChange={handleChange} items={items}>
{({ key, getInputProps, getRef }) => (
<TextInput
key={key}
innerRef={ref => getRef(ref)}
{...getInputProps()}
/>
)}
</Autocomplete>
</Box>
))
2.19.9
6 years ago
2.19.8
6 years ago
2.19.6
6 years ago
2.19.5
6 years ago
2.19.4
6 years ago
2.19.2
6 years ago
2.19.1
6 years ago
2.19.0
6 years ago
2.18.20
6 years ago
2.18.18
6 years ago
2.18.14
6 years ago
2.18.13
6 years ago
2.18.12
6 years ago
2.18.10
6 years ago
2.18.6
6 years ago
2.18.5
6 years ago
2.18.4
6 years ago
2.18.1
7 years ago
2.18.0
7 years ago
2.16.0
7 years ago
2.14.0
7 years ago
2.13.0
7 years ago
2.11.1
7 years ago
2.11.0
7 years ago
2.10.0
7 years ago
2.9.1
7 years ago
2.9.0
7 years ago
2.8.0
7 years ago
2.7.0
7 years ago
2.6.0
7 years ago
2.5.0
7 years ago
2.4.1
7 years ago
2.4.0
7 years ago
2.3.0
7 years ago