diff --git a/README.md b/README.md index 0ebbd63..ca0c97f 100644 --- a/README.md +++ b/README.md @@ -112,7 +112,7 @@ npm start - TooltipContent: [`React.FC<{ task: Task; fontSize: string; fontFamily: string; }>;`](https://github.com/MaTeMaTuK/gantt-task-react/blob/main/src/components/other/tooltip.tsx#L56) - TaskListHeader: `React.FC<{ headerHeight: number; rowWidth: string; fontFamily: string; fontSize: string;}>;` -- TaskListTable: `React.FC<{ rowHeight: number; rowWidth: string; fontFamily: string; fontSize: string; locale: string; tasks: Task[]; }>;` +- TaskListTable: `React.FC<{ rowHeight: number; rowWidth: string; fontFamily: string; fontSize: string; locale: string; tasks: Task[]; selectedTaskId: string setSelectedTask: (taskId: string) => void; }>;` ### Task diff --git a/package.json b/package.json index bb85638..88d2b3e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "gantt-task-react", - "version": "0.2.0", + "version": "0.2.1", "description": "Interactive Gantt Chart for React with TypeScript.", "author": "MaTeMaTuK ", "homepage": "https://github.com/MaTeMaTuK/gantt-task-react", diff --git a/src/components/gantt/gantt.tsx b/src/components/gantt/gantt.tsx index 7e6dc82..e9795b5 100644 --- a/src/components/gantt/gantt.tsx +++ b/src/components/gantt/gantt.tsx @@ -45,6 +45,7 @@ export const Gantt: React.SFC = ({ }) => { const wrapperRef = useRef(null); const [ganttTasks, setGanttTasks] = useState(tasks); + const [selectedTask, setSelectedTask] = useState(""); const [scrollY, setScrollY] = useState(0); const [scrollX, setScrollX] = useState(0); const [ignoreScrollEvent, setIgnoreScrollEvent] = useState(false); @@ -158,6 +159,31 @@ export const Gantt: React.SFC = ({ setGanttTasks(tasks); }; + /** + * Task select event + */ + const handleSelectedTask = (taskId: string) => { + const newSelectedTask = ganttTasks.find(t => t.id === taskId); + if (newSelectedTask) { + if (onSelect) { + const oldSelectedTask = ganttTasks.find(t => t.id === selectedTask); + if (oldSelectedTask) { + onSelect(oldSelectedTask, false); + } + onSelect(newSelectedTask, true); + } + setSelectedTask(newSelectedTask.id); + } else { + if (onSelect) { + const oldSelectedTask = ganttTasks.find(t => t.id === selectedTask); + if (oldSelectedTask) { + onSelect(oldSelectedTask, false); + } + } + setSelectedTask(""); + } + }; + const gridProps: GridProps = { columnWidth, gridWidth, @@ -177,6 +203,8 @@ export const Gantt: React.SFC = ({ }; const barProps: TaskGanttContentProps = { tasks: ganttTasks, + selectedTask, + setSelectedTask: handleSelectedTask, rowHeight, barCornerRadius, columnWidth, @@ -198,7 +226,6 @@ export const Gantt: React.SFC = ({ onProgressChange, onDoubleClick, onTaskDelete, - onSelect, TooltipContent, }; @@ -213,6 +240,8 @@ export const Gantt: React.SFC = ({ scrollY, ganttHeight, horizontalContainerClass: styles.horizontalContainer, + selectedTaskId: selectedTask, + setSelectedTask, TaskListHeader, TaskListTable, }; diff --git a/src/components/gantt/task-gantt-content.tsx b/src/components/gantt/task-gantt-content.tsx index 95c8785..1e0c358 100644 --- a/src/components/gantt/task-gantt-content.tsx +++ b/src/components/gantt/task-gantt-content.tsx @@ -26,6 +26,7 @@ export type BarEvent = { export type TaskGanttContentProps = { tasks: Task[]; dates: Date[]; + selectedTask: string; rowHeight: number; barCornerRadius: number; columnWidth: number; @@ -42,6 +43,7 @@ export type TaskGanttContentProps = { arrowIndent: number; fontSize: string; fontFamily: string; + setSelectedTask: (taskId: string) => void; TooltipContent: React.FC<{ task: Task; fontSize: string; @@ -53,6 +55,7 @@ export type TaskGanttContentProps = { export const TaskGanttContent: React.FC = ({ tasks, dates, + selectedTask, rowHeight, barCornerRadius, columnWidth, @@ -69,12 +72,12 @@ export const TaskGanttContent: React.FC = ({ arrowIndent, fontFamily, fontSize, + setSelectedTask, onTasksChange, onDateChange, onProgressChange, onDoubleClick, onTaskDelete, - onSelect, TooltipContent, }) => { const point = svg?.current?.createSVGPoint(); @@ -82,7 +85,6 @@ export const TaskGanttContent: React.FC = ({ action: "", }); const [barTasks, setBarTasks] = useState([]); - const [selectedTask, setSelectedTask] = useState(null); const [failedTask, setFailedTask] = useState(null); const [xStep, setXStep] = useState(0); const [initEventX1Delta, setInitEventX1Delta] = useState(0); @@ -268,13 +270,7 @@ export const TaskGanttContent: React.FC = ({ ) => { if (!event) { if (action === "select") { - if (selectedTask && onSelect) { - onSelect(selectedTask, false); - } - setSelectedTask(task); - if (onSelect) { - onSelect(task, true); - } + setSelectedTask(task.id); } } // Keyboard events @@ -286,7 +282,7 @@ export const TaskGanttContent: React.FC = ({ if (result !== undefined && result) { const newTasks = barTasks.filter(t => t.id !== task.id); onTasksChange(newTasks); - !!onSelect && onSelect(task, false); + setSelectedTask(""); } } catch (error) { console.error("Error on Delete. " + error); @@ -360,7 +356,7 @@ export const TaskGanttContent: React.FC = ({ isDelete={!task.isDisabled} onEventStart={handleBarEventStart} key={task.id} - isSelected={task.id === selectedTask?.id} + isSelected={task.id === selectedTask} /> ); })} diff --git a/src/components/task-list/task-list-table.tsx b/src/components/task-list/task-list-table.tsx index 2903051..3a1c9ae 100644 --- a/src/components/task-list/task-list-table.tsx +++ b/src/components/task-list/task-list-table.tsx @@ -9,6 +9,8 @@ export const TaskListTableDefault: React.FC<{ fontSize: string; locale: string; tasks: Task[]; + selectedTaskId: string; + setSelectedTask: (taskId: string) => void; }> = ({ rowHeight, rowWidth, tasks, fontFamily, fontSize, locale }) => { const dateTimeOptions = { weekday: "short", diff --git a/src/components/task-list/task-list.tsx b/src/components/task-list/task-list.tsx index 0b86c83..bbe8d10 100644 --- a/src/components/task-list/task-list.tsx +++ b/src/components/task-list/task-list.tsx @@ -12,6 +12,8 @@ export type TaskListProps = { locale: string; tasks: Task[]; horizontalContainerClass?: string; + selectedTaskId: string; + setSelectedTask: (taskId: string) => void; TaskListHeader: React.FC<{ headerHeight: number; rowWidth: string; @@ -25,6 +27,8 @@ export type TaskListProps = { fontSize: string; locale: string; tasks: Task[]; + selectedTaskId: string; + setSelectedTask: (taskId: string) => void; }>; }; @@ -36,6 +40,8 @@ export const TaskList: React.FC = ({ rowHeight, scrollY, tasks, + selectedTaskId, + setSelectedTask, locale, ganttHeight, horizontalContainerClass, @@ -62,7 +68,10 @@ export const TaskList: React.FC = ({ fontSize, tasks, locale, + selectedTaskId, + setSelectedTask, }; + return (
diff --git a/src/types/public-types.ts b/src/types/public-types.ts index 7ce9b55..292d191 100644 --- a/src/types/public-types.ts +++ b/src/types/public-types.ts @@ -106,6 +106,8 @@ export interface StylingOption { fontSize: string; locale: string; tasks: Task[]; + selectedTaskId: string; + setSelectedTask: (taskId: string) => void; }>; }