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 | 66x 9x 8x 8x 8x 8x 8x 8x | import React, { useState, ReactElement } from "react";
import { useTranslation } from 'react-i18next';
import { Space } from "antd";
import { SisternodeOutlined } from '@ant-design/icons';
import { ListOperations } from "../../form";
import { stopPropagationAndPreventDefault } from "@utils/ObjectUtils";
import { ExtendDataNode, RecordProps } from "@props/RecordProps";
import DynamicIcon from "../../components/icons/DynamicIcon";
import { RedirectComponent } from "../../components/redirect";
export type TreeNodeOperation = "edit" | "addChild";
interface TreeTitleRenderProps<T extends ExtendDataNode> {
node: T;
domainName: string;
zIndex: number;
updateDataCallback: (node: T, operation: TreeNodeOperation) => void;
deleteCallback: (node?: RecordProps) => void;
selected: boolean;
canCreate: boolean;
setCurrentShowMenuOrModalNode: (node?: ExtendDataNode) => void;
currentShowMenuOrModalNode?: ExtendDataNode;
updateFormName?: string;
}
const TreeTitleRender = <T extends ExtendDataNode>(props: TreeTitleRenderProps<T>): ReactElement => {
const {
node, zIndex, domainName, updateDataCallback, selected, canCreate,
currentShowMenuOrModalNode, setCurrentShowMenuOrModalNode, deleteCallback,
updateFormName
} = props;
const [showAddChildModal, setShowAddChildModal] = useState<boolean>();
const showMenuOrModal = (currentShowMenuOrModalNode?.id === node.id);
const { t } = useTranslation();
const content = (
<Space className="tree-node-operation-container">
<ListOperations
id={node.key as number}
domainName={domainName}
deleteCallback={deleteCallback}
updateCallback={() => updateDataCallback(node, "edit")}
zIndex={zIndex + 2}
page={'list'}
showActions={true}
updateFormName={updateFormName}
/>
{canCreate && <SisternodeOutlined
onClick={(e) => {
stopPropagationAndPreventDefault(e);
setShowAddChildModal(true);
setCurrentShowMenuOrModalNode(node as ExtendDataNode);
}}
title={t('Add new child node')}
/>}
</Space>
);
return (
<Space
direction="horizontal"
onMouseEnter={() => {
setCurrentShowMenuOrModalNode(node as ExtendDataNode);
}}
className="tree-node-title-container"
>
{node.icon && <DynamicIcon type={node.icon}/>}
<span>{node.title}</span>
{(showMenuOrModal || selected) && content}
{(showMenuOrModal || selected) && showAddChildModal &&
<RedirectComponent
forMultiple={false}
fetchDataCallback={() => {
updateDataCallback(node, "addChild");
setShowAddChildModal(false);
setCurrentShowMenuOrModalNode(undefined);
}}
redirect={`/${domainName}/create`}
zIndex={zIndex + 1}
showText={false}
ownerClass={domainName}
ownerId={node.key as number}
columnNameInOwnerClass="children"
hasRelateObjectField={true}
/>
}
</Space>
);
};
export default TreeTitleRender;
|