Skip to main content

Editor

Description​

Editor helper

A standalone Editor component based on SVAR Editor that allows adding task editor dialog with a set of fields (controls) for viewing and editing task data.

You can import the component from @svar-ui/react-gantt.

Usage​

interface EditorConfig {
    // Configuration for the editor items
    items: Array<Record<string, any>>;
    // Automatically apply changes to the data object
    autoSave?: boolean;
    // Define the current active batch for the editor
    activeBatch?: string;
    // Configuration for the top toolbar
    topBar?: {
        // Array of items for the toolbar
        items: Array<Record<string, any>>;
    };
    // Configuration for the bottom toolbar
    bottomBar?: {
        // Array of items for the toolbar
        items: Array<Record<string, any>>;
    };
    // Additional CSS class for the editor's box
    css?: string;
    // Initial values for the editor fields
    values?: Record<string, any>;
    // Placement of the editor (inline, modal, sidebar)
    placement?: "inline" | "modal" | "sidebar";
    // Set the editor to readonly mode
    readonly?: boolean;
    // Define layout for the editor
    layout?: "columns" | "default";
    // Function to handle action events
    onaction?: (ev: OnActionResult) => void;
    // Function to handle change events
    onchange?: (ev: OnChangeResult) => void;
    // Function to handle save events
    onsave?: (ev: OnSaveResult) => void;
    // Function to handle validation events
    onvalidation?: (ev: OnValidationResult) => void;
}

Parameters​

Gantt Editor has the same API as Basic SVAR Editor. Its API is described here: Editor API

Example​

The example below shows how to remove the "Description" field (which uses the key "details") from the editor.

import { useRef, useEffect, useState } from "react";
import { Gantt, Editor, getEditorItems } from "@svar-ui/react-gantt";

export default function Example() {
  const ganttRef = useRef(null);
  const [api, setApi] = useState(null);

  // Filter out the "details" (Description) field from editor items
  const items = getEditorItems.filter(item => item.key !== "details");

  // When the Gantt component instance becomes available, store it in state
  useEffect(() => {
    if (ganttRef.current) {
      setApi(ganttRef.current);
    }
  }, []);

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

Related articles: