Merge pull request #78 from MaTeMaTuK/dev

Dev

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

@@ -60,6 +60,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
   onDateChange,
   onProgressChange,
   onDoubleClick,
+  onClick,
   onDelete,
   onSelect,
   onExpanderClick,
@@ -182,6 +183,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
     viewDate,
     columnWidth,
     dateSetup.dates,
+    dateSetup.viewMode,
     viewMode,
     currentViewDate,
     setCurrentViewDate,
@@ -244,7 +246,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
     } else {
       setSvgContainerHeight(tasks.length * rowHeight + headerHeight);
     }
-  }, [ganttHeight, tasks]);
+  }, [ganttHeight, tasks, headerHeight, rowHeight]);
 
   // scroll events
   useEffect(() => {
@@ -276,30 +278,38 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
     };
 
     // subscribe if scroll is necessary
-    if (wrapperRef.current) {
-      wrapperRef.current.addEventListener("wheel", handleWheel, {
-        passive: false,
-      });
-    }
+    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);
     }
-    setIgnoreScrollEvent(false);
   };
 
   const handleScrollX = (event: SyntheticEvent<HTMLDivElement>) => {
     if (scrollX !== event.currentTarget.scrollLeft && !ignoreScrollEvent) {
       setScrollX(event.currentTarget.scrollLeft);
+      setIgnoreScrollEvent(true);
+    } else {
+      setIgnoreScrollEvent(false);
     }
-    setIgnoreScrollEvent(false);
   };
 
   /**
@@ -411,6 +421,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,36 @@
-.scroll {
+.scrollWrapper {
   overflow: auto;
   max-width: 100%;
+  /*firefox*/
+  scrollbar-width: thin;
+  /*iPad*/
+  height: 1.1rem;
+}
+.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

@@ -2,4 +2,26 @@
   overflow: hidden auto;
   width: 17px;
   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/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/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

@@ -44,6 +44,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.
    */