feat: gantt block empty state placeholder

packages/core/client/src/schema-component/antd/gantt/components/gantt/task-gantt.tsx

@@ -51,7 +51,7 @@ export const TaskGantt: React.FC<TaskGanttProps> = forwardRef(
           <svg
             xmlns="http://www.w3.org/2000/svg"
             width={gridProps.svgWidth}
-            height={barProps.rowHeight * barProps.tasks.length}
+            height={barProps.rowHeight * (barProps.tasks.length||3)}
             fontFamily={barProps.fontFamily}
             ref={ganttSVGRef}
           >

packages/core/client/src/schema-component/antd/gantt/components/grid/grid-body.tsx

@@ -1,8 +1,9 @@
-import React, { ReactChild } from "react";
+import React, { ReactChild } from 'react';
 import { cx } from '@emotion/css';
-import { Task } from "../../types/public-types";
+import { Task } from '../../types/public-types';
-import { addToDate } from "../../helpers/date-helper";
+import { addToDate } from '../../helpers/date-helper';
-import { gridRowLine, gridRow,gridTick } from './style';
+import { gridRowLine, gridRow, gridTick } from './style';
+import { uid } from '@nocobase/utils/client';
 
 export type GridBodyProps = {
   tasks: Task[];
@@ -13,6 +14,7 @@ export type GridBodyProps = {
   todayColor: string;
   rtl: boolean;
 };
+const empty = [{ id: uid() }, { id: uid() }, { id: uid() }];
 export const GridBody: React.FC<GridBodyProps> = ({
   tasks,
   dates,
@@ -22,38 +24,25 @@ export const GridBody: React.FC<GridBodyProps> = ({
   todayColor,
   rtl,
 }) => {
+  const data = tasks.length ? tasks : empty;
   let y = 0;
   const gridRows: ReactChild[] = [];
   const rowLines: ReactChild[] = [
-    <line
+    <line key="RowLineFirst" x="0" y1={0} x2={svgWidth} y2={0} className={cx(gridRowLine)} />,
-      key="RowLineFirst"
-      x="0"
-      y1={0}
-      x2={svgWidth}
-      y2={0}
-      className={cx(gridRowLine)}
-    />,
   ];
-  for (const task of tasks) {
+  for (const task of data) {
     gridRows.push(
-      <rect
+      <rect key={'Row' + task.id} x="0" y={y} width={svgWidth} height={rowHeight} className={cx(gridRow)} />,
-        key={"Row" + task.id}
-        x="0"
-        y={y}
-        width={svgWidth}
-        height={rowHeight}
-        className={cx(gridRow)}
-      />
     );
     rowLines.push(
       <line
-        key={"RowLine" + task.id}
+        key={'RowLine' + task.id}
         x="0"
         y1={y + rowHeight}
         x2={svgWidth}
         y2={y + rowHeight}
         className={cx(gridRowLine)}
-      />
+      />,
     );
     y += rowHeight;
   }
@@ -64,59 +53,24 @@ export const GridBody: React.FC<GridBodyProps> = ({
   let today: ReactChild = <rect />;
   for (let i = 0; i < dates.length; i++) {
     const date = dates[i];
-    ticks.push(
+    ticks.push(<line key={date.getTime()} x1={tickX} y1={0} x2={tickX} y2={y} className={cx(gridTick)} />);
-      <line
-        key={date.getTime()}
-        x1={tickX}
-        y1={0}
-        x2={tickX}
-        y2={y}
-        className={cx(gridTick)}
-      />
-    );
     if (
-      (i + 1 !== dates.length &&
+      (i + 1 !== dates.length && date.getTime() < now.getTime() && dates[i + 1].getTime() >= now.getTime()) ||
-        date.getTime() < now.getTime() &&
-        dates[i + 1].getTime() >= now.getTime()) ||
       // if current date is last
       (i !== 0 &&
         i + 1 === dates.length &&
         date.getTime() < now.getTime() &&
-        addToDate(
+        addToDate(date, date.getTime() - dates[i - 1].getTime(), 'millisecond').getTime() >= now.getTime())
-          date,
-          date.getTime() - dates[i - 1].getTime(),
-          "millisecond"
-        ).getTime() >= now.getTime())
     ) {
-      today = (
+      today = <rect x={tickX} y={0} width={columnWidth} height={y} fill={todayColor} />;
-        <rect
-          x={tickX}
-          y={0}
-          width={columnWidth}
-          height={y}
-          fill={todayColor}
-        />
-      );
     }
     // rtl for today
-    if (
+    if (rtl && i + 1 !== dates.length && date.getTime() >= now.getTime() && dates[i + 1].getTime() < now.getTime()) {
-      rtl &&
+      today = <rect x={tickX + columnWidth} y={0} width={columnWidth} height={y} fill={todayColor} />;
-      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;
   }
+  console.log(gridRows, rowLines, ticks, today);
   return (
     <g className="gridBody">
       <g className="rows">{gridRows}</g>