v2.3.1

demos/cases/GanttToolbarButtons.jsx

@@ -0,0 +1,47 @@
+import { useState, useMemo, useCallback, useContext } from 'react';
+import { context } from '@svar-ui/react-core';
+import { getData } from '../data';
+import { Gantt, Toolbar, Editor, defaultToolbarButtons } from '../../src/';
+import './GanttToolbarButtons.css';
+
+export default function GanttToolbarButtons({ skinSettings }) {
+  const helpers = useContext(context.helpers);
+  const [api, setApi] = useState();
+
+  const data = useMemo(() => getData(), []);
+
+  const actionHandler = useCallback(() => {
+    helpers.showNotice({ text: "'My action' clicked" });
+  }, [helpers]);
+
+  const items = useMemo(() => {
+    const items = defaultToolbarButtons.filter((b) => {
+      return b.id?.indexOf('indent') === -1;
+    });
+
+    items.push({
+      id: 'my-action',
+      comp: 'icon',
+      icon: 'wxi-cat',
+      handler: actionHandler,
+    });
+
+    return items;
+  }, [actionHandler]);
+
+  return (
+    <>
+      <Toolbar api={api} items={items} />
+      <div className="wx-vkht5Uhi gtcell">
+        <Gantt
+          {...skinSettings}
+          init={setApi}
+          tasks={data.tasks}
+          links={data.links}
+          scales={data.scales}
+        />
+        {api && <Editor api={api} />}
+      </div>
+    </>
+  );
+}