@eureca/eureca-ui/src/components/Inputs/stories/combo-box.stories.mdx

UI component library of Eureca's user and admin apps

import {
  Meta,
  Story,
  Preview,
  Title,
  Subtitle,
  Description,
  Props,
} from '@storybook/addon-docs/blocks';
import { withKnobs } from '@storybook/addon-knobs';
import { Box, ThemeProvider } from '@material-ui/core';
import Autocomplete from '@material-ui/lab/Autocomplete';

import MuiTheme from '../../../theme/mui';

import { Checkbox } from '../../Checkbox';
import { Flex } from '../../Flex';
import { TextInput } from '../';
import { ComboBoxComponent } from './text-input.stories.js';

<Meta title='Material/Inputs' component={TextInput} decorators={[withKnobs]}/>

<Title>Combo Box Input</Title>

<Description>
  Input de seleção e busca dos aplicativos Eureca, extendido do `TextField` e `Autocomplete` do `Material-UI`.
</Description>
<Description>
  Contém todas as props definidas no [Material-UI](https://material-ui.com/components/text-fields/#text-field) e tem estilo definido pelo tema desta biblioteca.
</Description>

<Preview>
  <Story name="Combo Box">
    <ComboBoxComponent />
  </Story>
</Preview>

<Subtitle>Props</Subtitle>

|   Nome  |            Descrição            |   Default   |
|:-------:|:-------------------------------:|:-----------:|
| name | Nome do input do Material-UI <br /> string | - |
| label | Label input do Material-UI <br /> string | - |
| helperText | Texto localizado na parte inferior do input do Material-UI <br /> string | - |
| value | Valor do input do Material-UI <br /> string \| number | - |
| onChange | Função de onChange do input do Material-UI <br /> func| - |
| props | Todas as props aceitas pelo TextField do Material-UI <br /> | - |

<Subtitle>Tamanhos</Subtitle>

<Preview>
  <ThemeProvider theme={MuiTheme}>
    <Autocomplete
      id="combo-box"
      multiple={true}
      disableCloseOnSelect
      options={[
        {
          id: 0,
          name: 'Option 1',
        },
        {
          id: 1,
          name: 'Option 2',
        },
        {
          id: 2,
          name: 'Option 3',
        },
      ]}
      getOptionLabel={option => option.name}
      renderInput={params => (
        <TextInput
          {...params}
          size='small'
          name='combo-box'
          label="Small"
          margin="normal"
          onChange={() => {}}
        />
      )}
    />
    <Box width={300} mt={3}>
      <Autocomplete
        id="combo-box"
        multiple={true}
        disableCloseOnSelect
        options={[
          {
            id: 0,
            name: 'Option 1',
          },
          {
            id: 1,
            name: 'Option 2',
          },
          {
            id: 2,
            name: 'Option 3',
          },
        ]}
        getOptionLabel={option => option.name}
        renderInput={params => (
          <TextInput
            {...params}
            name='combo-box'
            label="Largura Definida"
            margin="normal"
            onChange={() => {}}
          />
        )}
      />
    </Box>
  </ThemeProvider>
</Preview>

<Subtitle>Variações</Subtitle>

<Preview>
  <ThemeProvider theme={MuiTheme}>
    <Autocomplete
      id="combo-box"
      multiple={true}
      disableCloseOnSelect
      options={[
        {
          id: 0,
          name: 'Option 1',
        },
        {
          id: 1,
          name: 'Option 2',
        },
        {
          id: 2,
          name: 'Option 3',
        },
      ]}
      getOptionLabel={option => option.name}
      renderInput={params => (
        <TextInput
          {...params}
          variant='filled'
          name='combo-box'
          label="Filled"
          margin="normal"
          onChange={() => {}}
        />
      )}
    />
    <Autocomplete
      id="combo-box"
      multiple={true}
      disableCloseOnSelect
      options={[
        {
          id: 0,
          name: 'Option 1',
        },
        {
          id: 1,
          name: 'Option 2',
        },
        {
          id: 2,
          name: 'Option 3',
        },
      ]}
      getOptionLabel={option => option.name}
      renderInput={params => (
        <TextInput
          {...params}
          variant='outlined'
          name='combo-box'
          label="Outlined"
          margin="normal"
          onChange={() => {}}
        />
      )}
    />
    <Autocomplete
      id="combo-box"
      multiple={true}
      disableCloseOnSelect
      options={[
        {
          id: 0,
          name: 'Option 1',
        },
        {
          id: 1,
          name: 'Option 2',
        },
        {
          id: 2,
          name: 'Option 3',
        },
      ]}
      getOptionLabel={option => option.name}
      renderInput={params => (
        <TextInput
          {...params}
          variant='standard'
          name='combo-box'
          label="Standard"
          margin="normal"
          onChange={() => {}}
        />
      )}
    />
  </ThemeProvider>
</Preview>

<Subtitle>Exemplo de Aplicação</Subtitle>

```jsx
<Autocomplete
  id="combo-box"
  multiple={true}
  disableCloseOnSelect
  options={optionsArray}
  getOptionLabel={option => option.name}
  renderInput={params => (
    <TextInput
      {...params}
      variant='standard'
      name='combo-box'
      label="Standard"
      margin="normal"
      onChange={handleChange}
    />
  )}
/>
```