From af214d6b1b6fde5f061e21d97e8deaaaf52ff5c3 Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 25 Aug 2020 20:58:36 +0300 Subject: [PATCH] arrow Left/Right key events have added --- example/package-lock.json | 30 ++++++++++++++-------------- package.json | 2 +- src/components/gantt/gantt.tsx | 31 +++++++++++++++++++++++------ src/components/gantt/task-gantt.tsx | 19 ++++++++++++++++-- 4 files changed, 58 insertions(+), 24 deletions(-) diff --git a/example/package-lock.json b/example/package-lock.json index 26f493b35..ec4c3d973 100644 --- a/example/package-lock.json +++ b/example/package-lock.json @@ -379,9 +379,9 @@ "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==" }, "@types/react": { - "version": "16.9.46", - "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.46.tgz", - "integrity": "sha512-dbHzO3aAq1lB3jRQuNpuZ/mnu+CdD3H0WVaaBQA8LTT3S33xhVBUj232T8M3tAhSWJs/D/UqORYUlJNl/8VQZg==", + "version": "16.9.47", + "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.47.tgz", + "integrity": "sha512-dAJO4VbrjYqTUwFiQqAKjLyHHl4RSTNnRyPdX3p16MPbDKvow51wxATUPxoe2QsiXNMEYrOjc2S6s92VjG+1VQ==", "requires": { "@types/prop-types": "*", "csstype": "^3.0.2" @@ -513,9 +513,9 @@ "integrity": "sha512-lacdXOimsiD0QyNf9BC/mxivNJ/ybBGJXQFKzRekp1WTHoVUWsUHEn+2T8GJAzzIhyOuXA+gOxCVN3l+5PLPUA==" }, "csstype": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.2.tgz", - "integrity": "sha512-ofovWglpqoqbfLNOTBNZLSbMuGrblAf1efvvArGKOZMBrIoJeu5UsAipQolkijtyQx5MtAzT/J9IHj/CEY1mJw==" + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.3.tgz", + "integrity": "sha512-jPl+wbWPOWJ7SXsWyqGRk3lGecbar0Cb0OvZF/r/ZU011R4YqiRehgkQ9p4eQfo9DSDLqLL3wHwfxeJiuIsNag==" }, "dom-accessibility-api": { "version": "0.3.0", @@ -780,9 +780,9 @@ "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==" }, "csstype": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.2.tgz", - "integrity": "sha512-ofovWglpqoqbfLNOTBNZLSbMuGrblAf1efvvArGKOZMBrIoJeu5UsAipQolkijtyQx5MtAzT/J9IHj/CEY1mJw==" + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.3.tgz", + "integrity": "sha512-jPl+wbWPOWJ7SXsWyqGRk3lGecbar0Cb0OvZF/r/ZU011R4YqiRehgkQ9p4eQfo9DSDLqLL3wHwfxeJiuIsNag==" } } }, @@ -799,18 +799,18 @@ "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==" }, "@types/react": { - "version": "16.9.46", - "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.46.tgz", - "integrity": "sha512-dbHzO3aAq1lB3jRQuNpuZ/mnu+CdD3H0WVaaBQA8LTT3S33xhVBUj232T8M3tAhSWJs/D/UqORYUlJNl/8VQZg==", + "version": "16.9.47", + "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.47.tgz", + "integrity": "sha512-dAJO4VbrjYqTUwFiQqAKjLyHHl4RSTNnRyPdX3p16MPbDKvow51wxATUPxoe2QsiXNMEYrOjc2S6s92VjG+1VQ==", "requires": { "@types/prop-types": "*", "csstype": "^3.0.2" } }, "csstype": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.2.tgz", - "integrity": "sha512-ofovWglpqoqbfLNOTBNZLSbMuGrblAf1efvvArGKOZMBrIoJeu5UsAipQolkijtyQx5MtAzT/J9IHj/CEY1mJw==" + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.3.tgz", + "integrity": "sha512-jPl+wbWPOWJ7SXsWyqGRk3lGecbar0Cb0OvZF/r/ZU011R4YqiRehgkQ9p4eQfo9DSDLqLL3wHwfxeJiuIsNag==" } } }, diff --git a/package.json b/package.json index 862aa352e..854945753 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "gantt-task-react", - "version": "0.1.3", + "version": "0.1.4", "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 5596b470c..8923f313d 100644 --- a/src/components/gantt/gantt.tsx +++ b/src/components/gantt/gantt.tsx @@ -44,6 +44,7 @@ export const Gantt: React.SFC = ({ }) => { const [ganttTasks, setGanttTasks] = useState(tasks); const [scrollY, setScrollY] = useState(0); + const [scrollX, setScrollX] = useState(0); const [startDate, endDate] = ganttDateRange(ganttTasks, viewMode); const dates = seedDates(startDate, endDate, viewMode); @@ -57,7 +58,13 @@ export const Gantt: React.SFC = ({ }; const handleScroll = (event: SyntheticEvent) => { - setScrollY(event.currentTarget.scrollTop); + if (scrollY !== event.currentTarget.scrollTop) + setScrollY(event.currentTarget.scrollTop); + }; + + const handleScrollX = (event: SyntheticEvent) => { + if (scrollX !== event.currentTarget.scrollLeft) + setScrollX(event.currentTarget.scrollLeft); }; const handleWheel = (event: React.WheelEvent) => { @@ -72,28 +79,38 @@ export const Gantt: React.SFC = ({ }; const handleKeyDown = (event: React.KeyboardEvent) => { - let newScrollY = 0; + event.preventDefault(); + let newScrollY = scrollY; + let newScrollX = scrollX; let isX = true; switch (event.key) { case "Down": // IE/Edge specific value case "ArrowDown": - newScrollY = scrollY + rowHeight; + newScrollY += rowHeight; isX = false; break; case "Up": // IE/Edge specific value case "ArrowUp": - newScrollY = scrollY - rowHeight; + newScrollY -= rowHeight; isX = false; break; + case "Left": case "ArrowLeft": - // Do something for "left arrow" key press. + newScrollX -= columnWidth; break; case "Right": // IE/Edge specific value case "ArrowRight": - // Do something for "right arrow" key press. + newScrollX += columnWidth; break; } if (isX) { + if (newScrollX < 0) { + setScrollX(0); + } else if (newScrollX > gridWidth) { + setScrollX(gridWidth); + } else { + setScrollX(newScrollX); + } } else { if (newScrollY < 0) { setScrollY(0); @@ -177,6 +194,8 @@ export const Gantt: React.SFC = ({ barProps={barProps} ganttHeight={ganttHeight} scrollY={scrollY} + scrollX={scrollX} + onScroll={handleScrollX} /> ) => void; }; export const TaskGantt: React.FC = ({ gridProps, @@ -17,9 +19,12 @@ export const TaskGantt: React.FC = ({ barProps, ganttHeight, scrollY, + scrollX, + onScroll, }) => { const ganttSVGRef = useRef(null); const horizontalContainerRef = useRef(null); + const verticalContainerRef = useRef(null); const newBarProps = { ...barProps, svg: ganttSVGRef }; useEffect(() => { @@ -28,8 +33,18 @@ export const TaskGantt: React.FC = ({ } }, [scrollY]); + useEffect(() => { + if (verticalContainerRef.current) { + verticalContainerRef.current.scrollLeft = scrollX; + } + }, [scrollX]); + return ( -
+