Merge pull request #15 from MaTeMaTuK/dev

new version release
MaTeMaTuK · Aug 3, 2021 · b316776 · b316776
2 parents 2cefb35 + 3343a10
commit b316776
Show file tree

Hide file tree

Showing 23 changed files with 519 additions and 231 deletions.
diff --git a/README.md b/README.md
@@ -81,10 +81,11 @@ npm start
 
 ### DisplayOption
 
-| Parameter Name | Type   | Description                                                                                     |
-| :------------- | :----- | :---------------------------------------------------------------------------------------------- |
-| viewMode       | enum   | Specifies the time scale. Quarter Day, Half Day, Day, Week(ISO-8601, 1st day is Monday), Month. |
-| locale         | string | Specifies the month name language. Able formats: ISO 639-2, Java Locale.                        |
+| Parameter Name | Type    | Description                                                                                     |
+| :------------- | :------ | :---------------------------------------------------------------------------------------------- |
+| viewMode       | enum    | Specifies the time scale. Quarter Day, Half Day, Day, Week(ISO-8601, 1st day is Monday), Month. |
+| locale         | string  | Specifies the month name language. Able formats: ISO 639-2, Java Locale.                        |
+| rtl            | boolean | Sets rtl mode.                                                                                  |
 
 ### StylingOption
 

diff --git a/example/package-lock.json b/example/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "gantt-task-react",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "description": "Interactive Gantt Chart for React with TypeScript.",
   "author": "MaTeMaTuK <[email protected]>",
   "homepage": "https://github.com/MaTeMaTuK/gantt-task-react",

diff --git a/src/components/calendar/calendar.tsx b/src/components/calendar/calendar.tsx
@@ -2,6 +2,7 @@ import React, { ReactChild } from "react";
 import { ViewMode } from "../../types/public-types";
 import { TopPartOfCalendar } from "./top-part-of-calendar";
 import {
+  getDaysInMonth,
   getLocaleMonth,
   getWeekNumberISO8601,
 } from "../../helpers/date-helper";
