v2.3.1

2025-10-22 08:13:59 +00:00
commit 80ca059fb8
162 changed files with 16816 additions and 0 deletions
@@ -0,0 +1,84 @@
+import { useMemo, useState } from 'react';
+import { getData } from '../data';
+import { Gantt, ContextMenu, Editor, defaultEditorItems } from '../../src';
+import { RadioButtonGroup } from '@svar-ui/react-core';
+import './GanttDurationUnitChanges.css';
+
+export default function GanttDurationUnitChanges({ skinSettings }) {
+  const initialData = getData();
+  const [tasks, setTasks] = useState(initialData.tasks);
+  const [links] = useState(initialData.links);
+
+  const scalesMap = useMemo(
+    () => ({
+      hour: getData('hour').scales,
+      day: getData().scales,
+    }),
+    [],
+  );
+
+  const options = [
+    { id: 'hour', label: 'Hour' },
+    { id: 'day', label: 'Day' },
+  ];
+
+  const [durationUnit, setDurationUnit] = useState('hour');
+  const [scales, setScales] = useState(scalesMap['hour']);
+
+  const [api, setApi] = useState(null);
+
+  const items = useMemo(
+    () =>
+      defaultEditorItems.map((ed) => ({
+        ...ed,
+        ...(ed.comp === 'date' && {
+          config: { time: durationUnit === 'hour' },
+        }),
+      })),
+    [durationUnit],
+  );
+
+  function handleUnitChange({ value }) {
+    const sTasks = api.serialize().map((task) => {
+      if (task.start && task.end) {
+        const ms = 1000 * 60 * 60 * (value === 'day' ? 24 : 1);
+        const duration = Math.floor((task.end - task.start) / ms);
+        return { ...task, duration };
+      }
+      return task;
+    });
+    setTasks(sTasks);
+    setDurationUnit(value);
+    setScales(scalesMap[value]);
+  }
+
+  return (
+    <div className="wx-d4Cw5r6y rows">
+      <div className="wx-d4Cw5r6y bar">
+        <div className="wx-d4Cw5r6y label">Gantt duration unit</div>
+        <RadioButtonGroup
+          options={options}
+          value={durationUnit}
+          type="inline"
+          onChange={handleUnitChange}
+        />
+      </div>
+
+      <div className="wx-d4Cw5r6y gtcell">
+        <ContextMenu api={api}>
+          <Gantt
+            init={setApi}
+            {...skinSettings}
+            tasks={tasks}
+            links={links}
+            scales={scales}
+            cellWidth={40}
+            durationUnit={durationUnit}
+            lengthUnit={'hour'}
+          />
+        </ContextMenu>
+        {api && <Editor api={api} items={items} />}
+      </div>
+    </div>
+  );
+}