WriteBar

Режим работы

Компонент поддерживает работу как в неконтролируемом режиме, так и контролируемом. Это стандартное поведение React-компонентов, прочитать про это можно в документации React ↗.

Для использования неконтролируемого режима достаточно просто не передавать value или передавать defaultValue, если требуется задать значение по умолчанию. Для контролируемого режима используйте связку свойств value/onChange для задания значения и его изменения.

// Неконтролируемое состояние
<WriteBar defaultValue="Текст" />;
 
// Контролируемое состояние
const [text, setText] = React.useState('Текст');
 
<WriteBar value={text} onChange={(event) => setText(event.target.value)} />;

Основные элементы

• before — элементы слева от поля ввода.
• after — элементы справа.
• inlineAfter — элементы поверх поля (актуально для iOS).

Использование иконок

Все боковые элементы рекомендуется оборачивать в WriteBarIcon. Также для адаптирования размеров иконок стоит использовать компонент AdaptiveIconRenderer.

По правилам дизайн-системы в "regular"-режиме используются кнопки размером 28px, в "compact"-режиме — 24px. Исключение: на платформе iOS допускается использование иконок размером 28px в "compact"-режиме.

WriteBarIcon

Компонент для создания иконок-кнопок внутри WriteBar. Обеспечивает стандартное поведение и доступность для элементов управления в поле ввода сообщений.

Особенности поведения

• Наследует все свойства <button>.
• Автоматически адаптируется под платформы Android и iOS при использовании готовых пресетов.

Предустановленные режимы

Предустановленные типы кнопок в WriteBar для отрисовки иконки и установки текста кнопки в зависимости от платформы. Если передать валидное значение для этого свойства, children игнорируются, а для label по умолчанию используется текст на “ru_RU”.

• attach — иконка прикрепления с текстом “Прикрепить файл”.
• send — иконка отправки с текстом “Отправить”.
• done — иконка подтверждения с текстом “Готово”.

Использование кастомных иконки

Отображение счётчика

Значение счётчика для кнопки. Например, для количества прикреплённых файлов.

Доступность (a11y)

Укажите текстовое описание одним из способов:

• Через свойство label:

  <WriteBarIcon label="Прикрепить файл">
    <Icon24Attachment />
  </WriteBarIcon>

  Скопировать код

• Через ARIA-атрибуты:

  <WriteBarIcon aria-label="Отправить сообщение">
    <Icon24Send />
  </WriteBarIcon>

  Скопировать код

• С использованием VisuallyHidden:

  <WriteBarIcon>
    <Icon24SmileOutline />
    <VisuallyHidden>Эмодзи</VisuallyHidden>
  </WriteBarIcon>

  Скопировать код

• С использованием id в aria-labelledby

  <VisuallyHidden id="write_bar_icon_voice">Записать голосовое сообщение</VisuallyHidden>
    <WriteBarIcon aria-labelledby="write_bar_icon_voice">
    <Icon28VoiceOutline />
  </WriteBarIcon>

  Скопировать код

Свойства и методы