@@ -12,6 +13,7 @@ export type CalendarProps = {
   dateSetup: DateSetup;
   locale: string;
   viewMode: ViewMode;
+  rtl: boolean;
   headerHeight: number;
   columnWidth: number;
   fontFamily: string;
@@ -22,6 +24,7 @@ export const Calendar: React.FC<CalendarProps> = ({
   dateSetup,
   locale,
   viewMode,
+  rtl,
   headerHeight,
   columnWidth,
   fontFamily,
@@ -30,7 +33,6 @@ export const Calendar: React.FC<CalendarProps> = ({
   const getCalendarValuesForMonth = () => {
     const topValues: ReactChild[] = [];
     const bottomValues: ReactChild[] = [];
-    const topDefaultWidth = columnWidth * 6;
     const topDefaultHeight = headerHeight * 0.5;
     for (let i = 0; i < dateSetup.dates.length; i++) {
       const date = dateSetup.dates[i];
@@ -50,16 +52,20 @@ export const Calendar: React.FC<CalendarProps> = ({
         date.getFullYear() !== dateSetup.dates[i - 1].getFullYear()
       ) {
         const topValue = date.getFullYear().toString();
+        let xText: number;
+        if (rtl) {
+          xText = (6 + i + date.getMonth() + 1) * columnWidth;
+        } else {
+          xText = (6 + i - date.getMonth()) * columnWidth;
+        }
         topValues.push(
           <TopPartOfCalendar
             key={topValue}
             value={topValue}
             x1Line={columnWidth * i}
             y1Line={0}
             y2Line={topDefaultHeight}
-            xText={
-              topDefaultWidth + columnWidth * i - date.getMonth() * columnWidth
-            }
+            xText={xText}
             yText={topDefaultHeight * 0.9}
           />
         );
@@ -88,7 +94,7 @@ export const Calendar: React.FC<CalendarProps> = ({
         <text
           key={date.getTime()}
           y={headerHeight * 0.8}
-          x={columnWidth * i}
+          x={columnWidth * (i + +rtl)}
           className={styles.calendarBottomText}
         >
           {bottomValue}
@@ -149,7 +155,12 @@ export const Calendar: React.FC<CalendarProps> = ({
             x1Line={columnWidth * (i + 1)}
             y1Line={0}
             y2Line={topDefaultHeight}
-            xText={columnWidth * (i + 1) - date.getDate() * columnWidth * 0.5}
+            xText={
+              columnWidth * (i + 1) -
+              getDaysInMonth(date.getMonth(), date.getFullYear()) *
+                columnWidth *
+                0.5
+            }
             yText={topDefaultHeight * 0.9}
           />
         );
@@ -174,7 +185,7 @@ export const Calendar: React.FC<CalendarProps> = ({
         <text
           key={date.getTime()}
           y={headerHeight * 0.8}
-          x={columnWidth * i}
+          x={columnWidth * (i + +rtl)}
           className={styles.calendarBottomText}
           fontFamily={fontFamily}
         >
@@ -196,8 +207,10 @@ export const Calendar: React.FC<CalendarProps> = ({
         );
       }
     }
+
     return [topValues, bottomValues];
   };
+
   let topValues: ReactChild[] = [];
   let bottomValues: ReactChild[] = [];
   switch (dateSetup.viewMode) {

diff --git a/src/components/gantt/gantt.tsx b/src/components/gantt/gantt.tsx
@@ -38,6 +38,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
   projectBackgroundSelectedColor = "#f7bb53",
   milestoneBackgroundColor = "#f1c453",
   milestoneBackgroundSelectedColor = "#f29e4c",
+  rtl = false,
   handleWidth = 8,
   timeStep = 300000,
   arrowColor = "grey",
@@ -73,17 +74,23 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
   const [selectedTask, setSelectedTask] = useState<BarTask>();
   const [failedTask, setFailedTask] = useState<BarTask | null>(null);
 
-  const [scrollY, setScrollY] = useState(0);
-  const [scrollX, setScrollX] = useState(0);
-  const [ignoreScrollEvent, setIgnoreScrollEvent] = useState(false);
-
   const svgWidth = dateSetup.dates.length * columnWidth;
   const ganttFullHeight = barTasks.length * rowHeight;
 
+  const [scrollY, setScrollY] = useState(0);
+  const [scrollX, setScrollX] = useState(-1);
+  const [ignoreScrollEvent, setIgnoreScrollEvent] = useState(false);
+
   // task change events
   useEffect(() => {
     const [startDate, endDate] = ganttDateRange(tasks, viewMode);
-    const newDates = seedDates(startDate, endDate, viewMode);
+    let newDates = seedDates(startDate, endDate, viewMode);
+    if (rtl) {
+      newDates = newDates.reverse();
+      if (scrollX === -1) {
+        setScrollX(newDates.length * columnWidth);
+      }
+    }
     setDateSetup({ dates: newDates, viewMode });
     setBarTasks(
       convertToBarTasks(
@@ -94,6 +101,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
         taskHeight,
         barCornerRadius,
         handleWidth,
+        rtl,
         barProgressColor,
         barProgressSelectedColor,
         barBackgroundColor,
@@ -124,6 +132,8 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
     projectBackgroundSelectedColor,
     milestoneBackgroundColor,
     milestoneBackgroundSelectedColor,
+    rtl,
+    scrollX,
   ]);
 
   useEffect(() => {
@@ -205,7 +215,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
         }
         setScrollX(newScrollX);
         event.preventDefault();
-      } else {
+      } else if (ganttHeight) {
         let newScrollY = scrollY + event.deltaY;
         if (newScrollY < 0) {
           newScrollY = 0;
@@ -232,7 +242,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
         wrapperRef.current.removeEventListener("wheel", handleWheel);
       }
     };
-  }, [wrapperRef.current, scrollY, scrollX, ganttHeight, svgWidth]);
+  }, [wrapperRef.current, scrollY, scrollX, ganttHeight, svgWidth, rtl]);
 
   const handleScrollY = (event: SyntheticEvent<HTMLDivElement>) => {
     if (scrollY !== event.currentTarget.scrollTop && !ignoreScrollEvent) {
@@ -320,6 +330,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
     rowHeight,
     dates: dateSetup.dates,
     todayColor,
+    rtl,
   };
   const calendarProps: CalendarProps = {
     dateSetup,
@@ -329,6 +340,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
     columnWidth,
     fontFamily,
     fontSize,
+    rtl,
   };
   const barProps: TaskGanttContentProps = {
     tasks: barTasks,
@@ -344,6 +356,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
     fontSize,
     arrowIndent,
     svgWidth,
+    rtl,
     setGanttEvent,
     setFailedTask,
     setSelectedTask: handleSelectedTask,
@@ -401,6 +414,8 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
             headerHeight={headerHeight}
             taskListWidth={taskListWidth}
             TooltipContent={TooltipContent}
+            rtl={rtl}
+            svgWidth={svgWidth}
           />
         )}
         <VerticalScroll
@@ -409,12 +424,14 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
           headerHeight={headerHeight}
           scroll={scrollY}
           onScroll={handleScrollY}
+          rtl={rtl}
         />
       </div>
       <HorizontalScroll
         svgWidth={svgWidth}
         taskListWidth={taskListWidth}
         scroll={scrollX}
+        rtl={rtl}
         onScroll={handleScrollX}
       />
     </div>

diff --git a/src/components/gantt/task-gantt-content.tsx b/src/components/gantt/task-gantt-content.tsx
@@ -26,6 +26,7 @@ export type TaskGanttContentProps = {
   arrowIndent: number;
   fontSize: string;
   fontFamily: string;
+  rtl: boolean;
   setGanttEvent: (value: GanttEvent) => void;
   setFailedTask: (value: BarTask | null) => void;
   setSelectedTask: (taskId: string) => void;
@@ -45,6 +46,7 @@ export const TaskGanttContent: React.FC<TaskGanttContentProps> = ({
   arrowIndent,
   fontFamily,
   fontSize,
+  rtl,
   setGanttEvent,
   setFailedTask,
   setSelectedTask,
@@ -85,7 +87,8 @@ export const TaskGanttContent: React.FC<TaskGanttContentProps> = ({
         ganttEvent.changedTask,
         xStep,
         timeStep,
-        initEventX1Delta
+        initEventX1Delta,
+        rtl
       );
       if (isChanged) {
         setGanttEvent({ action: ganttEvent.action, changedTask });
@@ -108,7 +111,8 @@ export const TaskGanttContent: React.FC<TaskGanttContentProps> = ({
         changedTask,
         xStep,
         timeStep,
-        initEventX1Delta
+        initEventX1Delta,
+        rtl
       );
 
       const isNotLikeOriginal =
@@ -256,6 +260,7 @@ export const TaskGanttContent: React.FC<TaskGanttContentProps> = ({
                 rowHeight={rowHeight}
                 taskHeight={taskHeight}
                 arrowIndent={arrowIndent}
+                rtl={rtl}
               />
             );
           });
@@ -274,6 +279,7 @@ export const TaskGanttContent: React.FC<TaskGanttContentProps> = ({
               onEventStart={handleBarEventStart}
               key={task.id}
               isSelected={!!selectedTask && task.id === selectedTask.id}
+              rtl={rtl}
             />
           );
         })}

diff --git a/src/components/gantt/task-gantt.tsx b/src/components/gantt/task-gantt.tsx
@@ -41,6 +41,7 @@ export const TaskGantt: React.FC<TaskGanttProps> = ({
     <div
       className={styles.ganttVerticalContainer}
       ref={verticalGanttContainerRef}
+      dir="ltr"
     >
       <svg
         xmlns="http://www.w3.org/2000/svg"

diff --git a/src/components/grid/grid-body.tsx b/src/components/grid/grid-body.tsx
@@ -10,6 +10,7 @@ export type GridBodyProps = {
   rowHeight: number;
   columnWidth: number;
   todayColor: string;
+  rtl: boolean;
 };
 export const GridBody: React.FC<GridBodyProps> = ({
   tasks,
@@ -18,6 +19,7 @@ export const GridBody: React.FC<GridBodyProps> = ({
   svgWidth,
   columnWidth,
   todayColor,
+  rtl,
 }) => {
   let y = 0;
   const gridRows: ReactChild[] = [];
@@ -95,6 +97,23 @@ export const GridBody: React.FC<GridBodyProps> = ({
         />
       );
     }
+    // rtl for today
+    if (
+      rtl &&
+      i + 1 !== dates.length &&
+      date.getTime() >= now.getTime() &&
+      dates[i + 1].getTime() < now.getTime()
+    ) {
+      today = (
+        <rect
+          x={tickX + columnWidth}
+          y={0}
+          width={columnWidth}
+          height={y}
+          fill={todayColor}
+        />
+      );
+    }
     tickX += columnWidth;
   }
   return (