evergreen-autocomplete

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>
))