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 — иконка подтверждения с текстом “Готово”.

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

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

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

Кастомизация

Через свойство slotProps можно прокинуть свойства во внутренние элементы. Это удобно для добавления кастомных классов, data-атрибутов, aria-атрибутов, обработчиков событий, доступов к элементам через getRootRef и других расширений, не влияя на внешний API компонента.

Доступность (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>

Подкомпоненты

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