Editable

Компонент Editable предназначен для создания интерактивных полей текста, которые можно редактировать напрямую на странице. Он сочетает в себе контроль над отображением текста и удобный пользовательский интерфейс редактирования, упрощая реализацию inline-редактирования.

Основная структура

Базовое использование компонента выглядит следующим образом:

import { Editable, EditableInput, EditablePreview } from "@chakra-ui/react";

<Editable defaultValue="Пример текста">
  <EditablePreview />
  <EditableInput />
</Editable>
  • Editable — контейнер, который управляет состоянием редактирования.
  • EditablePreview — отображает текст в обычном виде, когда поле не активно.
  • EditableInput — текстовое поле, которое становится активным при редактировании.

Свойство defaultValue задаёт начальное значение текста. Для управления состоянием извне используется value и onChange.

Управление состоянием

Компонент поддерживает два режима работы: контролируемый и неконтролируемый.

Неконтролируемый режим:

<Editable defaultValue="Неконтролируемый текст">
  <EditablePreview />
  <EditableInput />
</Editable>

В этом случае компонент сам хранит текущее значение.

Контролируемый режим:

const [text, setText] = useState("Контролируемый текст");

<Editable value={text} onCha nge={setText}>
  <EditablePreview />
  <EditableInput />
</Editable>

Использование контролируемого режима позволяет синхронизировать значение с внешним состоянием и интегрировать компонент с формами или глобальным состоянием приложения.

Свойства компонента Editable

  • defaultValue — начальное значение текста.
  • value — текущее значение (контролируемый режим).
  • onChange — вызывается при изменении текста.
  • isPreviewFocusable — определяет, можно ли фокусироваться на предварительном просмотре.
  • selectAllOnFocus — выделяет весь текст при фокусе на поле.
  • submitOnBlur — сохраняет изменения при потере фокуса.
  • startWithEditView — начинает с активного режима редактирования.

Пример с дополнительными свойствами:

<Editable
  defaultValue="Редактируемый текст"
  selectAllOnFocus={true}
  submitOnBlur={true}
>
  <EditablePreview />
  <EditableInput />
</Editable>

События и обработка действий

Компонент предоставляет несколько событий для управления редактированием:

  • onEdit — вызывается при переходе в режим редактирования.
  • onCancel — вызывается при отмене изменений.
  • onSubmit — вызывается при сохранении изменений.

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

<Editable
  defaultValue="Текст для редактирования"
  onE dit={() => console.log("Начало редактирования")}
  onCan cel={() => console.log("Редактирование отменено")}
  onSub mit={(val) => console.log("Сохранено значение:", val)}
>
  <EditablePreview />
  <EditableInput />
</Editable>

Стилизация Editable

Chakra UI предоставляет возможность настраивать стили через стандартные пропсы и систему style props.

<Editable
  defaultValue="Стилизация"
  fontSize="lg"
  color="teal.500"
  bg="gray.100"
  px={3}
  py={2}
  borderRadius="md"
>
  <EditablePreview />
  <EditableInput />
</Editable>

Можно также использовать focusBorderColor для управления цветом границы при редактировании:

<Editable focusBorderColor="blue.400">
  <EditablePreview />
  <EditableInput />
</Editable>

Интеграция с кнопками управления

Компонент поддерживает добавление кастомных кнопок для подтверждения или отмены изменений с помощью EditableControls:

import { Editable, EditableInput, EditablePreview, EditableControls, Button, HStack } from "@chakra-ui/react";

<Editable defaultValue="Текст с кнопками">
  <EditablePreview />
  <EditableInput />
  <EditableControls>
    {({ isEditing, onSubmit, onCancel }) =>
      isEditing ? (
        <HStack mt={2}>
          <Button size="sm" colorScheme="green" onCl ick={onSubmit}>Сохранить</Button>
          <Button size="sm" onCl ick={onCancel}>Отменить</Button>
        </HStack>
      ) : null
    }
  </EditableControls>
</Editable>

Это позволяет создавать полноценный интерфейс редактирования с явными действиями пользователя.

Инлайн и многострочные поля

По умолчанию Editable создаёт однострочное поле. Для многострочного редактирования можно использовать свойство isPreviewFocusable={false} и кастомный компонент, например Textarea вместо EditableInput:

import { Textarea } from "@chakra-ui/react";

<Editable defaultValue="Многострочный текст">
  <EditablePreview />
  <Textarea as={EditableInput} rows={4} />
</Editable>

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

Editable полностью поддерживает стандартные требования доступности:

  • Фокусировка с клавиатуры через Tab.
  • Управление клавишами Enter (подтвердить) и Esc (отменить).
  • Сочетание с aria-label и aria-live для скринридеров.

Пример:

<Editable defaultValue="Доступный текст" aria-label="Редактируемое поле имени">
  <EditablePreview />
  <EditableInput />
</Editable>

Полезные советы

  • Использовать контролируемый режим для интеграции с формами и глобальным состоянием.
  • Применять selectAllOnFocus для удобного редактирования коротких значений.
  • Добавлять кастомные кнопки через EditableControls для явного подтверждения или отмены.
  • Использовать Textarea для многострочных редактируемых блоков.
  • Обязательно проверять aria атрибуты для доступности.

Эта функциональность делает Editable мощным инструментом для создания интерактивных интерфейсов с inline-редактированием текста, гибко настраиваемым как визуально, так и по поведению.

Оглавление