@integec/common-react-screens/stories/dropdown.stories.js

import React from 'react'
import { storiesOf } from '@storybook/react'
import { action } from '@storybook/addon-actions'
import styled from 'styled-components'
import Chance from 'chance'
import MenuDropdown from '../src/dropdown/MenuDropdown'
import VirtualizedDropdown from '../src/dropdown/VirtualizedDropdown'

const chance = new Chance()

const options = [
  { text: 'Option 1', value: '1' },
  { text: 'Long Option 2', value: '2' },
  { text: 'Option 3', value: '3' },
  { text: 'Long Long Option 4', value: '4' },
  { text: 'Option 5', value: '5' },
]

const manyOptions = chance
  .unique(() => chance.word({ syllables: 4 }), 10000)
  .map((text, value) => ({ value, text }))

const MenuBar = styled.div`
  background-color: #eee;
  height: 4em;
  padding: 0.5em 1em;
`

storiesOf('Dropdowns', module)
  .add('Right Menu', () => (
    <MenuBar>
      <MenuDropdown
        style={{ float: 'right' }}
        options={options}
        onOptionSelected={action('selected option:')}
        buttonProps={{ basic: true, text: 'C Actions', primary: true }}
      />
    </MenuBar>
  ))
  .add('Left Menu', () => (
    <MenuBar>
      <MenuDropdown
        options={options}
        onOptionSelected={action('selected option:')}
        popperPlacement="bottom-start"
      />
    </MenuBar>
  ))
  .add('VirtualizedDropdown', () => (
    <VirtualizedDropdown options={manyOptions} onChange={action('selected item:')} />
  ))