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/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 index 6491486..0b5ea7d 100644 --- a/demo/demolist/Demo7.js +++ b/demo/demolist/Demo7.js @@ -14,18 +14,20 @@ import Button from 'bee-button'; const TreeNode = Tree.TreeNode; + class Demo7 extends Component { constructor(props) { super(props); - debugger; - console.log('keys--' + this.props.keys); this.state = { treeData: [], - defaultExpandedKeys: ['0-0', '0-1', '0-2'] + 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(() => { @@ -65,22 +67,52 @@ class Demo7 extends Component { */ addNode(prKey, nodeItem) { const data = this.state.treeData; - data.forEach((item) => { - if (prKey === item.key) { - if (!item.children) { - item.children = []; + let parNode; + if (prKey) { + // 如果prKey存在则搜索父节点进行添加 + parNode = this.getNodeByKey(data, prKey); + //如果父节点存在的话,添加到父节点上 + if (parNode) { + if (!parNode.children) { + parNode.children = []; } // 如果key不存在就动态生成一个 if (!nodeItem.key) { - nodeItem.key = prKey + item.children.length + 1; + nodeItem.key = prKey + parNode.children.length + 1; } - item.children.push(nodeItem); + 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); } @@ -89,9 +121,9 @@ class Demo7 extends Component { */ clickFun() { let prKey, nodeItem; - prKey = '0-2'; + prKey = '0-1'; nodeItem = { - name: 'leaf 0-2-0' + name: 'leaf 0-0-4' } this.addNode(prKey, nodeItem); } 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 dd10fad..e302bff 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 Demo7 = require("./demolist/Demo7");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, { Component } 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({ 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\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({ key, title: key });\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 = (e) => {\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 { searchValue, expandedKeys, autoExpandParent } = 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\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\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\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\nclass Demo7 extends Component {\r\n constructor(props) {\r\n super(props);\r\n debugger;\r\n console.log('keys--' + this.props.keys);\r\n this.state = {\r\n treeData: [],\r\n defaultExpandedKeys: ['0-0', '0-1', '0-2']\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 }\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 data.forEach((item) => {\r\n if (prKey === item.key) {\r\n if (!item.children) {\r\n item.children = [];\r\n }\r\n // 如果key不存在就动态生成一个\r\n if (!nodeItem.key) {\r\n nodeItem.key = prKey + item.children.length + 1;\r\n }\r\n item.children.push(nodeItem);\r\n }\r\n });\r\n this.setState({\r\n data\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-2';\r\n nodeItem = {\r\n name: 'leaf 0-2-0'\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":" "}] +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, { Component } 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({ 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\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({ key, title: key });\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 = (e) => {\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 { searchValue, expandedKeys, autoExpandParent } = 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 ef18f13..e9df758 100644 --- a/package.json +++ b/package.json @@ -1,61 +1,62 @@ { - "name": "bee-tree", - "version": "1.0.0", - "description": "Tree ui component for react", - "keywords": [ - "react", - "react-component", - "bee-tree", - "iuap-design", - "tinper-bee", - "Tree" - ], - "engines": { - "node": ">=4.0.0" - }, - "homepage": "https://github.com/tinper-bee/bee-tree.git", - "author": "Yonyou FED", - "repository": "http://github.com/tinper-bee/bee-tree", - "bugs": "https://github.com/tinper-bee/bee-tree.git/issues", - "license": "MIT", - "main": "./build/index.js", - "config": { - "port": 3000 - }, - "scripts": { - "dev": "bee-tools run start", - "build": "bee-tools run build", - "lint": "bee-tools run lint", - "test": "bee-tools run test", - "chrome": "bee-tools run chrome", - "coveralls": "bee-tools run coverage", - "browsers": "bee-tools run browsers", - "pub": "bee-tools run pub" - }, - "dependencies": { - "bee-animate": "latest", - "bee-checkbox": "latest", - "bee-form-control": "latest", - "classnames": "^2.2.5", - "object-assign": "latest", - "babel-runtime": "^6.23.0", - "tinper-bee-core": "latest" - }, - "peerDependencies": { - "react": "^15.3.0 || ^16.0", - "react-dom": "^15.3.0 || ^16.0", - "prop-types": "15.6.0" - }, - "devDependencies": { - "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" - } -} \ No newline at end of file + "name": "bee-tree", + "version": "1.0.0", + "description": "Tree ui component for react", + "keywords": [ + "react", + "react-component", + "bee-tree", + "iuap-design", + "tinper-bee", + "Tree" + ], + "engines": { + "node": ">=4.0.0" + }, + "homepage": "https://github.com/tinper-bee/bee-tree.git", + "author": "Yonyou FED", + "repository": "http://github.com/tinper-bee/bee-tree", + "bugs": "https://github.com/tinper-bee/bee-tree.git/issues", + "license": "MIT", + "main": "./build/index.js", + "config": { + "port": 3000 + }, + "scripts": { + "dev": "bee-tools run start", + "build": "bee-tools run build", + "lint": "bee-tools run lint", + "test": "bee-tools run test", + "chrome": "bee-tools run chrome", + "coveralls": "bee-tools run coverage", + "browsers": "bee-tools run browsers", + "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", + "tinper-bee-core": "latest" + }, + "peerDependencies": { + "react": "^15.3.0 || ^16.0", + "react-dom": "^15.3.0 || ^16.0", + "prop-types": "15.6.0" + }, + "devDependencies": { + "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" + } +} diff --git a/src/Tree.js b/src/Tree.js index 3d852da..1021c9a 100644 --- a/src/Tree.js +++ b/src/Tree.js @@ -268,7 +268,6 @@ class Tree extends React.Component { } onSelect(treeNode) { - debugger; const props = this.props; const selectedKeys = [...this.state.selectedKeys]; const eventKey = treeNode.props.eventKey; @@ -438,7 +437,6 @@ class Tree extends React.Component { } getDragNodes(treeNode) { - debugger; const dragNodesKeys = []; const tPArr = treeNode.props.pos.split('-'); loopAllChildren(this.props.children, (item, index, pos, newKey) => { @@ -596,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 = {