Skip to main content

Editor

Sidebar or modal form editor for a single kanban card. Mounts when the store's editorData is populated (typically via select-card) and dispatches update-card, delete-card, and select-card back to the store. Pre-registers richselect, multicombo, datepicker, and slider field components.

import { Editor } from "@svar-ui/react-kanban";

Usage​

const [api, setApi] = useState(null);

<Kanban init={setApi} cards={cards} columns={columns} />
{api && <Editor api={api} />}

Props​

PropTypeDefaultDescription
apiKanbanInstanceApi- (required)Kanban instance captured via the init callback. Drives editorData subscription and action dispatch.
itemsany[]getEditorItems()Editor field descriptors. Each item has comp, key, label, and optional config fields.
placement"inline" | "sidebar" | "modal""sidebar"Where the editor renders.
layout"default" | "columns""default"Single-column or two-column form layout. Use column: "left" | "right" on items to split fields.
topBarboolean | { items: IToolbarItem[] }trueTop bar with close and delete buttons. Pass false to hide or { items } to replace.
bottomBarboolean | { items: IToolbarItem[] }falseBottom action bar. Typically used with autoSave={false} for explicit Save/Cancel buttons.
autoSavebooleantrueWhen true, field changes flush immediately as update-card. When false, changes wait for a Save click.
focusbooleantrueAuto-focus the first input when the editor opens.
cssstringundefinedExtra CSS class merged onto the editor root (always has wx-editor-kanban).
readonlybooleanfalseRender all fields in read-only mode.
activeBatchstring | numberundefinedShow only items whose batch matches. Enables wizard-style forms.
hotkeysfalse | { [key]: handler | boolean }undefinedOpt out of or override default keyboard shortcuts (ctrl+s, escape, delete).
onChange(ev) => voidundefinedFires on every field change before the value is committed. ev: { key, value, update, input? }.
onSave(ev) => voidundefinedFires when the editor commits a save. ev: { changes, values }.
onAction(ev) => voidundefinedFires when a top/bottom bar button is clicked. ev: { item, values, changes }.
onValidation(ev) => voidundefinedFires when validation rules reject a save. ev: { errors, values }.

Example​

Default sidebar editor with auto-save:

const [api, setApi] = useState(null);

<Kanban init={setApi} cards={cards} columns={columns} />
{api && <Editor api={api} />}

Modal editor with a custom field set and explicit save:

import { Kanban, Editor, getEditorItems } from "@svar-ui/react-kanban";
import { useState } from "react";

const [api, setApi] = useState(null);

const items = [
  { comp: "text", key: "label", label: "Title", column: "left", required: true },
  { comp: "textarea", key: "description", label: "Description", column: "left" },
  { ...getEditorItems().find(i => i.key === "priority"), column: "right" },
];

const bottomBar = {
  items: [
    { comp: "spacer" },
    { comp: "button", id: "close", text: "Cancel", type: "default" },
    { comp: "button", id: "save", text: "Done", type: "primary" },
  ],
};

const handleAction = ({ item }) => {
  if (item.id === "close") api.exec("select-card", { id: null });
};

<Kanban init={setApi} cards={cards} columns={columns} />
{api && (
  <Editor
    api={api}
    items={items}
    bottomBar={bottomBar}
    topBar={false}
    autoSave={false}
    placement="modal"
    layout="columns"
    onAction={handleAction}
  />
)}