fm453/nocobase
1
0
Fork 0
mirror of https://gitee.com/nocobase/nocobase.git synced 2025-07-02 03:02:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: gantt block empty state placeholder

Browse Source
This commit is contained in:
katherinehhh 2023-02-01 10:12:36 +08:00
parent 5328136da2
commit 8b44a3b762
2 changed files with 20 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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}
>

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

@ -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 { addToDate } from "../../helpers/date-helper";
import { gridRowLine, gridRow,gridTick } from './style';
import { Task } from '../../types/public-types';
import { addToDate } from '../../helpers/date-helper';
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
key="RowLineFirst"
x="0"
y1={0}
x2={svgWidth}
y2={0}
className={cx(gridRowLine)}
/>,
<line 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
key={"Row" + task.id}
x="0"
y={y}
width={svgWidth}
height={rowHeight}
className={cx(gridRow)}
/>
<rect 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(
<line
key={date.getTime()}
x1={tickX}
y1={0}
x2={tickX}
y2={y}
className={cx(gridTick)}
/>
);
ticks.push(<line key={date.getTime()} x1={tickX} y1={0} x2={tickX} y2={y} className={cx(gridTick)} />);
if (
(i + 1 !== dates.length &&
date.getTime() < now.getTime() &&
dates[i + 1].getTime() >= now.getTime()) ||
(i + 1 !== dates.length && 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(
date,
date.getTime() - dates[i - 1].getTime(),
"millisecond"
).getTime() >= now.getTime())
addToDate(date, date.getTime() - dates[i - 1].getTime(), 'millisecond').getTime() >= now.getTime())
) {
today = (
<rect
x={tickX}
y={0}
width={columnWidth}
height={y}
fill={todayColor}
/>
);
today = <rect x={tickX} y={0} width={columnWidth} height={y} fill={todayColor} />;
}
// 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}
/>
);
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;
}
console.log(gridRows, rowLines, ticks, today);
return (
<g className="gridBody">
<g className="rows">{gridRows}</g>