feat:支持自定义依赖颜色配置

ahwgs · May 13, 2023 · 5aa5fcf · 5aa5fcf
1 parent 47196f2
commit 5aa5fcf
Show file tree

Hide file tree

Showing 11 changed files with 158 additions and 82 deletions.
diff --git a/src/Gantt.tsx b/src/Gantt.tsx
@@ -66,7 +66,12 @@ export interface GanttProps<RecordType = DefaultRecordType> {
    */
   customSights?: Gantt.SightConfig[]
 
-  lang: 'zh-CN' | 'en-US'
+  lang?: 'zh-CN' | 'en-US'
+
+  /**
+   * 隐藏左侧表格
+   */
+  hideTable?: boolean
 }
 export interface GanttRef {
   backToday: () => void
@@ -104,30 +109,38 @@ const GanttComponent = <RecordType extends DefaultRecordType>(props: GanttProps<
     onExpand,
     customSights = [],
     lang = 'zh-CN',
+    hideTable = false,
   } = props
-  const store = useMemo(
-    () => new GanttStore({ rowHeight, disabled, customSights, lang }),
-    [rowHeight, customSights, lang]
-  )
+
+  const store = useMemo(() => new GanttStore({ rowHeight, disabled, customSights, lang }), [rowHeight])
   useEffect(() => {
     store.setData(data, startDateKey, endDateKey)
   }, [data, endDateKey, startDateKey, store])
+
   useEffect(() => {
     store.setColumns(columns)
   }, [columns, store])
+
   useEffect(() => {
     store.setOnUpdate(onUpdate)
   }, [onUpdate, store])
+
   useEffect(() => {
     store.setDependencies(dependencies)
   }, [dependencies, store])
 
+  useEffect(() => {
+    store.setHideTable(hideTable)
+  }, [hideTable])
+
   useEffect(() => {
     if (isRestDay) store.setIsRestDay(isRestDay)
   }, [isRestDay, store])
+
   useEffect(() => {
     if (unit) store.switchSight(unit)
   }, [unit, store])
+
   useImperativeHandle(innerRef, () => ({
     backToday: () => store.scrollToToday(),
     getWidthByDate: store.getWidthByDate,
@@ -155,6 +168,7 @@ const GanttComponent = <RecordType extends DefaultRecordType>(props: GanttProps<
       renderLeftText,
       renderRightText,
       onExpand,
+      hideTable,
     }),
     [
       store,
@@ -175,22 +189,23 @@ const GanttComponent = <RecordType extends DefaultRecordType>(props: GanttProps<
       renderLeftText,
       renderRightText,
       onExpand,
+      hideTable,
     ]
   )
 
   return (
     <Context.Provider value={ContextValue}>
       <Body>
         <header>
-          <TableHeader />
+          {!hideTable && <TableHeader />}
           <TimeAxis />
         </header>
         <main ref={store.mainElementRef} onScroll={store.handleScroll}>
           <SelectionIndicator />
-          <TableBody />
+          {!hideTable && <TableBody />}
           <Chart />
         </main>
-        <Divider />
+        {!hideTable && <Divider />}
         {showBackToday && <TimeIndicator />}
         {showUnitSwitch && <TimeAxisScaleSelect />}
         <ScrollBar />

diff --git a/src/components/chart/index.tsx b/src/components/chart/index.tsx
@@ -1,5 +1,5 @@
 import { observer } from 'mobx-react-lite'
-import React, { useCallback, useContext, useEffect } from 'react'
+import React, { memo, useCallback, useContext, useEffect } from 'react'
 import Context from '../../context'
 import BarList from '../bar-list'
 import BarThumbList from '../bar-thumb-list'
@@ -19,6 +19,7 @@ const Chart: React.FC = () => {
     },
     [store]
   )
+
   const handleMouseLeave = useCallback(() => {
     store.handleMouseLeave()
   }, [store])
@@ -98,4 +99,4 @@ const Chart: React.FC = () => {
     </div>
   )
 }
-export default observer(Chart)
+export default memo(observer(Chart))
diff --git a/src/components/dependencies/Dependence.tsx b/src/components/dependencies/Dependence.tsx
@@ -1,6 +1,6 @@
-import React, { useContext } from 'react'
-import { observer } from 'mobx-react-lite'
 import find from 'lodash/find'
+import { observer } from 'mobx-react-lite'
+import React, { useContext } from 'react'
 import Context from '../../context'
 import { Gantt } from '../../types'
 import styles from './Dependence.less'
@@ -54,7 +54,7 @@ function getPoints(from: Point, to: Point, type: Gantt.DependenceType) {
 }
 const Dependence: React.FC<DependenceProps> = ({ data }) => {
   const { store, barHeight } = useContext(Context)
-  const { from, to, type } = data
+  const { from, to, type, color = '#f87872' } = data
   const barList = store.getBarList
   const fromBar = find(barList, bar => bar.record.id === from)
   const toBar = find(barList, bar => bar.record.id === to)
@@ -74,9 +74,9 @@ const Dependence: React.FC<DependenceProps> = ({ data }) => {
   const points = [...getPoints(start, end, type), end]
   const endPosition = type === 'start_finish' || type === 'finish_finish' ? -1 : 1
   return (
-    <g stroke='#f87872' className={styles['task-dependency-line']}>
+    <g stroke={color} className={styles['task-dependency-line']}>
       <path
-        className={styles.line}
+        style={{ stroke: color }}
         d={`
           M${start.x},${start.y}
           ${points.map(point => `L${point.x},${point.y}`).join('\n')}
@@ -88,7 +88,7 @@ const Dependence: React.FC<DependenceProps> = ({ data }) => {
       <path
         name='arrow'
         strokeWidth='1'
-        fill='#f87872'
+        fill={color}
         d={`
         M${end.x},${end.y} 
         L${end.x - 4 * endPosition},${end.y - 3 * endPosition} 

diff --git a/src/components/scroll-bar/index.tsx b/src/components/scroll-bar/index.tsx
@@ -1,6 +1,6 @@
-import React, { useContext, useCallback, useState, useRef } from 'react'
 import { usePersistFn } from 'ahooks'
 import { observer } from 'mobx-react-lite'
+import React, { memo, useCallback, useContext, useRef, useState } from 'react'
 import Context from '../../context'
 import './index.less'
 
@@ -20,11 +20,13 @@ const ScrollBar: React.FC = () => {
     // TODO 调整倍率
     store.setTranslateX(distance * (store.viewWidth / store.scrollBarWidth) + positionRef.current.translateX)
   })
+
   const handleMouseUp = useCallback(() => {
     window.removeEventListener('mousemove', handleMouseMove)
     window.removeEventListener('mouseup', handleMouseUp)
     setResizing(false)
   }, [handleMouseMove])
+
   const handleMouseDown = useCallback(
     (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
       positionRef.current.left = event.clientX
@@ -67,4 +69,4 @@ const ScrollBar: React.FC = () => {
     </div>
   )
 }
-export default observer(ScrollBar)
+export default memo(observer(ScrollBar))
diff --git a/src/context.ts b/src/context.ts
@@ -39,6 +39,8 @@ export interface GanttContext<RecordType = DefaultRecordType> {
   renderLeftText?: (barInfo: Gantt.Bar<RecordType>) => React.ReactNode
   renderRightText?: (barInfo: Gantt.Bar<RecordType>) => React.ReactNode
   onExpand?: (record: Gantt.Record<RecordType>, collapsed: boolean) => void
+
+  hideTable?: boolean
 }
 const context = createContext<GanttContext>({} as GanttContext)
 export default context
diff --git a/src/store.ts b/src/store.ts
@@ -56,6 +56,7 @@ function isRestDay(date: string) {
   const calc = [0, 6]
   return calc.includes(dayjs(date).weekday())
 }
+
 class GanttStore {
   constructor({
     rowHeight,
@@ -200,6 +201,16 @@ class GanttStore {
     this.dependencies = dependencies
   }
 
+  @action
+  setHideTable(isHidden = false) {
+    if (isHidden) {
+      this.tableWidth = 0
+      this.viewWidth = this.width - this.tableWidth
+    } else {
+      this.initWidth()
+    }
+  }
+
   @action
   handlePanMove(translateX: number) {
     this.scrolling = true
@@ -226,16 +237,6 @@ class GanttStore {
     if (this.columns.length === columnsWidthArr.length) return
     this.tableWidth = width
     this.viewWidth = this.width - this.tableWidth
-    // if (width <= this.totalColumnWidth) {
-    //   this.tableWidth = width
-    //   this.viewWidth = this.width - this.tableWidth
-    // }
-    // const tableMinWidth = 200;
-    // const chartMinWidth = 200;
-    // if (this.tableWidth + increase >= tableMinWidth && this.viewWidth - increase >= chartMinWidth) {
-    //   this.tableWidth += increase;
-    //   this.viewWidth -= increase;
-    // }
   }
 
   @action initWidth() {

diff --git a/src/types.ts b/src/types.ts
@@ -103,5 +103,6 @@ export namespace Gantt {
     from: string
     to: string
     type: DependenceType
+    color?: string
   }
 }
diff --git a/website/demo/basic.en-US.tsx b/website/demo/basic.en-US.tsx
@@ -1,37 +1,59 @@
 import dayjs from 'dayjs'
 import RcGantt from 'rc-gantt'
-import React from 'react'
+import React, { useState } from 'react'
 
 interface Data {
+  id: number
   name: string
   startDate: string
   endDate: string
 }
 
-const data = Array.from({ length: 100 }).fill({
-  name: 'TitleTitleTitleTitleTitle',
-  startDate: dayjs().format('YYYY-MM-DD'),
-  endDate: dayjs().add(1, 'week').format('YYYY-MM-DD'),
-}) as Data[]
+function createData(len: number) {
+  const result: Data[] = []
+  for (let i = 0; i < len; i++) {
+    result.push({
+      id: i,
+      name: 'Title' + i,
+      startDate: dayjs().subtract(-i, 'day').format('YYYY-MM-DD'),
+      endDate: dayjs().add(i, 'day').format('YYYY-MM-DD'),
+    })
+  }
+  return result
+}
 
-const App = () => (
-  <div style={{ width: '100%', height: 500 }}>
-    <RcGantt<Data>
-      lang='en-US'
-      data={data}
-      columns={[
-        {
-          name: 'name',
-          label: 'Title',
-          width: 100,
-        },
-      ]}
-      onUpdate={async (row, startDate, endDate) => {
-        console.log('update', row, startDate, endDate)
-        return true
-      }}
-    />
-  </div>
-)
+const App = () => {
+  const [data, setData] = useState(createData(20))
+  console.log('data', data)
+  return (
+    <div style={{ width: '100%', height: 500 }}>
+      <RcGantt<Data>
+        data={data}
+        columns={[
+          {
+            name: 'name',
+            label: 'Custom Title',
+            width: 100,
+          },
+        ]}
+        lang='en-US'
+        onUpdate={async (row, startDate, endDate) => {
+          console.log('update', row, startDate, endDate)
+          setData(prev => {
+            const newList = [...prev]
+            const index = newList.findIndex(val => val.id === row.id)
+            newList[index] = {
+              ...row,
+              startDate: dayjs(startDate).format('YYYY-MM-DD'),
+              endDate: dayjs(endDate).format('YYYY-MM-DD'),
+            }
+            return newList
+          })
+          return true
+        }}
+      />
+    </div>
+  )
+}
 
 export default App