Skip to main content

editorShape

Description​

An array of objects containing settings for managing the appearance and functionality of the Editor dialog

Usage​

editorShape?: [
    //common parameters for all types
    {
      key: string,
      label?: string,
    },
    
    // for the "text" and "textarea" types 
    {
      key: string,
      label?: string,
      type: "text" | "textarea",
      config?: {
        placeholder: string,
        focus: boolean
      }
    },
    
    // for the "combo", "select" and "multiselect" controls
    {
    key: string,
    label?: string,
    type: "combo" | "select" | "multiselect",
    options?: {
        id: any,
        label?: string
    }[],
    config?: {}
    },

   // for the "slider" type 
   {
    key: string,
    label?: string,
    type: "slider",
    config?: {
    width: number,
    min: number,
    max: number,
    disabled: boolean,
    step: number
            }
    },
   // for the "date" type 
   {
     key: string,
     label?: string,
     type: "date",
     time?: boolean,
     config?: {}
    },
    // for the "counter" type field
    { 
      key: string,
      label?: string,
      type: "counter",
      config?: {
            min: number,
            max: number,
       }
    },
    // for the "link" type 
    {
     key: string,
     label?: string,
     type: "links"
    }
]

Parameters​

To configure the editor appearance and functionality, you can specify the following parameters (fields):

Common parameters for all types​

  • key - (required) the name of the data field (from the task object). The value should be unique for each editor control type and correspond to the field name of the task object in the tasks property.
  • label - (optional) the label of the field control
  • config - (optional) any configuration object for a control. It can have any property supported by related WX control (e.g. placeholder, focus, etc.)
  • type - (required) the editor field type. Here you can specify the following types: select, text, textarea, counter, date, slider, link

Parameters for the "text" and "textarea" types​

  • type - (required) the editor field type: text or textarea

  • key - (required) the name of the data field (from the task object): Text for the text control and Area for the textarea control

  • label - (optional) the label of the field control

  • config- (optional) any configuration object for a control. The control types that accept it: text, select, combo, textarea, slider. It can have any property supported by related WX control (e.g. placeholder, focus, etc.). Here you can specify the following parameters:

    • placeholder - (optional) a placeholder value
    • focus - (optional) enables/disables the focus
    • disabled - (optional) enables or disables the element

    Example:

import React, { useRef } from "react";
import { getData } from "./common/data";
import { Gantt } from "wx-react-gantt";
import "wx-react-gantt/dist/gantt.css";

const data = getData();
const editorShape = [
  {
    key: "Text",
    type: "text",
    label: "Name",
    config: {
      placeholder: "Task name",
      focus: true,
    },
  },
];

function App() {
  
  return (
    <Gantt
      tasks={data.tasks}
      links={data.links}
      scales={data.scales}
      columns={data.columns}
      editorShape={editorShape}
    />
  );
}

export default App;

Parameters for the "combo", "select" and "multiselect" controls​

  • type - (required) the editor field type: "combo" | "select" | "multiselect",
  • key - (required) the name of the data field (from the task object): Combo
  • label - (optional) the label of the field control
  • options - (optional) an array of objects with the next parameters for each option object: -id - (required) the option ID
    • label - (optional) the label for an option
  • config - (optional) any configuration object for a control. It can have any property supported by related WX control (e.g. placeholder, focus, etc.)

Example:

import { getData } from "./common/data";
import { Gantt } from "wx-react-gantt";
import "wx-react-gantt/dist/gantt.css";

const data = getData();

const editorShape = [
  {
    key: "Combo",
    type: "select",
    label: "Type",
  },
];

function App() {
  return (
    <Gantt
      tasks={data.tasks}
      links={data.links}
      scales={data.scales}
      columns={data.columns}
      editorShape={editorShape}
    />
  );
}

export default App;

