diff --git a/CHANGELOG.md b/CHANGELOG.md
index 973da77..c8f4f67 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,7 @@
### build
+* **changelog集成:** changelog集成 ([39483f0](https://github.com/tinper-bee/bee-tree/commit/39483f0))
* **组件依赖清理:** 组件依赖清理 ([0871a43](https://github.com/tinper-bee/bee-tree/commit/0871a43))
@@ -14,6 +15,7 @@
### BREAKING CHANGES
+* **changelog集成:** changelog集成完毕，具体使用方式参考文档。
* **文档补充:** 文档补充
* **组件依赖清理:** 组件依赖清理
diff --git a/demo/TreeDemo.scss b/demo/TreeDemo.scss
index f23782b..dbef53b 100644
--- a/demo/TreeDemo.scss
+++ b/demo/TreeDemo.scss
@@ -8,4 +8,16 @@
.u-tree-searchable-filter {
color: #f50;
transition: all .3s ease;
+}
+
+.title-middle {
+ display: inline-block;
+ vertical-align: middle;
+}
+.edit-icon {
+ float:right;
+ font-size: 14px;
+}
+.title-con {
+ min-width: 150px;
}
\ No newline at end of file
diff --git a/demo/demolist/Demo4.js b/demo/demolist/Demo4.js
index 79e0f2a..7ff2428 100644
--- a/demo/demolist/Demo4.js
+++ b/demo/demolist/Demo4.js
@@ -1,12 +1,14 @@
/**
-*
-* @title Tree可搜索事例
-* @description
-*
-*/
+ *
+ * @title Tree可搜索事例
+ * @description
+ *
+ */
-import React, { Component } from 'react';
+import React, {
+ Component
+} from 'react';
import FormControl from 'bee-form-control';
import Tree from '../../src';
@@ -16,25 +18,28 @@ const z = 1;
const gData = [];
const generateData = (_level, _preKey, _tns) => {
- const preKey = _preKey || '0';
- const tns = _tns || gData;
+ const preKey = _preKey || '0';
+ const tns = _tns || gData;
- const children = [];
- for (let i = 0; i < x; i++) {
- const key = `${preKey}-${i}`;
- tns.push({ title: key, key });
- if (i < y) {
- children.push(key);
- }
- }
- if (_level < 0) {
- return tns;
- }
- const level = _level - 1;
- children.forEach((key, index) => {
- tns[index].children = [];
- return generateData(level, key, tns[index].children);
+ const children = [];
+ for (let i = 0; i < x; i++) {
+ const key = `${preKey}-${i}`;
+ tns.push({
+ title: key,
+ key
});
+ if (i < y) {
+ children.push(key);
+ }
+ }
+ if (_level < 0) {
+ return tns;
+ }
+ const level = _level - 1;
+ children.forEach((key, index) => {
+ tns[index].children = [];
+ return generateData(level, key, tns[index].children);
+ });
};
generateData(z);
@@ -45,7 +50,10 @@ const generateList = (data) => {
for (let i = 0; i < data.length; i++) {
const node = data[i];
const key = node.key;
- dataList.push({ key, title: key });
+ dataList.push({
+ key,
+ title: key
+ });
if (node.children) {
generateList(node.children, node.key);
}
@@ -84,8 +92,8 @@ class Demo4 extends Component {
autoExpandParent: false,
});
}
- onChange = (e) => {
- const value = e.target.value;
+ onChange = (value) => {
+ // const value = e.target.value;
const expandedKeys = [];
dataList.forEach((item) => {
if (item.key.indexOf(value) > -1) {
@@ -105,7 +113,11 @@ class Demo4 extends Component {
});
}
render() {
- const { searchValue, expandedKeys, autoExpandParent } = this.state;
+ const {
+ searchValue,
+ expandedKeys,
+ autoExpandParent
+ } = this.state;
const loop = data => data.map((item) => {
const index = item.key.search(searchValue);
const beforeStr = item.key.substr(0, index);
diff --git a/demo/demolist/Demo6.js b/demo/demolist/Demo6.js
index 58f7f1f..2a38459 100644
--- a/demo/demolist/Demo6.js
+++ b/demo/demolist/Demo6.js
@@ -10,7 +10,7 @@ import React, {
Component
} from 'react';
import Tree from '../../src';
-
+import Icon from 'bee-icon';
const TreeNode = Tree.TreeNode;
const defaultProps = {
@@ -36,7 +36,7 @@ class Demo1 extends Component {
render() {
return (
- } closeIcon={}
defaultExpandedKeys={this.state.defaultExpandedKeys}
defaultSelectedKeys={this.state.defaultSelectedKeys}
defaultCheckedKeys={this.state.defaultCheckedKeys}
diff --git a/demo/demolist/Demo7.js b/demo/demolist/Demo7.js
new file mode 100644
index 0000000..0b5ea7d
--- /dev/null
+++ b/demo/demolist/Demo7.js
@@ -0,0 +1,153 @@
+/**
+ *
+ * @title Tree增加节点
+ * @description
+ *
+ */
+
+
+import React, {
+ Component
+} from 'react';
+import Tree from '../../src';
+import Button from 'bee-button';
+
+const TreeNode = Tree.TreeNode;
+
+
+class Demo7 extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ treeData: [],
+ defaultExpandedKeys: ['0-0', '0-1', '0-2'],
+ parentNode: {}
+ };
+ this.onSelect = this.onSelect.bind(this);
+ this.addNode = this.addNode.bind(this);
+ this.clickFun = this.clickFun.bind(this);
+ this.getNodeByKey = this.getNodeByKey.bind(this);
+ this.parentNode = null
+ }
+ componentDidMount() {
+ setTimeout(() => {
+ this.setState({
+ treeData: [{
+ name: 'pNode 01',
+ key: '0-0',
+ children: [{
+ name: 'leaf 0-0-0',
+ key: '0-0-0'
+ }, {
+ name: 'leaf 0-0-1',
+ key: '0-0-1'
+ }]
+ }, {
+ name: 'pNode 02',
+ key: '0-1',
+ children: [{
+ name: 'leaf 0-1-0',
+ key: '0-1-0'
+ }, {
+ name: 'leaf 0-1-1',
+ key: '0-1-1'
+ }]
+ }, {
+ name: 'pNode 03',
+ key: '0-2',
+ isLeaf: true
+ }, ],
+ });
+ }, 100);
+ }
+ /**
+ * 增加节点
+ * @param string prKey [父节点key]
+ * @param object nodeItem [子节点信息]
+ */
+ addNode(prKey, nodeItem) {
+ const data = this.state.treeData;
+ let parNode;
+ if (prKey) {
+ // 如果prKey存在则搜索父节点进行添加
+ parNode = this.getNodeByKey(data, prKey);
+ //如果父节点存在的话，添加到父节点上
+ if (parNode) {
+ if (!parNode.children) {
+ parNode.children = [];
+ }
+ // 如果key不存在就动态生成一个
+ if (!nodeItem.key) {
+ nodeItem.key = prKey + parNode.children.length + 1;
+ }
+ parNode.children.push(nodeItem);
+ }
+ } else {
+ // 没有穿prKey添加到根下成为一级节点
+ if (!nodeItem.key) {
+ nodeItem.key = "0-" + data.length + 1;
+ }
+ data.push(nodeItem);
+ }
+
+ this.setState({
+ data
+ });
+ }
+
+ getNodeByKey(data, key) {
+ if (!this.parentNode) {
+ data.find(item => {
+ if (item.key === key) {
+ console.log('item.name---' + item.name)
+ this.parentNode = item;
+ return (true);
+ } else if (item.children) {
+ return this.getNodeByKey(item.children, key);
+
+ }
+ })
+ }
+ return this.parentNode;
+ }
+
+
+
+ onSelect(info) {
+ console.log('selected', info);
+ }
+ /**
+ * 点击button事件
+ */
+ clickFun() {
+ let prKey, nodeItem;
+ prKey = '0-1';
+ nodeItem = {
+ name: 'leaf 0-0-4'
+ }
+ this.addNode(prKey, nodeItem);
+ }
+
+ render() {
+ const loop = data => data.map((item) => {
+ if (item.children) {
+ return {loop(item.children)};
+ }
+ return ;
+ });
+ const treeNodes = loop(this.state.treeData);
+ console.log('defaultKeys--' + this.state.defaultExpandedKeys);
+ return (
+
+
+ {treeNodes}
+
+
+
+ );
+ }
+};
+
+export default Demo7
\ No newline at end of file
diff --git a/demo/demolist/Demo8.js b/demo/demolist/Demo8.js
new file mode 100644
index 0000000..fec5302
--- /dev/null
+++ b/demo/demolist/Demo8.js
@@ -0,0 +1,127 @@
+/**
+ *
+ * @title Tree 节点可编辑
+ * @description 双击节点可编辑
+ *
+ */
+
+
+import React, {
+ Component
+} from 'react';
+import Tree from '../../src';
+import Button from 'bee-button';
+import Icon from 'bee-icon';
+
+const TreeNode = Tree.TreeNode;
+
+let timer = 0;
+let delay = 200;
+let prevent = false;
+
+
+
+class Demo8 extends Component {
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ treeData: [],
+ isHover: "",
+ editKey: ""
+ };
+
+ }
+
+
+ onMouseEnter = (e) => {
+ this.setState({
+ isHover: e.node.props.pos
+ })
+ }
+ onMouseLeave = (e, treenode) => {
+ this.setState({
+ isHover: "",
+ editKey: ""
+ })
+
+ }
+
+ editRender = (item) => {
+ this.setState({
+ editKey: item.key
+ });
+ }
+ nodechange = (item, value) => {
+ item.name = value;
+ }
+ renderTreeTitle = (item) => {
+ let titleIcon, titleInfo;
+ //编辑时input框
+ if (this.state.editKey == item.key) {
+ titleInfo = this.nodechange(item,e.target.value)}/>
+ } else {
+ titleInfo = {item.name}
+ }
+ //编辑图标
+ if (this.state.isHover == item.key) {
+ titleIcon = this.editRender(item)}>;
+ }
+ return (
+
+ {titleInfo}
+ {titleIcon}
+
);
+ }
+
+ componentDidMount = () => {
+ setTimeout(() => {
+ this.setState({
+ treeData: [{
+ name: 'pNode 01',
+ key: '0-0',
+ children: [{
+ name: 'leaf 0-0-0',
+ key: '0-0-0'
+ }, {
+ name: 'leaf 0-0-1',
+ key: '0-0-1'
+ }]
+ }, {
+ name: 'pNode 02',
+ key: '0-1',
+ children: [{
+ name: 'leaf 0-1-0',
+ key: '0-1-0'
+ }, {
+ name: 'leaf 0-1-1',
+ key: '0-1-1'
+ }]
+ }, {
+ name: 'pNode 03',
+ key: '0-2',
+ isLeaf: true
+ }, ],
+ });
+ }, 100);
+ }
+ render() {
+ const loop = data => data.map((item) => {
+ if (item.children) {
+ return {loop(item.children)};
+ }
+ return ;
+ });
+ const treeNodes = loop(this.state.treeData);
+ return (
+
+ {treeNodes}
+
+
+ );
+ }
+}
+
+
+
+export default Demo8;
\ No newline at end of file
diff --git a/demo/index.js b/demo/index.js
index fbbf6c7..14fc3fb 100644
--- a/demo/index.js
+++ b/demo/index.js
@@ -42,7 +42,7 @@ const CARET = ;
const CARETUP = ;
-var Demo1 = require("./demolist/Demo1");var Demo2 = require("./demolist/Demo2");var Demo3 = require("./demolist/Demo3");var Demo4 = require("./demolist/Demo4");var Demo5 = require("./demolist/Demo5");var Demo6 = require("./demolist/Demo6");var DemoArray = [{"example":,"title":" Tree基本使用事例","code":"/**\n*\n* @title Tree基本使用事例\n* @description 事例涵盖 checkbox如何选择，disable状态和部分选择状态。\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport Tree from 'bee-tree';\n\nconst TreeNode = Tree.TreeNode;\n\nconst defaultProps = {\n\tkeys: ['0-0-0', '0-0-1']\n}\nconsole.log(Tree);\nclass Demo1 extends Component {\n\tconstructor(props) {\n\t\tsuper(props);\n\t const keys = this.props.keys;\n\t this.state = {\n\t defaultExpandedKeys: keys,\n\t defaultSelectedKeys: keys,\n\t defaultCheckedKeys: keys,\n\t };\n\t}\n\tonSelect(info) {\n\t console.log('selected', info);\n\t}\n\tonCheck(info) {\n\t console.log('onCheck', info);\n\t}\n\trender() {\n\t return (\n\t \n\t \n\t \n\t \n\t \n\t \n\t \n\t sss} key=\"0-0-1-0\" />\n\t \n\t \n\t \n\t );\n\t}\n}\n\nDemo1.defaultProps = defaultProps;\n\n\n","desc":" 事例涵盖 checkbox如何选择，disable状态和部分选择状态。"},{"example":,"title":" Tree数据可控事例","code":"/**\n*\n* @title Tree数据可控事例\n* @description\n*\n*/\n/*\nconst x = 3;\nconst y = 2;\nconst z = 1;\nconst gData = [];\n\nconst generateData = (_level, _preKey, _tns) => {\n const preKey = _preKey || '0';\n const tns = _tns || gData;\n\n const children = [];\n for (let i = 0; i < x; i++) {\n const key = `${preKey}-${i}`;\n tns.push({ title: key, key });\n if (i < y) {\n children.push(key);\n }\n }\n if (_level < 0) {\n return tns;\n }\n const level = _level - 1;\n children.forEach((key, index) => {\n tns[index].children = [];\n return generateData(level, key, tns[index].children);\n });\n};\ngenerateData(z);\n*/\n\n\nimport React, { Component } from 'react';\nimport Tree from 'bee-tree';\n\nconst x = 3;\nconst y = 2;\nconst z = 1;\nconst gData = [];\n\nconst generateData = (_level, _preKey, _tns) => {\n const preKey = _preKey || '0';\n const tns = _tns || gData;\n\n const children = [];\n for (let i = 0; i < x; i++) {\n const key = `${preKey}-${i}`;\n tns.push({ title: key, key });\n if (i < y) {\n children.push(key);\n }\n }\n if (_level < 0) {\n return tns;\n }\n const level = _level - 1;\n children.forEach((key, index) => {\n tns[index].children = [];\n return generateData(level, key, tns[index].children);\n });\n};\ngenerateData(z);\n\nconst TreeNode = Tree.TreeNode;\n\n\nclass Demo2 extends Component{\n constructor(props) {\n \tsuper(props);\n this.state = {\n expandedKeys: ['0-0-0', '0-0-1'],\n autoExpandParent: true,\n checkedKeys: ['0-0-0'],\n selectedKeys: [],\n };\n this.onExpand = this.onExpand.bind(this);\n this.onCheck = this.onCheck.bind(this);\n this.onSelect = this.onSelect.bind(this);\n }\n onExpand(expandedKeys) {\n console.log('onExpand', arguments);\n // if not set autoExpandParent to false, if children expanded, parent can not collapse.\n // or, you can remove all expanded children keys.\n this.setState({\n expandedKeys,\n autoExpandParent: false,\n });\n }\n onCheck(checkedKeys) {\n this.setState({\n checkedKeys,\n selectedKeys: ['0-3', '0-4'],\n });\n }\n onSelect(selectedKeys, info) {\n console.log('onSelect', info);\n this.setState({ selectedKeys });\n }\n render() {\n const loop = data => data.map((item) => {\n if (item.children) {\n return (\n \n {loop(item.children)}\n \n );\n }\n return ;\n });\n return (\n \n {loop(gData)}\n \n );\n }\n};\n\n\n","desc":""},{"example":,"title":" Tree 拖拽使用事例","code":"/**\n*\n* @title Tree 拖拽使用事例\n* @description 拖动结点插入到另一个结点后面或者其他的父节点里面。\n*\n*/\n\n\n\nimport React, { Component } from 'react';\nimport Tree from 'bee-tree';\n\nconst x = 3;\nconst y = 2;\nconst z = 1;\nconst gData = [];\n\nconst generateData = (_level, _preKey, _tns) => {\n const preKey = _preKey || '0';\n const tns = _tns || gData;\n\n const children = [];\n for (let i = 0; i < x; i++) {\n const key = `${preKey}-${i}`;\n tns.push({ title: key, key });\n if (i < y) {\n children.push(key);\n }\n }\n if (_level < 0) {\n return tns;\n }\n const level = _level - 1;\n children.forEach((key, index) => {\n tns[index].children = [];\n return generateData(level, key, tns[index].children);\n });\n};\ngenerateData(z);\n\nconst TreeNode = Tree.TreeNode;\n\nclass Demo3 extends Component{\n constructor(props) {\n super(props);\n this.state = {\n gData,\n expandedKeys: ['0-0', '0-0-0', '0-0-0-0'],\n };\n this.onDragEnter = this.onDragEnter.bind(this);\n this.onDrop = this.onDrop.bind(this);\n }\n onDragEnter(info) {\n console.log(info);\n // expandedKeys 需要受控时设置\n // this.setState({\n // expandedKeys: info.expandedKeys,\n // });\n }\n onDrop(info) {\n console.log(info);\n const dropKey = info.node.props.eventKey;\n const dragKey = info.dragNode.props.eventKey;\n // const dragNodesKeys = info.dragNodesKeys;\n const loop = (data, key, callback) => {\n data.forEach((item, index, arr) => {\n if (item.key === key) {\n return callback(item, index, arr);\n }\n if (item.children) {\n return loop(item.children, key, callback);\n }\n });\n };\n const data = [...this.state.gData];\n let dragObj;\n loop(data, dragKey, (item, index, arr) => {\n arr.splice(index, 1);\n dragObj = item;\n });\n if (info.dropToGap) {\n let ar;\n let i;\n loop(data, dropKey, (item, index, arr) => {\n ar = arr;\n i = index;\n });\n ar.splice(i, 0, dragObj);\n } else {\n loop(data, dropKey, (item) => {\n item.children = item.children || [];\n // where to insert 示例添加到尾部，可以是随意位置\n item.children.push(dragObj);\n });\n }\n this.setState({\n gData: data,\n });\n }\n render() {\n const loop = data => data.map((item) => {\n if (item.children && item.children.length) {\n return {loop(item.children)};\n }\n return ;\n });\n return (\n \n {loop(this.state.gData)}\n \n );\n }\n};\n\n","desc":" 拖动结点插入到另一个结点后面或者其他的父节点里面。"},{"example":,"title":" Tree可搜索事例","code":"/**\n*\n* @title Tree可搜索事例\n* @description\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport FormControl from 'bee-form-control';\nimport Tree from 'bee-tree';\n\nconst x = 3;\nconst y = 2;\nconst z = 1;\nconst gData = [];\n\nconst generateData = (_level, _preKey, _tns) => {\n const preKey = _preKey || '0';\n const tns = _tns || gData;\n\n const children = [];\n for (let i = 0; i < x; i++) {\n const key = `${preKey}-${i}`;\n tns.push({ title: key, key });\n if (i < y) {\n children.push(key);\n }\n }\n if (_level < 0) {\n return tns;\n }\n const level = _level - 1;\n children.forEach((key, index) => {\n tns[index].children = [];\n return generateData(level, key, tns[index].children);\n });\n};\ngenerateData(z);\n\nconst TreeNode = Tree.TreeNode;\n\nconst dataList = [];\nconst generateList = (data) => {\n for (let i = 0; i < data.length; i++) {\n const node = data[i];\n const key = node.key;\n dataList.push({ key, title: key });\n if (node.children) {\n generateList(node.children, node.key);\n }\n }\n};\ngenerateList(gData);\n\nconst getParentKey = (key, tree) => {\n let parentKey;\n for (let i = 0; i < tree.length; i++) {\n const node = tree[i];\n if (node.children) {\n if (node.children.some(item => item.key === key)) {\n parentKey = node.key;\n } else if (getParentKey(key, node.children)) {\n parentKey = getParentKey(key, node.children);\n }\n }\n }\n return parentKey;\n};\n\n\nclass Demo4 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n expandedKeys: [],\n searchValue: '',\n autoExpandParent: true,\n }\n }\n onExpand = (expandedKeys) => {\n this.setState({\n expandedKeys,\n autoExpandParent: false,\n });\n }\n onChange = (e) => {\n const value = e.target.value;\n const expandedKeys = [];\n dataList.forEach((item) => {\n if (item.key.indexOf(value) > -1) {\n expandedKeys.push(getParentKey(item.key, gData));\n }\n });\n const uniqueExpandedKeys = [];\n expandedKeys.forEach((item) => {\n if (item && uniqueExpandedKeys.indexOf(item) === -1) {\n uniqueExpandedKeys.push(item);\n }\n });\n this.setState({\n expandedKeys: uniqueExpandedKeys,\n searchValue: value,\n autoExpandParent: true,\n });\n }\n render() {\n const { searchValue, expandedKeys, autoExpandParent } = this.state;\n const loop = data => data.map((item) => {\n const index = item.key.search(searchValue);\n const beforeStr = item.key.substr(0, index);\n const afterStr = item.key.substr(index + searchValue.length);\n const title = index > -1 ? (\n \n {beforeStr}\n {searchValue}\n {afterStr}\n \n ) : {item.key};\n if (item.children) {\n return (\n \n {loop(item.children)}\n \n );\n }\n return ;\n });\n return (\n \n \n \n {loop(gData)}\n \n
\n );\n }\n}\n\n","desc":""},{"example":,"title":" Tree异步数据加载","code":"/**\n*\n* @title Tree异步数据加载\n* @description 当点击展开，异步获取子节点数据\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport Tree from 'bee-tree';\n\nconst x = 3;\nconst y = 2;\nconst z = 1;\nconst gData = [];\n\nconst generateData = (_level, _preKey, _tns) => {\n const preKey = _preKey || '0';\n const tns = _tns || gData;\n\n const children = [];\n for (let i = 0; i < x; i++) {\n const key = `${preKey}-${i}`;\n tns.push({ title: key, key });\n if (i < y) {\n children.push(key);\n }\n }\n if (_level < 0) {\n return tns;\n }\n const level = _level - 1;\n children.forEach((key, index) => {\n tns[index].children = [];\n return generateData(level, key, tns[index].children);\n });\n};\ngenerateData(z);\n\nconst TreeNode = Tree.TreeNode;\n\nfunction generateTreeNodes(treeNode) {\n const arr = [];\n const key = treeNode.props.eventKey;\n for (let i = 0; i < 3; i++) {\n arr.push({ name: `leaf ${key}-${i}`, key: `${key}-${i}` });\n }\n return arr;\n}\n\nfunction setLeaf(treeData, curKey, level) {\n const loopLeaf = (data, lev) => {\n const l = lev - 1;\n data.forEach((item) => {\n if ((item.key.length > curKey.length) ? item.key.indexOf(curKey) !== 0 :\n curKey.indexOf(item.key) !== 0) {\n return;\n }\n if (item.children) {\n loopLeaf(item.children, l);\n } else if (l < 1) {\n item.isLeaf = true;\n }\n });\n };\n loopLeaf(treeData, level + 1);\n}\n\nfunction getNewTreeData(treeData, curKey, child, level) {\n const loop = (data) => {\n if (level < 1 || curKey.length - 3 > level * 2) return;\n data.forEach((item) => {\n if (curKey.indexOf(item.key) === 0) {\n if (item.children) {\n loop(item.children);\n } else {\n item.children = child;\n }\n }\n });\n };\n loop(treeData);\n setLeaf(treeData, curKey, level);\n}\n\nclass Demo5 extends Component{\n constructor(props) {\n super(props);\n this.state = {\n treeData: [],\n };\n this.onSelect = this.onSelect.bind(this);\n this.onLoadData = this.onLoadData.bind(this);\n }\n componentDidMount() {\n setTimeout(() => {\n this.setState({\n treeData: [\n { name: 'pNode 01', key: '0-0' },\n { name: 'pNode 02', key: '0-1' },\n { name: 'pNode 03', key: '0-2', isLeaf: true },\n ],\n });\n }, 100);\n }\n onSelect(info) {\n console.log('selected', info);\n }\n onLoadData(treeNode) {\n return new Promise((resolve) => {\n setTimeout(() => {\n const treeData = [...this.state.treeData];\n getNewTreeData(treeData, treeNode.props.eventKey, generateTreeNodes(treeNode), 2);\n this.setState({ treeData });\n resolve();\n }, 1000);\n });\n }\n render() {\n const loop = data => data.map((item) => {\n if (item.children) {\n return {loop(item.children)};\n }\n return ;\n });\n const treeNodes = loop(this.state.treeData);\n return (\n \n {treeNodes}\n \n );\n }\n};\n\n","desc":" 当点击展开，异步获取子节点数据"},{"example":,"title":" Tree基本使用事例自定义图标","code":"/**\n *\n * @title Tree基本使用事例自定义图标\n * @description 添加openIcon、closeIcon属性\n *\n */\n\n\nimport React, {\n\tComponent\n} from 'react';\nimport Tree from 'bee-tree';\n\nconst TreeNode = Tree.TreeNode;\n\nconst defaultProps = {\n\tkeys: ['0-0-0', '0-0-1']\n}\nconsole.log(Tree);\nclass Demo1 extends Component {\n\tconstructor(props) {\n\t\tsuper(props);\n\t\tconst keys = this.props.keys;\n\t\tthis.state = {\n\t\t\tdefaultExpandedKeys: keys,\n\t\t\tdefaultSelectedKeys: keys,\n\t\t\tdefaultCheckedKeys: keys,\n\t\t};\n\t}\n\tonSelect(info) {\n\t\tconsole.log('selected', info);\n\t}\n\tonCheck(info) {\n\t\tconsole.log('onCheck', info);\n\t}\n\trender() {\n\t\treturn (\n\n\t\t\t\n\t \n\t \n\t \n\t \n\t \n\t \n\t sss} key=\"0-0-1-0\" />\n\t \n\t \n\t \n\t\t);\n\t}\n}\n\nDemo1.defaultProps = defaultProps;\n\n\n","desc":" 添加openIcon、closeIcon属性"}]
+var Demo1 = require("./demolist/Demo1");var Demo2 = require("./demolist/Demo2");var Demo3 = require("./demolist/Demo3");var Demo4 = require("./demolist/Demo4");var Demo5 = require("./demolist/Demo5");var Demo6 = require("./demolist/Demo6");var Demo7 = require("./demolist/Demo7");var Demo8 = require("./demolist/Demo8");var DemoArray = [{"example":,"title":" Tree基本使用事例","code":"/**\r\n*\r\n* @title Tree基本使用事例\r\n* @description 事例涵盖 checkbox如何选择，disable状态和部分选择状态。\r\n*\r\n*/\r\n\r\n\r\nimport React, { Component } from 'react';\r\nimport Tree from 'bee-tree';\r\n\r\nconst TreeNode = Tree.TreeNode;\r\n\r\nconst defaultProps = {\r\n\tkeys: ['0-0-0', '0-0-1']\r\n}\r\nconsole.log(Tree);\r\nclass Demo1 extends Component {\r\n\tconstructor(props) {\r\n\t\tsuper(props);\r\n\t const keys = this.props.keys;\r\n\t this.state = {\r\n\t defaultExpandedKeys: keys,\r\n\t defaultSelectedKeys: keys,\r\n\t defaultCheckedKeys: keys,\r\n\t };\r\n\t}\r\n\tonSelect(info) {\r\n\t console.log('selected', info);\r\n\t}\r\n\tonCheck(info) {\r\n\t console.log('onCheck', info);\r\n\t}\r\n\trender() {\r\n\t return (\r\n\t \r\n\t \r\n\t \r\n\t \r\n\t \r\n\t \r\n\t \r\n\t sss} key=\"0-0-1-0\" />\r\n\t \r\n\t \r\n\t \r\n\t );\r\n\t}\r\n}\r\n\r\nDemo1.defaultProps = defaultProps;\r\n\r\n\r\n","desc":" 事例涵盖 checkbox如何选择，disable状态和部分选择状态。"},{"example":,"title":" Tree数据可控事例","code":"/**\r\n*\r\n* @title Tree数据可控事例\r\n* @description\r\n*\r\n*/\r\n/*\r\nconst x = 3;\r\nconst y = 2;\r\nconst z = 1;\r\nconst gData = [];\r\n\r\nconst generateData = (_level, _preKey, _tns) => {\r\n const preKey = _preKey || '0';\r\n const tns = _tns || gData;\r\n\r\n const children = [];\r\n for (let i = 0; i < x; i++) {\r\n const key = `${preKey}-${i}`;\r\n tns.push({ title: key, key });\r\n if (i < y) {\r\n children.push(key);\r\n }\r\n }\r\n if (_level < 0) {\r\n return tns;\r\n }\r\n const level = _level - 1;\r\n children.forEach((key, index) => {\r\n tns[index].children = [];\r\n return generateData(level, key, tns[index].children);\r\n });\r\n};\r\ngenerateData(z);\r\n*/\r\n\r\n\r\nimport React, { Component } from 'react';\r\nimport Tree from 'bee-tree';\r\n\r\nconst x = 3;\r\nconst y = 2;\r\nconst z = 1;\r\nconst gData = [];\r\n\r\nconst generateData = (_level, _preKey, _tns) => {\r\n const preKey = _preKey || '0';\r\n const tns = _tns || gData;\r\n\r\n const children = [];\r\n for (let i = 0; i < x; i++) {\r\n const key = `${preKey}-${i}`;\r\n tns.push({ title: key, key });\r\n if (i < y) {\r\n children.push(key);\r\n }\r\n }\r\n if (_level < 0) {\r\n return tns;\r\n }\r\n const level = _level - 1;\r\n children.forEach((key, index) => {\r\n tns[index].children = [];\r\n return generateData(level, key, tns[index].children);\r\n });\r\n};\r\ngenerateData(z);\r\n\r\nconst TreeNode = Tree.TreeNode;\r\n\r\n\r\nclass Demo2 extends Component{\r\n constructor(props) {\r\n \tsuper(props);\r\n this.state = {\r\n expandedKeys: ['0-0-0', '0-0-1'],\r\n autoExpandParent: true,\r\n checkedKeys: ['0-0-0'],\r\n selectedKeys: [],\r\n };\r\n this.onExpand = this.onExpand.bind(this);\r\n this.onCheck = this.onCheck.bind(this);\r\n this.onSelect = this.onSelect.bind(this);\r\n }\r\n onExpand(expandedKeys) {\r\n console.log('onExpand', arguments);\r\n // if not set autoExpandParent to false, if children expanded, parent can not collapse.\r\n // or, you can remove all expanded children keys.\r\n this.setState({\r\n expandedKeys,\r\n autoExpandParent: false,\r\n });\r\n }\r\n onCheck(checkedKeys) {\r\n this.setState({\r\n checkedKeys,\r\n selectedKeys: ['0-3', '0-4'],\r\n });\r\n }\r\n onSelect(selectedKeys, info) {\r\n console.log('onSelect', info);\r\n this.setState({ selectedKeys });\r\n }\r\n render() {\r\n const loop = data => data.map((item) => {\r\n if (item.children) {\r\n return (\r\n \r\n {loop(item.children)}\r\n \r\n );\r\n }\r\n return ;\r\n });\r\n return (\r\n \r\n {loop(gData)}\r\n \r\n );\r\n }\r\n};\r\n\r\n\r\n","desc":""},{"example":,"title":" Tree 拖拽使用事例","code":"/**\r\n*\r\n* @title Tree 拖拽使用事例\r\n* @description 拖动结点插入到另一个结点后面或者其他的父节点里面。\r\n*\r\n*/\r\n\r\n\r\n\r\nimport React, { Component } from 'react';\r\nimport Tree from 'bee-tree';\r\n\r\nconst x = 3;\r\nconst y = 2;\r\nconst z = 1;\r\nconst gData = [];\r\n\r\nconst generateData = (_level, _preKey, _tns) => {\r\n const preKey = _preKey || '0';\r\n const tns = _tns || gData;\r\n\r\n const children = [];\r\n for (let i = 0; i < x; i++) {\r\n const key = `${preKey}-${i}`;\r\n tns.push({ title: key, key });\r\n if (i < y) {\r\n children.push(key);\r\n }\r\n }\r\n if (_level < 0) {\r\n return tns;\r\n }\r\n const level = _level - 1;\r\n children.forEach((key, index) => {\r\n tns[index].children = [];\r\n return generateData(level, key, tns[index].children);\r\n });\r\n};\r\ngenerateData(z);\r\n\r\nconst TreeNode = Tree.TreeNode;\r\n\r\nclass Demo3 extends Component{\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n gData,\r\n expandedKeys: ['0-0', '0-0-0', '0-0-0-0'],\r\n };\r\n this.onDragEnter = this.onDragEnter.bind(this);\r\n this.onDrop = this.onDrop.bind(this);\r\n }\r\n onDragEnter(info) {\r\n console.log(info);\r\n // expandedKeys 需要受控时设置\r\n // this.setState({\r\n // expandedKeys: info.expandedKeys,\r\n // });\r\n }\r\n onDrop(info) {\r\n console.log(info);\r\n const dropKey = info.node.props.eventKey;\r\n const dragKey = info.dragNode.props.eventKey;\r\n // const dragNodesKeys = info.dragNodesKeys;\r\n const loop = (data, key, callback) => {\r\n data.forEach((item, index, arr) => {\r\n if (item.key === key) {\r\n return callback(item, index, arr);\r\n }\r\n if (item.children) {\r\n return loop(item.children, key, callback);\r\n }\r\n });\r\n };\r\n const data = [...this.state.gData];\r\n let dragObj;\r\n loop(data, dragKey, (item, index, arr) => {\r\n arr.splice(index, 1);\r\n dragObj = item;\r\n });\r\n if (info.dropToGap) {\r\n let ar;\r\n let i;\r\n loop(data, dropKey, (item, index, arr) => {\r\n ar = arr;\r\n i = index;\r\n });\r\n ar.splice(i, 0, dragObj);\r\n } else {\r\n loop(data, dropKey, (item) => {\r\n item.children = item.children || [];\r\n // where to insert 示例添加到尾部，可以是随意位置\r\n item.children.push(dragObj);\r\n });\r\n }\r\n this.setState({\r\n gData: data,\r\n });\r\n }\r\n render() {\r\n const loop = data => data.map((item) => {\r\n if (item.children && item.children.length) {\r\n return {loop(item.children)};\r\n }\r\n return ;\r\n });\r\n return (\r\n \r\n {loop(this.state.gData)}\r\n \r\n );\r\n }\r\n};\r\n\r\n","desc":" 拖动结点插入到另一个结点后面或者其他的父节点里面。"},{"example":,"title":" Tree可搜索事例","code":"/**\r\n *\r\n * @title Tree可搜索事例\r\n * @description\r\n *\r\n */\r\n\r\n\r\nimport React, {\r\n Component\r\n} from 'react';\r\nimport FormControl from 'bee-form-control';\r\nimport Tree from 'bee-tree';\r\n\r\nconst x = 3;\r\nconst y = 2;\r\nconst z = 1;\r\nconst gData = [];\r\n\r\nconst generateData = (_level, _preKey, _tns) => {\r\n const preKey = _preKey || '0';\r\n const tns = _tns || gData;\r\n\r\n const children = [];\r\n for (let i = 0; i < x; i++) {\r\n const key = `${preKey}-${i}`;\r\n tns.push({\r\n title: key,\r\n key\r\n });\r\n if (i < y) {\r\n children.push(key);\r\n }\r\n }\r\n if (_level < 0) {\r\n return tns;\r\n }\r\n const level = _level - 1;\r\n children.forEach((key, index) => {\r\n tns[index].children = [];\r\n return generateData(level, key, tns[index].children);\r\n });\r\n};\r\ngenerateData(z);\r\n\r\nconst TreeNode = Tree.TreeNode;\r\n\r\nconst dataList = [];\r\nconst generateList = (data) => {\r\n for (let i = 0; i < data.length; i++) {\r\n const node = data[i];\r\n const key = node.key;\r\n dataList.push({\r\n key,\r\n title: key\r\n });\r\n if (node.children) {\r\n generateList(node.children, node.key);\r\n }\r\n }\r\n};\r\ngenerateList(gData);\r\n\r\nconst getParentKey = (key, tree) => {\r\n let parentKey;\r\n for (let i = 0; i < tree.length; i++) {\r\n const node = tree[i];\r\n if (node.children) {\r\n if (node.children.some(item => item.key === key)) {\r\n parentKey = node.key;\r\n } else if (getParentKey(key, node.children)) {\r\n parentKey = getParentKey(key, node.children);\r\n }\r\n }\r\n }\r\n return parentKey;\r\n};\r\n\r\n\r\nclass Demo4 extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n expandedKeys: [],\r\n searchValue: '',\r\n autoExpandParent: true,\r\n }\r\n }\r\n onExpand = (expandedKeys) => {\r\n this.setState({\r\n expandedKeys,\r\n autoExpandParent: false,\r\n });\r\n }\r\n onChange = (value) => {\r\n // const value = e.target.value;\r\n const expandedKeys = [];\r\n dataList.forEach((item) => {\r\n if (item.key.indexOf(value) > -1) {\r\n expandedKeys.push(getParentKey(item.key, gData));\r\n }\r\n });\r\n const uniqueExpandedKeys = [];\r\n expandedKeys.forEach((item) => {\r\n if (item && uniqueExpandedKeys.indexOf(item) === -1) {\r\n uniqueExpandedKeys.push(item);\r\n }\r\n });\r\n this.setState({\r\n expandedKeys: uniqueExpandedKeys,\r\n searchValue: value,\r\n autoExpandParent: true,\r\n });\r\n }\r\n render() {\r\n const {\r\n searchValue,\r\n expandedKeys,\r\n autoExpandParent\r\n } = this.state;\r\n const loop = data => data.map((item) => {\r\n const index = item.key.search(searchValue);\r\n const beforeStr = item.key.substr(0, index);\r\n const afterStr = item.key.substr(index + searchValue.length);\r\n const title = index > -1 ? (\r\n \r\n {beforeStr}\r\n {searchValue}\r\n {afterStr}\r\n \r\n ) : {item.key};\r\n if (item.children) {\r\n return (\r\n \r\n {loop(item.children)}\r\n \r\n );\r\n }\r\n return ;\r\n });\r\n return (\r\n \r\n \r\n \r\n {loop(gData)}\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\n","desc":""},{"example":,"title":" Tree异步数据加载","code":"/**\r\n*\r\n* @title Tree异步数据加载\r\n* @description 当点击展开，异步获取子节点数据\r\n*\r\n*/\r\n\r\n\r\nimport React, { Component } from 'react';\r\nimport Tree from 'bee-tree';\r\n\r\nconst x = 3;\r\nconst y = 2;\r\nconst z = 1;\r\nconst gData = [];\r\n\r\nconst generateData = (_level, _preKey, _tns) => {\r\n const preKey = _preKey || '0';\r\n const tns = _tns || gData;\r\n\r\n const children = [];\r\n for (let i = 0; i < x; i++) {\r\n const key = `${preKey}-${i}`;\r\n tns.push({ title: key, key });\r\n if (i < y) {\r\n children.push(key);\r\n }\r\n }\r\n if (_level < 0) {\r\n return tns;\r\n }\r\n const level = _level - 1;\r\n children.forEach((key, index) => {\r\n tns[index].children = [];\r\n return generateData(level, key, tns[index].children);\r\n });\r\n};\r\ngenerateData(z);\r\n\r\nconst TreeNode = Tree.TreeNode;\r\n\r\nfunction generateTreeNodes(treeNode) {\r\n const arr = [];\r\n const key = treeNode.props.eventKey;\r\n for (let i = 0; i < 3; i++) {\r\n arr.push({ name: `leaf ${key}-${i}`, key: `${key}-${i}` });\r\n }\r\n return arr;\r\n}\r\n\r\nfunction setLeaf(treeData, curKey, level) {\r\n const loopLeaf = (data, lev) => {\r\n const l = lev - 1;\r\n data.forEach((item) => {\r\n if ((item.key.length > curKey.length) ? item.key.indexOf(curKey) !== 0 :\r\n curKey.indexOf(item.key) !== 0) {\r\n return;\r\n }\r\n if (item.children) {\r\n loopLeaf(item.children, l);\r\n } else if (l < 1) {\r\n item.isLeaf = true;\r\n }\r\n });\r\n };\r\n loopLeaf(treeData, level + 1);\r\n}\r\n\r\nfunction getNewTreeData(treeData, curKey, child, level) {\r\n const loop = (data) => {\r\n if (level < 1 || curKey.length - 3 > level * 2) return;\r\n data.forEach((item) => {\r\n if (curKey.indexOf(item.key) === 0) {\r\n if (item.children) {\r\n loop(item.children);\r\n } else {\r\n item.children = child;\r\n }\r\n }\r\n });\r\n };\r\n loop(treeData);\r\n setLeaf(treeData, curKey, level);\r\n}\r\n\r\nclass Demo5 extends Component{\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n treeData: [],\r\n };\r\n this.onSelect = this.onSelect.bind(this);\r\n this.onLoadData = this.onLoadData.bind(this);\r\n }\r\n componentDidMount() {\r\n setTimeout(() => {\r\n this.setState({\r\n treeData: [\r\n { name: 'pNode 01', key: '0-0' },\r\n { name: 'pNode 02', key: '0-1' },\r\n { name: 'pNode 03', key: '0-2', isLeaf: true },\r\n ],\r\n });\r\n }, 100);\r\n }\r\n onSelect(info) {\r\n console.log('selected', info);\r\n }\r\n onLoadData(treeNode) {\r\n return new Promise((resolve) => {\r\n setTimeout(() => {\r\n const treeData = [...this.state.treeData];\r\n getNewTreeData(treeData, treeNode.props.eventKey, generateTreeNodes(treeNode), 2);\r\n this.setState({ treeData });\r\n resolve();\r\n }, 1000);\r\n });\r\n }\r\n render() {\r\n const loop = data => data.map((item) => {\r\n if (item.children) {\r\n return {loop(item.children)};\r\n }\r\n return ;\r\n });\r\n const treeNodes = loop(this.state.treeData);\r\n return (\r\n \r\n {treeNodes}\r\n \r\n );\r\n }\r\n};\r\n\r\n","desc":" 当点击展开，异步获取子节点数据"},{"example":,"title":" Tree基本使用事例自定义图标","code":"/**\r\n *\r\n * @title Tree基本使用事例自定义图标\r\n * @description 添加openIcon、closeIcon属性\r\n *\r\n */\r\n\r\n\r\nimport React, {\r\n\tComponent\r\n} from 'react';\r\nimport Tree from 'bee-tree';\r\nimport Icon from 'bee-icon';\r\nconst TreeNode = Tree.TreeNode;\r\n\r\nconst defaultProps = {\r\n\tkeys: ['0-0-0', '0-0-1']\r\n}\r\nconsole.log(Tree);\r\nclass Demo1 extends Component {\r\n\tconstructor(props) {\r\n\t\tsuper(props);\r\n\t\tconst keys = this.props.keys;\r\n\t\tthis.state = {\r\n\t\t\tdefaultExpandedKeys: keys,\r\n\t\t\tdefaultSelectedKeys: keys,\r\n\t\t\tdefaultCheckedKeys: keys,\r\n\t\t};\r\n\t}\r\n\tonSelect(info) {\r\n\t\tconsole.log('selected', info);\r\n\t}\r\n\tonCheck(info) {\r\n\t\tconsole.log('onCheck', info);\r\n\t}\r\n\trender() {\r\n\t\treturn (\r\n\r\n\t\t\t} closeIcon={}\r\n\t defaultExpandedKeys={this.state.defaultExpandedKeys}\r\n\t defaultSelectedKeys={this.state.defaultSelectedKeys}\r\n\t defaultCheckedKeys={this.state.defaultCheckedKeys}\r\n\t onSelect={this.onSelect} onCheck={this.onCheck}\r\n\t >\r\n\t \r\n\t \r\n\t \r\n\t \r\n\t \r\n\t \r\n\t sss} key=\"0-0-1-0\" />\r\n\t \r\n\t \r\n\t \r\n\t\t);\r\n\t}\r\n}\r\n\r\nDemo1.defaultProps = defaultProps;\r\n\r\n\r\n","desc":" 添加openIcon、closeIcon属性"},{"example":,"title":" Tree增加节点","code":"/**\r\n *\r\n * @title Tree增加节点\r\n * @description \r\n *\r\n */\r\n\r\n\r\nimport React, {\r\n Component\r\n} from 'react';\r\nimport Tree from 'bee-tree';\r\nimport Button from 'bee-button';\r\n\r\nconst TreeNode = Tree.TreeNode;\r\n\r\n\r\nclass Demo7 extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n treeData: [],\r\n defaultExpandedKeys: ['0-0', '0-1', '0-2'],\r\n parentNode: {}\r\n };\r\n this.onSelect = this.onSelect.bind(this);\r\n this.addNode = this.addNode.bind(this);\r\n this.clickFun = this.clickFun.bind(this);\r\n this.getNodeByKey = this.getNodeByKey.bind(this);\r\n this.parentNode = null\r\n }\r\n componentDidMount() {\r\n setTimeout(() => {\r\n this.setState({\r\n treeData: [{\r\n name: 'pNode 01',\r\n key: '0-0',\r\n children: [{\r\n name: 'leaf 0-0-0',\r\n key: '0-0-0'\r\n }, {\r\n name: 'leaf 0-0-1',\r\n key: '0-0-1'\r\n }]\r\n }, {\r\n name: 'pNode 02',\r\n key: '0-1',\r\n children: [{\r\n name: 'leaf 0-1-0',\r\n key: '0-1-0'\r\n }, {\r\n name: 'leaf 0-1-1',\r\n key: '0-1-1'\r\n }]\r\n }, {\r\n name: 'pNode 03',\r\n key: '0-2',\r\n isLeaf: true\r\n }, ],\r\n });\r\n }, 100);\r\n }\r\n /**\r\n * 增加节点\r\n * @param string prKey [父节点key]\r\n * @param object nodeItem [子节点信息]\r\n */\r\n addNode(prKey, nodeItem) {\r\n const data = this.state.treeData;\r\n let parNode;\r\n if (prKey) {\r\n // 如果prKey存在则搜索父节点进行添加\r\n parNode = this.getNodeByKey(data, prKey);\r\n //如果父节点存在的话，添加到父节点上\r\n if (parNode) {\r\n if (!parNode.children) {\r\n parNode.children = [];\r\n }\r\n // 如果key不存在就动态生成一个\r\n if (!nodeItem.key) {\r\n nodeItem.key = prKey + parNode.children.length + 1;\r\n }\r\n parNode.children.push(nodeItem);\r\n }\r\n } else {\r\n // 没有穿prKey添加到根下成为一级节点\r\n if (!nodeItem.key) {\r\n nodeItem.key = \"0-\" + data.length + 1;\r\n }\r\n data.push(nodeItem);\r\n }\r\n\r\n this.setState({\r\n data\r\n });\r\n }\r\n\r\n getNodeByKey(data, key) {\r\n if (!this.parentNode) {\r\n data.find(item => {\r\n if (item.key === key) {\r\n console.log('item.name---' + item.name)\r\n this.parentNode = item;\r\n return (true);\r\n } else if (item.children) {\r\n return this.getNodeByKey(item.children, key);\r\n\r\n }\r\n })\r\n }\r\n return this.parentNode;\r\n }\r\n\r\n\r\n\r\n onSelect(info) {\r\n console.log('selected', info);\r\n }\r\n /**\r\n * 点击button事件\r\n */\r\n clickFun() {\r\n let prKey, nodeItem;\r\n prKey = '0-1';\r\n nodeItem = {\r\n name: 'leaf 0-0-4'\r\n }\r\n this.addNode(prKey, nodeItem);\r\n }\r\n\r\n render() {\r\n const loop = data => data.map((item) => {\r\n if (item.children) {\r\n return {loop(item.children)};\r\n }\r\n return ;\r\n });\r\n const treeNodes = loop(this.state.treeData);\r\n console.log('defaultKeys--' + this.state.defaultExpandedKeys);\r\n return (\r\n \r\n \r\n {treeNodes}\r\n \r\n \r\n
\r\n );\r\n }\r\n};\r\n\r\n","desc":" "},{"example":,"title":" Tree 节点可编辑","code":"/**\r\n *\r\n * @title Tree 节点可编辑\r\n * @description 双击节点可编辑\r\n *\r\n */\r\n\r\n\r\nimport React, {\r\n\tComponent\r\n} from 'react';\r\nimport Tree from 'bee-tree';\r\nimport Button from 'bee-button';\r\nimport Icon from 'bee-icon';\r\n\r\nconst TreeNode = Tree.TreeNode;\r\n\r\nlet timer = 0;\r\nlet delay = 200;\r\nlet prevent = false;\r\n\r\n\r\n\r\nclass Demo8 extends Component {\r\n\tconstructor(props) {\r\n\t\tsuper(props);\r\n\r\n\t\tthis.state = {\r\n\t\t\ttreeData: [],\r\n\t\t\tisHover: \"\",\r\n\t\t\teditKey: \"\"\r\n\t\t};\r\n\r\n\t}\r\n\r\n\r\n\tonMouseEnter = (e) => {\r\n\t\tthis.setState({\r\n\t\t\tisHover: e.node.props.pos\r\n\t\t})\r\n\t}\r\n\tonMouseLeave = (e, treenode) => {\r\n\t\tthis.setState({\r\n\t\t\tisHover: \"\",\r\n\t\t\teditKey: \"\"\r\n\t\t})\r\n\r\n\t}\r\n\r\n\teditRender = (item) => {\r\n\t\tthis.setState({\r\n\t\t\teditKey: item.key\r\n\t\t});\r\n\t}\r\n\tnodechange = (item, value) => {\r\n\t\titem.name = value;\r\n\t}\r\n\trenderTreeTitle = (item) => {\r\n\t\tlet titleIcon, titleInfo;\r\n\t\t//编辑时input框\r\n\t\tif (this.state.editKey == item.key) {\r\n\t\t\ttitleInfo = this.nodechange(item,e.target.value)}/>\r\n\t\t} else {\r\n\t\t\ttitleInfo = {item.name}\r\n\t\t}\r\n\t\t//编辑图标\r\n\t\tif (this.state.isHover == item.key) {\r\n\t\t\ttitleIcon = this.editRender(item)}>;\r\n\t\t}\r\n\t\treturn (\r\n\t\t\t\t\t\r\n\t\t\t\t\t{titleInfo}\r\n\t\t\t\t\t{titleIcon}\r\n\t\t\t\t
);\r\n\t}\r\n\r\n\tcomponentDidMount = () => {\r\n\t\tsetTimeout(() => {\r\n\t\t\tthis.setState({\r\n\t\t\t\ttreeData: [{\r\n\t\t\t\t\tname: 'pNode 01',\r\n\t\t\t\t\tkey: '0-0',\r\n\t\t\t\t\tchildren: [{\r\n\t\t\t\t\t\tname: 'leaf 0-0-0',\r\n\t\t\t\t\t\tkey: '0-0-0'\r\n\t\t\t\t\t}, {\r\n\t\t\t\t\t\tname: 'leaf 0-0-1',\r\n\t\t\t\t\t\tkey: '0-0-1'\r\n\t\t\t\t\t}]\r\n\t\t\t\t}, {\r\n\t\t\t\t\tname: 'pNode 02',\r\n\t\t\t\t\tkey: '0-1',\r\n\t\t\t\t\tchildren: [{\r\n\t\t\t\t\t\tname: 'leaf 0-1-0',\r\n\t\t\t\t\t\tkey: '0-1-0'\r\n\t\t\t\t\t}, {\r\n\t\t\t\t\t\tname: 'leaf 0-1-1',\r\n\t\t\t\t\t\tkey: '0-1-1'\r\n\t\t\t\t\t}]\r\n\t\t\t\t}, {\r\n\t\t\t\t\tname: 'pNode 03',\r\n\t\t\t\t\tkey: '0-2',\r\n\t\t\t\t\tisLeaf: true\r\n\t\t\t\t}, ],\r\n\t\t\t});\r\n\t\t}, 100);\r\n\t}\r\n\trender() {\r\n\t\tconst loop = data => data.map((item) => {\r\n\t\t\tif (item.children) {\r\n\t\t\t\treturn {loop(item.children)};\r\n\t\t\t}\r\n\t\t\treturn ;\r\n\t\t});\r\n\t\tconst treeNodes = loop(this.state.treeData);\r\n\t\treturn (\r\n\t\t\t\r\n\t\t\t\t{treeNodes}\r\n\t \t\r\n\r\n\t\t);\r\n\t}\r\n}\r\n\r\n\r\n\r\n","desc":" 双击节点可编辑"}]
class Demo extends Component {
diff --git a/package.json b/package.json
index 1bb3090..20d6f16 100644
--- a/package.json
+++ b/package.json
@@ -20,10 +20,14 @@
"license": "MIT",
"main": "./build/index.js",
"config": {
+<<<<<<< HEAD
"port": 3000,
"commitizen": {
"path": "./node_modules/cz-conventional-changelog"
}
+=======
+ "port": 3000
+>>>>>>> dc5a25248043f0a122cad2ee3e207014a44a2e5a
},
"scripts": {
"dev": "bee-tools run start",
@@ -33,6 +37,7 @@
"chrome": "bee-tools run chrome",
"coveralls": "bee-tools run coverage",
"browsers": "bee-tools run browsers",
+<<<<<<< HEAD
"pub": "bee-tools run pub",
"changelog":"conventional-changelog -p angular -i CHANGELOG.md -s -r 0"
},
@@ -42,6 +47,18 @@
"classnames": "^2.2.5",
"object-assign": "latest",
"babel-runtime": "^6.23.0",
+=======
+ "pub": "bee-tools run pub"
+ },
+ "dependencies": {
+ "babel-runtime": "^6.23.0",
+ "bee-animate": "latest",
+ "bee-checkbox": "latest",
+ "bee-form-control": "latest",
+ "bee-icon": "^1.0.0",
+ "classnames": "^2.2.5",
+ "object-assign": "latest",
+>>>>>>> dc5a25248043f0a122cad2ee3e207014a44a2e5a
"tinper-bee-core": "latest"
},
"peerDependencies": {
@@ -50,6 +67,7 @@
"prop-types": "15.6.0"
},
"devDependencies": {
+<<<<<<< HEAD
"bee-form-control": "latest",
"bee-button": "latest",
"bee-layout": "latest",
@@ -62,5 +80,17 @@
"react": "15.3.2",
"react-addons-test-utils": "15.3.2",
"react-dom": "15.3.2"
+=======
+ "chai": "^3.5.0",
+ "enzyme": "^2.4.1",
+ "react": "15.3.2",
+ "react-addons-test-utils": "15.3.2",
+ "react-dom": "15.3.2",
+ "console-polyfill": "~0.2.1",
+ "es5-shim": "~4.1.10",
+ "bee-panel": "latest",
+ "bee-layout": "latest",
+ "bee-button": "latest"
+>>>>>>> dc5a25248043f0a122cad2ee3e207014a44a2e5a
}
}
diff --git a/src/Tree.js b/src/Tree.js
index 0eee13e..1021c9a 100644
--- a/src/Tree.js
+++ b/src/Tree.js
@@ -594,7 +594,7 @@ class Tree extends React.Component {
}
return (
-
+
{React.Children.map(props.children, this.renderTreeNode, this)}
);
diff --git a/src/Tree.scss b/src/Tree.scss
index a85d715..be5e11e 100644
--- a/src/Tree.scss
+++ b/src/Tree.scss
@@ -323,9 +323,14 @@
* 自定义switcher图标
*/
-.u-tree li span.u-tree-switcher.uf {
- font-size: 14px;
+.u-tree li span.u-tree-switcher.icon-none {
+
&:after{
content:"";
}
-}
\ No newline at end of file
+ .uf {
+ padding: 0px;
+ font-size: 14px;
+ }
+}
+
diff --git a/src/TreeNode.js b/src/TreeNode.js
index b92e1b2..52f9b43 100644
--- a/src/TreeNode.js
+++ b/src/TreeNode.js
@@ -165,18 +165,20 @@ class TreeNode extends React.Component {
}
if (expandedState === 'open' && props.openIcon) {
- stateIcon = `uf ${props.openIcon}`;
+ stateIcon = props.openIcon;
+ switcherCls['icon-none'] = true;
}
if (expandedState === 'close' && props.closeIcon) {
- stateIcon = [`uf ${props.closeIcon}`];
+ stateIcon = props.closeIcon;
+ switcherCls['icon-none'] = true;
}
- switcherCls[stateIcon] = stateIcon;
+ //switcherCls[stateIcon] = stateIcon;
if (props.disabled) {
switcherCls[`${prefixCls}-switcher-disabled`] = true;
- return ;
+ return {stateIcon};
}
- return ;
+ return {stateIcon};
}
renderCheckbox(props) {
@@ -263,6 +265,12 @@ class TreeNode extends React.Component {
let newChildren = this.renderChildren(props);
let openIconCls = false,
closeIconCls = false;
+
+ //以下变量控制是否鼠标单机双击方法中的变量
+ let timer = 0;
+ let delay = 500;
+ let prevent = false;
+
if (!newChildren || newChildren === props.children) {
// content = newChildren;
newChildren = null;
@@ -294,15 +302,18 @@ class TreeNode extends React.Component {
domProps.className += ` ${prefixCls}-node-selected`;
}
domProps.onClick = (e) => {
+ var _this = this;
e.preventDefault();
if (props.selectable) {
- this.onSelect();
+ _this.onSelect();
}
+
// not fire check event
// if (props.checkable) {
// this.onCheck();
// }
};
+
if (props.onRightClick) {
domProps.onContextMenu = this.onContextMenu;
}
@@ -312,6 +323,7 @@ class TreeNode extends React.Component {
if (props.onMouseLeave) {
domProps.onMouseLeave = this.onMouseLeave;
}
+
if (props.draggable) {
domProps.className += ' draggable';
if (ieOrEdge) {
@@ -390,8 +402,8 @@ TreeNode.propTypes = {
isLeaf: PropTypes.bool,
root: PropTypes.object,
onSelect: PropTypes.func,
- openIcon: PropTypes.string,
- closeIcon: PropTypes.string
+ openIcon: PropTypes.element,
+ closeIcon: PropTypes.element
};
TreeNode.defaultProps = {