feat: 完成甘特图组件

example/package.json

@@ -17,11 +17,12 @@
     "@types/node": "file:../node_modules/@types/node",
     "@types/react": "file:../node_modules/@types/react",
     "@types/react-dom": "file:../node_modules/@types/react-dom",
+    "classnames": "^2.3.1",
+    "gantt-task-react": "file:..",
     "react": "file:../node_modules/react",
     "react-dom": "file:../node_modules/react-dom",
     "react-scripts": "file:../node_modules/react-scripts",
-    "typescript": "file:../node_modules/typescript",
-    "gantt-task-react": "file:.."
+    "typescript": "file:../node_modules/typescript"
   },
   "devDependencies": {
     "@babel/plugin-syntax-object-rest-spread": "^7.8.3"

example/src/App.tsx

@@ -80,6 +80,14 @@ const App = () => {
         onExpanderClick={handleExpanderClick}
         listCellWidth={isChecked ? "155px" : ""}
         columnWidth={columnWidth}
+        locale="zh"
+        barCornerRadius={10}
+        listColumns={[
+          {
+            title: "name",
+            dataIndex: "name"
+          },
+        ]}
       />
       <h3>Gantt With Limited Height</h3>
       <Gantt

example/src/helper.tsx

@@ -10,21 +10,14 @@ export function initTasks() {
       id: "ProjectSample",
       progress: 25,
       type: "project",
-
       hideChildren: false,
     },
     {
-      start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 1),
-      end: new Date(
-        currentDate.getFullYear(),
-        currentDate.getMonth(),
-        2,
-        12,
-        28
-      ),
-      name: "Idea",
+      start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 2),
+      end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 4, 0, 0),
+      name: "Research",
       id: "Task 0",
-      progress: 45,
+      progress: 25,
       type: "task",
       project: "ProjectSample",
     },
@@ -39,53 +32,69 @@ export function initTasks() {
       project: "ProjectSample",
     },
     {
-      start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 4),
-      end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 8, 0, 0),
-      name: "Discussion with team",
+      start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 2),
+      end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 4, 0, 0),
+      name: "Research",
       id: "Task 2",
-      progress: 10,
+      progress: 25,
       dependencies: ["Task 1"],
       type: "task",
       project: "ProjectSample",
     },
     {
-      start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 8),
-      end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 9, 0, 0),
-      name: "Developing",
-      id: "Task 3",
-      progress: 2,
-      dependencies: ["Task 2"],
+      start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 2),
+      end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 4, 0, 0),
+      name: "Research",
+      id: "Task 4",
+      progress: 25,
       type: "task",
       project: "ProjectSample",
     },
     {
-      start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 8),
-      end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 10),
-      name: "Review",
-      id: "Task 4",
+      start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 2),
+      end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 4, 0, 0),
+      name: "Research",
+      id: "Task 5",
+      progress: 25,
       type: "task",
-      progress: 70,
-      dependencies: ["Task 2"],
       project: "ProjectSample",
     },
     {
-      start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 15),
-      end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 15),
-      name: "Release",
+      start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 2),
+      end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 4, 0, 0),
+      name: "Research",
       id: "Task 6",
-      progress: currentDate.getMonth(),
+      progress: 25,
+      type: "task",
+      project: "ProjectSample",
+    },
+    {
+      start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 2),
+      end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 4, 0, 0),
+      name: "Research",
+      id: "Task 7",
+      progress: 25,
       type: "milestone",
       dependencies: ["Task 4"],
       project: "ProjectSample",
     },
     {
-      start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 18),
-      end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 19),
-      name: "Party Time",
+      start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 2),
+      end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 4, 0, 0),
+      name: "Research",
+      id: "Task 8",
+      progress: 25,
+      type: "task",
+      project: "ProjectSample",
+    },
+    {
+      start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 2),
+      end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 4, 0, 0),
+      name: "Research",
       id: "Task 9",
-      progress: 0,
-      isDisabled: true,
+      progress: 25,
       type: "task",
+      project: "ProjectSample",
     },
   ];
   return tasks;

package.json

