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,70 @@
+import { useState, useMemo, useCallback } from 'react';
+import { getData } from '../data';
+import { Gantt } from '../../src/';
+import { Button } from '@svar-ui/react-core';
+import './GanttCustomSort.css';
+
+export default function GanttCustomSort({ skinSettings }) {
+  const data = useMemo(() => getData(), []);
+
+  const [gApi, setGApi] = useState(null);
+  const [sortConfig, setSortConfig] = useState({});
+  const getIcons = useCallback(() => {
+    const obj = { text: '', start: '', duration: '' };
+    const { key, order } = sortConfig;
+    if (key) obj[key] = `wxi-arrow-${order == 'asc' ? 'up' : 'down'}`;
+    return obj;
+  }, [sortConfig]);
+  const [icons, setIcons] = useState(() => getIcons());
+
+  const sort = useCallback(
+    (id) => {
+      const { key, order } = sortConfig;
+      let newOrder = !key ? 'desc' : 'asc';
+
+      if (key === id) newOrder = order === 'asc' ? 'desc' : 'asc';
+
+      if (gApi) gApi.exec('sort-tasks', { key: id, order: newOrder });
+    },
+    [gApi, sortConfig],
+  );
+
+  const init = useCallback((api) => {
+    api.on('sort-tasks', (config) => {
+      setSortConfig(config);
+      // Compute icons based on the incoming config to mirror Svelte's sequential state updates
+      const obj = { text: '', start: '', duration: '' };
+      const { key, order } = config;
+      if (key) obj[key] = `wxi-arrow-${order == 'asc' ? 'up' : 'down'}`;
+      setIcons(obj);
+    });
+    setGApi(api);
+  }, []);
+
+  return (
+    <div className="wx-q0L4gF4x rows">
+      <div className="wx-q0L4gF4x bar">
+        <div className="wx-q0L4gF4x label">Sort by</div>
+        <Button onClick={() => sort('text')}>
+          Task Name <i className={'wx-q0L4gF4x ' + icons.text}></i>
+        </Button>
+        <Button onClick={() => sort('start')}>
+          Start Date <i className={'wx-q0L4gF4x ' + icons.start}></i>
+        </Button>
+        <Button onClick={() => sort('duration')}>
+          Duration <i className={'wx-q0L4gF4x ' + icons.duration}></i>
+        </Button>
+      </div>
+
+      <div className="wx-q0L4gF4x gtcell">
+        <Gantt
+          init={init}
+          {...skinSettings}
+          tasks={data.tasks}
+          links={data.links}
+          scales={data.scales}
+        />
+      </div>
+    </div>
+  );
+}