Figma

TextField

import { TextField } from '@megafon/ui-core';

Поле для ввода пароля

<TextField name="password" type="password"/>

Обязательное поле

<TextField name="phone" required label="Телефон"/>

C иконкой очистки значения и без неё

<TextField name="name" label="Имя" value="Константин"/>

<TextField name="name" label="Имя" value="Константин" hideIcon/>

Отключено отображение плейсхолдера

При установке фокуса на поле - плейсхолдер не отображается

<TextField hidePlaceholder label="Введите текст" />

Поле для ввода телефона

Типы масок:

<div style={{ display: 'grid', gap: '35px' }}>
  <TextField
      placeholder="+7 (999) 999-99-99"
      mask="+7 (999) 999-99-99"
      maskChar="_"
      label="Обычная"
      id="2"
      inputMode="numeric"
      classes={{input: 'parent__inputClass'}}
      style={{ width: '350px' }}
  />
  <TextField
      mask="+7 (999) 999-99-99"
      maskChar="_"
      type="tel"
      autoComplete="tel"
      inputMode="tel"
      label="С автозаполнением"
      style={{ width: '350px' }}
  />
  <div>
      <DemoTextFieldWithBeforeMaskChangeValue>
          {({ handleBeforeMaskChange }) =>
              <TextField
                  onBeforeMaskChange={handleBeforeMaskChange}
                  mask="+7 (999) 999-99-99"
                  maskChar="_"
                  label="С перехватом вводимого значения"
                  style={{ width: '350px' }}
              />
          }
      </DemoTextFieldWithBeforeMaskChangeValue>
      <p>
          В данном случае, при вставке телефона в формате +79998887766 выведет его сразу в нужном формате,
          за счет совпадения начальных символов маски и вставляемого значения, в остальных кейсах нужна обработка значения
          внутри коллбека и его возврат оттуда
      </p>
  </div>
</div>

Код DemoTextFieldWithBeforeMaskChangeValue
export const DemoTextFieldWithBeforeMaskChangeValue = ({ children }) => {
    const handleBeforeMaskChange = (value, newState) => {
        const { value: newMaskedValue } = newState;
        const isValuePasted = value && value.length > 1;


        return { ...newState, value: isValuePasted ? value : newMaskedValue };
    };


    return <>{children({ handleBeforeMaskChange })}</>;
};

Подпись снизу

<TextField noticeText="Comment" />

Валидация

Клик по "крестику" очищает поле по умолчанию. Если установлены кастомная иконка или onIconClick, то очищение перестает работать.

<TextField verification="error" noticeText="Name is required"/>
<TextField verification="valid" noticeText="You can write that field value is correct"/>

Иконка с обработчиком клика

<TextField
  verification="error"
  noticeText="Error notice"
  customIcon={ <CustomIcon style={{width: "32", height: "32", display: "block", userSelect: "none"}} /> }
  onIconClick={ () => alert('Custom click handler') }
/>
<TextField
      customIcon={ <CustomIcon style={{width: "32", height: "32", display: "block", userSelect: "none"}} /> }
      onIconClick={ () => alert('Custom click handler') }
/>

Ограничение длины текста

<TextField maxLength={10} />

Поле отключено для редактирования

<TextField disabled={true} />

Контролируемое состояние

<TextField value='initial value' isControlled={true} />

Контролируемое состояние с вводом только цифр

В данном состоянии компонент полностью контролируется родительским, в том числе очистка поля ввода путем клика на иконку, для нее следует использовать коллбек onIconClick

<DemoTextFieldWithControlledValue>
  {({ value, onChange }) => <TextField value={value} onChange={onChange} isControlled={true} />}
</DemoTextFieldWithControlledValue>

Цветовые схемы

<div style={{ display: 'flex', gap: '35px' }}>
  <div style={{ flex: 1, padding: '10px' }}>
      <TextField
          verification="valid"
          noticeText="Тема для светлого фона (по умолчанию)"
      />
  </div>
  <div style={{ flex: 1, padding: '10px', backgroundColor: '#00B956' }}>
      <TextField
          verification="valid"
          noticeText="Светлая тема для цветного фона"
          theme="white"
      />
  </div>
</div>

Код DemoControlledTextField
export const DemoTextFieldWithControlledValue = ({ children }) => {
    const [inputValue, setInputValue] = useState('');


    const handleChange = ({ target: { value } }) => {
        const valueDigits = value.replace(/[^0-9]/g, '');


        setInputValue(valueDigits);
    };


    return <>{children({ value: inputValue, onChange: handleChange })}</>;
};

Textarea

Пропс textarea, выставленный в значение true, изменяет компонент в textarea.

Базовое использование

<TextField name="name" textarea placeholder="placeholder"/>

Тип flexible с возможностью растягивать поле по высоте

Поле автоматически увеличивается при вводе текста до высоты шести строк. Режим автоматического увеличения высоты отключается при ручном ресайзе поля.

<TextField name="name" textarea="flexible"/>

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

<TextField textarea="flexible" hideResizeButton />

Обязательное поле

<TextField
  label="Required field"
  textarea
  required
  classes={{input: 'parent__inputClass'}}
/>

Подпись снизу

<TextField
  noticeText="Comment"
  textarea
/>

Валидация

<TextField
  verification="error"
  noticeText="Name is required"
  textarea
/>
<TextField
  verification="valid"
  noticeText="Field passed validation"
  textarea
/>

Максимальное количество текста

<TextField maxLength={10} textarea isControlled={false}/>

Счетчик введенных символов

При превышении переданного количества поле становится невалидным.

<TextField symbolCounter={10} textarea value="Иванов Ива"/>
<TextField symbolCounter={10} textarea value="Иванов Иван Иванович"/>

Счетчик введенных графем

При превышении переданного количества поле становится невалидным.

<TextField symbolCounter={10} textarea graphemesCounter value="😀👩‍💻"/>
<TextField symbolCounter={10} textarea graphemesCounter value="⏏️ ▶️ ⏸ ⏯ ⏹"/>

Минимальная высота textarea равна одной строке

По умолчанию минимальная высота равна трем строкам

<TextField
  textarea
  minTextareaHeight={24}
  label="fixed"
/>
<TextField
  textarea="flexible"
  minTextareaHeight={24}
  label="flexible"
/>

Отключение перевода строки по нажатию Enter

Остается доступен перевод строки по нажатию комбинации Shift + Enter и автоматический

<TextField
  textarea
  label="fixed"
  disableEnterLineBreak
/>
<TextField
  textarea="flexible"
  label="flexible"
  disableEnterLineBreak
/>

Поле отключено для редактирования

<TextField
  disabled
  textarea
  value='disabled'
/>