uxcore.js - React UI Component Set

组件演示

[{"title":"基本用法","id":"components-tree-demo-basic","tags":[],"filepath":"site/components/tree/demo/basic.md","directory":"components/tree/demo","filename":"basic","meta":{"title":"基本用法","description":"\n基本用法。\n","order":"0","filepath":"site/components/tree/demo/basic.md","filename":"basic","directory":"components/tree/demo","id":"components-tree-demo-basic","template":"demos","html":"<script>(function(){'use strict';\n\nvar _uxcore = require('uxcore');\n\nvar TreeNode = _uxcore.Tree.TreeNode;\n\nfunction handleSelect(e) {\n console.log(e.event, e.node, 'selected:', e.selected);\n}\n\nReactDOM.render(React.createElement(\n 'div',\n null,\n React.createElement(\n _uxcore.Tree,\n {\n onSelect: handleSelect,\n defaultSelectedKeys: ['0-1', '0-1-1'],\n multiple: true,\n defaultExpandAll: true\n },\n React.createElement(\n TreeNode,\n { title: 'parent 1', key: '0-1' },\n React.createElement(\n TreeNode,\n { title: 'parent 1-0', key: '0-1-1' },\n React.createElement(TreeNode, { title: 'leaf' }),\n React.createElement(TreeNode, { title: 'leaf' })\n ),\n React.createElement(\n TreeNode,\n { title: 'parent 1-1' },\n React.createElement(TreeNode, { title: 'leaf' })\n )\n )\n )\n), document.getElementById('components-tree-demo-basic'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Tree } from 'uxcore';\n\nconst TreeNode = Tree.TreeNode;\n\nfunction handleSelect(e) {\n console.log(e.event, e.node, 'selected:', e.selected);\n}\n\nReactDOM.render(\n <div>\n <Tree\n onSelect={handleSelect} \n defaultSelectedKeys={['0-1', '0-1-1']}\n multiple\n defaultExpandAll\n >\n <TreeNode title=\"parent 1\" key=\"0-1\">\n <TreeNode title=\"parent 1-0\" key=\"0-1-1\">\n <TreeNode title=\"leaf\" />\n <TreeNode title=\"leaf\" />\n </TreeNode>\n <TreeNode title=\"parent 1-1\">\n <TreeNode title=\"leaf\" />\n </TreeNode>\n </TreeNode>\n </Tree>\n </div>,\n document.getElementById('components-tree-demo-basic')\n);</code></pre></div>"},"status":"public","toc":""},{"title":"可勾选","id":"components-tree-demo-selectable","tags":[],"filepath":"site/components/tree/demo/selectable.md","directory":"components/tree/demo","filename":"selectable","meta":{"title":"可勾选","description":"\n提供复选框操作功能\n","order":"1","filepath":"site/components/tree/demo/selectable.md","filename":"selectable","directory":"components/tree/demo","id":"components-tree-demo-selectable","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar TreeNode = _uxcore.Tree.TreeNode;\n\nvar treeData = [{\n title: '0-0',\n key: '0-0',\n children: [{\n title: '0-0-0',\n key: '0-0-0',\n children: [{ title: '0-0-0-0', 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' }]\n }, {\n title: '0-0-1',\n key: '0-0-1',\n 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' }]\n }, {\n title: '0-0-2',\n key: '0-0-2'\n }]\n}, {\n title: '0-1',\n key: '0-1',\n children: [{ title: '0-1-0-0', key: '0-1-0-0' }, { title: '0-1-0-1', key: '0-1-0-1' }, { title: '0-1-0-2', key: '0-1-0-2' }]\n}, {\n title: '0-2',\n key: '0-2'\n}];\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo() {\n var _ref;\n\n var _temp, _this, _ret;\n\n _classCallCheck(this, Demo);\n\n for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Demo.__proto__ || Object.getPrototypeOf(Demo)).call.apply(_ref, [this].concat(args))), _this), _this.state = {\n checkedKeys: ['0-0-0']\n }, _this.onCheck = function (checkedKeys) {\n console.log('onCheck', checkedKeys);\n }, _this.renderTreeNodes = function (data) {\n return data.map(function (item) {\n if (item.children) {\n return React.createElement(\n TreeNode,\n { title: item.title, key: item.key, dataRef: item },\n _this.renderTreeNodes(item.children)\n );\n }\n return React.createElement(TreeNode, item);\n });\n }, _temp), _possibleConstructorReturn(_this, _ret);\n }\n\n _createClass(Demo, [{\n key: 'render',\n value: function render() {\n return React.createElement(\n _uxcore.Tree,\n {\n checkable: true,\n onCheck: this.onCheck,\n defaultCheckedKeys: this.state.checkedKeys\n },\n this.renderTreeNodes(treeData)\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-tree-demo-selectable'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Tree } from 'uxcore';\n\nconst TreeNode = Tree.TreeNode;\n\nconst treeData = [{\n title: '0-0',\n key: '0-0',\n children: [{\n title: '0-0-0',\n key: '0-0-0',\n children: [\n { title: '0-0-0-0', key: '0-0-0-0' },\n { title: '0-0-0-1', key: '0-0-0-1' },\n { title: '0-0-0-2', key: '0-0-0-2' },\n ],\n }, {\n title: '0-0-1',\n key: '0-0-1',\n children: [\n { title: '0-0-1-0', key: '0-0-1-0' },\n { title: '0-0-1-1', key: '0-0-1-1' },\n { title: '0-0-1-2', key: '0-0-1-2' },\n ],\n }, {\n title: '0-0-2',\n key: '0-0-2',\n }],\n}, {\n title: '0-1',\n key: '0-1',\n children: [\n { title: '0-1-0-0', key: '0-1-0-0' },\n { title: '0-1-0-1', key: '0-1-0-1' },\n { title: '0-1-0-2', key: '0-1-0-2' },\n ],\n}, {\n title: '0-2',\n key: '0-2',\n}];\n\nclass Demo extends React.Component {\n state = {\n checkedKeys: ['0-0-0'],\n }\n onCheck = (checkedKeys) => {\n console.log('onCheck', checkedKeys);\n }\n renderTreeNodes = (data) => {\n return data.map((item) => {\n if (item.children) {\n return (\n <TreeNode title={item.title} key={item.key} dataRef={item}>\n {this.renderTreeNodes(item.children)}\n </TreeNode>\n );\n }\n return <TreeNode {...item} />;\n });\n }\n render() {\n return (\n <Tree\n checkable\n onCheck={this.onCheck}\n defaultCheckedKeys={this.state.checkedKeys}\n >\n {this.renderTreeNodes(treeData)}\n </Tree>\n );\n }\n}\n\n\n\nReactDOM.render(\n <Demo />\n , document.getElementById('components-tree-demo-selectable'));</code></pre></div>"},"status":"public","toc":""},{"title":"受控模式","id":"components-tree-demo-checked","tags":[],"filepath":"site/components/tree/demo/checked.md","directory":"components/tree/demo","filename":"checked","meta":{"title":"受控模式","description":"\n常用模式，通常对树结构数据需要精确控制时需要使用受控模式。\n","order":"2","filepath":"site/components/tree/demo/checked.md","filename":"checked","directory":"components/tree/demo","id":"components-tree-demo-checked","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar TreeNode = _uxcore.Tree.TreeNode;\n\nvar treeData = [{\n title: '0-0',\n key: '0-0',\n children: [{\n title: '0-0-0',\n key: '0-0-0',\n children: [{ title: '0-0-0-0', 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' }]\n }, {\n title: '0-0-1',\n key: '0-0-1',\n 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' }]\n }, {\n title: '0-0-2',\n key: '0-0-2'\n }]\n}, {\n title: '0-1',\n key: '0-1',\n children: [{ title: '0-1-0-0', key: '0-1-0-0' }, { title: '0-1-0-1', key: '0-1-0-1' }, { title: '0-1-0-2', key: '0-1-0-2' }]\n}, {\n title: '0-2',\n key: '0-2'\n}];\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo() {\n var _ref,\n _arguments = arguments;\n\n var _temp, _this, _ret;\n\n for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n _classCallCheck(this, Demo);\n\n return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Demo.__proto__ || Object.getPrototypeOf(Demo)).call.apply(_ref, [this].concat(args))), _this), _this.state = {\n expandedKeys: ['0-0-0', '0-0-1'],\n autoExpandParent: true,\n checkedKeys: ['0-0-0'],\n selectedKeys: []\n }, _this.onExpand = function (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: expandedKeys,\n autoExpandParent: false\n });\n }, _this.onCheck = function (checkedKeys) {\n console.log('onCheck', checkedKeys);\n _this.setState({ checkedKeys: checkedKeys });\n }, _this.onSelect = function (selectedKeys, info) {\n console.log('onSelect', info);\n _this.setState({ selectedKeys: selectedKeys });\n }, _this.renderTreeNodes = function (data) {\n return data.map(function (item) {\n if (item.children) {\n return React.createElement(\n TreeNode,\n { title: item.title, key: item.key, dataRef: item },\n _this.renderTreeNodes(item.children)\n );\n }\n return React.createElement(TreeNode, item);\n });\n }, _temp), _possibleConstructorReturn(_this, _ret);\n }\n\n _createClass(Demo, [{\n key: 'render',\n value: function render() {\n return React.createElement(\n _uxcore.Tree,\n {\n checkable: true,\n onExpand: this.onExpand,\n expandedKeys: this.state.expandedKeys,\n autoExpandParent: this.state.autoExpandParent,\n onCheck: this.onCheck,\n checkedKeys: this.state.checkedKeys,\n onSelect: this.onSelect,\n selectedKeys: this.state.selectedKeys\n },\n this.renderTreeNodes(treeData)\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-tree-demo-checked'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Tree } from 'uxcore';\n\nconst TreeNode = Tree.TreeNode;\n\nconst treeData = [{\n title: '0-0',\n key: '0-0',\n children: [{\n title: '0-0-0',\n key: '0-0-0',\n children: [\n { title: '0-0-0-0', key: '0-0-0-0' },\n { title: '0-0-0-1', key: '0-0-0-1' },\n { title: '0-0-0-2', key: '0-0-0-2' },\n ],\n }, {\n title: '0-0-1',\n key: '0-0-1',\n children: [\n { title: '0-0-1-0', key: '0-0-1-0' },\n { title: '0-0-1-1', key: '0-0-1-1' },\n { title: '0-0-1-2', key: '0-0-1-2' },\n ],\n }, {\n title: '0-0-2',\n key: '0-0-2',\n }],\n}, {\n title: '0-1',\n key: '0-1',\n children: [\n { title: '0-1-0-0', key: '0-1-0-0' },\n { title: '0-1-0-1', key: '0-1-0-1' },\n { title: '0-1-0-2', key: '0-1-0-2' },\n ],\n}, {\n title: '0-2',\n key: '0-2',\n}];\n\nclass Demo extends React.Component {\n state = {\n expandedKeys: ['0-0-0', '0-0-1'],\n autoExpandParent: true,\n checkedKeys: ['0-0-0'],\n selectedKeys: [],\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 console.log('onCheck', checkedKeys);\n this.setState({ checkedKeys });\n }\n onSelect = (selectedKeys, info) => {\n console.log('onSelect', info);\n this.setState({ selectedKeys });\n }\n renderTreeNodes = (data) => {\n return data.map((item) => {\n if (item.children) {\n return (\n <TreeNode title={item.title} key={item.key} dataRef={item}>\n {this.renderTreeNodes(item.children)}\n </TreeNode>\n );\n }\n return <TreeNode {...item} />;\n });\n }\n render() {\n return (\n <Tree\n checkable\n onExpand={this.onExpand}\n expandedKeys={this.state.expandedKeys}\n autoExpandParent={this.state.autoExpandParent}\n onCheck={this.onCheck}\n checkedKeys={this.state.checkedKeys}\n onSelect={this.onSelect}\n selectedKeys={this.state.selectedKeys}\n >\n {this.renderTreeNodes(treeData)}\n </Tree>\n );\n }\n}\n\n\nReactDOM.render(\n <Demo />,\n document.getElementById('components-tree-demo-checked')\n);</code></pre></div>"},"status":"public","toc":""},{"title":"拖拽","id":"components-tree-demo-drag","tags":[],"filepath":"site/components/tree/demo/drag.md","directory":"components/tree/demo","filename":"drag","meta":{"title":"拖拽","description":"\n将节点拖拽到其他节点内部或前后。\n","order":"3","filepath":"site/components/tree/demo/drag.md","filename":"drag","directory":"components/tree/demo","id":"components-tree-demo-drag","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar TreeNode = _uxcore.Tree.TreeNode;\n\nvar treeData = [{\n title: '0-0',\n key: '0-0',\n children: [{\n title: '0-0-0',\n key: '0-0-0',\n children: [{ title: '0-0-0-0', 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' }]\n }, {\n title: '0-0-1',\n key: '0-0-1',\n 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' }]\n }, {\n title: '0-0-2',\n key: '0-0-2'\n }]\n}, {\n title: '0-1',\n key: '0-1',\n children: [{ title: '0-1-0-0', key: '0-1-0-0' }, { title: '0-1-0-1', key: '0-1-0-1' }, { title: '0-1-0-2', key: '0-1-0-2' }]\n}, {\n title: '0-2',\n key: '0-2'\n}];\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo() {\n var _ref;\n\n var _temp, _this, _ret;\n\n _classCallCheck(this, Demo);\n\n for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Demo.__proto__ || Object.getPrototypeOf(Demo)).call.apply(_ref, [this].concat(args))), _this), _this.state = {\n checkedKeys: ['0-0-0'],\n treeData: treeData\n }, _this.onCheck = function (checkedKeys) {\n console.log('onCheck', checkedKeys);\n }, _this.onDrop = function (info) {\n console.log(info);\n var dropKey = info.node.props.eventKey;\n var dragKey = info.dragNode.props.eventKey;\n var dropPos = info.node.props.pos.split('-');\n var dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);\n // const dragNodesKeys = info.dragNodesKeys;\n var loop = function loop(data, key, callback) {\n data.forEach(function (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 var data = [].concat(_toConsumableArray(_this.state.treeData));\n var dragObj = void 0;\n loop(data, dragKey, function (item, index, arr) {\n arr.splice(index, 1);\n dragObj = item;\n });\n if (info.dropToGap) {\n var ar = void 0;\n var i = void 0;\n loop(data, dropKey, function (item, index, arr) {\n ar = arr;\n i = index;\n });\n if (dropPosition === -1) {\n ar.splice(i, 0, dragObj);\n } else {\n ar.splice(i + 1, 0, dragObj);\n }\n } else {\n loop(data, dropKey, function (item) {\n item.children = item.children || [];\n // where to insert 示例添加到尾部，可以是随意位置\n item.children.push(dragObj);\n });\n }\n console.log(data);\n _this.setState({\n treeData: data\n });\n }, _temp), _possibleConstructorReturn(_this, _ret);\n }\n\n _createClass(Demo, [{\n key: 'render',\n value: function render() {\n var loop = function loop(data) {\n return data.map(function (item) {\n if (item.children && item.children.length) {\n return React.createElement(\n TreeNode,\n { key: item.key, title: item.title },\n loop(item.children)\n );\n }\n return React.createElement(TreeNode, { key: item.key, title: item.title });\n });\n };\n console.log(this.state.treeData);\n return React.createElement(\n _uxcore.Tree,\n {\n checkable: true,\n onCheck: this.onCheck,\n draggable: true,\n onDrop: this.onDrop,\n defaultExpandedKeys: ['0-0', '0-0-0', '0-0-0-0'],\n defaultCheckedKeys: this.state.checkedKeys\n },\n loop(this.state.treeData)\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-tree-demo-drag'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Tree } from 'uxcore';\n\nconst TreeNode = Tree.TreeNode;\n\nconst treeData = [{\n title: '0-0',\n key: '0-0',\n children: [{\n title: '0-0-0',\n key: '0-0-0',\n children: [\n { title: '0-0-0-0', key: '0-0-0-0' },\n { title: '0-0-0-1', key: '0-0-0-1' },\n { title: '0-0-0-2', key: '0-0-0-2' },\n ],\n }, {\n title: '0-0-1',\n key: '0-0-1',\n children: [\n { title: '0-0-1-0', key: '0-0-1-0' },\n { title: '0-0-1-1', key: '0-0-1-1' },\n { title: '0-0-1-2', key: '0-0-1-2' },\n ],\n }, {\n title: '0-0-2',\n key: '0-0-2',\n }],\n}, {\n title: '0-1',\n key: '0-1',\n children: [\n { title: '0-1-0-0', key: '0-1-0-0' },\n { title: '0-1-0-1', key: '0-1-0-1' },\n { title: '0-1-0-2', key: '0-1-0-2' },\n ],\n}, {\n title: '0-2',\n key: '0-2',\n}];\n\nclass Demo extends React.Component {\n state = {\n checkedKeys: ['0-0-0'],\n treeData,\n }\n onCheck = (checkedKeys) => {\n console.log('onCheck', checkedKeys);\n }\n onDrop = (info) => {\n console.log(info);\n const dropKey = info.node.props.eventKey;\n const dragKey = info.dragNode.props.eventKey;\n const dropPos = info.node.props.pos.split('-');\n const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);\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.treeData];\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 if (dropPosition === -1) {\n ar.splice(i, 0, dragObj);\n } else {\n ar.splice(i + 1, 0, dragObj);\n }\n } else {\n loop(data, dropKey, (item) => {\n item.children = item.children || [];\n // where to insert 示例添加到尾部，可以是随意位置\n item.children.push(dragObj);\n });\n }\n console.log(data);\n this.setState({\n treeData: data,\n });\n }\n render() {\n const loop = data => data.map((item) => {\n if (item.children && item.children.length) {\n return <TreeNode key={item.key} title={item.title}>{loop(item.children)}</TreeNode>;\n }\n return <TreeNode key={item.key} title={item.title} />;\n });\n console.log(this.state.treeData)\n return (\n <Tree\n checkable\n onCheck={this.onCheck}\n draggable\n onDrop={this.onDrop}\n defaultExpandedKeys={['0-0', '0-0-0', '0-0-0-0']}\n defaultCheckedKeys={this.state.checkedKeys}\n >\n {loop(this.state.treeData)}\n </Tree>\n );\n }\n}\n\n\n\nReactDOM.render(\n <Demo />\n , document.getElementById('components-tree-demo-drag'));</code></pre></div>"},"status":"public","toc":""},{"title":"动态加载","id":"components-tree-demo-dynamic","tags":[],"filepath":"site/components/tree/demo/dynamic.md","directory":"components/tree/demo","filename":"dynamic","meta":{"title":"动态加载","description":"\n点击展开节点，动态加载数据。\n","order":"4","filepath":"site/components/tree/demo/dynamic.md","filename":"dynamic","directory":"components/tree/demo","id":"components-tree-demo-dynamic","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar TreeNode = _uxcore.Tree.TreeNode;\n\nvar generateTreeNodes = function generateTreeNodes(treeNode) {\n var arr = [];\n var key = treeNode.props.eventKey;\n for (var i = 0; i < 3; i++) {\n arr.push({ name: 'leaf ' + key + '-' + i, key: key + '-' + i });\n }\n return arr;\n};\n\nvar getNewTreeData = function getNewTreeData(treeData, curKey, child, level) {\n var loop = function loop(data) {\n if (level < 1 || curKey.length - 3 > level * 2) return;\n data.forEach(function (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\nvar setLeaf = function setLeaf(treeData, curKey, level) {\n var loopLeaf = function loopLeaf(data, lev) {\n var l = lev - 1;\n data.forEach(function (item) {\n if (item.key.length > curKey.length ? item.key.indexOf(curKey) !== 0 : 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\nvar loopLoading = function loopLoading(data) {\n return data.map(function (item) {\n if (item.children) {\n return React.createElement(\n TreeNode,\n { title: item.name, key: item.key },\n loopLoading(item.children)\n );\n }\n return React.createElement(TreeNode, { title: item.name, key: item.key, isLeaf: item.isLeaf,\n disabled: item.key === '0-0-0'\n });\n });\n};\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.onLoadData = function (treeNode) {\n console.log('load data...');\n return new Promise(function (resolve) {\n setTimeout(function () {\n var treeData = [].concat(_toConsumableArray(_this.state.treeData));\n getNewTreeData(treeData, treeNode.props.eventKey, generateTreeNodes(treeNode), 2);\n _this.setState({ treeData: treeData });\n resolve();\n }, 500);\n });\n };\n\n _this.state = {\n treeData: [{ name: 'pNode 01', key: '0-0' }, { name: 'pNode 02', key: '0-1' }, { name: 'pNode 03', key: '0-2', isLeaf: true }],\n checkedKeys: ['0-0']\n };\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'render',\n value: function render() {\n\n var treeNodes = loopLoading(this.state.treeData);\n\n return React.createElement(\n 'div',\n null,\n React.createElement(\n _uxcore.Tree,\n {\n checkable: true,\n defaultCheckedKeys: this.state.checkedKeys,\n loadData: this.onLoadData\n },\n treeNodes\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-tree-demo-dynamic'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Tree } from 'uxcore';\n\nconst TreeNode = Tree.TreeNode;\n\nconst 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\n\nconst 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\nconst 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\nconst loopLoading = (data) => {\n return data.map((item) => {\n if (item.children) {\n return <TreeNode title={item.name} key={item.key}>{loopLoading(item.children)}</TreeNode>;\n }\n return (\n <TreeNode title={item.name} key={item.key} isLeaf={item.isLeaf}\n disabled={item.key === '0-0-0'}\n />\n );\n });\n};\n\n\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\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 checkedKeys: ['0-0'],\n }\n }\n\n onLoadData = (treeNode) => {\n console.log('load data...');\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 }, 500);\n });\n }\n\n render() {\n\n const treeNodes = loopLoading(this.state.treeData);\n\n return (\n <div>\n <Tree\n checkable \n defaultCheckedKeys={this.state.checkedKeys}\n loadData={this.onLoadData}\n >\n {treeNodes}\n </Tree>\n </div>\n )\n }\n}\n\nReactDOM.render(\n <Demo />,\n document.getElementById('components-tree-demo-dynamic')\n);</code></pre></div>"},"status":"public","toc":""},{"title":"操作项","id":"components-tree-demo-actions","tags":[],"filepath":"site/components/tree/demo/actions.md","directory":"components/tree/demo","filename":"actions","meta":{"title":"操作项","description":"\n加入一些对树节点的一些操作\n","order":"5","filepath":"site/components/tree/demo/actions.md","filename":"actions","directory":"components/tree/demo","id":"components-tree-demo-actions","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar DropdownTreeNode = _uxcore.Tree.DropdownTreeNode;\n\n\nvar treeData = [{\n title: '0-0',\n key: '0-0',\n children: [{\n title: '0-0-0',\n key: '0-0-0',\n children: [{ title: '0-0-0-0', 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' }]\n }, {\n title: '0-0-1',\n key: '0-0-1',\n 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' }]\n }, {\n title: '0-0-2',\n key: '0-0-2'\n }]\n}, {\n title: '0-1',\n key: '0-1',\n children: [{ title: '0-1-0-0', key: '0-1-0-0' }, { title: '0-1-0-1', key: '0-1-0-1' }, { title: '0-1-0-2', key: '0-1-0-2' }]\n}, {\n title: '0-2',\n key: '0-2'\n}];\n\nvar menu = React.createElement(\n _uxcore.Menu,\n null,\n React.createElement(\n _uxcore.Menu.Item,\n null,\n '\\u6DFB\\u52A0'\n ),\n React.createElement(\n _uxcore.Menu.Item,\n null,\n '\\u5220\\u9664'\n ),\n React.createElement(\n _uxcore.Menu.Item,\n null,\n '\\u91CD\\u547D\\u540D'\n )\n);\n\nvar loopDropDown = function loopDropDown(data) {\n return data.map(function (item) {\n if (item.children) {\n return React.createElement(\n DropdownTreeNode,\n {\n key: item.key,\n title: item.title,\n dropDownTitle: item.dropDownTitle,\n onDropDownClick: function onDropDownClick(e) {\n return e;\n },\n dropDownOverlay: menu,\n dropDownable: true\n },\n loopDropDown(item.children)\n );\n }\n return React.createElement(DropdownTreeNode, { key: item.key, title: item.title, icon: React.createElement(_uxcore.Icon, { name: 'right' }), dropDownable: true, dropDownTitle: item.dropDownTitle, onDropDownClick: function onDropDownClick(e) {\n return e;\n } });\n });\n};\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {\n treeData: treeData\n };\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'render',\n value: function render() {\n return React.createElement(\n 'div',\n { style: { width: 400 } },\n React.createElement(\n _uxcore.Tree,\n null,\n loopDropDown(this.state.treeData)\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-tree-demo-actions'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Tree, Menu, Icon } from 'uxcore';\n\nconst { DropdownTreeNode } = Tree;\n\nconst treeData = [{\n title: '0-0',\n key: '0-0',\n children: [{\n title: '0-0-0',\n key: '0-0-0',\n children: [\n { title: '0-0-0-0', key: '0-0-0-0' },\n { title: '0-0-0-1', key: '0-0-0-1' },\n { title: '0-0-0-2', key: '0-0-0-2' },\n ],\n }, {\n title: '0-0-1',\n key: '0-0-1',\n children: [\n { title: '0-0-1-0', key: '0-0-1-0' },\n { title: '0-0-1-1', key: '0-0-1-1' },\n { title: '0-0-1-2', key: '0-0-1-2' },\n ],\n }, {\n title: '0-0-2',\n key: '0-0-2',\n }],\n}, {\n title: '0-1',\n key: '0-1',\n children: [\n { title: '0-1-0-0', key: '0-1-0-0' },\n { title: '0-1-0-1', key: '0-1-0-1' },\n { title: '0-1-0-2', key: '0-1-0-2' },\n ],\n}, {\n title: '0-2',\n key: '0-2',\n}];\n\nconst menu = (\n <Menu>\n <Menu.Item>\n 添加\n </Menu.Item>\n <Menu.Item>\n 删除\n </Menu.Item>\n <Menu.Item>\n 重命名\n </Menu.Item>\n </Menu>\n);\n\nconst loopDropDown = data => data.map((item) => {\n if (item.children) {\n return (\n <DropdownTreeNode\n key={item.key}\n title={item.title}\n dropDownTitle={item.dropDownTitle}\n onDropDownClick={e => e}\n dropDownOverlay={menu}\n dropDownable\n >\n {loopDropDown(item.children)}\n </DropdownTreeNode>\n );\n }\n return <DropdownTreeNode key={item.key} title={item.title} icon={<Icon name=\"right\" />} dropDownable dropDownTitle={item.dropDownTitle} onDropDownClick={e => e} />;\n});\n\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n treeData,\n };\n }\n render() {\n return (\n <div style={{ width: 400 }}>\n <Tree>\n {loopDropDown(this.state.treeData)}\n </Tree>\n </div>\n );\n }\n}\n\nReactDOM.render(\n <Demo />,\n document.getElementById('components-tree-demo-actions')\n);</code></pre></div>"},"status":"public","toc":""}]

