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

TextInput lets user enter or edit text.

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

## Simple example

```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
  />
)
```

## Sizes

Size can be modified using the `size` prop. Default size is `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>
)
```

## Icons

Icon can be added using `icon` and `secondaryIcon` properties. Position of icon can be changed by passing `iconPosition` to component (`left` by default). The `secondaryIcon` uses opposite position of `iconPosition`. To handle clicks on the icon, use the property `onIconPress` and `onSecondaryIconPress`. To change icon color use the ʻiconStyleName` and `secondaryIconStyleName` properties.

In `.styl` file
```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>
)
```

## Number of lines

Pass `numberOfLines={number}` to set the number of lines.

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

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

## Dynamic number of lines

Pass `resize=true` to dynamically change number of lines according to content.

```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
/>