New package combobox

[jeroenransijn]

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,
  width: PropTypes.oneOf(PropTypes.string, PropTypes.number),
  height: PropTypes.number,
  onChange: PropTypes.func,
  inputProps: PropTypes.objectOf(TextInput.propTypes),
  buttonProps: PropTypes.objectOf(Button.propTypes),
}

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 => {
  // eslint-disable-next-line no-console
  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>
))