删除测试文件
This commit is contained in:
parent
aaa31935b3
commit
596816ebb2
|
|
@ -1,259 +0,0 @@
|
||||||
import React, { Component } from "react";
|
|
||||||
import { Tree, Menu } from "antd";
|
|
||||||
import { WeaInputSearch } from "ecCom";
|
|
||||||
import "../index.less";
|
|
||||||
|
|
||||||
const TreeNode = Tree.TreeNode;
|
|
||||||
const treeData = [
|
|
||||||
{
|
|
||||||
title: "0-0",
|
|
||||||
key: "0-0",
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
title: "0-0-0",
|
|
||||||
key: "0-0-0",
|
|
||||||
children: [
|
|
||||||
{ title: "0-0-0-0-88", key: "0-0-0-0" },
|
|
||||||
{ title: "0-0-0-1", key: "0-0-0-1" },
|
|
||||||
{ title: "0-0-0-2", key: "0-0-0-2" },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "0-0-1",
|
|
||||||
key: "0-0-1",
|
|
||||||
children: [
|
|
||||||
{ title: "0-0-1-0", key: "0-0-1-0" },
|
|
||||||
{ title: "0-0-1-1", key: "0-0-1-1" },
|
|
||||||
{ title: "0-0-1-2", key: "0-0-1-2" },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "0-0-2",
|
|
||||||
key: "0-0-2",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "99",
|
|
||||||
key: "0-1",
|
|
||||||
children: [
|
|
||||||
{ title: "0-1-0-0", key: "0-1-0-0" },
|
|
||||||
{ title: "9988", key: "0-1-0-1" },
|
|
||||||
{ title: "0-1-0-2-99988", key: "0-1-0-2" },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "0-2",
|
|
||||||
key: "0-2",
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
export default class LeftTree extends Component {
|
|
||||||
constructor(props) {
|
|
||||||
super(props);
|
|
||||||
this.state = {
|
|
||||||
expandedKeys: [],
|
|
||||||
treeData: [],
|
|
||||||
copyTree: [],
|
|
||||||
copyExpandedKeys: [],
|
|
||||||
searchValue: "",
|
|
||||||
rightClickNodeTreeItem: null,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
componentDidMount() {
|
|
||||||
let a = this.expandedKeysFun(treeData); //展开key
|
|
||||||
let cp = JSON.stringify(treeData); //这个是最简单的 深拷贝
|
|
||||||
this.setState({
|
|
||||||
treeData: treeData,
|
|
||||||
expandedKeys: a,
|
|
||||||
copyTree: cp,
|
|
||||||
copyExpandedKeys: a,
|
|
||||||
});
|
|
||||||
document.addEventListener("click", this.handleClick);
|
|
||||||
}
|
|
||||||
componentWillUnmount() {
|
|
||||||
document.removeEventListener("click", this.handleClick);
|
|
||||||
}
|
|
||||||
|
|
||||||
handleClick = () => {
|
|
||||||
this.setState({ rightClickNodeTreeItem: null });
|
|
||||||
};
|
|
||||||
|
|
||||||
onSelect = (node) => {
|
|
||||||
this.setState({ rightClickNodeTreeItem: null });
|
|
||||||
};
|
|
||||||
|
|
||||||
treeNodeonRightClick = (e) => {
|
|
||||||
this.setState({
|
|
||||||
rightClickNodeTreeItem: {
|
|
||||||
pageX: e.event.pageX,
|
|
||||||
pageY: e.event.pageY,
|
|
||||||
id: e.node.props["data-key"],
|
|
||||||
categoryName: e.node.props["data-title"],
|
|
||||||
},
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
arrayTreeFilter = (data, predicate, filterText) => {
|
|
||||||
const nodes = data;
|
|
||||||
if (!(nodes && nodes.length)) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const newChildren = [];
|
|
||||||
for (const node of nodes) {
|
|
||||||
if (predicate(node, filterText)) {
|
|
||||||
newChildren.push(node);
|
|
||||||
node.children = this.arrayTreeFilter(
|
|
||||||
node.children,
|
|
||||||
predicate,
|
|
||||||
filterText
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
const subs = this.arrayTreeFilter(node.children, predicate, filterText);
|
|
||||||
if ((subs && subs.length) || predicate(node, filterText)) {
|
|
||||||
node.children = subs;
|
|
||||||
newChildren.push(node);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return newChildren;
|
|
||||||
};
|
|
||||||
|
|
||||||
filterFn = (data, filterText) => {
|
|
||||||
if (!filterText) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
return new RegExp(filterText, "i").test(data.title);
|
|
||||||
};
|
|
||||||
flatTreeFun = (treeData) => {
|
|
||||||
let arr = [];
|
|
||||||
const flatTree = (treeData) => {
|
|
||||||
treeData.map((item, index) => {
|
|
||||||
arr.push(item);
|
|
||||||
if (item.children && item.children.length > 0) {
|
|
||||||
flatTree(item.children);
|
|
||||||
item.children = [];
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
flatTree(treeData);
|
|
||||||
return arr;
|
|
||||||
};
|
|
||||||
expandedKeysFun = (treeData) => {
|
|
||||||
if (treeData && treeData.length == 0) {
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
let arr = [];
|
|
||||||
const expandedKeysFn = (treeData) => {
|
|
||||||
treeData.map((item, index) => {
|
|
||||||
arr.push(item.key);
|
|
||||||
if (item.children && item.children.length > 0) {
|
|
||||||
expandedKeysFn(item.children);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
expandedKeysFn(treeData);
|
|
||||||
return arr;
|
|
||||||
};
|
|
||||||
onChange = (value) => {
|
|
||||||
if (value == "") {
|
|
||||||
let { copyTree, copyExpandedKeys } = this.state;
|
|
||||||
this.setState({
|
|
||||||
treeData: JSON.parse(copyTree),
|
|
||||||
expandedKeys: copyExpandedKeys,
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
let { copyTree, copyExpandedKeys } = this.state;
|
|
||||||
let res = this.arrayTreeFilter(
|
|
||||||
JSON.parse(copyTree),
|
|
||||||
this.filterFn,
|
|
||||||
value
|
|
||||||
);
|
|
||||||
let expkey = this.expandedKeysFun(res);
|
|
||||||
this.setState({
|
|
||||||
treeData: res,
|
|
||||||
expandedKeys: expkey,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
onExpand = (expandedKeys) => {
|
|
||||||
this.setState({
|
|
||||||
expandedKeys,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
getNodeTreeRightClickMenu = () => {
|
|
||||||
const { pageX, pageY } = { ...this.state.rightClickNodeTreeItem };
|
|
||||||
const tmpStyle = {
|
|
||||||
position: "absolute",
|
|
||||||
left: `${pageX}px`,
|
|
||||||
top: `${pageY}px`,
|
|
||||||
};
|
|
||||||
const menu = (
|
|
||||||
<Menu
|
|
||||||
// onClick={this.handleMenuClick}
|
|
||||||
style={tmpStyle}
|
|
||||||
// className={style.categs_tree_rightmenu}
|
|
||||||
>
|
|
||||||
<Menu.Item key="1">新增</Menu.Item>
|
|
||||||
<Menu.Item key="3">删除</Menu.Item>
|
|
||||||
</Menu>
|
|
||||||
);
|
|
||||||
return this.state.rightClickNodeTreeItem == null ? "" : menu;
|
|
||||||
};
|
|
||||||
|
|
||||||
renderTreeNode = (data) => {
|
|
||||||
if (data.length == 0) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
let { expandedKeys, searchValue } = this.state;
|
|
||||||
return data.map((item) => {
|
|
||||||
const index = item.title.indexOf(searchValue);
|
|
||||||
const beforeStr = item.title.substr(0, index);
|
|
||||||
const afterStr = item.title.substr(index + searchValue.length);
|
|
||||||
const title =
|
|
||||||
index > -1 ? (
|
|
||||||
<span>
|
|
||||||
{beforeStr}
|
|
||||||
<span style={{ color: "red" }}>{searchValue}</span>
|
|
||||||
{afterStr}
|
|
||||||
</span>
|
|
||||||
) : (
|
|
||||||
<span>{item.title}</span>
|
|
||||||
);
|
|
||||||
if (item.children && item.children.length > 0) {
|
|
||||||
return (
|
|
||||||
<TreeNode key={item.key} title={title} className="tree-node">
|
|
||||||
{this.renderTreeNode(item.children)}
|
|
||||||
</TreeNode>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
return (
|
|
||||||
<TreeNode key={item.key} title={title} className="tree-node"></TreeNode>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
render() {
|
|
||||||
const { searchValue, expandedKeys } = this.state;
|
|
||||||
return (
|
|
||||||
<div className="tree-wapper">
|
|
||||||
<WeaInputSearch
|
|
||||||
value={searchValue}
|
|
||||||
style={{ width: "100%", marginBottom: 16 }}
|
|
||||||
onSearch={this.onChange}
|
|
||||||
/>
|
|
||||||
<Tree
|
|
||||||
onExpand={this.onExpand}
|
|
||||||
expandedKeys={expandedKeys}
|
|
||||||
onRightClick={this.treeNodeonRightClick}
|
|
||||||
onSelect={this.onSelect}
|
|
||||||
autoExpandParent={true}>
|
|
||||||
{this.renderTreeNode(treeData)}
|
|
||||||
</Tree>
|
|
||||||
{/* {this.getNodeTreeRightClickMenu()} */}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
Loading…
Reference in New Issue