feat: react gantt

Author: wkylin

.cspell/custom-dictionary-workspace.txt

@@ -20,6 +20,8 @@ ENOENT
 EPSG
 fengian
 fengxian
+gantt
+Gantt
 hookspath
 Huksy
 iclient

package-lock.json

@@ -312,7 +312,8 @@
     "use-debounce": "^10.0.3",
     "use-deep-compare-effect": "^1.8.1",
     "use-react-router-breadcrumbs": "^4.0.1",
-    "user-agents": "^1.1.325"
+    "user-agents": "^1.1.325",
+    "wx-react-gantt": "^1.3.0"
   },
   "engines": {
     "node": ">= 14.17.1",

package.json

@@ -71,6 +71,7 @@ const ProSecNav = () => {
     { label: 'PrismRender', key: '/prism', icon: <FireOutlined /> },
     { label: 'ReactTilt', key: '/tilt', icon: <QrcodeOutlined /> },
     { label: 'Music', key: '/music', icon: <FireOutlined /> },
+    { label: 'Gantt', key: '/gantt', icon: <QrcodeOutlined /> },
     { label: 'Crypto', key: '/crypto', icon: <QrcodeOutlined /> },
     { label: 'Video', key: '/video', icon: <FireOutlined /> },
     { label: 'Three', key: '/three', icon: <QrcodeOutlined /> },

src/pages/layout/proSecNav/index.jsx

@@ -0,0 +1,62 @@
+import React, { useRef, useEffect } from 'react'
+import { Gantt, Willow } from 'wx-react-gantt'
+import 'wx-react-gantt/dist/gantt.css'
+const ReactGantt = () => {
+  const tasks = [
+    {
+      id: 20,
+      text: 'New Task',
+      start: new Date(2024, 5, 11),
+      end: new Date(2024, 6, 12),
+      duration: 1,
+      progress: 2,
+      type: 'task',
+      lazy: false,
+    },
+    {
+      id: 47,
+      text: '[1] Master project',
+      start: new Date(2024, 5, 12),
+      end: new Date(2024, 7, 12),
+      duration: 8,
+      progress: 0,
+      parent: 0,
+      type: 'summary',
+    },
+    {
+      id: 22,
+      text: 'Task',
+      start: new Date(2024, 7, 11),
+      end: new Date(2024, 8, 12),
+      duration: 8,
+      progress: 0,
+      parent: 47,
+      type: 'task',
+    },
+    {
+      id: 21,
+      text: 'New Task 2',
+      start: new Date(2024, 7, 10),
+      end: new Date(2024, 8, 12),
+      duration: 3,
+      progress: 0,
+      type: 'task',
+      lazy: false,
+    },
+  ]
+
+  const links = [{ id: 1, source: 20, target: 21, type: 'e2e' }]
+
+  const scales = [
+    { unit: 'month', step: 1, format: 'MMMM yyy' },
+    { unit: 'day', step: 1, format: 'd' },
+  ]
+
+  return (
+    <Willow>
+      <Gantt tasks={tasks} links={links} scales={scales} />
+    </Willow>
+  )
+}
+
+export default ReactGantt

src/pages/reactGantt/index.jsx

@@ -47,6 +47,7 @@ const ReactPdf = lazy(() => import('@pages/reactPdf'))
 const MyIframe = lazy(() => import('@pages/postmessage/myIframe'))
 const Exception403 = lazy(() => import('@stateless/Exception/exception403'))
 const NoMatch = lazy(() => import('@stateless/NoMatch'))
+const ReactGantt = lazy(() => import('@pages/reactGantt'))
 
 const rootRouter = [
   {
@@ -82,6 +83,14 @@ const rootRouter = [
         auth: true,
         element: lazyLoad(ParallaxVert),
       },
+      {
+        index: false,
+        path: 'gantt',
+        name: 'gantt',
+        key: '/gantt',
+        auth: false,
+        element: lazyLoad(ReactGantt),
+      },
       {
         index: false,
         path: 'qrcode',

src/routers/index.jsx

@@ -135,6 +135,7 @@ select:-webkit-autofill:active {
   display: flex;
   justify-content: center;
   align-items: center;
+  overflow: auto;
 }
 
 @keyframes rotate {

src/styles/reset.css

@@ -167,3 +167,9 @@ export const jsonToMap = (json) => new Map(Object.entries(JSON.parse(json)))
 export const snakeToCamelCase = (snake) => snake.toLowerCase().replace(/(_\w)/g, (word) => word.toUpperCase().substr(1))
 
 export const mathRound = (num) => Math.round(num * 100) / 100
+
+export const openInNewTab = (url) => {
+  const win = window.open(url, '_blank')
+  win.focus()
+  return win
+}