基本用法

基本用法。

import { Tree } from 'uxcore';

const TreeNode = Tree.TreeNode;

function handleSelect(e) {
  console.log(e.event, e.node, 'selected:', e.selected);
}

ReactDOM.render(
  <div>
    <Tree
      onSelect={handleSelect} 
      defaultSelectedKeys={['0-1', '0-1-1']}
      multiple
      defaultExpandAll
    >
      <TreeNode title="parent 1" key="0-1">
        <TreeNode title="parent 1-0" key="0-1-1">
          <TreeNode title="leaf" />
          <TreeNode title="leaf" />
        </TreeNode>
        <TreeNode title="parent 1-1">
          <TreeNode title="leaf" />
        </TreeNode>
      </TreeNode>
    </Tree>
  </div>,
      document.getElementById('components-tree-demo-basic')
);

可勾选

提供复选框操作功能

import { Tree } from 'uxcore';

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', 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: '0-1',
  key: '0-1',
  children: [
    { title: '0-1-0-0', key: '0-1-0-0' },
    { title: '0-1-0-1', key: '0-1-0-1' },
    { title: '0-1-0-2', key: '0-1-0-2' },
  ],
}, {
  title: '0-2',
  key: '0-2',
}];

class Demo extends React.Component {
  state = {
    checkedKeys: ['0-0-0'],
  }
  onCheck = (checkedKeys) => {
    console.log('onCheck', checkedKeys);
  }
  renderTreeNodes = (data) => {
    return data.map((item) => {
      if (item.children) {
        return (
          <TreeNode title={item.title} key={item.key} dataRef={item}>
            {this.renderTreeNodes(item.children)}
          </TreeNode>
        );
      }
      return <TreeNode {...item} />;
    });
  }
  render() {
    return (
      <Tree
        checkable
        onCheck={this.onCheck}
        defaultCheckedKeys={this.state.checkedKeys}
      >
        {this.renderTreeNodes(treeData)}
      </Tree>
    );
  }
}



