2.19.11 • Published 6 years ago
evergreen-combobox v2.19.11
Combobox
This package implements a Combobox
component. This component combines a Autocomplete
component with a TextInput
and a Button
.
Example
Key points
- Uses a
Autocomplete
component - Clicking the button will show all items
- Typing text will filter the list
Usage
<Combobox items={items} onChange={handleChange} />
Prop types and default props
static propTypes = {
...Box.propTypes,
items: PropTypes.array.isRequired,
selectedItem: PropTypes.any,
defaultSelectedItem: PropTypes.any,
itemToString: PropTypes.func,
width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
height: PropTypes.number,
onChange: PropTypes.func,
inputProps: PropTypes.object,
buttonProps: PropTypes.object,
openOnFocus: PropTypes.bool,
autocompleteProps: PropTypes.object,
}
static defaultProps = {
openOnFocus: false,
width: 224
}
Complete Story
import { storiesOf } from '@storybook/react'
import React from 'react'
import Box from 'ui-box'
import starWarsNames from 'starwars-names'
import { Combobox } 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('combobox', module).add('Combobox', () => (
<Box padding={40}>
{(() => {
document.body.style.margin = '0'
document.body.style.height = '100vh'
})()}
<Combobox items={items} onChange={handleChange} />
</Box>
))
2.19.11
6 years ago
2.19.10
6 years ago
2.19.8
6 years ago
2.19.7
6 years ago
2.19.6
6 years ago
2.19.4
6 years ago
2.19.3
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
7 years ago
2.18.10
7 years ago
2.18.8
7 years ago
2.18.7
7 years ago
2.18.6
7 years ago
2.18.5
7 years ago
2.18.4
7 years ago
2.18.1
7 years ago
2.18.0
7 years ago
2.17.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