diff --git a/src/Gantt.tsx b/src/Gantt.tsx index 3817bde..21120fb 100644 --- a/src/Gantt.tsx +++ b/src/Gantt.tsx @@ -66,7 +66,12 @@ export interface GanttProps { */ 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 = (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 = (props: GanttProps< renderLeftText, renderRightText, onExpand, + hideTable, }), [ store, @@ -175,6 +189,7 @@ const GanttComponent = (props: GanttProps< renderLeftText, renderRightText, onExpand, + hideTable, ] ) @@ -182,15 +197,15 @@ const GanttComponent = (props: GanttProps<
- + {!hideTable && }
- + {!hideTable && }
- + {!hideTable && } {showBackToday && } {showUnitSwitch && } diff --git a/src/components/chart/index.tsx b/src/components/chart/index.tsx index a3584d3..5a7bd50 100644 --- 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 = () => { ) } -export default observer(Chart) +export default memo(observer(Chart)) diff --git a/src/components/dependencies/Dependence.tsx b/src/components/dependencies/Dependence.tsx index 6b70924..9baeed6 100644 --- 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 = ({ 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 = ({ data }) => { const points = [...getPoints(start, end, type), end] const endPosition = type === 'start_finish' || type === 'finish_finish' ? -1 : 1 return ( - + `L${point.x},${point.y}`).join('\n')} @@ -88,7 +88,7 @@ const Dependence: React.FC = ({ data }) => { { // 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) => { positionRef.current.left = event.clientX @@ -67,4 +69,4 @@ const ScrollBar: React.FC = () => { ) } -export default observer(ScrollBar) +export default memo(observer(ScrollBar)) diff --git a/src/context.ts b/src/context.ts index b00b27b..d236f61 100644 --- a/src/context.ts +++ b/src/context.ts @@ -39,6 +39,8 @@ export interface GanttContext { renderLeftText?: (barInfo: Gantt.Bar) => React.ReactNode renderRightText?: (barInfo: Gantt.Bar) => React.ReactNode onExpand?: (record: Gantt.Record, collapsed: boolean) => void + + hideTable?: boolean } const context = createContext({} as GanttContext) export default context diff --git a/src/store.ts b/src/store.ts index e9bac1c..0b2a8c3 100644 --- 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 index fce261c..cbe4e65 100644 --- 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 index 9385bd9..2c149be 100644 --- 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 = () => ( -
- - 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 - }} - /> -
-) +const App = () => { + const [data, setData] = useState(createData(20)) + console.log('data', data) + return ( +
+ + 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 + }} + /> +
+ ) +} export default App diff --git a/website/demo/basic.tsx b/website/demo/basic.tsx index aefb944..753fa9a 100644 --- a/website/demo/basic.tsx +++ b/website/demo/basic.tsx @@ -1,36 +1,58 @@ -import React from 'react' -import RcGantt from 'rc-gantt' import dayjs from 'dayjs' +import RcGantt from 'rc-gantt' +import React, { useState } from 'react' interface Data { + id: number name: string startDate: string endDate: string } -const data = Array.from({ length: 100 }).fill({ - name: '一个名称一个名称一个名称一个名称', - 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: '一个名称一个名称一个名称一个名称', + startDate: dayjs().subtract(-i, 'day').format('YYYY-MM-DD'), + endDate: dayjs().add(i, 'day').format('YYYY-MM-DD'), + }) + } + return result +} -const App = () => ( -
- - data={data} - columns={[ - { - name: 'name', - label: '名称', - width: 100, - }, - ]} - onUpdate={async (row, startDate, endDate) => { - console.log('update', row, startDate, endDate) - return true - }} - /> -
-) +const App = () => { + const [data, setData] = useState(createData(20)) + console.log('data', data) + return ( +
+ + data={data} + columns={[ + { + name: 'name', + label: '名称', + width: 100, + }, + ]} + 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 + }} + /> +
+ ) +} export default App diff --git a/website/demo/custom.tsx b/website/demo/custom.tsx index 4321c08..27317bf 100644 --- a/website/demo/custom.tsx +++ b/website/demo/custom.tsx @@ -1,6 +1,6 @@ -import React, { useState, useRef } from 'react' -import RcGantt, { Gantt, GanttRef } from 'rc-gantt' import dayjs from 'dayjs' +import RcGantt, { Gantt, GanttRef } from 'rc-gantt' +import React, { useRef, useState } from 'react' const data = Array.from({ length: 100 }).fill({ name: '一个名称一个名称一个名称一个名称', @@ -26,6 +26,8 @@ const Button = ({ const App = () => { const [val1, setVal1] = useState(true) + const [val3, setVal3] = useState(false) + const [val2, setVal2] = useState('day') const ref = useRef() @@ -55,6 +57,7 @@ const App = () => { backgroundColor: 'red', borderColor: 'yellow', })} + hideTable={val3} alwaysShowTaskBar={val1} unit={val2} /> @@ -72,6 +75,12 @@ const App = () => { ))} +
+ unit 当前视图 + +