ReactDOM.render(
  <Demo />
  , document.getElementById('components-tree-demo-selectable'));

受控模式

常用模式，通常对树结构数据需要精确控制时需要使用受控模式。

import { Tree } from 'uxcore';

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', 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: '0-1',
  key: '0-1',
  children: [
    { title: '0-1-0-0', key: '0-1-0-0' },
    { title: '0-1-0-1', key: '0-1-0-1' },
    { title: '0-1-0-2', key: '0-1-0-2' },
  ],
}, {
  title: '0-2',
  key: '0-2',
}];

class Demo extends React.Component {
  state = {
    expandedKeys: ['0-0-0', '0-0-1'],
    autoExpandParent: true,
    checkedKeys: ['0-0-0'],
    selectedKeys: [],
  }
  onExpand = (expandedKeys) => {
    console.log('onExpand', arguments);
    // if not set autoExpandParent to false, if children expanded, parent can not collapse.
    // or, you can remove all expanded children keys.
    this.setState({
      expandedKeys,
      autoExpandParent: false,
    });
  }
  onCheck = (checkedKeys) => {
    console.log('onCheck', checkedKeys);
    this.setState({ checkedKeys });
  }
  onSelect = (selectedKeys, info) => {
    console.log('onSelect', info);
    this.setState({ selectedKeys });
  }
  renderTreeNodes = (data) => {
    return data.map((item) => {
      if (item.children) {
        return (
          <TreeNode title={item.title} key={item.key} dataRef={item}>
            {this.renderTreeNodes(item.children)}
          </TreeNode>
        );
      }
      return <TreeNode {...item} />;
    });
  }
  render() {
    return (
      <Tree
        checkable
        onExpand={this.onExpand}
        expandedKeys={this.state.expandedKeys}
        autoExpandParent={this.state.autoExpandParent}
        onCheck={this.onCheck}
        checkedKeys={this.state.checkedKeys}
        onSelect={this.onSelect}
        selectedKeys={this.state.selectedKeys}
      >
        {this.renderTreeNodes(treeData)}
      </Tree>
    );
  }
}