Parameters for the "slider" type​

  • type - (required) the editor field type: slider
  • key - (required) the name of the data field (from the task object): Slider
  • label - (optional) the label of the field control
  • config- (optional) any configuration object for a control. The control types that accept it: text, select, combo, textarea, slider. It can have any property supported by related WX control (e.g. placeholder, focus, etc.). You can specify the following parameters:
    • width - (optional) slider width in pixels
    • min - (optional) min task progress in a percentage value
    • max - (optional) max task progress in a percentage value
    • disabled - (optional) enables or disables the slider; if false (default), the slider is enabled

Example:

import { getData } from "./common/data";
import { Gantt } from "wx-react-gantt";
import "wx-react-gantt/dist/gantt.css";

const GanttComponent = () => {
  const data = getData();

  const editorShape = [
    {
      key: "Slider",
      type: "slider",
      label: "Progress",
    }
  ];

  return (
    <Gantt
      tasks={data.tasks}
      links={data.links}
      scales={data.scales}
      columns={data.columns}
      editorShape={editorShape}
    />
  );
};

export default GanttComponent;

Parameters for the "date" type​

  • type - (required) the editor field type: date
  • key- (required) the name of the data field (from the task object): DatePicker
    • start_date - (required) the start date key
    • end_date - (required) the end date key
  • label - (optional) the label of the field control
  • time - (optional) set to true to show time; if false, time value is not shown

Example:

import { getData } from "./common/data";
import { Gantt } from "wx-react-gantt";
import "wx-react-gantt/dist/gantt.css";
import React from 'react';

const App = () => {
  const data = getData();

  const editorShape = [
    {
      key: "DatePicker",
      type: "date",
      label: "Start date",
    },
    {
      key: "DatePicker",
      type: "date",
      label: "End date",
    },
  ];

  return (
    <Gantt
      tasks={data.tasks}
      links={data.links}
      scales={data.scales}
      columns={data.columns}
      editorShape={editorShape}
    />
  );
};

export default App;

Parameters for the "counter" type​

  • type - (required) the editor field type: counter

  • key - (required) the name of the data field (from the task object): Counter

  • label - (optional) the label of the field control

  • config- (optional) any configuration object for a control. The control types that accept it: text, select, combo, textarea, slider. It can have any property supported by related WX control (e.g. placeholder, focus, etc.) Here you can specify the following parameters:

    • min - (optional) min task duration value in days
    • max - (optional) max task duration value in days

    Example:

import React, { useRef } from "react";
import { getData } from "./common/data";
import { Gantt } from "wx-react-gantt";
import "wx-react-gantt/dist/gantt.css";

const GanttComponent = () => {
  const data = getData();

  const editorShape = [
    {
      key: "Counter",
      type: "counter",
      label: "Duration",
      config: {
        min: 1,
        max: 100,
      },
    },
  ];

  return (
    <Gantt
      tasks={data.tasks}
      links={data.links}
      scales={data.scales}
      columns={data.columns}
      editorShape={editorShape}
    />
  );
};

export default GanttComponent;
  • type - (required) the editor field type: link
  • key - (required) the name of the data field (from the task object): links table

Default config​

import React from 'react';

const FormComponent = () => {
    return (
        <form>
            <div>
                <label htmlFor="text">Name</label>
                <input type="text" id="text" placeholder="Add task name" autoFocus />
            </div>
            <div>
                <label htmlFor="details">Description</label>
                <textarea id="details" placeholder="Add description"></textarea>
            </div>
            <div>
                <label htmlFor="type">Type</label>
                <select id="type"></select>
            </div>
            <div>
                <label htmlFor="start">Start date</label>
                <input type="date" id="start" />
            </div>
            <div>
                <label htmlFor="end">End date</label>
                <input type="date" id="end" />
            </div>
            <div>
                <label htmlFor="duration">Duration</label>
                <input type="number" id="duration" min="1" max="100" />
            </div>
            <div>
                <label htmlFor="progress">Progress</label>
                <input type="range" id="progress" />
            </div>
            <div>
                <label htmlFor="links">Links</label>
                <input type="url" id="links" />
            </div>
        </form>
    );
};

export default FormComponent;