Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | 1x 4x 1x 3x 3x 3x 6x 5x 5x 5x | import React from "react";
import { Card, FormInstance, Space } from "antd";
import { GanttTask } from "./GanttComponentTypes";
import "./GanttTooltip.less";
import { getDisplayRenderFunction } from "@kernel/DisplayComponentsMapping";
import { sortByDisplaySequence } from "@utils/ColumnsUtils";
export interface GanttTooltipProps {
zIndex: number;
task: GanttTask;
}
export const GanttTooltip: React.FC<GanttTooltipProps> =
({
zIndex,
task,
}) => {
if (task.isCombined) {
return <></>;
}
const { rawData, name } = task;
const domainMetaRecord = rawData.getTooltipFieldMetas();
// console.log("GanttTooltip", renderColumns);
// 将 zIndex 设置为 zIndex + 2 以避免被 GanttChart 左边的表格的操作列的图标遮挡
// top: 36px 能够正好让 Popover 不遮挡 task 显示
return <div key={task.domainKey} style={{ zIndex: zIndex + 2, position: "absolute", top: "36px" }}>
<Card title={name} className="gantt-tooltip-content">
<Space direction="vertical" size="small">
{Object
.values(domainMetaRecord)
.filter((columnMeta) => columnMeta.display !== false)
.sort(sortByDisplaySequence)
.map((columnMeta) => {
const { key, title } = columnMeta;
const readOnlyRenderFunc = getDisplayRenderFunction({
column: columnMeta,
enumValues: {},
objectValues: {},
domainName: task.domainName,
page: "INLINE_DISPLAY",
zIndex,
form: {} as FormInstance,
});
return (<Space direction="horizontal" size="small" key={key}>
<span key={`key-${key}`} className="gantt-tooltip-label">
{title}
</span>
<span key={`value-${key}`} className="gantt-tooltip-value">
{readOnlyRenderFunc?.(rawData[key], rawData)}
</span>
</Space>);
})}
</Space>
</Card>
</div>;
};
|