import { useState } from 'react'
import { $root } from 'startupjs'
import { Sandbox } from '@startupjs/docs'
import Br from '../../Br'
import Div from '../../Div'
import Multiselect from './'
import Span from '../../typography/Span'

# Multiselect (множественный выбор)

Multiselect позволяет пользователю выбирать несколько элементов из списка

```jsx
import { Multiselect } from '@startupjs/ui'
```

## Инициализация

Перед использованием нужно настроить [Portal](/docs/components/Portal)

## Простой пример

```jsx example
const OPTIONS = [
  { label: 'New York', value: 'ny' },
  { label: 'Los Angeles', value: 'la' },
  { label: 'Tokyo', value: 'tk' },
]

const [cities, setCities] = useState([])

return (
  <Multiselect
    value={cities}
    onChange={setCities}
    options={OPTIONS}
  />
)
```

## Опции

Вы можете добавить в опции массив объектов ```{ label, value }``` или примитивов

```jsx example
const OBJECT_OPTIONS_EXAMPLE = [
  { label: 'New York', value: 'ny' },
  { label: 'Los Angeles', value: 'la' },
]
const PRIMITIVIES_OPTIONS_EXAMPLE = [
  'New York',
  'Los Angeles',
]

const [cities, setCities] = useState([])
const [citiesArray, setCitiesArray] = useState([])

return (
  <>
    <Multiselect
      value={cities}
      onChange={setCities}
      options={OBJECT_OPTIONS_EXAMPLE}
    />
    <Br />
    <Multiselect
      value={citiesArray}
      onChange={setCitiesArray}
      options={PRIMITIVIES_OPTIONS_EXAMPLE}
    />
  </>
)
```

## Disabled

```jsx example
const OPTIONS = [
  { label: 'New York', value: 'ny' },
  { label: 'Los Angeles', value: 'la' },
  { label: 'Tokyo', value: 'tk' },
]
const [cities, setCities] = useState(['ny'])

return (
  <Multiselect
    disabled
    value={cities}
    onChange={setCities}
    options={OPTIONS}
  />
)
```

## Readonly

```jsx example
const OPTIONS = [
  { label: 'New York', value: 'ny' },
  { label: 'Los Angeles', value: 'la' },
  { label: 'Tokyo', value: 'tk' },
]
const [cities, setCities] = useState(['ny'])

return (
  <Multiselect
    readonly
    value={cities}
    onChange={setCities}
    options={OPTIONS}
  />
)
```

## Tag Component

Вы можете добавить собственный тег

```jsx example
const OPTIONS = [
  { label: 'New York', value: 'ny' },
  { label: 'Los Angeles', value: 'la' },
  { label: 'Tokyo', value: 'tk' },
]

const [cities, setCities] = useState([])

return (
  <Multiselect
    value={cities}
    TagComponent={({ record }) => <Span>✔ {record.label} &nbsp;&nbsp;&nbsp;&nbsp;</Span>}
    onChange={setCities}
    options={OPTIONS}
  />
)
```

## Input Component

Вы можете добавить собственный input

```jsx example
const OPTIONS = [
  { label: 'New York', value: 'ny' },
  { label: 'Los Angeles', value: 'la' },
  { label: 'Tokyo', value: 'tk' },
]

const [cities, setCities] = useState([])

return (
  <Multiselect
    value={cities}
    InputComponent={
      ({ children, onOpen }) => {
        return (
          <Div
            onPress={onOpen}
            style={{
              border: '1px dotted green',
              padding: 8
            }}
          >
            {children}
          </Div>
        )
      }
    }
    TagComponent={({ record }) => <Span>✔ {record.label} &nbsp;&nbsp;&nbsp;&nbsp;</Span>}
    onChange={setCities}
    options={OPTIONS}
  />
)
```

## Tag limit

Вы можете ограничить количество отображаемых тегов передав `tagLimit={число}`.

```jsx example
const OPTIONS = [
  { label: 'New York', value: 'ny' },
  { label: 'Los Angeles', value: 'la' },
  { label: 'Tokyo', value: 'tk' },
]

const [cities, setCities] = useState([])

return (
  <Multiselect
    tagLimit={2}
    value={cities}
    onChange={setCities}
    options={OPTIONS}
  />
)
```

## Ограничить количество выбранных тегов

Вы можете ограничить количество выбранных тегов, передав `maxTagCount={число}`.

```jsx example
const OPTIONS = [
  { label: 'New York', value: 'ny' },
  { label: 'Los Angeles', value: 'la' },
  { label: 'Tokyo', value: 'tk' },
]

const [cities, setCities] = useState([])

return (
  <Multiselect
    maxTagCount={2}
    value={cities}
    onChange={setCities}
    options={OPTIONS}
  />
)
```

## Sandbox

<Sandbox
  Component={Multiselect}
  props={{
    value: ['New York'],
    options: ['New York', 'Los Angeles','Tokyo'],
    onChange: value => console.info('New value is ' + JSON.stringify(value)),
    onSelect: value => console.info('Value "' + value + '" is selected'),
    onRemove: value => console.info('Value "' + value + '" is removed'),
  }}
  block
/>