@lad-tech/mobydick-core/src/inputs/README.md

React Native components library focused on usability, accessibility and developer experience

# @lad-tech/mobydick-core/inputs

Эксперт по разделу: @smirnovas

---

## Общая информация

Существуют четыре раздела:
* input
* dropdown
* search
* verification

Ниже представлены их описания.

### DropDown

**Важно.** Процентные стили не поддерживаются.

1. Горизонтальная верстка пока не поддерживается, но можно кастомизировать пропсами.
2. Лучше выбирать либо `TextStyle` либо `TextFont`.
3. Для `FlatList` ширина берется от кнопки стандартно, можно передать свою.
4. Массив элементов(`ListItem`): лучше передать массив объектов ввида `{label: string; value: string | number}`, либо передать массив строк на свой страх и риск, который преобразуется в вид `{label: string; value: string}`.
5. Если в DropDown передать `selectedItem`, которого нет в `list`, то отобразится `placeholder`.
6. В вычислениях отступа сверху у Android не учитывается высота статус бара, из-за этого в эмуляторах некорректное отображение отступа.

#### **Props**

|Prop|Тип|Обязательность|Описание|
|---------------|-----------------|---------------|----------------|
|`title`| `string` |необязательный|текст в заголовке над DropDown|
|`rightIcon`|`ReactElement`|необязательный|иконка для DropDown|
|`placeholder`|`string`|обязательный|дефолтный текст в DropDown|
|`list`|`ListItem`|обязательный|массив элементов для списка DropDown|
|`selectedItem`|`string`/`number`|необязательный|текущий выбранный элемент для окраски его в DropDown. Надо, чтобы это были уникальные id一шники|
|`navBarHeight`|`number`|необязательный|высота навигационного бара для правильной позиции, чтобы DropDown не заезжал под навигацию|
|`buttonStyle`|`ViewStyle`|необязательный|кастомный стиль для кнопки. Если передать только его, `item` в списке будут считать высоту по "высота кнопки * 0.8"|
|`flatListStyle`|`ViewStyle`|необязательный|кастомный стиль для вьюшки `FlatList`. Стандартно ширина берется от кнопки, высота высчитывается в функции|
|`flatListItemStyle`|`ViewStyle`|необязательный|кастомный стиль для RenderItem у `FlatList`|
|`titleStyle`|`TextStyle`|необязательный|кастомный стиль для `label`, рекомендуется не использовать отступы|
|`titleFont`|`TypographyProp`|необязательный|кастомный шрифт из дизайн системы для `label`|
|`buttonTextStyle`|`TextStyle`|необязательный|кастомный стиль текста для кнопки с дефолтным `Placeholder`|
|`buttonTextStyleChosen`|`TextStyle`|необязательный|кастомный стиль текста для кнопки с выбранным элементом 一 `selectedItem`|
|`buttonTextFont`|`TypographyProp`|необязательный|кастомный шрифт для текста кнопки с дефолтным `Placeholder`|
|`buttonTextFontChosen`|`TypographyProp`|необязательный|кастомный шрифт для текста кнопки при выбранном элементе 一 `selectedItem`|
|`flatListTextStyle`|`TextStyle`|необязательный|стиль текста для не выбранных элементов в списке `FlatList`|
|`flatListTextStylePressed`|`TextStyle`|необязательный|стиль текста для выбранного элемента в списке `FlatList` 一 `selectedItem`|
|`flatListTextFont`|`TypographyProp`|необязательный|шрифт для текста для невыбранных элементов в списке `FlatList`|
|`flatListTextFontPressed`|`TypographyProp`|необязательный|шрифт для текста для невыбранного элемента в списке `FlatList` 一 `selectedItem`|
|`selectedItemColor`|`string`|необязательный|цвет выбранного элемента в списке при нажатии на него 一 подсветка `TouchableHighLight`|
|`maxVisibleListLength`|`number`|необязательный|максимальное количество видимых элементов в списке. Если элементов больше, вью у `FlatList` будет скроллиться (по дефолту 6)|

Дополнительно:
* `onPress: (item: ListItem) => void` 一 функция по нажатию на элемент массива.