import { useState } from 'react'
import TextInput from '../TextInput'
import Div from '../../Div'
import Br from '../../Br'
import { faSearch, faTimesCircle } from '@fortawesome/free-solid-svg-icons'
import { Sandbox } from '@startupjs/docs'
import './index.mdx.styl'

# TextInput (текстовое поле)

Текстовое поле позволяет пользователю вводить или редактировать текст.

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

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

```jsx example
const [value, setValue] = useState()
return (
  <TextInput
    placeholder='TextInput'
    value={value}
    onChangeText={setValue}
  />
)
```

## Disabled

```jsx example
return (
  <TextInput
    disabled
    value='disabled'
  />
)
```

## Readonly

```jsx example
return (
  <TextInput
    value='readonly'
    readonly
  />
)
```

## Размеры

Размер может быть изменен с помощью свойства `size`. Размер по умолчанию - `m`.

```jsx example
const [valueL, setValueL] = useState()
const [valueM, setValueM] = useState()
const [valueS, setValueS] = useState()
return (
  <Div>
    <TextInput
      size='s'
      value={valueS}
      onChangeText={setValueS}
    />
    <Br />
    <TextInput
      size='m'
      value={valueM}
      onChangeText={setValueM}
    />
    <Br />
    <TextInput
      size='l'
      value={valueL}
      onChangeText={setValueL}
    />
  </Div>
)
```

## Иконки

Иконка может быть добавлена используя `icon` и `secondaryIcon` свойства. Положение иконки можно изменить, передав в компонент `iconPosition` (`left` по умолчанию). `secondaryIcon` использует противоположное положение `iconPosition`. Для обработки нажатий на иконке используйте свойство `onIconPress` и `onSecondaryIconPress`. Чтобы изменить цвет иконки используйте `iconStyleName` и `secondaryIconStyleName` свойства.

В `.styl` файле
```stylus
.icon
  color: $UI.colors.primary
```

```jsx example
const [valueLeft, setLeftValue] = useState()
const [valueRight, setRightValue] = useState()
return (
  <Div>
    <TextInput
      icon={faSearch}
      secondaryIcon={faTimesCircle}
      secondaryIconStyleName='icon'
      value={valueLeft}
      onChangeText={setLeftValue}
      onSecondaryIconPress={() => setLeftValue()}
    />
    <Br />
    <TextInput
      icon={faTimesCircle}
      iconPosition='right'
      value={valueRight}
      onChangeText={setRightValue}
      onIconPress={() => setRightValue()}
    />
  </Div>
)
```

## Количество строк

Передайте `numberOfLines={number}`, чтобы задать количество строк.

```jsx example
const [value, setValue] = useState()

return (
  <TextInput
    placeholder='write here'
    value={value}
    numberOfLines={4}
    onChangeText={setValue}
  />
)
```

## Dynamic number of lines

Передайте `resize=true`, чтобы количество строк изменялось динамически в соответствии с содержимым.

```jsx example
const [value, setValue] = useState()

return (
  <TextInput
    placeholder='write here'
    value={value}
    resize
    onChangeText={setValue}
  />
)
```


## Sandbox

<Sandbox
  Component={TextInput}
  extraParams={{
    icon: { showIconSelect: true },
    secondaryIcon: { showIconSelect: true }
  }}
  props={{
    onIconPress: () => alert('"onIconPress" event on "TextInput" component'),
  }}
  block
/>