From 831f934fb87aa6725e574cc8dd67ecc258073010 Mon Sep 17 00:00:00 2001 From: zhaoyuu Date: Wed, 30 Aug 2017 13:44:42 +0800 Subject: [PATCH] =?UTF-8?q?Fixed:demo=E6=96=87=E6=A1=A3=E4=BF=AE=E6=94=B9i?= =?UTF-8?q?mport?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- demo/demolist/Demo1.js | 12 +- demo/demolist/Demo2.js | 41 +++- demo/demolist/Demo3.js | 39 +++- demo/demolist/Demo4.js | 40 +++- demo/demolist/Demo5.js | 39 +++- demo/index.js | 428 +---------------------------------------- package.json | 1 + 7 files changed, 168 insertions(+), 432 deletions(-) diff --git a/demo/demolist/Demo1.js b/demo/demolist/Demo1.js index 9359784..74be674 100644 --- a/demo/demolist/Demo1.js +++ b/demo/demolist/Demo1.js @@ -4,6 +4,13 @@ * @description 事例涵盖 checkbox如何选择，disable状态和部分选择状态。 * */ + + +import React, { Component } from 'react'; +import Tree from '../../src'; + +const TreeNode = Tree.TreeNode; + const defaultProps = { keys: ['0-0-0', '0-0-1'] } @@ -46,4 +53,7 @@ class Demo1 extends Component { } } -Demo1.defaultProps = defaultProps; \ No newline at end of file +Demo1.defaultProps = defaultProps; + + +export default Demo1; \ No newline at end of file diff --git a/demo/demolist/Demo2.js b/demo/demolist/Demo2.js index 77b8f3d..02b6d95 100644 --- a/demo/demolist/Demo2.js +++ b/demo/demolist/Demo2.js @@ -33,6 +33,42 @@ const generateData = (_level, _preKey, _tns) => { }; generateData(z); */ + + +import React, { Component } from 'react'; +import Tree from '../../src'; + +const x = 3; +const y = 2; +const z = 1; +const gData = []; + +const generateData = (_level, _preKey, _tns) => { + const preKey = _preKey || '0'; + const tns = _tns || gData; + + const children = []; + for (let i = 0; i < x; i++) { + const key = `${preKey}-${i}`; + tns.push({ title: key, key }); + if (i < y) { + children.push(key); + } + } + if (_level < 0) { + return tns; + } + const level = _level - 1; + children.forEach((key, index) => { + tns[index].children = []; + return generateData(level, key, tns[index].children); + }); +}; +generateData(z); + +const TreeNode = Tree.TreeNode; + + class Demo2 extends Component{ constructor(props) { super(props); @@ -88,4 +124,7 @@ class Demo2 extends Component{ ); } -}; \ No newline at end of file +}; + + +export default Demo2; \ No newline at end of file diff --git a/demo/demolist/Demo3.js b/demo/demolist/Demo3.js index cb5d6bf..6cfab2e 100644 --- a/demo/demolist/Demo3.js +++ b/demo/demolist/Demo3.js @@ -5,6 +5,41 @@ * */ + + +import React, { Component } from 'react'; +import Tree from '../../src'; + +const x = 3; +const y = 2; +const z = 1; +const gData = []; + +const generateData = (_level, _preKey, _tns) => { + const preKey = _preKey || '0'; + const tns = _tns || gData; + + const children = []; + for (let i = 0; i < x; i++) { + const key = `${preKey}-${i}`; + tns.push({ title: key, key }); + if (i < y) { + children.push(key); + } + } + if (_level < 0) { + return tns; + } + const level = _level - 1; + children.forEach((key, index) => { + tns[index].children = []; + return generateData(level, key, tns[index].children); + }); +}; +generateData(z); + +const TreeNode = Tree.TreeNode; + class Demo3 extends Component{ constructor(props) { super(props); @@ -80,4 +115,6 @@ class Demo3 extends Component{ ); } -}; \ No newline at end of file +}; + +export default Demo3; \ No newline at end of file diff --git a/demo/demolist/Demo4.js b/demo/demolist/Demo4.js index 7511e5d..eb06716 100644 --- a/demo/demolist/Demo4.js +++ b/demo/demolist/Demo4.js @@ -4,6 +4,42 @@ * @description * */ + + +import React, { Component } from 'react'; +import FormControl from 'bee-form-control'; +import Tree from '../../src'; + +const x = 3; +const y = 2; +const z = 1; +const gData = []; + +const generateData = (_level, _preKey, _tns) => { + const preKey = _preKey || '0'; + const tns = _tns || gData; + + const children = []; + for (let i = 0; i < x; i++) { + const key = `${preKey}-${i}`; + tns.push({ title: key, key }); + if (i < y) { + children.push(key); + } + } + if (_level < 0) { + return tns; + } + const level = _level - 1; + children.forEach((key, index) => { + tns[index].children = []; + return generateData(level, key, tns[index].children); + }); +}; +generateData(z); + +const TreeNode = Tree.TreeNode; + const dataList = []; const generateList = (data) => { for (let i = 0; i < data.length; i++) { @@ -107,4 +143,6 @@ class Demo4 extends Component { ); } -} \ No newline at end of file +} + +export default Demo4; \ No newline at end of file diff --git a/demo/demolist/Demo5.js b/demo/demolist/Demo5.js index 99c5d61..a1b587b 100644 --- a/demo/demolist/Demo5.js +++ b/demo/demolist/Demo5.js @@ -4,6 +4,41 @@ * @description 当点击展开，异步获取子节点数据 * */ + + +import React, { Component } from 'react'; +import Tree from '../../src'; + +const x = 3; +const y = 2; +const z = 1; +const gData = []; + +const generateData = (_level, _preKey, _tns) => { + const preKey = _preKey || '0'; + const tns = _tns || gData; + + const children = []; + for (let i = 0; i < x; i++) { + const key = `${preKey}-${i}`; + tns.push({ title: key, key }); + if (i < y) { + children.push(key); + } + } + if (_level < 0) { + return tns; + } + const level = _level - 1; + children.forEach((key, index) => { + tns[index].children = []; + return generateData(level, key, tns[index].children); + }); +}; +generateData(z); + +const TreeNode = Tree.TreeNode; + function generateTreeNodes(treeNode) { const arr = []; const key = treeNode.props.eventKey; @@ -95,4 +130,6 @@ class Demo5 extends Component{ ); } -}; \ No newline at end of file +}; + +export default Demo5 \ No newline at end of file diff --git a/demo/index.js b/demo/index.js index 8346be5..d77ff11 100644 --- a/demo/index.js +++ b/demo/index.js @@ -42,433 +42,7 @@ const CARET = ; const CARETUP = ; -/** -* -* @title Tree基本使用事例 -* @description 事例涵盖 checkbox如何选择，disable状态和部分选择状态。 -* -*/ -const defaultProps = { - keys: ['0-0-0', '0-0-1'] -} -console.log(Tree); -class Demo1 extends Component { - constructor(props) { - super(props); - const keys = this.props.keys; - this.state = { - defaultExpandedKeys: keys, - defaultSelectedKeys: keys, - defaultCheckedKeys: keys, - }; - } - onSelect(info) { - console.log('selected', info); - } - onCheck(info) { - console.log('onCheck', info); - } - render() { - return ( - - - - - - - - sss} key="0-0-1-0" /> - - - - ); - } -} - -Demo1.defaultProps = defaultProps;/** -* -* @title Tree数据可控事例 -* @description -* -*/ -/* -const x = 3; -const y = 2; -const z = 1; -const gData = []; - -const generateData = (_level, _preKey, _tns) => { - const preKey = _preKey || '0'; - const tns = _tns || gData; - - const children = []; - for (let i = 0; i < x; i++) { - const key = `${preKey}-${i}`; - tns.push({ title: key, key }); - if (i < y) { - children.push(key); - } - } - if (_level < 0) { - return tns; - } - const level = _level - 1; - children.forEach((key, index) => { - tns[index].children = []; - return generateData(level, key, tns[index].children); - }); -}; -generateData(z); -*/ -class Demo2 extends Component{ - constructor(props) { - super(props); - this.state = { - expandedKeys: ['0-0-0', '0-0-1'], - autoExpandParent: true, - checkedKeys: ['0-0-0'], - selectedKeys: [], - }; - this.onExpand = this.onExpand.bind(this); - this.onCheck = this.onCheck.bind(this); - this.onSelect = this.onSelect.bind(this); - } - 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) { - this.setState({ - checkedKeys, - selectedKeys: ['0-3', '0-4'], - }); - } - onSelect(selectedKeys, info) { - console.log('onSelect', info); - this.setState({ selectedKeys }); - } - render() { - const loop = data => data.map((item) => { - if (item.children) { - return ( - - {loop(item.children)} - - ); - } - return ; - }); - return ( - - {loop(gData)} - - ); - } -};/** -* -* @title Tree 拖拽使用事例 -* @description 拖动结点插入到另一个结点后面或者其他的父节点里面。 -* -*/ - -class Demo3 extends Component{ - constructor(props) { - super(props); - this.state = { - gData, - expandedKeys: ['0-0', '0-0-0', '0-0-0-0'], - }; - this.onDragEnter = this.onDragEnter.bind(this); - this.onDrop = this.onDrop.bind(this); - } - onDragEnter(info) { - console.log(info); - // expandedKeys 需要受控时设置 - // this.setState({ - // expandedKeys: info.expandedKeys, - // }); - } - onDrop(info) { - console.log(info); - const dropKey = info.node.props.eventKey; - const dragKey = info.dragNode.props.eventKey; - // 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.gData]; - 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; - }); - ar.splice(i, 0, dragObj); - } else { - loop(data, dropKey, (item) => { - item.children = item.children || []; - // where to insert 示例添加到尾部，可以是随意位置 - item.children.push(dragObj); - }); - } - this.setState({ - gData: data, - }); - } - render() { - const loop = data => data.map((item) => { - if (item.children && item.children.length) { - return {loop(item.children)}; - } - return ; - }); - return ( - - {loop(this.state.gData)} - - ); - } -};/** -* -* @title Tree可搜索事例 -* @description -* -*/ -const dataList = []; -const generateList = (data) => { - for (let i = 0; i < data.length; i++) { - const node = data[i]; - const key = node.key; - dataList.push({ key, title: key }); - if (node.children) { - generateList(node.children, node.key); - } - } -}; -generateList(gData); - -const getParentKey = (key, tree) => { - let parentKey; - for (let i = 0; i < tree.length; i++) { - const node = tree[i]; - if (node.children) { - if (node.children.some(item => item.key === key)) { - parentKey = node.key; - } else if (getParentKey(key, node.children)) { - parentKey = getParentKey(key, node.children); - } - } - } - return parentKey; -}; - - -class Demo4 extends Component { - constructor(props) { - super(props); - this.state = { - expandedKeys: [], - searchValue: '', - autoExpandParent: true, - } - } - onExpand = (expandedKeys) => { - this.setState({ - expandedKeys, - autoExpandParent: false, - }); - } - onChange = (e) => { - const value = e.target.value; - const expandedKeys = []; - dataList.forEach((item) => { - if (item.key.indexOf(value) > -1) { - expandedKeys.push(getParentKey(item.key, gData)); - } - }); - const uniqueExpandedKeys = []; - expandedKeys.forEach((item) => { - if (item && uniqueExpandedKeys.indexOf(item) === -1) { - uniqueExpandedKeys.push(item); - } - }); - this.setState({ - expandedKeys: uniqueExpandedKeys, - searchValue: value, - autoExpandParent: true, - }); - } - render() { - const { searchValue, expandedKeys, autoExpandParent } = this.state; - const loop = data => data.map((item) => { - const index = item.key.search(searchValue); - const beforeStr = item.key.substr(0, index); - const afterStr = item.key.substr(index + searchValue.length); - const title = index > -1 ? ( - - {beforeStr} - {searchValue} - {afterStr} - - ) : {item.key}; - if (item.children) { - return ( - - {loop(item.children)} - - ); - } - return ; - }); - return ( -
- - - {loop(gData)} - -
- ); - } -}/** -* -* @title Tree异步数据加载 -* @description 当点击展开，异步获取子节点数据 -* -*/ -function 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; -} - -function 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); -} - -function 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); -} - -class Demo5 extends Component{ - constructor(props) { - super(props); - this.state = { - treeData: [], - }; - this.onSelect = this.onSelect.bind(this); - this.onLoadData = this.onLoadData.bind(this); - } - componentDidMount() { - setTimeout(() => { - this.setState({ - treeData: [ - { name: 'pNode 01', key: '0-0' }, - { name: 'pNode 02', key: '0-1' }, - { name: 'pNode 03', key: '0-2', isLeaf: true }, - ], - }); - }, 100); - } - onSelect(info) { - console.log('selected', info); - } - onLoadData(treeNode) { - return new Promise((resolve) => { - setTimeout(() => { - const treeData = [...this.state.treeData]; - getNewTreeData(treeData, treeNode.props.eventKey, generateTreeNodes(treeNode), 2); - this.setState({ treeData }); - resolve(); - }, 1000); - }); - } - render() { - const loop = data => data.map((item) => { - if (item.children) { - return {loop(item.children)}; - } - return ; - }); - const treeNodes = loop(this.state.treeData); - return ( - - {treeNodes} - - ); - } -};var DemoArray = [{"example":,"title":" Tree基本使用事例","code":"/**\n*\n* @title Tree基本使用事例\n* @description 事例涵盖 checkbox如何选择，disable状态和部分选择状态。\n*\n*/\nconst defaultProps = {\n\tkeys: ['0-0-0', '0-0-1']\n}\nconsole.log(Tree);\nclass Demo1 extends Component {\n\tconstructor(props) {\n\t\tsuper(props);\n\t const keys = this.props.keys;\n\t this.state = {\n\t defaultExpandedKeys: keys,\n\t defaultSelectedKeys: keys,\n\t defaultCheckedKeys: keys,\n\t };\n\t}\n\tonSelect(info) {\n\t console.log('selected', info);\n\t}\n\tonCheck(info) {\n\t console.log('onCheck', info);\n\t}\n\trender() {\n\t return (\n\t \n\t \n\t \n\t \n\t \n\t \n\t \n\t sss} key=\"0-0-1-0\" />\n\t \n\t \n\t \n\t );\n\t}\n}\n\nDemo1.defaultProps = defaultProps;","desc":" 事例涵盖 checkbox如何选择，disable状态和部分选择状态。"},{"example":,"title":" Tree数据可控事例","code":"/**\n*\n* @title Tree数据可控事例\n* @description\n*\n*/\n/*\nconst x = 3;\nconst y = 2;\nconst z = 1;\nconst gData = [];\n\nconst generateData = (_level, _preKey, _tns) => {\n const preKey = _preKey || '0';\n const tns = _tns || gData;\n\n const children = [];\n for (let i = 0; i < x; i++) {\n const key = `${preKey}-${i}`;\n tns.push({ title: key, key });\n if (i < y) {\n children.push(key);\n }\n }\n if (_level < 0) {\n return tns;\n }\n const level = _level - 1;\n children.forEach((key, index) => {\n tns[index].children = [];\n return generateData(level, key, tns[index].children);\n });\n};\ngenerateData(z);\n*/\nclass Demo2 extends Component{\n constructor(props) {\n \tsuper(props);\n this.state = {\n expandedKeys: ['0-0-0', '0-0-1'],\n autoExpandParent: true,\n checkedKeys: ['0-0-0'],\n selectedKeys: [],\n };\n this.onExpand = this.onExpand.bind(this);\n this.onCheck = this.onCheck.bind(this);\n this.onSelect = this.onSelect.bind(this);\n }\n onExpand(expandedKeys) {\n console.log('onExpand', arguments);\n // if not set autoExpandParent to false, if children expanded, parent can not collapse.\n // or, you can remove all expanded children keys.\n this.setState({\n expandedKeys,\n autoExpandParent: false,\n });\n }\n onCheck(checkedKeys) {\n this.setState({\n checkedKeys,\n selectedKeys: ['0-3', '0-4'],\n });\n }\n onSelect(selectedKeys, info) {\n console.log('onSelect', info);\n this.setState({ selectedKeys });\n }\n render() {\n const loop = data => data.map((item) => {\n if (item.children) {\n return (\n \n {loop(item.children)}\n \n );\n }\n return ;\n });\n return (\n \n {loop(gData)}\n \n );\n }\n};","desc":""},{"example":,"title":" Tree 拖拽使用事例","code":"/**\n*\n* @title Tree 拖拽使用事例\n* @description 拖动结点插入到另一个结点后面或者其他的父节点里面。\n*\n*/\n\nclass Demo3 extends Component{\n constructor(props) {\n super(props);\n this.state = {\n gData,\n expandedKeys: ['0-0', '0-0-0', '0-0-0-0'],\n };\n this.onDragEnter = this.onDragEnter.bind(this);\n this.onDrop = this.onDrop.bind(this);\n }\n onDragEnter(info) {\n console.log(info);\n // expandedKeys 需要受控时设置\n // this.setState({\n // expandedKeys: info.expandedKeys,\n // });\n }\n onDrop(info) {\n console.log(info);\n const dropKey = info.node.props.eventKey;\n const dragKey = info.dragNode.props.eventKey;\n // const dragNodesKeys = info.dragNodesKeys;\n const loop = (data, key, callback) => {\n data.forEach((item, index, arr) => {\n if (item.key === key) {\n return callback(item, index, arr);\n }\n if (item.children) {\n return loop(item.children, key, callback);\n }\n });\n };\n const data = [...this.state.gData];\n let dragObj;\n loop(data, dragKey, (item, index, arr) => {\n arr.splice(index, 1);\n dragObj = item;\n });\n if (info.dropToGap) {\n let ar;\n let i;\n loop(data, dropKey, (item, index, arr) => {\n ar = arr;\n i = index;\n });\n ar.splice(i, 0, dragObj);\n } else {\n loop(data, dropKey, (item) => {\n item.children = item.children || [];\n // where to insert 示例添加到尾部，可以是随意位置\n item.children.push(dragObj);\n });\n }\n this.setState({\n gData: data,\n });\n }\n render() {\n const loop = data => data.map((item) => {\n if (item.children && item.children.length) {\n return {loop(item.children)};\n }\n return ;\n });\n return (\n \n {loop(this.state.gData)}\n \n );\n }\n};","desc":" 拖动结点插入到另一个结点后面或者其他的父节点里面。"},{"example":,"title":" Tree可搜索事例","code":"/**\n*\n* @title Tree可搜索事例\n* @description\n*\n*/\nconst dataList = [];\nconst generateList = (data) => {\n for (let i = 0; i < data.length; i++) {\n const node = data[i];\n const key = node.key;\n dataList.push({ key, title: key });\n if (node.children) {\n generateList(node.children, node.key);\n }\n }\n};\ngenerateList(gData);\n\nconst getParentKey = (key, tree) => {\n let parentKey;\n for (let i = 0; i < tree.length; i++) {\n const node = tree[i];\n if (node.children) {\n if (node.children.some(item => item.key === key)) {\n parentKey = node.key;\n } else if (getParentKey(key, node.children)) {\n parentKey = getParentKey(key, node.children);\n }\n }\n }\n return parentKey;\n};\n\n\nclass Demo4 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n expandedKeys: [],\n searchValue: '',\n autoExpandParent: true,\n }\n }\n onExpand = (expandedKeys) => {\n this.setState({\n expandedKeys,\n autoExpandParent: false,\n });\n }\n onChange = (e) => {\n const value = e.target.value;\n const expandedKeys = [];\n dataList.forEach((item) => {\n if (item.key.indexOf(value) > -1) {\n expandedKeys.push(getParentKey(item.key, gData));\n }\n });\n const uniqueExpandedKeys = [];\n expandedKeys.forEach((item) => {\n if (item && uniqueExpandedKeys.indexOf(item) === -1) {\n uniqueExpandedKeys.push(item);\n }\n });\n this.setState({\n expandedKeys: uniqueExpandedKeys,\n searchValue: value,\n autoExpandParent: true,\n });\n }\n render() {\n const { searchValue, expandedKeys, autoExpandParent } = this.state;\n const loop = data => data.map((item) => {\n const index = item.key.search(searchValue);\n const beforeStr = item.key.substr(0, index);\n const afterStr = item.key.substr(index + searchValue.length);\n const title = index > -1 ? (\n \n {beforeStr}\n {searchValue}\n {afterStr}\n \n ) : {item.key};\n if (item.children) {\n return (\n \n {loop(item.children)}\n \n );\n }\n return ;\n });\n return (\n
\n \n \n {loop(gData)}\n \n
\n );\n }\n}","desc":""},{"example":,"title":" Tree异步数据加载","code":"/**\n*\n* @title Tree异步数据加载\n* @description 当点击展开，异步获取子节点数据\n*\n*/\nfunction generateTreeNodes(treeNode) {\n const arr = [];\n const key = treeNode.props.eventKey;\n for (let i = 0; i < 3; i++) {\n arr.push({ name: `leaf ${key}-${i}`, key: `${key}-${i}` });\n }\n return arr;\n}\n\nfunction setLeaf(treeData, curKey, level) {\n const loopLeaf = (data, lev) => {\n const l = lev - 1;\n data.forEach((item) => {\n if ((item.key.length > curKey.length) ? item.key.indexOf(curKey) !== 0 :\n curKey.indexOf(item.key) !== 0) {\n return;\n }\n if (item.children) {\n loopLeaf(item.children, l);\n } else if (l < 1) {\n item.isLeaf = true;\n }\n });\n };\n loopLeaf(treeData, level + 1);\n}\n\nfunction getNewTreeData(treeData, curKey, child, level) {\n const loop = (data) => {\n if (level < 1 || curKey.length - 3 > level * 2) return;\n data.forEach((item) => {\n if (curKey.indexOf(item.key) === 0) {\n if (item.children) {\n loop(item.children);\n } else {\n item.children = child;\n }\n }\n });\n };\n loop(treeData);\n setLeaf(treeData, curKey, level);\n}\n\nclass Demo5 extends Component{\n constructor(props) {\n super(props);\n this.state = {\n treeData: [],\n };\n this.onSelect = this.onSelect.bind(this);\n this.onLoadData = this.onLoadData.bind(this);\n }\n componentDidMount() {\n setTimeout(() => {\n this.setState({\n treeData: [\n { name: 'pNode 01', key: '0-0' },\n { name: 'pNode 02', key: '0-1' },\n { name: 'pNode 03', key: '0-2', isLeaf: true },\n ],\n });\n }, 100);\n }\n onSelect(info) {\n console.log('selected', info);\n }\n onLoadData(treeNode) {\n return new Promise((resolve) => {\n setTimeout(() => {\n const treeData = [...this.state.treeData];\n getNewTreeData(treeData, treeNode.props.eventKey, generateTreeNodes(treeNode), 2);\n this.setState({ treeData });\n resolve();\n }, 1000);\n });\n }\n render() {\n const loop = data => data.map((item) => {\n if (item.children) {\n return {loop(item.children)};\n }\n return ;\n });\n const treeNodes = loop(this.state.treeData);\n return (\n \n {treeNodes}\n \n );\n }\n};","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 DemoArray = [{"example":,"title":" Tree基本使用事例","code":"/**\n*\n* @title Tree基本使用事例\n* @description 事例涵盖 checkbox如何选择，disable状态和部分选择状态。\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport Tree from 'tinper-bee';\n\nconst TreeNode = Tree.TreeNode;\n\nconst defaultProps = {\n\tkeys: ['0-0-0', '0-0-1']\n}\nconsole.log(Tree);\nclass Demo1 extends Component {\n\tconstructor(props) {\n\t\tsuper(props);\n\t const keys = this.props.keys;\n\t this.state = {\n\t defaultExpandedKeys: keys,\n\t defaultSelectedKeys: keys,\n\t defaultCheckedKeys: keys,\n\t };\n\t}\n\tonSelect(info) {\n\t console.log('selected', info);\n\t}\n\tonCheck(info) {\n\t console.log('onCheck', info);\n\t}\n\trender() {\n\t return (\n\t \n\t \n\t \n\t \n\t \n\t \n\t \n\t sss} key=\"0-0-1-0\" />\n\t \n\t \n\t \n\t );\n\t}\n}\n\nDemo1.defaultProps = defaultProps;\n\n\n","desc":" 事例涵盖 checkbox如何选择，disable状态和部分选择状态。"},{"example":,"title":" Tree数据可控事例","code":"/**\n*\n* @title Tree数据可控事例\n* @description\n*\n*/\n/*\nconst x = 3;\nconst y = 2;\nconst z = 1;\nconst gData = [];\n\nconst generateData = (_level, _preKey, _tns) => {\n const preKey = _preKey || '0';\n const tns = _tns || gData;\n\n const children = [];\n for (let i = 0; i < x; i++) {\n const key = `${preKey}-${i}`;\n tns.push({ title: key, key });\n if (i < y) {\n children.push(key);\n }\n }\n if (_level < 0) {\n return tns;\n }\n const level = _level - 1;\n children.forEach((key, index) => {\n tns[index].children = [];\n return generateData(level, key, tns[index].children);\n });\n};\ngenerateData(z);\n*/\n\n\nimport React, { Component } from 'react';\nimport Tree from 'tinper-bee';\n\nconst x = 3;\nconst y = 2;\nconst z = 1;\nconst gData = [];\n\nconst generateData = (_level, _preKey, _tns) => {\n const preKey = _preKey || '0';\n const tns = _tns || gData;\n\n const children = [];\n for (let i = 0; i < x; i++) {\n const key = `${preKey}-${i}`;\n tns.push({ title: key, key });\n if (i < y) {\n children.push(key);\n }\n }\n if (_level < 0) {\n return tns;\n }\n const level = _level - 1;\n children.forEach((key, index) => {\n tns[index].children = [];\n return generateData(level, key, tns[index].children);\n });\n};\ngenerateData(z);\n\nconst TreeNode = Tree.TreeNode;\n\n\nclass Demo2 extends Component{\n constructor(props) {\n \tsuper(props);\n this.state = {\n expandedKeys: ['0-0-0', '0-0-1'],\n autoExpandParent: true,\n checkedKeys: ['0-0-0'],\n selectedKeys: [],\n };\n this.onExpand = this.onExpand.bind(this);\n this.onCheck = this.onCheck.bind(this);\n this.onSelect = this.onSelect.bind(this);\n }\n onExpand(expandedKeys) {\n console.log('onExpand', arguments);\n // if not set autoExpandParent to false, if children expanded, parent can not collapse.\n // or, you can remove all expanded children keys.\n this.setState({\n expandedKeys,\n autoExpandParent: false,\n });\n }\n onCheck(checkedKeys) {\n this.setState({\n checkedKeys,\n selectedKeys: ['0-3', '0-4'],\n });\n }\n onSelect(selectedKeys, info) {\n console.log('onSelect', info);\n this.setState({ selectedKeys });\n }\n render() {\n const loop = data => data.map((item) => {\n if (item.children) {\n return (\n \n {loop(item.children)}\n \n );\n }\n return ;\n });\n return (\n \n {loop(gData)}\n \n );\n }\n};\n\n\n","desc":""},{"example":,"title":" Tree 拖拽使用事例","code":"/**\n*\n* @title Tree 拖拽使用事例\n* @description 拖动结点插入到另一个结点后面或者其他的父节点里面。\n*\n*/\n\n\n\nimport React, { Component } from 'react';\nimport Tree from 'tinper-bee';\n\nconst x = 3;\nconst y = 2;\nconst z = 1;\nconst gData = [];\n\nconst generateData = (_level, _preKey, _tns) => {\n const preKey = _preKey || '0';\n const tns = _tns || gData;\n\n const children = [];\n for (let i = 0; i < x; i++) {\n const key = `${preKey}-${i}`;\n tns.push({ title: key, key });\n if (i < y) {\n children.push(key);\n }\n }\n if (_level < 0) {\n return tns;\n }\n const level = _level - 1;\n children.forEach((key, index) => {\n tns[index].children = [];\n return generateData(level, key, tns[index].children);\n });\n};\ngenerateData(z);\n\nconst TreeNode = Tree.TreeNode;\n\nclass Demo3 extends Component{\n constructor(props) {\n super(props);\n this.state = {\n gData,\n expandedKeys: ['0-0', '0-0-0', '0-0-0-0'],\n };\n this.onDragEnter = this.onDragEnter.bind(this);\n this.onDrop = this.onDrop.bind(this);\n }\n onDragEnter(info) {\n console.log(info);\n // expandedKeys 需要受控时设置\n // this.setState({\n // expandedKeys: info.expandedKeys,\n // });\n }\n onDrop(info) {\n console.log(info);\n const dropKey = info.node.props.eventKey;\n const dragKey = info.dragNode.props.eventKey;\n // const dragNodesKeys = info.dragNodesKeys;\n const loop = (data, key, callback) => {\n data.forEach((item, index, arr) => {\n if (item.key === key) {\n return callback(item, index, arr);\n }\n if (item.children) {\n return loop(item.children, key, callback);\n }\n });\n };\n const data = [...this.state.gData];\n let dragObj;\n loop(data, dragKey, (item, index, arr) => {\n arr.splice(index, 1);\n dragObj = item;\n });\n if (info.dropToGap) {\n let ar;\n let i;\n loop(data, dropKey, (item, index, arr) => {\n ar = arr;\n i = index;\n });\n ar.splice(i, 0, dragObj);\n } else {\n loop(data, dropKey, (item) => {\n item.children = item.children || [];\n // where to insert 示例添加到尾部，可以是随意位置\n item.children.push(dragObj);\n });\n }\n this.setState({\n gData: data,\n });\n }\n render() {\n const loop = data => data.map((item) => {\n if (item.children && item.children.length) {\n return {loop(item.children)};\n }\n return ;\n });\n return (\n \n {loop(this.state.gData)}\n \n );\n }\n};\n\n","desc":" 拖动结点插入到另一个结点后面或者其他的父节点里面。"},{"example":,"title":" Tree可搜索事例","code":"/**\n*\n* @title Tree可搜索事例\n* @description\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport FormControl from 'bee-form-control';\nimport Tree from 'tinper-bee';\n\nconst x = 3;\nconst y = 2;\nconst z = 1;\nconst gData = [];\n\nconst generateData = (_level, _preKey, _tns) => {\n const preKey = _preKey || '0';\n const tns = _tns || gData;\n\n const children = [];\n for (let i = 0; i < x; i++) {\n const key = `${preKey}-${i}`;\n tns.push({ title: key, key });\n if (i < y) {\n children.push(key);\n }\n }\n if (_level < 0) {\n return tns;\n }\n const level = _level - 1;\n children.forEach((key, index) => {\n tns[index].children = [];\n return generateData(level, key, tns[index].children);\n });\n};\ngenerateData(z);\n\nconst TreeNode = Tree.TreeNode;\n\nconst dataList = [];\nconst generateList = (data) => {\n for (let i = 0; i < data.length; i++) {\n const node = data[i];\n const key = node.key;\n dataList.push({ key, title: key });\n if (node.children) {\n generateList(node.children, node.key);\n }\n }\n};\ngenerateList(gData);\n\nconst getParentKey = (key, tree) => {\n let parentKey;\n for (let i = 0; i < tree.length; i++) {\n const node = tree[i];\n if (node.children) {\n if (node.children.some(item => item.key === key)) {\n parentKey = node.key;\n } else if (getParentKey(key, node.children)) {\n parentKey = getParentKey(key, node.children);\n }\n }\n }\n return parentKey;\n};\n\n\nclass Demo4 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n expandedKeys: [],\n searchValue: '',\n autoExpandParent: true,\n }\n }\n onExpand = (expandedKeys) => {\n this.setState({\n expandedKeys,\n autoExpandParent: false,\n });\n }\n onChange = (e) => {\n const value = e.target.value;\n const expandedKeys = [];\n dataList.forEach((item) => {\n if (item.key.indexOf(value) > -1) {\n expandedKeys.push(getParentKey(item.key, gData));\n }\n });\n const uniqueExpandedKeys = [];\n expandedKeys.forEach((item) => {\n if (item && uniqueExpandedKeys.indexOf(item) === -1) {\n uniqueExpandedKeys.push(item);\n }\n });\n this.setState({\n expandedKeys: uniqueExpandedKeys,\n searchValue: value,\n autoExpandParent: true,\n });\n }\n render() {\n const { searchValue, expandedKeys, autoExpandParent } = this.state;\n const loop = data => data.map((item) => {\n const index = item.key.search(searchValue);\n const beforeStr = item.key.substr(0, index);\n const afterStr = item.key.substr(index + searchValue.length);\n const title = index > -1 ? (\n \n {beforeStr}\n {searchValue}\n {afterStr}\n \n ) : {item.key};\n if (item.children) {\n return (\n \n {loop(item.children)}\n \n );\n }\n return ;\n });\n return (\n
\n \n \n {loop(gData)}\n \n
\n );\n }\n}\n\n","desc":""},{"example":,"title":" Tree异步数据加载","code":"/**\n*\n* @title Tree异步数据加载\n* @description 当点击展开，异步获取子节点数据\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport Tree from 'tinper-bee';\n\nconst x = 3;\nconst y = 2;\nconst z = 1;\nconst gData = [];\n\nconst generateData = (_level, _preKey, _tns) => {\n const preKey = _preKey || '0';\n const tns = _tns || gData;\n\n const children = [];\n for (let i = 0; i < x; i++) {\n const key = `${preKey}-${i}`;\n tns.push({ title: key, key });\n if (i < y) {\n children.push(key);\n }\n }\n if (_level < 0) {\n return tns;\n }\n const level = _level - 1;\n children.forEach((key, index) => {\n tns[index].children = [];\n return generateData(level, key, tns[index].children);\n });\n};\ngenerateData(z);\n\nconst TreeNode = Tree.TreeNode;\n\nfunction generateTreeNodes(treeNode) {\n const arr = [];\n const key = treeNode.props.eventKey;\n for (let i = 0; i < 3; i++) {\n arr.push({ name: `leaf ${key}-${i}`, key: `${key}-${i}` });\n }\n return arr;\n}\n\nfunction setLeaf(treeData, curKey, level) {\n const loopLeaf = (data, lev) => {\n const l = lev - 1;\n data.forEach((item) => {\n if ((item.key.length > curKey.length) ? item.key.indexOf(curKey) !== 0 :\n curKey.indexOf(item.key) !== 0) {\n return;\n }\n if (item.children) {\n loopLeaf(item.children, l);\n } else if (l < 1) {\n item.isLeaf = true;\n }\n });\n };\n loopLeaf(treeData, level + 1);\n}\n\nfunction getNewTreeData(treeData, curKey, child, level) {\n const loop = (data) => {\n if (level < 1 || curKey.length - 3 > level * 2) return;\n data.forEach((item) => {\n if (curKey.indexOf(item.key) === 0) {\n if (item.children) {\n loop(item.children);\n } else {\n item.children = child;\n }\n }\n });\n };\n loop(treeData);\n setLeaf(treeData, curKey, level);\n}\n\nclass Demo5 extends Component{\n constructor(props) {\n super(props);\n this.state = {\n treeData: [],\n };\n this.onSelect = this.onSelect.bind(this);\n this.onLoadData = this.onLoadData.bind(this);\n }\n componentDidMount() {\n setTimeout(() => {\n this.setState({\n treeData: [\n { name: 'pNode 01', key: '0-0' },\n { name: 'pNode 02', key: '0-1' },\n { name: 'pNode 03', key: '0-2', isLeaf: true },\n ],\n });\n }, 100);\n }\n onSelect(info) {\n console.log('selected', info);\n }\n onLoadData(treeNode) {\n return new Promise((resolve) => {\n setTimeout(() => {\n const treeData = [...this.state.treeData];\n getNewTreeData(treeData, treeNode.props.eventKey, generateTreeNodes(treeNode), 2);\n this.setState({ treeData });\n resolve();\n }, 1000);\n });\n }\n render() {\n const loop = data => data.map((item) => {\n if (item.children) {\n return {loop(item.children)};\n }\n return ;\n });\n const treeNodes = loop(this.state.treeData);\n return (\n \n {treeNodes}\n \n );\n }\n};\n\n","desc":" 当点击展开，异步获取子节点数据"}] class Demo extends Component { diff --git a/package.json b/package.json index ebffea2..f8d9ee3 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,7 @@ "bee-form-control": "^0.1.5", "classnames": "^2.2.5", "object-assign": "latest", + "babel-runtime": "^6.23.0", "tinper-bee-core": "latest" }, "devDependencies": {