v2.5.2

2026-01-28 14:26:58 +00:00
parent a34aa9ad0a
commit 87a05884a8
24 changed files with 627 additions and 445 deletions
--- a/demos/cases/ProExport.jsx
+++ b/demos/cases/ProExport.jsx
@@ -0,0 +1,199 @@
+import { useMemo, useState } from 'react';
+import { getData } from '../data';
+import { Gantt, version } from '../../src/';
+import { Toolbar, registerToolbarItem } from '@svar-ui/react-toolbar';
+import { Switch, RichSelect, Segmented } from '@svar-ui/react-core';
+import { Calendar } from '@svar-ui/gantt-store';
+import './ProExport.css';
+
+registerToolbarItem('switch', Switch);
+registerToolbarItem('segmented', Segmented);
+registerToolbarItem('richselect', RichSelect);
+
+export default function ProExport({ skinSettings }) {
+
+  const [size, setSize] = useState('auto');
+  const [fit, setFit] = useState(true);
+  const [api, setApi] = useState();
+  const [config, setConfig] = useState('basic');
+
+  const data = useMemo(() => {
+    const advanced = config === 'advanced';
+    return getData(null, {
+      splitTasks: advanced,
+      baselines: advanced,
+      unscheduledTasks: advanced,
+    });
+  }, [config]);
+
+  const items = useMemo(() => {
+    return [
+      { text: 'Page size' },
+      {
+        id: 'size',
+        comp: 'richselect',
+        css: 'rselect',
+        value: size,
+        options: [
+          { id: 'auto', label: 'Auto' },
+          { id: 'a4-landscape', label: 'A4 Landscape' },
+          { id: 'a4', label: 'A4 Portrait' },
+          { id: 'a3-landscape', label: 'A3 Landscape' },
+          { id: 'a3', label: 'A3 Portrait' },
+        ],
+        handler: () => {},
+      },
+      { text: 'Fit to page' },
+      {
+        id: 'fit',
+        comp: 'switch',
+        value: fit,
+        handler: () => {},
+      },
+      {
+        id: 'export-pdf',
+        comp: 'button',
+        text: 'To PDF',
+        handler: () => exportOthers('pdf'),
+      },
+      {
+        id: 'export-png',
+        comp: 'button',
+        text: 'To PNG',
+        handler: () => exportOthers('png'),
+      },
+      { comp: 'separator' },
+      {
+        id: 'export-xlsx',
+        comp: 'button',
+        text: 'To XLSX',
+        handler: () => exportExcel(false),
+      },
+      {
+        id: 'export-xlsx-chart',
+        comp: 'button',
+        text: 'To XLSX with Chart',
+        handler: () => exportExcel(true),
+      },
+      {
+        id: 'export-mspx',
+        comp: 'button',
+        text: 'To MS Project (XML)',
+        handler: () => exportOthers('mspx'),
+      },
+      { comp: 'spacer' },
+      {
+        id: 'config',
+        comp: 'segmented',
+        value: config,
+        options: [
+          { id: 'basic', label: 'Basic' },
+          { id: 'advanced', label: 'Advanced' },
+        ],
+        handler: () => {},
+      },
+    ];
+  }, [size, fit, config, api]);
+
+  const markers = useMemo(
+    () => [
+      {
+        start: new Date(2026, 3, 8),
+        text: 'Approval of strategy',
+        css: 'myMarker',
+      },
+    ],
+    [],
+  );
+
+  const calendar = useMemo(() => new Calendar(), []);
+
+  function handleClick({ item }) {
+    const parts = item.id.split('-');
+    if (parts[0] === 'export') {
+      if (parts[1] === 'xlsx') {
+        exportExcel(parts[2] === 'chart');
+      } else {
+        exportOthers(parts[1]);
+      }
+    }
+  }
+
+  const url = 'https://export.svar.dev/gantt/' + version;
+
+  function exportExcel(visual) {
+    api.exec('export-data', {
+      url,
+      format: 'xlsx',
+      excel: {
+        columns: visual
+          ? [
+              {
+                id: 'text',
+                header: 'Task name',
+                width: 200,
+              },
+            ]
+          : null,
+        sheetNames: ['Tasks', 'Links'],
+        dateFormat: 'yyyy-mmm-dd',
+        visual,
+      },
+    });
+  }
+
+  function exportOthers(format) {
+    const parts = size.split('-');
+    const props = {
+      size: parts[0],
+      landscape: parts[1] === 'landscape',
+      fitSize: fit && size != 'auto',
+      styles: '.wx-gantt .myMarker{ background-color: rgba(255, 84, 84, 0.77);',
+    };
+    api.exec('export-data', {
+      url,
+      format,
+      pdf: props,
+      png: props,
+      ganttConfig: {
+        cellWidth: 30,
+      },
+    });
+  }
+
+  function handleChange({ item, value }) {
+    if (item.id === 'size') setSize(value);
+    else if (item.id === 'fit') setFit(value);
+    else if (item.id === 'config') setConfig(value);
+  }
+
+  return (
+    <>
+      <Toolbar items={items} onClick={handleClick} onChange={handleChange} />
+      <div className="gtcell">
+        {config === 'basic' ? (
+          <Gantt
+            init={setApi}
+            {...skinSettings}
+            tasks={data.tasks}
+            links={data.links}
+            scales={data.scales}
+          />
+        ) : (
+          <Gantt
+            init={setApi}
+            baselines={true}
+            splitTasks={true}
+            unscheduledTasks={true}
+            markers={markers}
+            calendar={calendar}
+            {...skinSettings}
+            tasks={data.tasks}
+            links={data.links}
+            scales={data.scales}
+          />
+        )}
+      </div>
+    </>
+  );
+}