wix-style-react/src/AutoComplete/docs/AutoComplete.demo.js

wix-style-react

import React from 'react';
import { StorybookComponents } from 'wix-storybook-utils/StorybookComponents';
import AutoComplete from '..';

export default () => {
  const [value, setValue] = React.useState('');

  const options = [
    { id: 0, value: 'Carmel Lloyd' },
    { id: 1, value: 'Gracie-May Marsden' },
    { id: 2, value: 'Keisha Decker' },
    { id: 3, value: 'Ruairidh Fitzgerald' },
    { id: 4, value: 'Sheldon Chavez' },
  ];

  return (
    <StorybookComponents.Stack flexDirection="column" width="50%">
      <AutoComplete
        options={options}
        value={value}
        onChange={event => setValue(event.target.value)}
        onSelect={option => setValue(option.value)}
        placeholder={'Assign staff member'}
        emptyStateMessage={`Couldn't find: ${value}`}
        predicate={option =>
          option.value.toLowerCase().indexOf(value.toLowerCase()) !== -1
        }
        popoverProps={{
          appendTo: 'window',
        }}
      />
    </StorybookComponents.Stack>
  );
};