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 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 | 66x 8x 8x 63x 303x 8x 66x 1x 1x 4x 4x 4x 4x 4x 4x 4x 4x 1x 1x | import { DetailPanelProps, TableMetaProps } from "@props/RecordProps";
import { DetailComponentRenderFunction, FieldConfigures } from "./ComponentsConfig";
import React, { ReactElement, useState } from "react";
import { ColumnsUtils } from "@utils/index";
import { useResizeDetector } from "react-resize-detector";
import { stopPropagationAndPreventDefault } from "@utils/ObjectUtils";
import {
MonitorOutlined,
} from "@ant-design/icons";
import { Button, Tooltip } from "antd";
/**
* 获取某种列类型的 detail 模式（在编辑或者察看详情时候，右边部分的显示）
*/
export const getDetailRenderFunction = (
column: TableMetaProps
): DetailComponentRenderFunction | undefined => {
const { type } = column;
const detailComponent =
column?.extInfo?.summaryField ?
wrapperRender(FieldConfigures.find(fc => fc.type === type)?.detailComponent) :
FieldConfigures.find(fc => fc.type === type)?.detailComponent;
return detailComponent;
};
const wrapperRender = (render: DetailComponentRenderFunction | undefined): DetailComponentRenderFunction | undefined => {
Iif (!render) {
return undefined;
}
return (props: DetailPanelProps): ReactElement => {
const { column, record, zIndex } = props;
const summaryField = ColumnsUtils.summaryField(column);
Eif (summaryField && record?.[summaryField]) {
const [showSummary, setShowSummary] = useState<boolean>(true);
const summaryRecord = {
...record,
[column.key]: record[summaryField],
};
const { width, height, ref } = useResizeDetector();
const summaryProps: DetailPanelProps = {
...props,
record: showSummary ? summaryRecord : record,
};
// const [originalElement, summaryElement] = useState(() => [render(props), render(summaryProps)]);
// FIXME: Fix translation
return <div>
{showSummary ? (<div>
<div
style={{
position: "absolute",
width,
height,
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
zIndex: zIndex + 1,
}}
onMouseEnter={(e) => stopPropagationAndPreventDefault(e)}
onMouseLeave={(e) => stopPropagationAndPreventDefault(e)}
onClick={(e) => stopPropagationAndPreventDefault(e)}
>
<Tooltip title="点击显示详情">
<Button
size={"large"}
shape="circle"
onClick={() => setShowSummary(false)}
>
<MonitorOutlined
style={{
fontSize: 24,
}}
/>
</Button>
</Tooltip>
</div>
<div
ref={ref}
style={{
filter: showSummary ? "blur(1px) brightness(0.95)" : undefined,
}}
>
{render(summaryProps)}
</div>
</div>) : (
<div>
{render(props)}
</div>)}
</div>;
}
return render(props);
};
};
|