ReactDOM.render(
  <Demo />,
  document.getElementById('components-tree-demo-checked')
);

拖拽

将节点拖拽到其他节点内部或前后。

import { Tree } from 'uxcore';

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', 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: '0-1',
  key: '0-1',
  children: [
    { title: '0-1-0-0', key: '0-1-0-0' },
    { title: '0-1-0-1', key: '0-1-0-1' },
    { title: '0-1-0-2', key: '0-1-0-2' },
  ],
}, {
  title: '0-2',
  key: '0-2',
}];

class Demo extends React.Component {
  state = {
    checkedKeys: ['0-0-0'],
    treeData,
  }
  onCheck = (checkedKeys) => {
    console.log('onCheck', checkedKeys);
  }
  onDrop = (info) => {
    console.log(info);
    const dropKey = info.node.props.eventKey;
    const dragKey = info.dragNode.props.eventKey;
    const dropPos = info.node.props.pos.split('-');
    const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);
    // const dragNodesKeys = info.dragNodesKeys;
    const loop = (data, key, callback) => {
      data.forEach((item, index, arr) => {
        if (item.key === key) {
          return callback(item, index, arr);
        }
        if (item.children) {
          return loop(item.children, key, callback);
        }
      });
    };
    const data = [...this.state.treeData];
    let dragObj;
    loop(data, dragKey, (item, index, arr) => {
      arr.splice(index, 1);
      dragObj = item;
    });
    if (info.dropToGap) {
      let ar;
      let i;
      loop(data, dropKey, (item, index, arr) => {
        ar = arr;
        i = index;
      });
      if (dropPosition === -1) {
        ar.splice(i, 0, dragObj);
      } else {
        ar.splice(i + 1, 0, dragObj);
      }
    } else {
      loop(data, dropKey, (item) => {
        item.children = item.children || [];
        // where to insert 示例添加到尾部，可以是随意位置
        item.children.push(dragObj);
      });
    }
    console.log(data);
    this.setState({
      treeData: data,
    });
  }
  render() {
    const loop = data => data.map((item) => {
      if (item.children && item.children.length) {
        return <TreeNode key={item.key} title={item.title}>{loop(item.children)}</TreeNode>;
      }
      return <TreeNode key={item.key} title={item.title} />;
    });
    console.log(this.state.treeData)
    return (
      <Tree
        checkable
        onCheck={this.onCheck}
        draggable
        onDrop={this.onDrop}
        defaultExpandedKeys={['0-0', '0-0-0', '0-0-0-0']}
        defaultCheckedKeys={this.state.checkedKeys}
      >
        {loop(this.state.treeData)}
      </Tree>
    );
  }
}



