Skip to main content

getToolbarButtons

Description

Returns the full default configuration of toolbar buttons

Usage

getToolbarButtons(config?: {
undo?: boolean,
splitTasks?: boolean,
}): IButtonConfig[];

Parameters

  • config (optional) - an object with the next parameters:
    • undo - enables Undo and Redo buttons | PRO feature
    • splitTasks - enables the Split task button | PRO feature

Returns

The method returns an array of toolbar button configuration objects. Conditional blocks are included only when the corresponding config properties are enabled. If no parameter is defined, only default config is returned.

[
{
id: "add-task",
comp: "button",
icon: "wxi-plus",
text: "New task",
type: "primary",
},
{
id: "edit-task",
comp: "icon",
icon: "wxi-edit",
menuText: "Edit",
text: "Ctrl+E",
},

// appears only if config.splitTasks is true
{
id: "split-task",
comp: "icon",
icon: "wxi-arrow-split",
menuText: "Split",
},
// end

{
id: "delete-task",
comp: "icon",
icon: "wxi-delete",
menuText: "Delete",
text: "Ctrl+D, Backspace",
},
{ comp: "separator" },

{
id: "move-task:up",
comp: "icon",
icon: "wxi-angle-up",
menuText: "Move up",
},
{
id: "move-task:down",
comp: "icon",
icon: "wxi-angle-down",
menuText: "Move down",
},

{ comp: "separator" },

{
id: "copy-task",
comp: "icon",
icon: "wxi-content-copy",
menuText: "Copy",
text: "Ctrl+C",
},
{
id: "cut-task",
comp: "icon",
icon: "wxi-content-cut",
menuText: "Cut",
text: "Ctrl+X",
},
{
id: "paste-task",
comp: "icon",
icon: "wxi-content-paste",
menuText: "Paste",
text: "Ctrl+V",
},

{ comp: "separator" },

{
id: "indent-task:add",
comp: "icon",
icon: "wxi-indent",
menuText: "Indent",
},
{
id: "indent-task:remove",
comp: "icon",
icon: "wxi-unindent",
menuText: "Outdent",
},

// appears only if config.undo is true
{ comp: "separator" },
{
id: "undo",
comp: "icon",
icon: "wxi-undo",
menuText: "Undo",
},
{
id: "redo",
comp: "icon",
icon: "wxi-redo",
menuText: "Redo",
}
// end
]

Example

import { Gantt, getToolbarButtons } from "@svar-ui/react-gantt";
import { getData } from "../data";

const data = getData();

function init(api: any) {
const toolbar = getToolbarButtons({
splitTasks: true,
undo: true,
});

console.log("Toolbar buttons:", toolbar);
}

export default function App() {
return (
<Gantt
tasks={data.tasks}
links={data.links}
scales={data.scales}
init={init}
/>
);
}

Related article: defaultToolbarButtons