scroll changes + hour view fix

.eslintrc

@@ -1,13 +1,6 @@
 {
   "parser": "@typescript-eslint/parser",
-  "extends": [
-    "standard",
-    "standard-react",
-    "plugin:prettier/recommended",
-    "prettier/standard",
-    "prettier/react",
-    "plugin:@typescript-eslint/eslint-recommended"
-  ],
+  "extends": ["react-app", "react-app/jest"],
   "plugins": ["@typescript-eslint"],
   "env": {
     "node": true

example/package.json

@@ -24,7 +24,6 @@
     "react-scripts": "file:../node_modules/react-scripts"
   },
   "devDependencies": {
-    "@babel/plugin-syntax-object-rest-spread": "^7.8.3"
   },
   "browserslist": {
     "production": [

example/src/App.test.tsx

@@ -1,9 +1,9 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-import App from './App'
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./App";
 
-it('renders without crashing', () => {
-  const div = document.createElement('div')
-  ReactDOM.render(<App />, div)
-  ReactDOM.unmountComponentAtNode(div)
-})
+it("renders without crashing", () => {
+  const div = document.createElement("div");
+  ReactDOM.render(<App />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});

example/src/components/view-switcher.tsx

@@ -6,7 +6,7 @@ type ViewSwitcherProps = {
   onViewListChange: (isChecked: boolean) => void;
   onViewModeChange: (viewMode: ViewMode) => void;
 };
-export const ViewSwitcher: React.SFC<ViewSwitcherProps> = ({
+export const ViewSwitcher: React.FC<ViewSwitcherProps> = ({
   onViewModeChange,
   onViewListChange,
   isChecked,

example/src/index.tsx

@@ -1,7 +1,9 @@
 import "./index.css";
 
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import App from "./App";
 
-ReactDOM.render(<App />, document.getElementById("root"));
+const container = document.getElementById("root");
+const root = createRoot(container!);
+root.render(<App />);

package.json

@@ -36,7 +36,7 @@
     "deploy": "gh-pages -d example/build"
   },
   "peerDependencies": {
-    "react": "^17.0.2"
+    "react": "^18.0.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.12.0",
@@ -44,33 +44,21 @@
     "@testing-library/user-event": "^13.1.8",
     "@types/jest": "^26.0.23",
     "@types/node": "^15.0.1",
-    "@types/react": "^17.0.38",
-    "@types/react-dom": "^17.0.11",
-    "@typescript-eslint/eslint-plugin": "^5.10.0",
-    "@typescript-eslint/parser": "^5.9.1",
-    "babel-eslint": "^10.0.3",
+    "@types/react": "^18.0.5",
+    "@types/react-dom": "^18.0.1",
     "cross-env": "^7.0.3",
-    "eslint-config-prettier": "^6.15.0",
-    "eslint-config-standard": "^16.0.3",
-    "eslint-config-standard-react": "^9.2.0",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-node": "^11.0.0",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-promise": "^5.2.0",
-    "eslint-plugin-react": "^7.22.0",
-    "eslint-plugin-standard": "^4.1.0",
     "gh-pages": "^3.1.0",
     "microbundle-crl": "^0.13.11",
     "mini-css-extract-plugin": "^2.5.1",
     "npm-run-all": "^4.1.5",
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-normalize": "^10.0.1",
-    "postcss-preset-env": "^7.2.3",
+    "postcss-preset-env": "^7.6.0",
     "prettier": "^2.5.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-scripts": "^5.0.0",
-    "typescript": "^4.5.4"
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "react-scripts": "^5.0.1",
+    "typescript": "^4.6.4"
   },
   "files": [
     "dist"

src/components/calendar/calendar.tsx

@@ -241,16 +241,17 @@ export const Calendar: React.FC<CalendarProps> = ({
           {bottomValue}
         </text>
       );
-      if (i === 0 || date.getDate() !== dates[i - 1].getDate()) {
+      if (i !== 0 && date.getDate() !== dates[i - 1].getDate()) {
+        const displayDate = dates[i - 1];
         const topValue = `${getLocalDayOfWeek(
-          date,
+          displayDate,
           locale,
           "long"
-        )}, ${date.getDate()} ${getLocaleMonth(date, locale)}`;
+        )}, ${displayDate.getDate()} ${getLocaleMonth(displayDate, locale)}`;
         const topPosition = (date.getHours() - 24) / 2;
         topValues.push(
           <TopPartOfCalendar
-            key={topValue + date.getFullYear()}
+            key={topValue + displayDate.getFullYear()}
             value={topValue}
             x1Line={columnWidth * i}
             y1Line={0}

src/components/gantt/gantt.tsx

@@ -183,6 +183,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
     viewDate,
     columnWidth,
     dateSetup.dates,
+    dateSetup.viewMode,
     viewMode,
     currentViewDate,
     setCurrentViewDate,
@@ -245,7 +246,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
     } else {
       setSvgContainerHeight(tasks.length * rowHeight + headerHeight);
     }
-  }, [ganttHeight, tasks]);
+  }, [ganttHeight, tasks, headerHeight, rowHeight]);
 
   // scroll events
   useEffect(() => {
@@ -287,20 +288,32 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
         wrapperRef.current.removeEventListener("wheel", handleWheel);
       }
     };
-  }, [wrapperRef.current, scrollY, scrollX, ganttHeight, svgWidth, rtl]);
+  }, [
+    wrapperRef,
+    scrollY,
+    scrollX,
+    ganttHeight,
+    svgWidth,
+    rtl,
+    ganttFullHeight,
+  ]);
 
   const handleScrollY = (event: SyntheticEvent<HTMLDivElement>) => {
     if (scrollY !== event.currentTarget.scrollTop && !ignoreScrollEvent) {
       setScrollY(event.currentTarget.scrollTop);
+      setIgnoreScrollEvent(true);
+    } else {
+      setIgnoreScrollEvent(false);
     }
-    setIgnoreScrollEvent(false);
   };
 
   const handleScrollX = (event: SyntheticEvent<HTMLDivElement>) => {
     if (scrollX !== event.currentTarget.scrollLeft && !ignoreScrollEvent) {
       setScrollX(event.currentTarget.scrollLeft);
+      setIgnoreScrollEvent(true);
+    } else {
+      setIgnoreScrollEvent(false);
     }
-    setIgnoreScrollEvent(false);
   };
 
   /**

src/components/gantt/task-gantt-content.tsx

@@ -186,6 +186,10 @@ export const TaskGanttContent: React.FC<TaskGanttContentProps> = ({
     onDateChange,
     svg,
     isMoving,
+    point,
+    rtl,
+    setFailedTask,
+    setGanttEvent,
   ]);
 
   /**

src/components/other/horizontal-scroll.module.css

@@ -1,4 +1,32 @@
-.scroll {
+.scrollWrapper {
   overflow: auto;
   max-width: 100%;
 }
+.scrollWrapper::-webkit-scrollbar {
+  width: 1.1rem;
+  height: 1.1rem;
+}
+.scrollWrapper::-webkit-scrollbar-corner {
+  background: transparent;
+}
+.scrollWrapper::-webkit-scrollbar-thumb {
+  border: 6px solid transparent;
+  background: rgba(0, 0, 0, 0.2);
+  background: var(--palette-black-alpha-20, rgba(0, 0, 0, 0.2));
+  border-radius: 10px;
+  background-clip: padding-box;
+}
+.scrollWrapper::-webkit-scrollbar-thumb:hover {
+  border: 4px solid transparent;
+  background: rgba(0, 0, 0, 0.3);
+  background: var(--palette-black-alpha-30, rgba(0, 0, 0, 0.3));
+  background-clip: padding-box;
+}
+@media only screen and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
+  .scrollWrapper {
+    -webkit-overflow-scrolling: touch;
+  }
+}
+.scroll {
+  height: 1px;
+}

src/components/other/horizontal-scroll.tsx

@@ -24,11 +24,11 @@ export const HorizontalScroll: React.FC<{
           ? `0px ${taskListWidth}px 0px 0px`
           : `0px 0px 0px ${taskListWidth}px`,
       }}
-      className={styles.scroll}
+      className={styles.scrollWrapper}
       onScroll={onScroll}
       ref={scrollRef}
     >
-      <div style={{ width: svgWidth, height: 1 }} />
+      <div style={{ width: svgWidth }} className={styles.scroll} />
     </div>
   );
 };

src/components/other/tooltip.tsx

@@ -84,7 +84,7 @@ export const Tooltip: React.FC<TooltipProps> = ({
       setRelatedX(newRelatedX);
     }
   }, [
-    tooltipRef.current,
+    tooltipRef,
     task,
     arrowIndent,
     scrollX,
@@ -94,6 +94,7 @@ export const Tooltip: React.FC<TooltipProps> = ({
     rowHeight,
     svgContainerHeight,
     svgContainerWidth,
+    rtl,
   ]);
 
   return (

src/components/other/vertical-scroll.module.css

@@ -3,3 +3,23 @@
   width: 17px;
   flex-shrink: 0;
 }
+.scroll::-webkit-scrollbar {
+  width: 1.1rem;
+  height: 1.1rem;
+}
+.scroll::-webkit-scrollbar-corner {
+  background: transparent;
+}
+.scroll::-webkit-scrollbar-thumb {
+  border: 6px solid transparent;
+  background: rgba(0, 0, 0, 0.2);
+  background: var(--palette-black-alpha-20, rgba(0, 0, 0, 0.2));
+  border-radius: 10px;
+  background-clip: padding-box;
+}
+.scroll::-webkit-scrollbar-thumb:hover {
+  border: 4px solid transparent;
+  background: rgba(0, 0, 0, 0.3);
+  background: var(--palette-black-alpha-30, rgba(0, 0, 0, 0.3));
+  background-clip: padding-box;
+}