ReactDOM.render(
  <Demo />
  , document.getElementById('components-tree-demo-drag'));

动态加载

点击展开节点，动态加载数据。

import { Tree } from 'uxcore';

const TreeNode = Tree.TreeNode;

const generateTreeNodes = (treeNode) => {
  const arr = [];
  const key = treeNode.props.eventKey;
  for (let i = 0; i < 3; i++) {
    arr.push({ name: `leaf ${key}-${i}`, key: `${key}-${i}` });
  }
  return arr;
}


const getNewTreeData = (treeData, curKey, child, level) => {
  const loop = (data) => {
    if (level < 1 || curKey.length - 3 > level * 2) return;
    data.forEach((item) => {
      if (curKey.indexOf(item.key) === 0) {
        if (item.children) {
          loop(item.children);
        } else {
          item.children = child;
        }
      }
    });
  };
  loop(treeData);
  setLeaf(treeData, curKey, level);
};

const setLeaf = (treeData, curKey, level) => {
  const loopLeaf = (data, lev) => {
    const l = lev - 1;
    data.forEach((item) => {
      if ((item.key.length > curKey.length) ? item.key.indexOf(curKey) !== 0 :
        curKey.indexOf(item.key) !== 0) {
        return;
      }
      if (item.children) {
        loopLeaf(item.children, l);
      } else if (l < 1) {
        item.isLeaf = true;
      }
    });
  };
  loopLeaf(treeData, level + 1);
};

