yb-input v1.1.15

Input

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

Подключение

• Импортируем

import Input from "yb-input";

Примеры использования

• Пример jsx

<Input
    onChange={this.change}
    keyUp={this.keyUp}
/>

Пропсы

• 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:

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

События

• 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) Срабатывает при снятии фокуса с элемента

Внешние вызовы

• Object callbacks Контейнер для методов внешних вызовов
• $hideContextMenu() Скрыть пользовательское контекстное меню, если оно появилось (используется для сокрытия меню не по клику вне компонента, а по клику на конкретный управляющий элемент)
• $focus() Взять Input в фокус (проверено на простом Input, без маски)

Исправления

• 1.0.13: isInvalid теперь работает корректно, меняет цвет рамки у тега \<input>
• 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