yb-input

Input

React Input

Посмотреть как работает

$3

- Импортируем
``javascript
import Input from "yb-input";
`

$3

- Пример jsx



`javascript
onChange={this.change}
keyUp={this.keyUp}
/>
`

$3

- String value

Установка начального значения
- String className

Имя класса для добавления стилей
- String placeholder

Подсказка при отсутствии наполнения
- Boolean isInvalid

Маркер ошибки
- Boolean isDisabled

Блокировка редактирования компонента
- String size, default=""

При установке size="auto", ширина Input-a будет автоматически изменяться в зависимости от содержимого
- Component contextMenuComponent

Компонент, который отобразится рядом с Input-ом как альтернатива контекстному меню



Использование Input для цифр (без маски)
- Boolean isPositiveNumbersOnly default=false

Будут ли использованы только положительные значения

при=true Input автоматически принимает только цифры
- Number min (при isPositiveNumbersOnly=true)

Минимальное значение (ограничение снизу)
- Number max (при isPositiveNumbersOnly=true)

Максимальное значение (ограничение сверху)



Использование маски
- String mask

Маска Input

Формат строк:
+ 9: 0-9
+ a: A-Z, a-z
+ *: A-Z, a-z, 0-9
- String maskChar, default="_"

Маркер для покрытия незаполненных частей маски
- Boolean alwaysShowMask

Отображать ли маску, когда нет введенного текста

default="false", не отображать
- Object formatChars

Определяет символы в качестве ключей и соответствие строкам регулярных выражений

default:

`javascript
{
'9': '[0-9]',
'a': '[A-Za-z]',
'*': '[A-Za-z0-9]'
}
``

$3

- onChange(String value)

Вызывается при изменении значения
- onKeyUp(Event event, String value)

Вызывается при изменении значения

event.keyCode=13 - клавиша Enter
- onKeyDown(Event event, String value)

Вызывается при изменении значения
- onContextMenu(Event event)

Вызывается при появлении контекстного меню после нажатия правой кнопки мыши

Запрет появления меню: event.preventDefault()
- onClick(Event event)

Вызывается при клике на элементе
- onBlur(Event event)

Срабатывает при снятии фокуса с элемента

$3

- Object callbacks

Контейнер для методов внешних вызовов
- $hideContextMenu()

Скрыть пользовательское контекстное меню, если оно появилось

(используется для сокрытия меню не по клику вне компонента, а по клику на конкретный управляющий элемент)
- $focus()

Взять Input в фокус (проверено на простом Input, без маски)









#### Исправления
- 1.0.13: isInvalid теперь работает корректно, меняет цвет рамки у тега \
- 1.1.0: Теперь у Input-a может быть автоматически изменяемая ширина (по содержимому)
- 1.1.1: Ловим правую кнопку мыши
- 1.1.2: Пользовательское контекстное меню
- 1.1.4: Взять в фокус
- 1.1.7: isDisabled
- 1.1.9: очистка Input-a через setState
- 1.1.10: добавлен onBlur