Editable

分类：

other

日期:

2022-1-26

标签：

chakra

Editable Text is used for inline renaming of some text. It appears as normal UI text but transforms into a text input field when the user clicks on or focuses it.

View source View theme source @chakra-ui/editable

The text input inherits all font styling from its parent in order to make the edit and read view transition seamless.

Import#

Chakra UI exports 3 components to handle this functionality.

Editable: The wrapper component that provides context value.
EditableInput: The edit view of the component. It shows when you click or focus on the text.
EditableTextarea: Use the textarea element to handle multi line text input in an editable context.
EditablePreview: The read-only view of the component.

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

Usage#

// Click the text to edit
<Editable defaultValue="Take some chakra">
  <EditablePreview />
  <EditableInput />
</Editable>

Usage with textarea#

// Click the text to edit
<Editable defaultValue="Take some chakra">
  <EditablePreview />
  <EditableTextarea />
</Editable>

With custom input and controls#

In some cases, you might need to use custom controls to toggle the edit and read mode. We use the render prop pattern to provide access to the internal state of the component. You may want to customize the EditableInput as well. This can be achieved by using a custom Input component in the as prop.

function CustomControlsExample() {
  /* Here's a custom control */
  function EditableControls() {
    const {
      isEditing,
      getSubmitButtonProps,
      getCancelButtonProps,
      getEditButtonProps,
    } = useEditableControls();

    return isEditing ? (
      <ButtonGroup justifyContent="center" size="sm">
        <IconButton icon={<CheckIcon />} {...getSubmitButtonProps()} />
        <IconButton icon={<CloseIcon />} {...getCancelButtonProps()} />
      </ButtonGroup>
    ) : (
      <Flex justifyContent="center">
        <IconButton size="sm" icon={<EditIcon />} {...getEditButtonProps()} />
      </Flex>
    );
  }

  return (
    <Editable
      textAlign="center"
      defaultValue="Rasengan ⚡️"
      fontSize="2xl"
      isPreviewFocusable={false}
    >
      <EditablePreview />
      {/* Here is the custom input */}
      <Input as={EditableInput} />
      <EditableControls />
    </Editable>
  );
}

Styling the editable#

Please see the recipe for a styled example.

Props#

Editable Props#

`colorScheme`

Color Schemes Editable

(string & {})

`defaultValue`

The initial value of the Editable in both edit & preview mode

string

`isDisabled`

If true, the Editable will be disabled.

boolean

`isPreviewFocusable`

If true, the read only view, has a tabIndex set to 0 so it can receive focus via the keyboard or click.

boolean

true

`onCancel`

Callback invoked when user cancels input with the Esc key. It provides the last confirmed value as argument.

((previousValue: string) => void)

`onChange`

Callback invoked when user changes input.

((nextValue: string) => void)

`onEdit`

Callback invoked once the user enters edit mode.

(() => void)

`onSubmit`

Callback invoked when user confirms value with enter key or by blurring input.

((nextValue: string) => void)

`placeholder`

The placeholder text when the value is empty.

string

`selectAllOnFocus`

If true, the input's text will be highlighted on focus.

boolean

true

`size`

Sizes Editable

string

`startWithEditView`

If true, the Editable will start with edit mode by default.

boolean

`submitOnBlur`

If true, it'll update the value onBlur and turn off the edit mode.

boolean

true

`value`

The value of the Editable in both edit & preview mode

string

`variant`

Variants Editable

string