const loopLoading = (data) => {
  return data.map((item) => {
    if (item.children) {
      return <TreeNode title={item.name} key={item.key}>{loopLoading(item.children)}</TreeNode>;
    }
    return (
      <TreeNode title={item.name} key={item.key} isLeaf={item.isLeaf}
        disabled={item.key === '0-0-0'}
      />
    );
  });
};



class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      treeData: [
        { name: 'pNode 01', key: '0-0' },
        { name: 'pNode 02', key: '0-1' },
        { name: 'pNode 03', key: '0-2', isLeaf: true },
      ],
      checkedKeys: ['0-0'],
    }
  }

  onLoadData = (treeNode) => {
    console.log('load data...');
    return new Promise((resolve) => {
      setTimeout(() => {
        const treeData = [...this.state.treeData];
        getNewTreeData(treeData, treeNode.props.eventKey, generateTreeNodes(treeNode), 2);
        this.setState({ treeData });
        resolve();
      }, 500);
    });
  }

  render() {

    const treeNodes = loopLoading(this.state.treeData);

    return (
      <div>
        <Tree
          checkable 
          defaultCheckedKeys={this.state.checkedKeys}
          loadData={this.onLoadData}
        >
          {treeNodes}
        </Tree>
      </div>
    )
  }
}

ReactDOM.render(
  <Demo />,
      document.getElementById('components-tree-demo-dynamic')
);

