2020-10-14 16:09:03 +00:00
|
|
|
import React, { useState } from "react";
|
|
|
|
import TreeMenu from ".";
|
|
|
|
import TreeNode from "./sub-components/tree-node";
|
2021-03-13 22:00:46 +00:00
|
|
|
import ExpanderDownIcon from "../public/static/images/expander-down.react.svg";
|
|
|
|
import ExpanderRightIcon from "../public/static/images/expander-right.react.svg";
|
|
|
|
import CatalogFolderIcon from "../public/static/images/catalog.folder.react.svg";
|
2019-07-04 10:37:54 +00:00
|
|
|
|
2019-06-11 12:00:02 +00:00
|
|
|
const treeData = [
|
2019-12-03 14:17:53 +00:00
|
|
|
{
|
2020-10-14 16:09:03 +00:00
|
|
|
key: "0-0",
|
2020-10-16 13:16:01 +00:00
|
|
|
children: [{ key: "0-0-0" }, { key: "0-0-1" }],
|
|
|
|
},
|
2019-06-11 12:00:02 +00:00
|
|
|
];
|
|
|
|
|
2021-03-13 22:00:46 +00:00
|
|
|
const Template = ({
|
|
|
|
data,
|
|
|
|
title,
|
|
|
|
newItems,
|
|
|
|
showBadge,
|
|
|
|
onSelect,
|
|
|
|
onLoad,
|
|
|
|
onCheck,
|
|
|
|
onRightClick,
|
|
|
|
...args
|
|
|
|
}) => {
|
2019-06-11 12:00:02 +00:00
|
|
|
const [gData, setGData] = useState(data);
|
|
|
|
const [autoExpandParent, setAutoExpandParent] = useState(true);
|
2020-10-14 16:09:03 +00:00
|
|
|
const [expandedKeys, setExpandedKeys] = useState([
|
|
|
|
"0-0-key",
|
|
|
|
"0-0-0-key",
|
2020-10-16 13:16:01 +00:00
|
|
|
"0-0-0-0-key",
|
2020-10-14 16:09:03 +00:00
|
|
|
]);
|
2019-12-03 14:17:53 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
const onDragStart = (info) => {
|
2019-06-11 12:00:02 +00:00
|
|
|
info.event.persist();
|
|
|
|
};
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
const onDragEnter = (info) => {
|
2019-06-11 12:00:02 +00:00
|
|
|
setExpandedKeys(info.expandedKeys);
|
2019-07-05 09:06:03 +00:00
|
|
|
};
|
2019-06-11 12:00:02 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
const onBadgeClick = (e) => {
|
2020-10-14 16:09:03 +00:00
|
|
|
const id = e.currentTarget.dataset.id;
|
|
|
|
console.log("Clocked on badge: ", id);
|
|
|
|
};
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
const onDrop = (info) => {
|
2019-12-03 14:17:53 +00:00
|
|
|
info.event.persist();
|
|
|
|
const dropKey = info.node.props.eventKey;
|
|
|
|
const dragKey = info.dragNode.props.eventKey;
|
2020-10-14 16:09:03 +00:00
|
|
|
const dropPos = info.node.props.pos.split("-");
|
|
|
|
const dropPosition =
|
|
|
|
info.dropPosition - Number(dropPos[dropPos.length - 1]);
|
2019-12-03 14:17:53 +00:00
|
|
|
|
|
|
|
const loop = (treeData, key, callback) => {
|
|
|
|
treeData.forEach((item, index, arr) => {
|
|
|
|
if (item.key === key) {
|
|
|
|
callback(item, index, arr);
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
if (item.children) {
|
|
|
|
loop(item.children, key, callback);
|
|
|
|
}
|
2019-06-11 12:00:02 +00:00
|
|
|
});
|
2019-12-03 14:17:53 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
const treeData = [...gData];
|
|
|
|
|
|
|
|
let dragObj;
|
|
|
|
loop(treeData, dragKey, (item, index, arr) => {
|
|
|
|
arr.splice(index, 1);
|
|
|
|
dragObj = item;
|
|
|
|
});
|
2019-06-11 12:00:02 +00:00
|
|
|
|
2019-12-03 14:17:53 +00:00
|
|
|
if (!info.dropToGap) {
|
2020-10-16 13:16:01 +00:00
|
|
|
loop(treeData, dropKey, (item) => {
|
2019-12-03 14:17:53 +00:00
|
|
|
item.children = item.children || [];
|
|
|
|
item.children.push(dragObj);
|
|
|
|
});
|
|
|
|
} else if (
|
|
|
|
(info.node.props.children || []).length > 0 &&
|
|
|
|
info.node.props.expanded &&
|
|
|
|
dropPosition === 1
|
|
|
|
) {
|
2020-10-16 13:16:01 +00:00
|
|
|
loop(treeData, dropKey, (item) => {
|
2019-12-03 14:17:53 +00:00
|
|
|
item.children = item.children || [];
|
|
|
|
item.children.unshift(dragObj);
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
let ar;
|
|
|
|
let i;
|
|
|
|
loop(treeData, dropKey, (item, index, arr) => {
|
|
|
|
ar = arr;
|
|
|
|
i = index;
|
|
|
|
});
|
|
|
|
if (dropPosition === -1) {
|
|
|
|
ar.splice(i, 0, dragObj);
|
2019-06-11 12:00:02 +00:00
|
|
|
} else {
|
2019-12-03 14:17:53 +00:00
|
|
|
ar.splice(i + 1, 0, dragObj);
|
2019-06-11 12:00:02 +00:00
|
|
|
}
|
2019-12-03 14:17:53 +00:00
|
|
|
}
|
|
|
|
setGData(treeData);
|
2019-06-11 12:00:02 +00:00
|
|
|
};
|
2021-03-13 22:00:46 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
const onExpand = (expandedKeys) => {
|
2019-06-11 12:00:02 +00:00
|
|
|
setExpandedKeys(expandedKeys);
|
|
|
|
setAutoExpandParent(false);
|
2020-10-14 16:09:03 +00:00
|
|
|
};
|
2019-06-11 12:00:02 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
const getTreeNodes = (tree) => {
|
|
|
|
return tree.map((item) => {
|
2019-12-03 14:17:53 +00:00
|
|
|
if (item.children && item.children.length) {
|
2020-10-14 16:09:03 +00:00
|
|
|
return (
|
|
|
|
<TreeNode
|
2021-03-13 22:00:46 +00:00
|
|
|
title={title}
|
2020-10-14 16:09:03 +00:00
|
|
|
key={item.key}
|
2021-03-13 22:00:46 +00:00
|
|
|
icon={
|
|
|
|
<CatalogFolderIcon
|
|
|
|
size="scale"
|
|
|
|
//isfill=true,
|
|
|
|
color="dimgray"
|
|
|
|
/>
|
|
|
|
}
|
2020-10-15 07:50:49 +00:00
|
|
|
onBadgeClick={onBadgeClick}
|
2021-03-13 22:00:46 +00:00
|
|
|
newItems={newItems}
|
|
|
|
showBadge={showBadge}
|
2020-10-14 16:09:03 +00:00
|
|
|
>
|
|
|
|
{getTreeNodes(item.children)}
|
|
|
|
</TreeNode>
|
|
|
|
);
|
2019-12-03 14:17:53 +00:00
|
|
|
}
|
2020-10-14 16:09:03 +00:00
|
|
|
return (
|
|
|
|
<TreeNode
|
|
|
|
key={item.key}
|
2021-03-13 22:00:46 +00:00
|
|
|
title={title}
|
|
|
|
icon={React.createElement(CatalogFolderIcon, {
|
|
|
|
size: "scale",
|
|
|
|
//isfill: true,
|
|
|
|
color: "dimgray",
|
|
|
|
})}
|
2020-10-14 16:09:03 +00:00
|
|
|
></TreeNode>
|
|
|
|
);
|
2019-12-03 14:17:53 +00:00
|
|
|
});
|
2019-06-11 12:00:02 +00:00
|
|
|
};
|
2019-07-04 10:37:54 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
const switcherIcon = (obj) => {
|
2019-06-11 12:00:02 +00:00
|
|
|
if (obj.isLeaf) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
if (obj.expanded) {
|
2021-03-13 22:00:46 +00:00
|
|
|
return <ExpanderDownIcon width="8px" color="dimgray" />;
|
2019-06-11 12:00:02 +00:00
|
|
|
} else {
|
2021-03-13 22:00:46 +00:00
|
|
|
return <ExpanderRightIcon width="8px" color="dimgray" />;
|
2019-06-11 12:00:02 +00:00
|
|
|
}
|
|
|
|
};
|
2019-07-04 10:37:54 +00:00
|
|
|
|
2019-06-11 12:00:02 +00:00
|
|
|
return (
|
2019-12-03 14:17:53 +00:00
|
|
|
<div style={{ width: "250px", margin: "20px" }}>
|
2019-06-11 12:00:02 +00:00
|
|
|
<TreeMenu
|
2021-03-13 22:00:46 +00:00
|
|
|
{...args}
|
2019-12-03 14:17:53 +00:00
|
|
|
onExpand={onExpand}
|
2019-06-11 12:00:02 +00:00
|
|
|
autoExpandParent={autoExpandParent}
|
|
|
|
expandedKeys={expandedKeys}
|
2020-10-16 13:16:01 +00:00
|
|
|
onDragStart={(info) => onDragStart(info)}
|
|
|
|
onDrop={(info) => onDrop(info)}
|
2019-06-11 12:00:02 +00:00
|
|
|
onDragEnter={onDragEnter}
|
|
|
|
switcherIcon={switcherIcon}
|
2021-03-13 22:00:46 +00:00
|
|
|
onSelect={() => onSelect("select")}
|
|
|
|
onLoad={() => onLoad("load")}
|
|
|
|
onCheck={() => onCheck("check")}
|
|
|
|
onRightClick={() => onRightClick("rightClick")}
|
2019-06-11 12:00:02 +00:00
|
|
|
>
|
2019-07-05 09:06:03 +00:00
|
|
|
{getTreeNodes(gData)}
|
2019-06-11 12:00:02 +00:00
|
|
|
</TreeMenu>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2021-03-13 22:00:46 +00:00
|
|
|
export const basic = Template.bind({});
|
|
|
|
basic.args = {
|
|
|
|
checkable: false,
|
|
|
|
draggable: false,
|
|
|
|
disabled: false,
|
|
|
|
multiple: false,
|
|
|
|
showIcon: true,
|
|
|
|
isFullFillSelection: true,
|
|
|
|
isEmptyRootNode: false,
|
|
|
|
defaultExpandAll: false,
|
|
|
|
defaultExpandParent: true,
|
|
|
|
data: treeData,
|
|
|
|
title: "Title",
|
|
|
|
newItems: 0,
|
|
|
|
showBadge: false,
|
|
|
|
};
|