arrow Left/Right key events have added
This commit is contained in:
unknown
parent
77f985dad8
commit
af214d6b1b
30
example/package-lock.json
generated
30
example/package-lock.json
generated
@ -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=="
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@ -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 <maksym.vikarii@gmail.com>",
|
||||
"homepage": "https://github.com/MaTeMaTuK/gantt-task-react",
|
||||
|
||||
@ -44,6 +44,7 @@ export const Gantt: React.SFC<GanttProps> = ({
|
||||
}) => {
|
||||
const [ganttTasks, setGanttTasks] = useState<Task[]>(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<GanttProps> = ({
|
||||
};
|
||||
|
||||
const handleScroll = (event: SyntheticEvent<HTMLDivElement>) => {
|
||||
setScrollY(event.currentTarget.scrollTop);
|
||||
if (scrollY !== event.currentTarget.scrollTop)
|
||||
setScrollY(event.currentTarget.scrollTop);
|
||||
};
|
||||
|
||||
const handleScrollX = (event: SyntheticEvent<HTMLDivElement>) => {
|
||||
if (scrollX !== event.currentTarget.scrollLeft)
|
||||
setScrollX(event.currentTarget.scrollLeft);
|
||||
};
|
||||
|
||||
const handleWheel = (event: React.WheelEvent<HTMLDivElement>) => {
|
||||
@ -72,28 +79,38 @@ export const Gantt: React.SFC<GanttProps> = ({
|
||||
};
|
||||
|
||||
const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
|
||||
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<GanttProps> = ({
|
||||
barProps={barProps}
|
||||
ganttHeight={ganttHeight}
|
||||
scrollY={scrollY}
|
||||
scrollX={scrollX}
|
||||
onScroll={handleScrollX}
|
||||
/>
|
||||
<Scroll
|
||||
ganttFullHeight={ganttFullHeight}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { useRef, useEffect } from "react";
|
||||
import React, { useRef, useEffect, SyntheticEvent } from "react";
|
||||
import { GridProps, Grid } from "../grid/grid";
|
||||
import { CalendarProps, Calendar } from "../calendar/calendar";
|
||||
import { TaskGanttContentProps, TaskGanttContent } from "./task-gantt-content";
|
||||
@ -10,6 +10,8 @@ export type TaskGanttProps = {
|
||||
barProps: TaskGanttContentProps;
|
||||
ganttHeight: number;
|
||||
scrollY: number;
|
||||
scrollX: number;
|
||||
onScroll: (event: SyntheticEvent<HTMLDivElement>) => void;
|
||||
};
|
||||
export const TaskGantt: React.FC<TaskGanttProps> = ({
|
||||
gridProps,
|
||||
@ -17,9 +19,12 @@ export const TaskGantt: React.FC<TaskGanttProps> = ({
|
||||
barProps,
|
||||
ganttHeight,
|
||||
scrollY,
|
||||
scrollX,
|
||||
onScroll,
|
||||
}) => {
|
||||
const ganttSVGRef = useRef<SVGSVGElement>(null);
|
||||
const horizontalContainerRef = useRef<HTMLDivElement>(null);
|
||||
const verticalContainerRef = useRef<HTMLDivElement>(null);
|
||||
const newBarProps = { ...barProps, svg: ganttSVGRef };
|
||||
|
||||
useEffect(() => {
|
||||
@ -28,8 +33,18 @@ export const TaskGantt: React.FC<TaskGanttProps> = ({
|
||||
}
|
||||
}, [scrollY]);
|
||||
|
||||
useEffect(() => {
|
||||
if (verticalContainerRef.current) {
|
||||
verticalContainerRef.current.scrollLeft = scrollX;
|
||||
}
|
||||
}, [scrollX]);
|
||||
|
||||
return (
|
||||
<div className={styles.ganttVerticalContainer}>
|
||||
<div
|
||||
className={styles.ganttVerticalContainer}
|
||||
ref={verticalContainerRef}
|
||||
onScroll={onScroll}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={gridProps.gridWidth}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user