v2.3.1

demos/cases/GanttForm.jsx

@@ -0,0 +1,50 @@
+import { useState, useCallback, useMemo } from 'react';
+import { getData } from '../data';
+import { Gantt, defaultTaskTypes } from '../../src/';
+import Form from '../custom/Form.jsx';
+import './GanttForm.css';
+
+export default function GanttForm({ skinSettings }) {
+  const data = useMemo(() => getData(), []);
+  const taskTypes = defaultTaskTypes;
+
+  const [task, setTask] = useState();
+  const [gApi, setGApi] = useState();
+
+  const formAction = useCallback(
+    ({ action, data }) => {
+      switch (action) {
+        case 'close-form':
+          setTask(null);
+          break;
+        default:
+          gApi.exec(action, data);
+          break;
+      }
+    },
+    [gApi],
+  );
+
+  const init = useCallback((api) => {
+    api.intercept('show-editor', ({ id }) => {
+      if (id) setTask(api.getState().tasks.byId(id));
+      return false;
+    });
+    setGApi(api);
+  }, []);
+
+  return (
+    <div className="wx-0moLF6Ul wrapper">
+      <Gantt
+        init={init}
+        {...skinSettings}
+        tasks={data.tasks}
+        links={data.links}
+        scales={data.scales}
+      />
+      {task ? (
+        <Form task={task} taskTypes={taskTypes} onAction={formAction} />
+      ) : null}
+    </div>
+  );
+}