Components

InlineEdit

A value shown as text that turns into an input in place, with save and cancel.

Storybook: Storybook
Source: Source

Installation

Package: @bigbang/ui
Import: import { InlineEdit } from '@bigbang/ui';
Source: InlineEdit.tsx
Storybook: InlineEdit · Playground

InlineEdit is in the @bigbang/ui package.

import { InlineEdit } from '@bigbang/ui';

<InlineEdit label="Merchant name" value={name} onSave={rename} validate={(value) => (value.trim() ? null : 'The name cannot be empty.')} />;

Props

labelRequired

Description: What the value is, such as "İşyeri adı". It names the input and the edit button.
Type: string

value

Description: Controlled saved value.
Type: string

defaultValue

Description: Initial saved value when uncontrolled.
Type: string
Default: ''

onSaveRequired

Description: Called with the new value on save. When it returns a promise, the field stays open with loading until it settles; a rejected promise keeps the edit open.
Type: (value: string) => void | Promise<unknown>

validate

Description: Returns an error message for a value that cannot be saved, or null.
Type: (value: string) => string | null

emptyText

Description: Shown in place of an empty value. Without it, ui.inline-edit.empty ("Boş" or "Empty").
Type: string

disabled

Description: Hides the edit button; the value is shown as text.
Type: boolean
Default: false

className

Description: Added to the root element; use it for layout only.
Type: string

Data attributes

data-component="inline-edit", and data-editing while editing: on the root.
data-part: view, value, edit, box, control, error.