操作项

加入一些对树节点的一些操作

import { Tree, Menu, Icon } from 'uxcore';

const { DropdownTreeNode } = Tree;

const treeData = [{
  title: '0-0',
  key: '0-0',
  children: [{
    title: '0-0-0',
    key: '0-0-0',
    children: [
      { title: '0-0-0-0', 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: '0-1',
  key: '0-1',
  children: [
    { title: '0-1-0-0', key: '0-1-0-0' },
    { title: '0-1-0-1', key: '0-1-0-1' },
    { title: '0-1-0-2', key: '0-1-0-2' },
  ],
}, {
  title: '0-2',
  key: '0-2',
}];

const menu = (
  <Menu>
    <Menu.Item>
      添加
    </Menu.Item>
    <Menu.Item>
      删除
    </Menu.Item>
    <Menu.Item>
      重命名
    </Menu.Item>
  </Menu>
);

const loopDropDown = data => data.map((item) => {
  if (item.children) {
    return (
      <DropdownTreeNode
        key={item.key}
        title={item.title}
        dropDownTitle={item.dropDownTitle}
        onDropDownClick={e => e}
        dropDownOverlay={menu}
        dropDownable
      >
        {loopDropDown(item.children)}
      </DropdownTreeNode>
    );
  }
  return <DropdownTreeNode key={item.key} title={item.title} icon={<Icon name="right" />} dropDownable dropDownTitle={item.dropDownTitle} onDropDownClick={e => e} />;
});


class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      treeData,
    };
  }
  render() {
    return (
      <div style={{ width: 400 }}>
        <Tree>
          {loopDropDown(this.state.treeData)}
        </Tree>
      </div>
    );
  }
}

ReactDOM.render(
  <Demo />,
      document.getElementById('components-tree-demo-actions')
);

类似ztree的树组件

API

Tree props

name	description	type	default
className	additional css class of root dom node	String	''
prefixCls	prefix class	String	''
showLine	whether show line	bool	true
showIcon	whether show icon	bool	true
selectable	whether can be selected	bool	true
multiple	whether multiple select	bool	false
checkable	whether support checked	bool/React Node	false
defaultExpandAll	expand all treeNodes	bool	false
defaultExpandedKeys	expand specific treeNodes	String[]	-
expandedKeys	Controlled expand specific treeNodes	String[]	-
autoExpandParent	whether auto expand parent treeNodes	bool	true
checkedKeys	Controlled checked treeNodes(After setting, defaultCheckedKeys will not work)	String[]	[]
defaultCheckedKeys	default checked treeNodes	String[]	[]
selectedKeys	Controlled selected treeNodes(After setting, defaultSelectedKeys will not work)	String[]	[]
defaultSelectedKeys	default selected treeNodes	String[]	[]
onExpand	fire on treeNode expand or not	function(node, expanded, expandedKeys)	-
onCheck	click the treeNode/checkbox to fire	function(checkedKeys, e:{checked: bool, checkedNodes, node, event})	-
onSelect	click the treeNode to fire	function(selectedKeys, e:{selected: bool, selectedNodes, node, event})	-
filterTreeNode	filter some treeNodes as you need. it should return true	function(node)	-
loadData	load data asynchronously and the return value should be a promise	function(node)	-
onRightClick	select current treeNode and show customized contextmenu	function({event,node})	-
onMouseEnter	call when mouse enter a treeNode	function({event,node})	-
onMouseLeave	call when mouse leave a treeNode	function({event,node})	-
draggable	whether can drag treeNode. (drag events are not supported in Internet Explorer 8 and earlier versions or Safari 5.1 and earlier versions.)	bool	false
onDragStart	it execs when fire the tree's dragstart event	function({event,node})	-
onDragEnter	it execs when fire the tree's dragenter event	function({event,node,expandedKeys})	-
onDragOver	it execs when fire the tree's dragover event	function({event,node})	-
onDragLeave	it execs when fire the tree's dragleave event	function({event,node})	-
onDrop	it execs when fire the tree's drop event	function({event, node, dragNode, dragNodesKeys})	-

TreeNode props

note: if you have a lot of TreeNode, like more than 1000,
make the parent node is collapsed by default, will obvious effect, very fast.
Because the children hide TreeNode will not insert into dom.

name	description	type	default
className	additional class to treeNode	String	''
disabled	whether disabled the treeNode	bool	false
disableCheckbox	whether disable the treeNode' checkbox	bool	false
title	tree/subTree's title	String/node	'---'
key	it's used with tree props's (default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys. you'd better to set it, and it must be unique in the tree's all treeNodes	String	treeNode's position
isLeaf	whether it's leaf node	bool	false