Skip to main content

getEditorItems

Builds the default editor field array from a CardShape (or EditorShape). The result matches the sections visible on the card, so the editor form stays in sync with what users see on the board.

Usage​

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

getEditorItems(shape?: EditorShape | CardShape): EditorItem[];

The returned array always starts with label (text input, required). The remaining fields are appended based on the shape:

  • description - textarea
  • priority - richselect; options come from shape.priority.data or fall back to getPriorityOptions()
  • progress - slider, 0 to 1, step 0.1
  • deadline - datepicker, clearable
  • tags - multicombo; included only when shape.tags.data is provided
  • users - multicombo; included only when shape.users.data is provided

When called without arguments, the default shape is used (getCardShape()), which enables priority, progress, description, deadline, and tags.

Example​

Mirror the card shape in the editor:

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

const card = {
  ...getCardShape(),
  users: { data: [{ id: 1, label: "Alex" }, { id: 2, label: "Sam" }] },
  menu: true,
};

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

  return (
    <>
      <Kanban cards={cards} columns={columns} card={card} init={setApi} />
      {api && <Editor api={api} items={getEditorItems(card)} />}
    </>
  );
}

Pluck a single default field and customize it:

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

const priorityItem = getEditorItems().find(it => it.key === "priority");

const items = [
	{ comp: "text", key: "label", label: "Title", required: true },
	{ ...priorityItem, column: "right", required: true },
];