Skip to main content

registerEditorItem

Description​

Registers a custom UI component for use as a field in the Editor

The registered component must support the value property and onChange callback as in Editor.

Usage​

registerEditorItem?: (
  type: string,
  handler: Component<any>
) => void;

Parameters​

  • type - (required) a unique identifier for the editor control
  • handler - (required) a React component that implements value property and onChange callback as in Editor.

Example​

The example shows how to add a custom editor field using the radio button component:

import { Gantt, Editor, getEditorItems, registerEditorItem, defaultTaskTypes } from "@svar-ui/react-gantt";
import { RadioButtonGroup } from "@svar-ui/react-core";
import { useState } from "react";

registerEditorItem("radio", RadioButtonGroup);

// replace the "type" select with a radio group
const items = getEditorItems().map((item) =>
  item.key === "type"
    ? {
        key: "type",
        comp: "radio",
        label: "Type",
        options: defaultTaskTypes.map((o) => ({
          ...o,
          value: o.id,
        })),
        config: { type: "inline" },
      }
    : item
);

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

  return (
    <>
      <Gantt ref={setApi} />
      {api && <Editor api={api} items={items} />}
    </>
  );
}

export default App;

Related articles: