v2.3.1

demos/cases/ContextMenuOptions.jsx

@@ -0,0 +1,53 @@
+import { useState, useContext, useMemo } from 'react';
+import { getData } from '../data';
+import { Gantt, ContextMenu, Editor, defaultMenuOptions } from '../../src/';
+import { context } from '@svar-ui/react-core';
+
+export default function ContextMenuOptions({ skinSettings }) {
+  const helpers = useContext(context.helpers);
+
+  const data = useMemo(() => getData(), []);
+
+  const [api, setApi] = useState();
+
+  function actionHandler() {
+    helpers.showNotice({ text: "'My action' clicked" });
+  }
+
+  const [options] = useState(() => {
+    const ids = ['cut-task', 'copy-task', 'paste-task', 'delete-task'];
+    let arr = [{ id: 'add-task:after', text: ' Add below', icon: 'wxi-plus' }];
+    arr = arr.concat(
+      defaultMenuOptions.filter((op) => ids.indexOf(op.id) >= 0),
+    );
+    arr.push({
+      id: 'my-action',
+      text: 'My action',
+      icon: 'wxi-empty',
+      handler: actionHandler,
+    });
+    return arr;
+  });
+
+  function onClick({ context: ctx, action }) {
+    if (!action.handler)
+      helpers.showNotice({
+        text: `'${action.id}' clicked for the '${ctx.id}' task`,
+      });
+  }
+
+  return (
+    <>
+      <ContextMenu api={api} options={options} onClick={onClick}>
+        <Gantt
+          init={setApi}
+          {...skinSettings}
+          tasks={data.tasks}
+          links={data.links}
+          scales={data.scales}
+        />
+      </ContextMenu>
+      {api && <Editor api={api} />}
+    </>
+  );
+}