From 895c49ce68d50d3e50214fef654add818bb8850b Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 15 Sep 2020 00:10:58 +0300 Subject: [PATCH] onSelect has changed --- package.json | 2 +- src/components/bar/bar.tsx | 35 +++++------ src/components/gantt/task-gantt-content.tsx | 70 ++++++++++++--------- 3 files changed, 58 insertions(+), 49 deletions(-) diff --git a/package.json b/package.json index ddd0b30a0..bb856384f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "gantt-task-react", - "version": "0.1.9", + "version": "0.2.0", "description": "Interactive Gantt Chart for React with TypeScript.", "author": "MaTeMaTuK ", "homepage": "https://github.com/MaTeMaTuK/gantt-task-react", diff --git a/src/components/bar/bar.tsx b/src/components/bar/bar.tsx index 11291de6b..43ddbbffd 100644 --- a/src/components/bar/bar.tsx +++ b/src/components/bar/bar.tsx @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React from "react"; import { BarTask } from "../../types/bar-task"; import { progressWithByParams, @@ -16,10 +16,11 @@ export type BarProps = { isProgressChangeable: boolean; isDateChangeable: boolean; isDelete: boolean; + isSelected: boolean; onEventStart: ( - event: React.MouseEvent | React.KeyboardEvent | React.FocusEvent, action: GanttContentMoveAction, - selectedTask: BarTask + selectedTask: BarTask, + event?: React.MouseEvent | React.KeyboardEvent ) => any; }; @@ -30,9 +31,8 @@ export const Bar: React.FC = ({ isDateChangeable, onEventStart, isDelete, + isSelected, }) => { - const [isSelected, setIsSelected] = useState(false); - const progressWidth = progressWithByParams(task.x1, task.x2, task.progress); const progressPoint = getProgressPoint( progressWidth + task.x1, @@ -47,28 +47,23 @@ export const Bar: React.FC = ({ onKeyDown={e => { switch (e.key) { case "Delete": { - if (isDelete) onEventStart(e, "delete", task); + if (isDelete) onEventStart("delete", task, e); break; } } e.stopPropagation(); }} onMouseEnter={e => { - onEventStart(e, "mouseenter", task); + onEventStart("mouseenter", task, e); }} onMouseLeave={e => { - onEventStart(e, "mouseleave", task); + onEventStart("mouseleave", task, e); }} onDoubleClick={e => { - onEventStart(e, "dblclick", task); - }} - onFocus={e => { - setIsSelected(true); - onEventStart(e, "select", task); + onEventStart("dblclick", task, e); }} - onBlur={e => { - setIsSelected(false); - onEventStart(e, "unselect", task); + onFocus={() => { + onEventStart("select", task); }} > = ({ styles={task.styles} isSelected={isSelected} onMouseDown={e => { - isDateChangeable && onEventStart(e, "move", task); + isDateChangeable && onEventStart("move", task, e); }} /> @@ -98,7 +93,7 @@ export const Bar: React.FC = ({ height={task.height - 2} barCornerRadius={task.barCornerRadius} onMouseDown={e => { - onEventStart(e, "start", task); + onEventStart("start", task, e); }} /> {/* right */} @@ -109,7 +104,7 @@ export const Bar: React.FC = ({ height={task.height - 2} barCornerRadius={task.barCornerRadius} onMouseDown={e => { - onEventStart(e, "end", task); + onEventStart("end", task, e); }} /> @@ -118,7 +113,7 @@ export const Bar: React.FC = ({ { - onEventStart(e, "progress", task); + onEventStart("progress", task, e); }} /> )} diff --git a/src/components/gantt/task-gantt-content.tsx b/src/components/gantt/task-gantt-content.tsx index e820b6e4c..95c878581 100644 --- a/src/components/gantt/task-gantt-content.tsx +++ b/src/components/gantt/task-gantt-content.tsx @@ -9,7 +9,7 @@ import { BarMoveAction, } from "../../helpers/bar-helper"; import { Tooltip } from "../other/tooltip"; -import { isKeyboardEvent, isMouseEvent } from "../../helpers/other-helper"; +import { isKeyboardEvent } from "../../helpers/other-helper"; export type GanttContentMoveAction = | "mouseenter" @@ -17,10 +17,9 @@ export type GanttContentMoveAction = | "delete" | "dblclick" | "select" - | "unselect" | BarMoveAction; export type BarEvent = { - selectedTask?: BarTask; + changedTask?: BarTask; originalTask?: BarTask; action: GanttContentMoveAction; }; @@ -83,6 +82,7 @@ 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); @@ -143,7 +143,7 @@ export const TaskGanttContent: React.FC = ({ useEffect(() => { const handleMouseMove = async (event: MouseEvent) => { - if (!barEvent.selectedTask || !point || !svg?.current) return; + if (!barEvent.changedTask || !point || !svg?.current) return; event.preventDefault(); point.x = event.clientX; @@ -154,7 +154,7 @@ export const TaskGanttContent: React.FC = ({ const { isChanged, changedTask } = handleTaskBySVGMouseEvent( cursor.x, barEvent.action as BarMoveAction, - barEvent.selectedTask, + barEvent.changedTask, xStep, timeStep, initEventX1Delta @@ -163,12 +163,12 @@ export const TaskGanttContent: React.FC = ({ setBarTasks( barTasks.map(t => (t.id === changedTask.id ? changedTask : t)) ); - setBarEvent({ ...barEvent, selectedTask: changedTask }); + setBarEvent({ ...barEvent, changedTask: changedTask }); } }; const handleMouseUp = async (event: MouseEvent) => { - const { selectedTask, action, originalTask } = barEvent; + const { changedTask: selectedTask, action, originalTask } = barEvent; if (!selectedTask || !point || !svg?.current || !originalTask) return; event.preventDefault(); @@ -262,44 +262,53 @@ export const TaskGanttContent: React.FC = ({ * Method is Start point of task change */ const handleBarEventStart = async ( - event: React.MouseEvent | React.KeyboardEvent | React.FocusEvent, action: GanttContentMoveAction, - selectedTask: BarTask + task: BarTask, + event?: React.MouseEvent | React.KeyboardEvent ) => { + if (!event) { + if (action === "select") { + if (selectedTask && onSelect) { + onSelect(selectedTask, false); + } + setSelectedTask(task); + if (onSelect) { + onSelect(task, true); + } + } + } // Keyboard events - if (isKeyboardEvent(event)) { + else if (isKeyboardEvent(event)) { if (action === "delete") { if (onTaskDelete) { try { - const result = await onTaskDelete(selectedTask); + const result = await onTaskDelete(task); if (result !== undefined && result) { - const newTasks = barTasks.filter(t => t.id !== selectedTask.id); + const newTasks = barTasks.filter(t => t.id !== task.id); onTasksChange(newTasks); - !!onSelect && onSelect(selectedTask, false); + !!onSelect && onSelect(task, false); } } catch (error) { console.error("Error on Delete. " + error); } } } - } else if (!isMouseEvent(event)) { - if (action === "select") { - !!onSelect && onSelect(selectedTask, true); - } else if (action === "unselect") { - !!onSelect && onSelect(selectedTask, false); - } } // Mouse Events else if (action === "mouseenter") { if (!barEvent.action) { - setBarEvent({ action, selectedTask, originalTask: selectedTask }); + setBarEvent({ + action, + changedTask: task, + originalTask: task, + }); } } else if (action === "mouseleave") { if (barEvent.action === "mouseenter") { setBarEvent({ action: "" }); } } else if (action === "dblclick") { - !!onDoubleClick && onDoubleClick(selectedTask); + !!onDoubleClick && onDoubleClick(task); } // Change task event start else if (action === "move") { @@ -308,13 +317,17 @@ export const TaskGanttContent: React.FC = ({ const cursor = point.matrixTransform( svg.current.getScreenCTM()?.inverse() ); - setInitEventX1Delta(cursor.x - selectedTask.x1); - setBarEvent({ action, selectedTask, originalTask: selectedTask }); + setInitEventX1Delta(cursor.x - task.x1); + setBarEvent({ + action, + changedTask: task, + originalTask: task, + }); } else { setBarEvent({ action, - selectedTask, - originalTask: selectedTask, + changedTask: task, + originalTask: task, }); } }; @@ -347,17 +360,18 @@ export const TaskGanttContent: React.FC = ({ isDelete={!task.isDisabled} onEventStart={handleBarEventStart} key={task.id} + isSelected={task.id === selectedTask?.id} /> ); })} - {barEvent.selectedTask && ( + {barEvent.changedTask && (