arrow Left/Right key events have added

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 <[email protected]>",
   "homepage": "https://github.com/MaTeMaTuK/gantt-task-react",

src/components/gantt/gantt.tsx

@@ -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}

src/components/gantt/task-gantt.tsx

@@ -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,16 +10,21 @@ export type TaskGanttProps = {
   barProps: TaskGanttContentProps;
   ganttHeight: number;
   scrollY: number;
+  scrollX: number;
+  onScroll: (event: SyntheticEvent<HTMLDivElement>) => void;
 };
 export const TaskGantt: React.FC<TaskGanttProps> = ({
   gridProps,
   calendarProps,
   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}