@@ -36,12 +36,14 @@
     "deploy": "gh-pages -d example/build"
   },
   "peerDependencies": {
-    "react": "^16.0.0"
+    "react": "^16.0.0",
+    "classnames": "^2.3.1"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.12.0",
     "@testing-library/react": "^11.2.6",
     "@testing-library/user-event": "^13.1.8",
+    "@types/classnames": "^2.3.1",
     "@types/jest": "^26.0.23",
     "@types/node": "^15.0.1",
     "@types/react": "^17.0.4",

src/components/calendar/calendar.module.css

@@ -1,6 +1,7 @@
 .calendarBottomText {
   text-anchor: middle;
-  fill: #333;
+  fill: #a6abab;
+
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -15,7 +16,8 @@
 
 .calendarTopText {
   text-anchor: middle;
-  fill: #555;
+  fill: #6f7476;
+  font-weight: 500;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -25,7 +27,5 @@
 }
 
 .calendarHeader {
-  fill: #ffffff;
-  stroke: #e0e0e0;
-  stroke-width: 1.4;
+  fill: #f2f8ff;
 }

src/components/calendar/calendar.tsx

@@ -4,6 +4,7 @@ import { TopPartOfCalendar } from "./top-part-of-calendar";
 import {
   getDaysInMonth,
   getLocaleMonth,
+  getLocaleYear,
   getWeekNumberISO8601,
 } from "../../helpers/date-helper";
 import { DateSetup } from "../../types/date-setup";
@@ -146,7 +147,7 @@ export const Calendar: React.FC<CalendarProps> = ({
         i + 1 !== dates.length &&
         date.getMonth() !== dates[i + 1].getMonth()
       ) {
-        const topValue = getLocaleMonth(date, locale);
+        const topValue = getLocaleYear(date, locale) + getLocaleMonth(date, locale);
 
         topValues.push(
           <TopPartOfCalendar

src/components/gantt/gantt.tsx

@@ -19,10 +19,13 @@ import { HorizontalScroll } from "../other/horizontal-scroll";
 import { removeHiddenTasks } from "../../helpers/other-helper";
 
 export const Gantt: React.FunctionComponent<GanttProps> = ({
+  className = "",
   tasks,
   headerHeight = 50,
   columnWidth = 60,
   listCellWidth = "155px",
+  listColumns = [],
+  barClassName = "",
   rowHeight = 50,
   ganttHeight = 0,
   viewMode = ViewMode.Day,
@@ -56,6 +59,9 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
   onDelete,
   onSelect,
   onExpanderClick,
+  hasCrosswalk = false,
+  hasDateLine = false,
+  renderRowLines = () => true,
 }) => {
   const wrapperRef = useRef<HTMLDivElement>(null);
   const taskListRef = useRef<HTMLDivElement>(null);
@@ -344,6 +350,9 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
     dates: dateSetup.dates,
     todayColor,
     rtl,
+    hasCrosswalk,
+    hasDateLine,
+    renderRowLines,
   };
   const calendarProps: CalendarProps = {
     dateSetup,
@@ -377,11 +386,13 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
     onProgressChange,
     onDoubleClick,
     onDelete,
+    barClassName,
   };
 
   const tableProps: TaskListProps = {
     rowHeight,
     rowWidth: listCellWidth,
+    listColumns,
     fontFamily,
     fontSize,
     tasks: barTasks,
@@ -398,7 +409,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
     TaskListTable,
   };
   return (
-    <div>
+    <div className={className}>
       <div
         className={styles.wrapper}
         onKeyDown={handleKeyDown}

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

@@ -30,6 +30,7 @@ export type TaskGanttContentProps = {
   setGanttEvent: (value: GanttEvent) => void;
   setFailedTask: (value: BarTask | null) => void;
   setSelectedTask: (taskId: string) => void;
+  barClassName: string;
 } & EventOption;
 
 export const TaskGanttContent: React.FC<TaskGanttContentProps> = ({
@@ -54,6 +55,7 @@ export const TaskGanttContent: React.FC<TaskGanttContentProps> = ({
   onProgressChange,
   onDoubleClick,
   onDelete,
+  barClassName,
 }) => {
   const point = svg?.current?.createSVGPoint();
   const [xStep, setXStep] = useState(0);
@@ -286,6 +288,7 @@ export const TaskGanttContent: React.FC<TaskGanttContentProps> = ({
               key={task.id}
               isSelected={!!selectedTask && task.id === selectedTask.id}
               rtl={rtl}
+              barClassName={barClassName}
             />
           );
         })}