Merge branch 'main' into add-viewmode-year

.eslintrc

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

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "pwa-chrome",
+      "request": "launch",
+      "name": "Launch Chrome against localhost",
+      "url": "http://localhost:3000",
+      "webRoot": "${workspaceFolder}"
+    }
+  ]
+}

README.md

@@ -44,6 +44,7 @@ You may handle actions
   onTaskDelete={onTaskDelete}
   onProgressChange={onProgressChange}
   onDoubleClick={onDblClick}
+  onClick={onClick}
 />
 ```
 
@@ -72,6 +73,7 @@ npm start
 | :----------------- | :---------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------- |
 | onSelect           | (task: Task, isSelected: boolean) => void                                     | Specifies the function to be executed on the taskbar select or unselect event.          |
 | onDoubleClick      | (task: Task) => void                                                          | Specifies the function to be executed on the taskbar onDoubleClick event.               |
+| onClick            | (task: Task) => void                                                          | Specifies the function to be executed on the taskbar onClick event.                     |
 | onDelete\*         | (task: Task) => void/boolean/Promise<void>/Promise<boolean>                   | Specifies the function to be executed on the taskbar on Delete button press event.      |
 | onDateChange\*     | (task: Task, children: Task[]) => void/boolean/Promise<void>/Promise<boolean> | Specifies the function to be executed when drag taskbar event on timeline has finished. |
 | onProgressChange\* | (task: Task, children: Task[]) => void/boolean/Promise<void>/Promise<boolean> | Specifies the function to be executed when drag taskbar progress event has finished.    |
@@ -86,6 +88,7 @@ npm start
 | :------------- | :------ | :---------------------------------------------------------------------------------------------------------- |
 | viewMode       | enum    | Specifies the time scale. Hour, Quarter Day, Half Day, Day, Week(ISO-8601, 1st day is Monday), Month, Year. |
 | viewDate       | date    | Specifies display date and time for display.                                                                |
+| preStepsCount  | number  | Specifies empty space before the fist task                                                                  |
 | locale         | string  | Specifies the month name language. Able formats: ISO 639-2, Java Locale.                                    |
 | rtl            | boolean | Sets rtl mode.                                                                                              |
 

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 React from "react";
-import ReactDOM from 'react-dom'
+import { createRoot } from "react-dom/client";
-import App from './App'
+import App from "./App";
 
-it('renders without crashing', () => {
+it("renders without crashing", () => {
-  const div = document.createElement('div')
+  const div = document.createElement("div");
-  ReactDOM.render(<App />, div)
+  const root = createRoot(div);
-  ReactDOM.unmountComponentAtNode(div)
+  root.render(<App />);
-})
+});

example/src/App.tsx

@@ -54,6 +54,10 @@ const App = () => {
     alert("On Double Click event Id:" + task.id);
   };
 
+  const handleClick = (task: Task) => {
+    console.log("On Click event Id:" + task.id);
+  };
+
   const handleSelect = (task: Task, isSelected: boolean) => {
     console.log(task.name + " has " + (isSelected ? "selected" : "unselected"));
   };
@@ -64,7 +68,7 @@ const App = () => {
   };
 
   return (
-    <div>
+    <div className="Wrapper">
       <ViewSwitcher
         onViewModeChange={viewMode => setView(viewMode)}
         onViewListChange={setIsChecked}
@@ -78,6 +82,7 @@ const App = () => {
         onDelete={handleTaskDelete}
         onProgressChange={handleProgressChange}
         onDoubleClick={handleDblClick}
+        onClick={handleClick}
         onSelect={handleSelect}
         onExpanderClick={handleExpanderClick}
         listCellWidth={isChecked ? "155px" : ""}
@@ -91,6 +96,7 @@ const App = () => {
         onDelete={handleTaskDelete}
         onProgressChange={handleProgressChange}
         onDoubleClick={handleDblClick}
+        onClick={handleClick}
         onSelect={handleSelect}
         onExpanderClick={handleExpanderClick}
         listCellWidth={isChecked ? "155px" : ""}

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.css

@@ -1,3 +1,6 @@
+.Wrapper {
+  margin-bottom: 2rem;
+}
 .ViewContainer {
   list-style: none;
   -ms-box-orient: horizontal;

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

@@ -1,6 +1,6 @@
 {
   "name": "gantt-task-react",
-  "version": "0.3.8",
+  "version": "0.3.9",
   "description": "Interactive Gantt Chart for React with TypeScript.",
   "author": "MaTeMaTuK <maksym.vikarii@gmail.com>",
   "homepage": "https://github.com/MaTeMaTuK/gantt-task-react",
@@ -36,41 +36,29 @@
     "deploy": "gh-pages -d example/build"
   },
   "peerDependencies": {
-    "react": "^17.0.2"
+    "react": "^18.0.0"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.12.0",
+    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^11.2.6",
+    "@testing-library/react": "^13.3.0",
-    "@testing-library/user-event": "^13.1.8",
+    "@testing-library/user-event": "^14.2.1",
-    "@types/jest": "^26.0.23",
+    "@types/jest": "^27.5.1",
     "@types/node": "^15.0.1",
-    "@types/react": "^17.0.38",
+    "@types/react": "^18.0.5",
-    "@types/react-dom": "^17.0.11",
+    "@types/react-dom": "^18.0.5",
-    "@typescript-eslint/eslint-plugin": "^5.10.0",
-    "@typescript-eslint/parser": "^5.9.1",
-    "babel-eslint": "^10.0.3",
     "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",
+    "prettier": "^2.7.1",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
-    "react-scripts": "^5.0.0",
+    "react-scripts": "^5.0.1",
-    "typescript": "^4.5.4"
+    "typescript": "^4.7.4"
   },
   "files": [
     "dist"

src/components/calendar/calendar.tsx

@@ -285,16 +285,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

@@ -20,9 +20,9 @@ import { BarTask } from "../../types/bar-task";
 import { convertToBarTasks } from "../../helpers/bar-helper";
 import { GanttEvent } from "../../types/gantt-task-actions";
 import { DateSetup } from "../../types/date-setup";
-import styles from "./gantt.module.css";
 import { HorizontalScroll } from "../other/horizontal-scroll";
 import { removeHiddenTasks, sortTasks } from "../../helpers/other-helper";
+import styles from "./gantt.module.css";
 
 export const Gantt: React.FunctionComponent<GanttProps> = ({
   tasks,
@@ -32,6 +32,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
   rowHeight = 50,
   ganttHeight = 0,
   viewMode = ViewMode.Day,
+  preStepsCount = 1,
   locale = "en-GB",
   barFill = 60,
   barCornerRadius = 3,
@@ -60,6 +61,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
   onDateChange,
   onProgressChange,
   onDoubleClick,
+  onClick,
   onDelete,
   onSelect,
   onExpanderClick,
@@ -67,7 +69,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
   const wrapperRef = useRef<HTMLDivElement>(null);
   const taskListRef = useRef<HTMLDivElement>(null);
   const [dateSetup, setDateSetup] = useState<DateSetup>(() => {
-    const [startDate, endDate] = ganttDateRange(tasks, viewMode);
+    const [startDate, endDate] = ganttDateRange(tasks, viewMode, preStepsCount);
     return { viewMode, dates: seedDates(startDate, endDate, viewMode) };
   });
   const [currentViewDate, setCurrentViewDate] = useState<Date | undefined>(
@@ -105,7 +107,11 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
       filteredTasks = tasks;
     }
     filteredTasks = filteredTasks.sort(sortTasks);
-    const [startDate, endDate] = ganttDateRange(filteredTasks, viewMode);
+    const [startDate, endDate] = ganttDateRange(
+      filteredTasks,
+      viewMode,
+      preStepsCount
+    );
     let newDates = seedDates(startDate, endDate, viewMode);
     if (rtl) {
       newDates = newDates.reverse();
@@ -139,6 +145,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
   }, [
     tasks,
     viewMode,
+    preStepsCount,
     rowHeight,
     barCornerRadius,
     columnWidth,
@@ -182,6 +189,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
     viewDate,
     columnWidth,
     dateSetup.dates,
+    dateSetup.viewMode,
     viewMode,
     currentViewDate,
     setCurrentViewDate,
@@ -244,7 +252,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
     } else {
       setSvgContainerHeight(tasks.length * rowHeight + headerHeight);
     }
-  }, [ganttHeight, tasks]);
+  }, [ganttHeight, tasks, headerHeight, rowHeight]);
 
   // scroll events
   useEffect(() => {
@@ -276,30 +284,38 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
     };
 
     // subscribe if scroll is necessary
-    if (wrapperRef.current) {
+    wrapperRef.current?.addEventListener("wheel", handleWheel, {
-      wrapperRef.current.addEventListener("wheel", handleWheel, {
       passive: false,
     });
-    }
     return () => {
-      if (wrapperRef.current) {
+      wrapperRef.current?.removeEventListener("wheel", handleWheel);
-        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);
+    }
   };
 
   const handleScrollX = (event: SyntheticEvent<HTMLDivElement>) => {
     if (scrollX !== event.currentTarget.scrollLeft && !ignoreScrollEvent) {
       setScrollX(event.currentTarget.scrollLeft);
-    }
+      setIgnoreScrollEvent(true);
+    } else {
       setIgnoreScrollEvent(false);
+    }
   };
 
   /**
@@ -411,6 +427,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
     onDateChange,
     onProgressChange,
     onDoubleClick,
+    onClick,
     onDelete,
   };
 

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

@@ -53,6 +53,7 @@ export const TaskGanttContent: React.FC<TaskGanttContentProps> = ({
   onDateChange,
   onProgressChange,
   onDoubleClick,
+  onClick,
   onDelete,
 }) => {
   const point = svg?.current?.createSVGPoint();
@@ -185,6 +186,10 @@ export const TaskGanttContent: React.FC<TaskGanttContentProps> = ({
     onDateChange,
     svg,
     isMoving,
+    point,
+    rtl,
+    setFailedTask,
+    setGanttEvent,
   ]);
 
   /**
@@ -230,6 +235,8 @@ export const TaskGanttContent: React.FC<TaskGanttContentProps> = ({
       }
     } else if (action === "dblclick") {
       !!onDoubleClick && onDoubleClick(task);
+    } else if (action === "click") {
+      !!onClick && onClick(task);
     }
     // Change task event start
     else if (action === "move") {

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

@@ -1,4 +1,33 @@
-.scroll {
+.scrollWrapper {
   overflow: auto;
   max-width: 100%;
+  /*firefox*/
+  scrollbar-width: thin;
+  /*iPad*/
+  height: 1.2rem;
+}
+.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) {
+}
+.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

@@ -1,5 +1,27 @@
 .scroll {
   overflow: hidden auto;
-  width: 17px;
+  width: 1rem;
   flex-shrink: 0;
+  /*firefox*/
+  scrollbar-width: thin;
+}
+.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;
 }

src/components/other/vertical-scroll.tsx

@@ -29,7 +29,7 @@ export const VerticalScroll: React.FC<{
       style={{
         height: ganttHeight,
         marginTop: headerHeight,
-        marginLeft: rtl ? "" : "-17px",
+        marginLeft: rtl ? "" : "-1rem",
       }}
       className={styles.scroll}
       onScroll={onScroll}

src/components/task-item/task-item.tsx

@@ -100,6 +100,9 @@ export const TaskItem: React.FC<TaskItemProps> = props => {
       onDoubleClick={e => {
         onEventStart("dblclick", task, e);
       }}
+      onClick={e => {
+        onEventStart("click", task, e);
+      }}
       onFocus={() => {
         onEventStart("select", task);
       }}

src/helpers/bar-helper.ts

@@ -22,17 +22,11 @@ export const convertToBarTasks = (
   milestoneBackgroundColor: string,
   milestoneBackgroundSelectedColor: string
 ) => {
-  const dateDelta =
-    dates[1].getTime() -
-    dates[0].getTime() -
-    dates[1].getTimezoneOffset() * 60 * 1000 +
-    dates[0].getTimezoneOffset() * 60 * 1000;
   let barTasks = tasks.map((t, i) => {
     return convertToBarTask(
       t,
       i,
       dates,
-      dateDelta,
       columnWidth,
       rowHeight,
       taskHeight,
@@ -71,7 +65,6 @@ const convertToBarTask = (
   task: Task,
   index: number,
   dates: Date[],
-  dateDelta: number,
   columnWidth: number,
   rowHeight: number,
   taskHeight: number,
@@ -96,7 +89,6 @@ const convertToBarTask = (
         task,
         index,
         dates,
-        dateDelta,
         columnWidth,
         rowHeight,
         taskHeight,
@@ -111,7 +103,6 @@ const convertToBarTask = (
         task,
         index,
         dates,
-        dateDelta,
         columnWidth,
         rowHeight,
         taskHeight,
@@ -129,7 +120,6 @@ const convertToBarTask = (
         task,
         index,
         dates,
-        dateDelta,
         columnWidth,
         rowHeight,
         taskHeight,
@@ -150,7 +140,6 @@ const convertToBar = (
   task: Task,
   index: number,
   dates: Date[],
-  dateDelta: number,
   columnWidth: number,
   rowHeight: number,
   taskHeight: number,
@@ -165,11 +154,11 @@ const convertToBar = (
   let x1: number;
   let x2: number;
   if (rtl) {
-    x2 = taskXCoordinateRTL(task.start, dates, dateDelta, columnWidth);
+    x2 = taskXCoordinateRTL(task.start, dates, columnWidth);
-    x1 = taskXCoordinateRTL(task.end, dates, dateDelta, columnWidth);
+    x1 = taskXCoordinateRTL(task.end, dates, columnWidth);
   } else {
-    x1 = taskXCoordinate(task.start, dates, dateDelta, columnWidth);
+    x1 = taskXCoordinate(task.start, dates, columnWidth);
-    x2 = taskXCoordinate(task.end, dates, dateDelta, columnWidth);
+    x2 = taskXCoordinate(task.end, dates, columnWidth);
   }
   let typeInternal: TaskTypeInternal = task.type;
   if (typeInternal === "task" && x2 - x1 < handleWidth * 2) {
@@ -215,7 +204,6 @@ const convertToMilestone = (
   task: Task,
   index: number,
   dates: Date[],
-  dateDelta: number,
   columnWidth: number,
   rowHeight: number,
   taskHeight: number,
@@ -224,7 +212,7 @@ const convertToMilestone = (
   milestoneBackgroundColor: string,
   milestoneBackgroundSelectedColor: string
 ): BarTask => {
-  const x = taskXCoordinate(task.start, dates, dateDelta, columnWidth);
+  const x = taskXCoordinate(task.start, dates, columnWidth);
   const y = taskYCoordinate(index, rowHeight, taskHeight);
 
   const x1 = x - taskHeight * 0.5;
@@ -258,37 +246,21 @@ const convertToMilestone = (
   };
 };
 
-const taskXCoordinate = (
+const taskXCoordinate = (xDate: Date, dates: Date[], columnWidth: number) => {
-  xDate: Date,
+  const index = dates.findIndex(d => d.getTime() >= xDate.getTime()) - 1;
-  dates: Date[],
+
-  dateDelta: number,
+  const remainderMillis = xDate.getTime() - dates[index].getTime();
-  columnWidth: number
+  const percentOfInterval =
-) => {
+    remainderMillis / (dates[index + 1].getTime() - dates[index].getTime());
-  const index = ~~(
+  const x = index * columnWidth + percentOfInterval * columnWidth;
-    (xDate.getTime() -
-      dates[0].getTime() +
-      xDate.getTimezoneOffset() -
-      dates[0].getTimezoneOffset()) /
-    dateDelta
-  );
-  const x = Math.round(
-    (index +
-      (xDate.getTime() -
-        dates[index].getTime() -
-        xDate.getTimezoneOffset() * 60 * 1000 +
-        dates[index].getTimezoneOffset() * 60 * 1000) /
-        dateDelta) *
-      columnWidth
-  );
   return x;
 };
 const taskXCoordinateRTL = (
   xDate: Date,
   dates: Date[],
-  dateDelta: number,
   columnWidth: number
 ) => {
-  let x = taskXCoordinate(xDate, dates, dateDelta, columnWidth);
+  let x = taskXCoordinate(xDate, dates, columnWidth);
   x += columnWidth;
   return x;
 };

src/helpers/date-helper.ts

@@ -69,7 +69,11 @@ export const startOfDate = (date: Date, scale: DateHelperScales) => {
   return newDate;
 };
 
-export const ganttDateRange = (tasks: Task[], viewMode: ViewMode) => {
+export const ganttDateRange = (
+  tasks: Task[],
+  viewMode: ViewMode,
+  preStepsCount: number
+) => {
   let newStartDate: Date = tasks[0].start;
   let newEndDate: Date = tasks[0].start;
   for (const task of tasks) {
@@ -88,39 +92,43 @@ export const ganttDateRange = (tasks: Task[], viewMode: ViewMode) => {
       newEndDate = startOfDate(newEndDate, "year");
       break;
     case ViewMode.Month:
-      newStartDate = addToDate(newStartDate, -1, "month");
+      newStartDate = addToDate(newStartDate, -1 * preStepsCount, "month");
       newStartDate = startOfDate(newStartDate, "month");
       newEndDate = addToDate(newEndDate, 1, "year");
       newEndDate = startOfDate(newEndDate, "year");
       break;
     case ViewMode.Week:
       newStartDate = startOfDate(newStartDate, "day");
+      newStartDate = addToDate(
+        getMonday(newStartDate),
+        -7 * preStepsCount,
+        "day"
+      );
       newEndDate = startOfDate(newEndDate, "day");
-      newStartDate = addToDate(getMonday(newStartDate), -7, "day");
       newEndDate = addToDate(newEndDate, 1.5, "month");
       break;
     case ViewMode.Day:
       newStartDate = startOfDate(newStartDate, "day");
+      newStartDate = addToDate(newStartDate, -1 * preStepsCount, "day");
       newEndDate = startOfDate(newEndDate, "day");
-      newStartDate = addToDate(newStartDate, -1, "day");
       newEndDate = addToDate(newEndDate, 19, "day");
       break;
     case ViewMode.QuarterDay:
       newStartDate = startOfDate(newStartDate, "day");
+      newStartDate = addToDate(newStartDate, -1 * preStepsCount, "day");
       newEndDate = startOfDate(newEndDate, "day");
-      newStartDate = addToDate(newStartDate, -1, "day");
       newEndDate = addToDate(newEndDate, 66, "hour"); // 24(1 day)*3 - 6
       break;
     case ViewMode.HalfDay:
       newStartDate = startOfDate(newStartDate, "day");
+      newStartDate = addToDate(newStartDate, -1 * preStepsCount, "day");
       newEndDate = startOfDate(newEndDate, "day");
-      newStartDate = addToDate(newStartDate, -1, "day");
       newEndDate = addToDate(newEndDate, 108, "hour"); // 24(1 day)*5 - 12
       break;
     case ViewMode.Hour:
       newStartDate = startOfDate(newStartDate, "hour");
+      newStartDate = addToDate(newStartDate, -1 * preStepsCount, "hour");
       newEndDate = startOfDate(newEndDate, "day");
-      newStartDate = addToDate(newStartDate, -1, "hour");
       newEndDate = addToDate(newEndDate, 1, "day");
       break;
   }

src/helpers/other-helper.ts

@@ -40,11 +40,10 @@ function getChildren(taskList: Task[], task: Task) {
   } else {
     tasks = taskList.filter(t => t.project && t.project === task.id);
   }
-  const taskChildren = tasks.reduce(
+  var taskChildren: Task[] = [];
-    (children: Task[], t) =>
+  tasks.forEach(t => {
-      children.concat(children, getChildren(taskList, t)),
+    taskChildren.push(...getChildren(taskList, t));
-    []
+  })
-  );
   tasks = tasks.concat(tasks, taskChildren);
   return tasks;
 }

src/test/gant.test.tsx

@@ -1,11 +1,12 @@
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import { Gantt } from "../index";
 
 describe("gantt", () => {
   it("renders without crashing", () => {
     const div = document.createElement("div");
-    ReactDOM.render(
+    const root = createRoot(div);
+    root.render(
       <Gantt
         tasks={[
           {
@@ -17,9 +18,7 @@ describe("gantt", () => {
             type: "task",
           },
         ]}
-      />,
+      />
-      div
     );
-    ReactDOM.unmountComponentAtNode(div);
   });
 });

src/types/gantt-task-actions.ts

@@ -6,6 +6,7 @@ export type GanttContentMoveAction =
   | "mouseleave"
   | "delete"
   | "dblclick"
+  | "click"
   | "select"
   | ""
   | BarMoveAction;

src/types/public-types.ts

@@ -45,6 +45,10 @@ export interface EventOption {
    * Invokes on bar double click.
    */
   onDoubleClick?: (task: Task) => void;
+  /**
+   * Invokes on bar click.
+   */
+  onClick?: (task: Task) => void;
   /**
    * Invokes on end and start time change. Chart undoes operation if method return false or error.
    */
@@ -72,6 +76,7 @@ export interface EventOption {
 export interface DisplayOption {
   viewMode?: ViewMode;
   viewDate?: Date;
+  preStepsCount?: number;
   /**
    * Specifies the month name language. Able formats: ISO 639-2, Java Locale
    */