Inline edit

Playground

'use client';
import { useEffect, useRef, useState } from 'react';
import {
  InlineEdit,
  type InlineEditSize,
  type InlineEditLine,
  type InlineEditVariant,
} from '@mbsw/ui';

export default function Demo() {
  const settings = {
    "invalid": false,
    "title": "title",
    "variant": "default",
    "size": "md",
    "line": "single",
    "disabled": false
  };
  const [value, setValue] = useState(settings.title);
  const previousSetting = useRef(settings.title);
  useEffect(() => {
    if (previousSetting.current === settings.title) return;
    previousSetting.current = settings.title;
    setValue(settings.title);
  }, [settings.title]);
  return (
    <div style={{ width: 320, maxWidth: '100%' }}>
      <InlineEdit
        value={value}
        onCommit={(next) => {
          setValue(next);
        }}
        invalid={settings.invalid}
        defaultEditing
        editLabel={"제목 수정"}
        cancelLabel={"수정 취소"}
        clearLabel={"제목 지우기"}
        size={settings.size as InlineEditSize}
        variant={settings.variant as InlineEditVariant}
        line={settings.line as InlineEditLine}
        disabled={settings.disabled}
      />
    </div>
  );
}

Properties

Size

Variant

Line

Error

Disabled

Content

Text

Usage

onValueChange는 편집 중인 값을 알리고 onCommit은 확정한 값을 전달합니다. Esc로 취소할 수 있도록 value에는 확정된 값을 보관하고 onCommit에서 갱신합니다. 영역 밖으로 초점이 이동해도 편집이 확정됩니다.

'use client';
import { useState } from 'react';
import { InlineEdit } from '@mbsw/ui';

export default function Example() {
  const [title, setTitle] = useState('title');
  return (
    <InlineEdit
      value={title}
      onCommit={setTitle}
      editLabel={"제목 수정"}
      cancelLabel={"수정 취소"}
      clearLabel={"제목 지우기"}
    />
  );
}

Playground의 Code 탭에서 현재 설정과 동작이 포함된 예제 전체를 복사할 수 있습니다. 공통 CSS 설치는 설치하기를 확인하세요.

Composition

InlineEdit