Fix holiday display

Holidays are displayed only below or equal Day viewMode

Signed-off-by: Laurent Fasani <laurent.fasani@obeo.fr>

src/components/gantt/gantt.tsx

@@ -1699,28 +1699,22 @@ export const Gantt: React.FC<GanttProps> = ({
     [additionalLeftSpace, additionalRightSpace, svgWidth]
   );
 
-  const gridProps: GridProps = useMemo(
-    () => ({
-      additionalLeftSpace,
-      distances,
-      ganttFullHeight,
-      isUnknownDates,
-      rtl,
-      startDate,
-      todayColor: colorStyles.todayColor,
-      viewMode,
-    }),
-    [
-      additionalLeftSpace,
-      colorStyles.todayColor,
-      distances,
-      ganttFullHeight,
-      isUnknownDates,
-      rtl,
-      startDate,
-      viewMode,
-    ]
-  );
+  const gridProps: GridProps = {
+    additionalLeftSpace,
+    ganttFullHeight,
+    columnWidth: distances.columnWidth,
+    isUnknownDates,
+    rtl,
+    startDate,
+    todayColor: colorStyles.todayColor,
+    holidayBackgroundColor: colorStyles.holidayBackgroundColor,
+    viewMode,
+    startColumnIndex,
+    endColumnIndex,
+    checkIsHoliday,
+    getDate,
+    minTaskDate,
+  };
 
   const calendarProps: CalendarProps = useMemo(
     () => ({
@@ -1766,7 +1760,6 @@ export const Gantt: React.FC<GanttProps> = ({
       authorizedRelations,
       additionalLeftSpace,
       additionalRightSpace,
-      checkIsHoliday,
       childOutOfParentWarnings,
       childTasksMap,
       colorStyles,
@@ -1775,14 +1768,12 @@ export const Gantt: React.FC<GanttProps> = ({
       dependencyMap,
       dependentMap,
       distances,
-      endColumnIndex,
       fixEndPosition,
       fixStartPosition,
       fontFamily,
       fontSize,
       fullRowHeight,
       ganttRelationEvent,
-      getDate,
       getTaskCoordinates,
       getTaskGlobalIndexByRef,
       handleBarRelationStart,
@@ -1802,7 +1793,6 @@ export const Gantt: React.FC<GanttProps> = ({
       selectTaskOnMouseDown,
       selectedIdsMirror,
       setTooltipTask: onChangeTooltipTask,
-      startColumnIndex,
       taskHalfHeight,
       taskHeight,
       taskToHasDependencyWarningMap,
@@ -1920,6 +1910,7 @@ export const Gantt: React.FC<GanttProps> = ({
       <TaskGantt
         barProps={barProps}
         calendarProps={calendarProps}
+        distances={distances}
         fullRowHeight={fullRowHeight}
         fullSvgWidth={fullSvgWidth}
         ganttFullHeight={ganttFullHeight}

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

@@ -35,7 +35,6 @@ export type TaskGanttContentProps = {
   authorizedRelations: RelationKind[];
   additionalLeftSpace: number;
   additionalRightSpace: number;
-  checkIsHoliday: (date: Date, dateExtremity: DateExtremity) => boolean;
   childOutOfParentWarnings: ChildOutOfParentWarnings | null;
   childTasksMap: ChildByLevelMap;
   colorStyles: ColorStyles;
@@ -44,14 +43,12 @@ export type TaskGanttContentProps = {
   dependencyMap: DependencyMap;
   dependentMap: DependentMap;
   distances: Distances;
-  endColumnIndex: number;
   fixEndPosition?: FixPosition;
   fixStartPosition?: FixPosition;
   fontFamily: string;
   fontSize: string;
   fullRowHeight: number;
   ganttRelationEvent: GanttRelationEvent | null;
-  getDate: (index: number) => Date;
   getTaskCoordinates: (task: Task) => TaskCoordinates;
   getTaskGlobalIndexByRef: (task: Task) => number;
   handleBarRelationStart: (target: RelationMoveTarget, task: Task) => void;
@@ -73,7 +70,6 @@ export type TaskGanttContentProps = {
   selectTaskOnMouseDown: (taskId: string, event: MouseEvent) => void;
   selectedIdsMirror: Readonly<Record<string, true>>;
   setTooltipTask: (task: Task | null, element: Element | null) => void;
-  startColumnIndex: number;
   taskToHasDependencyWarningMap: TaskToHasDependencyWarningMap | null;
   taskYOffset: number;
   visibleTasksMirror: Readonly<Record<string, true>>;
@@ -86,7 +82,6 @@ export const TaskGanttContent: React.FC<TaskGanttContentProps> = ({
   authorizedRelations,
   additionalLeftSpace,
   additionalRightSpace,
-  checkIsHoliday,
   childOutOfParentWarnings,
   childTasksMap,
   colorStyles,
@@ -95,14 +90,12 @@ export const TaskGanttContent: React.FC<TaskGanttContentProps> = ({
   dependencyMap,
   dependentMap,
   distances,
-  endColumnIndex,
   fixEndPosition = undefined,
   fixStartPosition = undefined,
   fontFamily,
   fontSize,
   fullRowHeight,
   ganttRelationEvent,
-  getDate,
   getTaskCoordinates,
   getTaskGlobalIndexByRef,
   handleBarRelationStart,
@@ -119,47 +112,12 @@ export const TaskGanttContent: React.FC<TaskGanttContentProps> = ({
   selectTaskOnMouseDown,
   selectedIdsMirror,
   setTooltipTask,
-  startColumnIndex,
   taskToHasDependencyWarningMap,
   taskYOffset,
   taskHeight,
   taskHalfHeight,
   visibleTasksMirror,
 }) => {
-  const renderedHolidays = useMemo(() => {
-    const { holidayBackgroundColor } = colorStyles;
-    const { columnWidth } = distances;
-
-    const res: ReactNode[] = [];
-
-    for (let i = startColumnIndex; i <= endColumnIndex; ++i) {
-      const date = getDate(i);
-
-      if (checkIsHoliday(date, "start")) {
-        res.push(
-          <rect
-            height="100%"
-            width={columnWidth}
-            x={additionalLeftSpace + i * columnWidth}
-            y={0}
-            fill={holidayBackgroundColor}
-            key={i}
-          />
-        );
-      }
-    }
-
-    return res;
-  }, [
-    additionalLeftSpace,
-    checkIsHoliday,
-    colorStyles,
-    distances,
-    endColumnIndex,
-    getDate,
-    startColumnIndex,
-  ]);
-
   const [renderedTasks, renderedArrows, renderedSelectedTasks] = useMemo(() => {
     if (!renderedRowIndexes) {
       return [null, null, null];
@@ -484,8 +442,6 @@ export const TaskGanttContent: React.FC<TaskGanttContentProps> = ({
     <g className="content">
       {renderedSelectedTasks}
 
-      <g>{renderedHolidays}</g>
-
       <g
         className="arrows"
         fill={colorStyles.arrowColor}

src/components/gantt/task-gantt.tsx

@@ -7,17 +7,22 @@ import { TaskGanttContentProps, TaskGanttContent } from "./task-gantt-content";
 import styles from "./gantt.module.css";
 import Popper from "@material-ui/core/Popper";
 import Paper from "@material-ui/core/Paper";
-import { TaskContextualPaletteProps, Task } from "../../types/public-types";
+import {
+  TaskContextualPaletteProps,
+  Task,
+  Distances,
+} from "../../types/public-types";
 import ClickAwayListener from "@material-ui/core/ClickAwayListener/ClickAwayListener";
 
 export type TaskGanttProps = {
   barProps: TaskGanttContentProps;
   calendarProps: CalendarProps;
+  gridProps: GridProps;
+  distances: Distances;
   fullRowHeight: number;
   fullSvgWidth: number;
   ganttFullHeight: number;
   ganttSVGRef: RefObject<SVGSVGElement>;
-  gridProps: GridProps;
   ganttTaskContentRef: RefObject<HTMLDivElement>;
   onVerticalScrollbarScrollX: (event: SyntheticEvent<HTMLDivElement>) => void;
   ganttTaskRootRef: RefObject<HTMLDivElement>;
@@ -29,16 +34,13 @@ export type TaskGanttProps = {
 const TaskGanttInner: React.FC<TaskGanttProps> = ({
   barProps,
   barProps: { additionalLeftSpace },
-
   calendarProps,
   fullRowHeight,
   fullSvgWidth,
   ganttFullHeight,
   ganttSVGRef,
   gridProps,
-  gridProps: {
-    distances: { columnWidth, rowHeight, minimumRowDisplayed },
-  },
+  distances: { columnWidth, rowHeight, minimumRowDisplayed },
   ganttTaskContentRef,
   onVerticalScrollbarScrollX,
   ganttTaskRootRef,

src/components/grid/grid-body.tsx

@@ -1,33 +1,29 @@
-import React, {
-  memo,
-  useMemo,
-} from "react";
+import React, { memo, useMemo } from "react";
 import { getDatesDiff } from "../../helpers/get-dates-diff";
 
-import type {
-  Distances,
-  ViewMode,
-} from "../../types/public-types";
+import type { DateExtremity, ViewMode } from "../../types/public-types";
 
 export type GridBodyProps = {
   additionalLeftSpace: number;
-  distances: Distances;
+  columnWidth: number;
   ganttFullHeight: number;
   isUnknownDates: boolean;
   startDate: Date;
   todayColor: string;
+  holidayBackgroundColor: string;
   rtl: boolean;
   viewMode: ViewMode;
+  startColumnIndex: number;
+  endColumnIndex: number;
+  checkIsHoliday: (date: Date, dateExtremity: DateExtremity) => boolean;
+  getDate: (index: number) => Date;
+  minTaskDate: Date;
 };
 
 const GridBodyInner: React.FC<GridBodyProps> = ({
   additionalLeftSpace,
-  distances: {
-    columnWidth,
-  },
-
+  columnWidth,
   ganttFullHeight,
-
   isUnknownDates,
   todayColor,
   rtl,
@@ -43,9 +39,7 @@ const GridBodyInner: React.FC<GridBodyProps> = ({
 
     const tickX = todayIndex * columnWidth;
 
-    const x = rtl
-      ? tickX + columnWidth
-      : tickX;
+    const x = rtl ? tickX + columnWidth : tickX;
 
     return (
       <rect

src/components/grid/grid.tsx

@@ -1,10 +1,81 @@
-import React from "react";
+import React, { ReactNode, useMemo } from "react";
 import { GridBody, GridBodyProps } from "./grid-body";
+import { ViewMode } from "../../types/public-types";
+import { differenceInDays } from "date-fns";
 
 export type GridProps = GridBodyProps;
 export const Grid: React.FC<GridProps> = props => {
+  const {
+    viewMode,
+    isUnknownDates,
+    startColumnIndex,
+    endColumnIndex,
+    additionalLeftSpace,
+    columnWidth,
+    getDate,
+    checkIsHoliday,
+    holidayBackgroundColor,
+    minTaskDate,
+  } = props;
+
+  const viewModesForDetectHolidays = new Set([
+    ViewMode.Day,
+    ViewMode.HalfDay,
+    ViewMode.QuarterDay,
+    ViewMode.Hour,
+  ]);
+
+  const displayHoliday = (date: Date, minTaskDate: Date) => {
+    if (isUnknownDates) {
+      const daysDiff = differenceInDays(date, minTaskDate);
+      const rest = daysDiff % 7;
+
+      if (daysDiff >= 0) {
+        return rest === 5 || rest === 6;
+      }
+
+      return rest === -1 || rest === -2;
+    }
+
+    return checkIsHoliday(date, "start");
+  };
+
+  const renderedHolidays = useMemo(() => {
+    const res: ReactNode[] = [];
+    if (viewModesForDetectHolidays.has(viewMode)) {
+      for (let i = startColumnIndex; i <= endColumnIndex; ++i) {
+        const date = getDate(i);
+
+        if (displayHoliday(date, minTaskDate)) {
+          res.push(
+            <rect
+              height="100%"
+              width={columnWidth}
+              x={additionalLeftSpace + i * columnWidth}
+              y={0}
+              fill={holidayBackgroundColor}
+              key={i}
+            />
+          );
+        }
+      }
+    }
+
+    return res;
+  }, [
+    viewMode,
+    additionalLeftSpace,
+    checkIsHoliday,
+    columnWidth,
+    startColumnIndex,
+    endColumnIndex,
+    getDate,
+    holidayBackgroundColor,
+  ]);
+
   return (
     <g className="grid">
+      {renderedHolidays}
       <GridBody {...props} />
     </g>
   );