From 531e81063b33991769f2838b0b317879699f6637 Mon Sep 17 00:00:00 2001 From: wh Date: Wed, 18 Oct 2017 10:59:51 +0800 Subject: [PATCH] =?UTF-8?q?add=EF=BC=9A=20=E8=87=AA=E5=AE=9A=E4=B9=89icon?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- demo/demolist/Demo6.js | 62 +++++++++++++++++++++++++++++++++++++ demo/index.js | 2 +- docs/api.md | 6 ++-- src/Tree.js | 69 ++++++++++++++++++++++++++++++------------ src/Tree.scss | 11 +++++++ src/TreeNode.js | 59 ++++++++++++++++++++++++------------ 6 files changed, 167 insertions(+), 42 deletions(-) create mode 100644 demo/demolist/Demo6.js diff --git a/demo/demolist/Demo6.js b/demo/demolist/Demo6.js new file mode 100644 index 0000000..58f7f1f --- /dev/null +++ b/demo/demolist/Demo6.js @@ -0,0 +1,62 @@ +/** + * + * @title Tree基本使用事例自定义图标 + * @description 添加openIcon、closeIcon属性 + * + */ + + +import React, { + Component +} from 'react'; +import Tree from '../../src'; + +const TreeNode = Tree.TreeNode; + +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; + + +export default Demo1; \ No newline at end of file diff --git a/demo/index.js b/demo/index.js index cc5f3b5..0f859cc 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 DemoArray = [{"example":,"title":" Tree基本使用事例","code":"/**\n*\n* @title Tree基本使用事例\n* @description 事例涵盖 checkbox如何选择，disable状态和部分选择状态。\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport Tree from 'bee-tree';\n\nconst TreeNode = Tree.TreeNode;\n\nconst defaultProps = {\n\tkeys: ['0-0-0', '0-0-1']\n}\nconsole.log(Tree);\nclass Demo1 extends Component {\n\tconstructor(props) {\n\t\tsuper(props);\n\t const keys = this.props.keys;\n\t this.state = {\n\t defaultExpandedKeys: keys,\n\t defaultSelectedKeys: keys,\n\t defaultCheckedKeys: keys,\n\t };\n\t}\n\tonSelect(info) {\n\t console.log('selected', info);\n\t}\n\tonCheck(info) {\n\t console.log('onCheck', info);\n\t}\n\trender() {\n\t return (\n\t \n\t \n\t \n\t \n\t \n\t \n\t \n\t sss} key=\"0-0-1-0\" />\n\t \n\t \n\t \n\t );\n\t}\n}\n\nDemo1.defaultProps = defaultProps;\n\n\n","desc":" 事例涵盖 checkbox如何选择，disable状态和部分选择状态。"},{"example":,"title":" Tree数据可控事例","code":"/**\n*\n* @title Tree数据可控事例\n* @description\n*\n*/\n/*\nconst x = 3;\nconst y = 2;\nconst z = 1;\nconst gData = [];\n\nconst generateData = (_level, _preKey, _tns) => {\n const preKey = _preKey || '0';\n const tns = _tns || gData;\n\n const children = [];\n for (let i = 0; i < x; i++) {\n const key = `${preKey}-${i}`;\n tns.push({ title: key, key });\n if (i < y) {\n children.push(key);\n }\n }\n if (_level < 0) {\n return tns;\n }\n const level = _level - 1;\n children.forEach((key, index) => {\n tns[index].children = [];\n return generateData(level, key, tns[index].children);\n });\n};\ngenerateData(z);\n*/\n\n\nimport React, { Component } from 'react';\nimport Tree from 'bee-tree';\n\nconst x = 3;\nconst y = 2;\nconst z = 1;\nconst gData = [];\n\nconst generateData = (_level, _preKey, _tns) => {\n const preKey = _preKey || '0';\n const tns = _tns || gData;\n\n const children = [];\n for (let i = 0; i < x; i++) {\n const key = `${preKey}-${i}`;\n tns.push({ title: key, key });\n if (i < y) {\n children.push(key);\n }\n }\n if (_level < 0) {\n return tns;\n }\n const level = _level - 1;\n children.forEach((key, index) => {\n tns[index].children = [];\n return generateData(level, key, tns[index].children);\n });\n};\ngenerateData(z);\n\nconst TreeNode = Tree.TreeNode;\n\n\nclass Demo2 extends Component{\n constructor(props) {\n \tsuper(props);\n this.state = {\n expandedKeys: ['0-0-0', '0-0-1'],\n autoExpandParent: true,\n checkedKeys: ['0-0-0'],\n selectedKeys: [],\n };\n this.onExpand = this.onExpand.bind(this);\n this.onCheck = this.onCheck.bind(this);\n this.onSelect = this.onSelect.bind(this);\n }\n onExpand(expandedKeys) {\n console.log('onExpand', arguments);\n // if not set autoExpandParent to false, if children expanded, parent can not collapse.\n // or, you can remove all expanded children keys.\n this.setState({\n expandedKeys,\n autoExpandParent: false,\n });\n }\n onCheck(checkedKeys) {\n this.setState({\n checkedKeys,\n selectedKeys: ['0-3', '0-4'],\n });\n }\n onSelect(selectedKeys, info) {\n console.log('onSelect', info);\n this.setState({ selectedKeys });\n }\n render() {\n const loop = data => data.map((item) => {\n if (item.children) {\n return (\n \n {loop(item.children)}\n \n );\n }\n return ;\n });\n return (\n \n {loop(gData)}\n \n );\n }\n};\n\n\n","desc":""},{"example":,"title":" Tree 拖拽使用事例","code":"/**\n*\n* @title Tree 拖拽使用事例\n* @description 拖动结点插入到另一个结点后面或者其他的父节点里面。\n*\n*/\n\n\n\nimport React, { Component } from 'react';\nimport Tree from 'bee-tree';\n\nconst x = 3;\nconst y = 2;\nconst z = 1;\nconst gData = [];\n\nconst generateData = (_level, _preKey, _tns) => {\n const preKey = _preKey || '0';\n const tns = _tns || gData;\n\n const children = [];\n for (let i = 0; i < x; i++) {\n const key = `${preKey}-${i}`;\n tns.push({ title: key, key });\n if (i < y) {\n children.push(key);\n }\n }\n if (_level < 0) {\n return tns;\n }\n const level = _level - 1;\n children.forEach((key, index) => {\n tns[index].children = [];\n return generateData(level, key, tns[index].children);\n });\n};\ngenerateData(z);\n\nconst TreeNode = Tree.TreeNode;\n\nclass Demo3 extends Component{\n constructor(props) {\n super(props);\n this.state = {\n gData,\n expandedKeys: ['0-0', '0-0-0', '0-0-0-0'],\n };\n this.onDragEnter = this.onDragEnter.bind(this);\n this.onDrop = this.onDrop.bind(this);\n }\n onDragEnter(info) {\n console.log(info);\n // expandedKeys 需要受控时设置\n // this.setState({\n // expandedKeys: info.expandedKeys,\n // });\n }\n onDrop(info) {\n console.log(info);\n const dropKey = info.node.props.eventKey;\n const dragKey = info.dragNode.props.eventKey;\n // const dragNodesKeys = info.dragNodesKeys;\n const loop = (data, key, callback) => {\n data.forEach((item, index, arr) => {\n if (item.key === key) {\n return callback(item, index, arr);\n }\n if (item.children) {\n return loop(item.children, key, callback);\n }\n });\n };\n const data = [...this.state.gData];\n let dragObj;\n loop(data, dragKey, (item, index, arr) => {\n arr.splice(index, 1);\n dragObj = item;\n });\n if (info.dropToGap) {\n let ar;\n let i;\n loop(data, dropKey, (item, index, arr) => {\n ar = arr;\n i = index;\n });\n ar.splice(i, 0, dragObj);\n } else {\n loop(data, dropKey, (item) => {\n item.children = item.children || [];\n // where to insert 示例添加到尾部，可以是随意位置\n item.children.push(dragObj);\n });\n }\n this.setState({\n gData: data,\n });\n }\n render() {\n const loop = data => data.map((item) => {\n if (item.children && item.children.length) {\n return {loop(item.children)};\n }\n return ;\n });\n return (\n \n {loop(this.state.gData)}\n \n );\n }\n};\n\n","desc":" 拖动结点插入到另一个结点后面或者其他的父节点里面。"},{"example":,"title":" Tree可搜索事例","code":"/**\n*\n* @title Tree可搜索事例\n* @description\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport FormControl from 'bee-form-control';\nimport Tree from 'bee-tree';\n\nconst x = 3;\nconst y = 2;\nconst z = 1;\nconst gData = [];\n\nconst generateData = (_level, _preKey, _tns) => {\n const preKey = _preKey || '0';\n const tns = _tns || gData;\n\n const children = [];\n for (let i = 0; i < x; i++) {\n const key = `${preKey}-${i}`;\n tns.push({ title: key, key });\n if (i < y) {\n children.push(key);\n }\n }\n if (_level < 0) {\n return tns;\n }\n const level = _level - 1;\n children.forEach((key, index) => {\n tns[index].children = [];\n return generateData(level, key, tns[index].children);\n });\n};\ngenerateData(z);\n\nconst TreeNode = Tree.TreeNode;\n\nconst dataList = [];\nconst generateList = (data) => {\n for (let i = 0; i < data.length; i++) {\n const node = data[i];\n const key = node.key;\n dataList.push({ key, title: key });\n if (node.children) {\n generateList(node.children, node.key);\n }\n }\n};\ngenerateList(gData);\n\nconst getParentKey = (key, tree) => {\n let parentKey;\n for (let i = 0; i < tree.length; i++) {\n const node = tree[i];\n if (node.children) {\n if (node.children.some(item => item.key === key)) {\n parentKey = node.key;\n } else if (getParentKey(key, node.children)) {\n parentKey = getParentKey(key, node.children);\n }\n }\n }\n return parentKey;\n};\n\n\nclass Demo4 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n expandedKeys: [],\n searchValue: '',\n autoExpandParent: true,\n }\n }\n onExpand = (expandedKeys) => {\n this.setState({\n expandedKeys,\n autoExpandParent: false,\n });\n }\n onChange = (e) => {\n const value = e.target.value;\n const expandedKeys = [];\n dataList.forEach((item) => {\n if (item.key.indexOf(value) > -1) {\n expandedKeys.push(getParentKey(item.key, gData));\n }\n });\n const uniqueExpandedKeys = [];\n expandedKeys.forEach((item) => {\n if (item && uniqueExpandedKeys.indexOf(item) === -1) {\n uniqueExpandedKeys.push(item);\n }\n });\n this.setState({\n expandedKeys: uniqueExpandedKeys,\n searchValue: value,\n autoExpandParent: true,\n });\n }\n render() {\n const { searchValue, expandedKeys, autoExpandParent } = this.state;\n const loop = data => data.map((item) => {\n const index = item.key.search(searchValue);\n const beforeStr = item.key.substr(0, index);\n const afterStr = item.key.substr(index + searchValue.length);\n const title = index > -1 ? (\n \n {beforeStr}\n {searchValue}\n {afterStr}\n \n ) : {item.key};\n if (item.children) {\n return (\n \n {loop(item.children)}\n \n );\n }\n return ;\n });\n return (\n
\n \n \n {loop(gData)}\n \n
\n );\n }\n}\n\n","desc":""},{"example":,"title":" Tree异步数据加载","code":"/**\n*\n* @title Tree异步数据加载\n* @description 当点击展开，异步获取子节点数据\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport Tree from 'bee-tree';\n\nconst x = 3;\nconst y = 2;\nconst z = 1;\nconst gData = [];\n\nconst generateData = (_level, _preKey, _tns) => {\n const preKey = _preKey || '0';\n const tns = _tns || gData;\n\n const children = [];\n for (let i = 0; i < x; i++) {\n const key = `${preKey}-${i}`;\n tns.push({ title: key, key });\n if (i < y) {\n children.push(key);\n }\n }\n if (_level < 0) {\n return tns;\n }\n const level = _level - 1;\n children.forEach((key, index) => {\n tns[index].children = [];\n return generateData(level, key, tns[index].children);\n });\n};\ngenerateData(z);\n\nconst TreeNode = Tree.TreeNode;\n\nfunction generateTreeNodes(treeNode) {\n const arr = [];\n const key = treeNode.props.eventKey;\n for (let i = 0; i < 3; i++) {\n arr.push({ name: `leaf ${key}-${i}`, key: `${key}-${i}` });\n }\n return arr;\n}\n\nfunction setLeaf(treeData, curKey, level) {\n const loopLeaf = (data, lev) => {\n const l = lev - 1;\n data.forEach((item) => {\n if ((item.key.length > curKey.length) ? item.key.indexOf(curKey) !== 0 :\n curKey.indexOf(item.key) !== 0) {\n return;\n }\n if (item.children) {\n loopLeaf(item.children, l);\n } else if (l < 1) {\n item.isLeaf = true;\n }\n });\n };\n loopLeaf(treeData, level + 1);\n}\n\nfunction getNewTreeData(treeData, curKey, child, level) {\n const loop = (data) => {\n if (level < 1 || curKey.length - 3 > level * 2) return;\n data.forEach((item) => {\n if (curKey.indexOf(item.key) === 0) {\n if (item.children) {\n loop(item.children);\n } else {\n item.children = child;\n }\n }\n });\n };\n loop(treeData);\n setLeaf(treeData, curKey, level);\n}\n\nclass Demo5 extends Component{\n constructor(props) {\n super(props);\n this.state = {\n treeData: [],\n };\n this.onSelect = this.onSelect.bind(this);\n this.onLoadData = this.onLoadData.bind(this);\n }\n componentDidMount() {\n setTimeout(() => {\n this.setState({\n treeData: [\n { name: 'pNode 01', key: '0-0' },\n { name: 'pNode 02', key: '0-1' },\n { name: 'pNode 03', key: '0-2', isLeaf: true },\n ],\n });\n }, 100);\n }\n onSelect(info) {\n console.log('selected', info);\n }\n onLoadData(treeNode) {\n return new Promise((resolve) => {\n setTimeout(() => {\n const treeData = [...this.state.treeData];\n getNewTreeData(treeData, treeNode.props.eventKey, generateTreeNodes(treeNode), 2);\n this.setState({ treeData });\n resolve();\n }, 1000);\n });\n }\n render() {\n const loop = data => data.map((item) => {\n if (item.children) {\n return {loop(item.children)};\n }\n return ;\n });\n const treeNodes = loop(this.state.treeData);\n return (\n \n {treeNodes}\n \n );\n }\n};\n\n","desc":" 当点击展开，异步获取子节点数据"}] +var Demo1 = require("./demolist/Demo1");var Demo6 = require("./demolist/Demo6");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 添加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属性"}] class Demo extends Component { diff --git a/docs/api.md b/docs/api.md index 9ce1c45..13248dd 100644 --- a/docs/api.md +++ b/docs/api.md @@ -18,13 +18,15 @@ |checkStrictly|精细的检查每个节点|bool|false |defaultSelectedKeys|指定选中的节点key|String[]|[] |selectedKeys|指定选中的节点keys(controlled)|String[]|- +|openIcon|自定义展开节点图标的名称[参考这里](http://bee.tinper.org/bee-icon)String[]|- +|closeIcon|自定义关闭节点图标的名称[参考这里](http://bee.tinper.org/bee-icon)String[]|- |onExpand|当打开或关闭树节点触发的方法|function(expandedKeys, {expanded: bool, node})|- |onCheck|当选择事件发生触发的方法|function(checkedKeys, e:{checked: bool, checkedNodes, node, event})|- |onSelect|当用户选择树节点触发的回调函数|function(selectedKeys, e:{selected: bool, selectedNodes, node, event})|- |filterTreeNode|过滤树节点的方法（highlight）,当返回true,相关联的节点会高亮|function(node)|- |loadData|异步加载数据|function(node)|- |onRightClick|当用户点击右键触发的回调函数|function({event,node})|- -|draggable|树是否可拖拽（IE>8| bool|false +|draggable|树是否可拖拽（IE>8| bool|false |onDragStart|当树节点刚开始拖拽所触发的放方法|function({event,node})|- |onDragEnter|当拖拽进入触发的方法|function({event,node,expandedKeys})|- |onDragOver|当拖拽经过触发的方法|function({event,node})|- @@ -37,6 +39,6 @@ |:---|:-----|:----|:------| |disabled|节点是否不可用|bool|false |disableCheckbox|节点的checkbox是否不可用|bool|false -|title|名称标题|String/element |-- +|title|名称标题|String/element |-- |key|节点key,和(default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys一起用，必须是唯一的|String|- |isLeaf|是否是叶子节点|bool|false diff --git a/src/Tree.js b/src/Tree.js index 6b454cd..ce75bff 100644 --- a/src/Tree.js +++ b/src/Tree.js @@ -1,15 +1,21 @@ /* eslint no-console:0 */ -import React, { PropTypes } from 'react'; +import React, { + PropTypes +} from 'react'; import assign from 'object-assign'; import classNames from 'classnames'; import { - loopAllChildren, isInclude, getOffset, - filterParentPosition, handleCheckState, getCheck, - getStrictlyValue, arraysEqual, + loopAllChildren, + isInclude, + getOffset, + filterParentPosition, + handleCheckState, + getCheck, + getStrictlyValue, + arraysEqual, } from './util'; -function noop() { -} +function noop() {} class Tree extends React.Component { constructor(props) { @@ -114,11 +120,17 @@ class Tree extends React.Component { } onDragOver(e, treeNode) { - this.props.onDragOver({ event: e, node: treeNode }); + this.props.onDragOver({ + event: e, + node: treeNode + }); } onDragLeave(e, treeNode) { - this.props.onDragLeave({ event: e, node: treeNode }); + this.props.onDragLeave({ + event: e, + node: treeNode + }); } onDrop(e, treeNode) { @@ -156,7 +168,10 @@ class Tree extends React.Component { this.setState({ dragOverNodeKey: '', }); - this.props.onDragEnd({ event: e, node: treeNode }); + this.props.onDragEnd({ + event: e, + node: treeNode + }); } onExpand(treeNode) { @@ -170,15 +185,22 @@ class Tree extends React.Component { expandedKeys.splice(index, 1); } if (!controlled) { - this.setState({ expandedKeys }); + this.setState({ + expandedKeys + }); } - this.props.onExpand(expandedKeys, { node: treeNode, expanded }); + this.props.onExpand(expandedKeys, { + node: treeNode, + expanded + }); // after data loaded, need set new expandedKeys if (expanded && this.props.loadData) { return this.props.loadData(treeNode).then(() => { if (!controlled) { - this.setState({ expandedKeys }); + this.setState({ + expandedKeys + }); } }); } @@ -284,11 +306,17 @@ class Tree extends React.Component { } onMouseEnter(e, treeNode) { - this.props.onMouseEnter({ event: e, node: treeNode }); + this.props.onMouseEnter({ + event: e, + node: treeNode + }); } onMouseLeave(e, treeNode) { - this.props.onMouseLeave({ event: e, node: treeNode }); + this.props.onMouseLeave({ + event: e, + node: treeNode + }); } onContextMenu(e, treeNode) { @@ -309,7 +337,10 @@ class Tree extends React.Component { this.setState({ selectedKeys, }); - this.props.onRightClick({ event: e, node: treeNode }); + this.props.onRightClick({ + event: e, + node: treeNode + }); } // all keyboard events callbacks run from here at first @@ -336,9 +367,7 @@ class Tree extends React.Component { filterExpandedKeys.push(newKey); } else if (props.autoExpandParent) { expandedPositionArr.forEach(p => { - if ((p.split('-').length > pos.split('-').length - && isInclude(pos.split('-'), p.split('-')) || pos === p) - && filterExpandedKeys.indexOf(newKey) === -1) { + if ((p.split('-').length > pos.split('-').length && isInclude(pos.split('-'), p.split('-')) || pos === p) && filterExpandedKeys.indexOf(newKey) === -1) { filterExpandedKeys.push(newKey); } }); @@ -477,6 +506,8 @@ class Tree extends React.Component { openTransitionName: this.getOpenTransitionName(), openAnimation: props.openAnimation, filterTreeNode: this.filterTreeNode.bind(this), + openIcon: props.openIcon, + closeIcon: props.closeIcon }; if (props.checkable) { cloneProps.checkable = props.checkable; @@ -638,4 +669,4 @@ Tree.defaultProps = { onDragEnd: noop, }; -export default Tree; +export default Tree; \ No newline at end of file diff --git a/src/Tree.scss b/src/Tree.scss index 33fde3a..a85d715 100644 --- a/src/Tree.scss +++ b/src/Tree.scss @@ -318,3 +318,14 @@ -webkit-transition: height 0.2s cubic-bezier(0.215, 0.61, 0.355, 1); transition: height 0.2s cubic-bezier(0.215, 0.61, 0.355, 1); } + +/** + * 自定义switcher图标 + */ + +.u-tree li span.u-tree-switcher.uf { + font-size: 14px; + &:after{ + content:""; + } +} \ No newline at end of file diff --git a/src/TreeNode.js b/src/TreeNode.js index 23a8739..9bcdd4b 100644 --- a/src/TreeNode.js +++ b/src/TreeNode.js @@ -1,8 +1,12 @@ -import React, { PropTypes } from 'react'; +import React, { + PropTypes +} from 'react'; import assign from 'object-assign'; import classNames from 'classnames'; import Animate from 'bee-animate'; -import { browser } from './util'; +import { + browser +} from './util'; const browserUa = typeof window !== 'undefined' ? browser(window.navigator) : ''; const ieOrEdge = /.*(IE|Edge).+/.test(browserUa); @@ -36,17 +40,17 @@ class TreeNode extends React.Component { } componentDidMount() { - if (!this.props.root._treeNodeInstances) { - this.props.root._treeNodeInstances = []; + if (!this.props.root._treeNodeInstances) { + this.props.root._treeNodeInstances = []; + } + this.props.root._treeNodeInstances.push(this); } - this.props.root._treeNodeInstances.push(this); - } - // shouldComponentUpdate(nextProps) { - // if (!nextProps.expanded) { - // return false; - // } - // return true; - // } + // shouldComponentUpdate(nextProps) { + // if (!nextProps.expanded) { + // return false; + // } + // return true; + // } onCheck() { this.props.root.onCheck(this); @@ -128,7 +132,9 @@ class TreeNode extends React.Component { const callbackPromise = this.props.root.onExpand(this); if (callbackPromise && typeof callbackPromise === 'object') { const setLoading = (dataLoading) => { - this.setState({ dataLoading }); + this.setState({ + dataLoading + }); }; setLoading(true); callbackPromise.then(() => { @@ -145,6 +151,7 @@ class TreeNode extends React.Component { } renderSwitcher(props, expandedState) { + let stateIcon; const prefixCls = props.prefixCls; const switcherCls = { [`${prefixCls}-switcher`]: true, @@ -157,6 +164,15 @@ class TreeNode extends React.Component { switcherCls[`${prefixCls}-center_${expandedState}`] = !props.last; switcherCls[`${prefixCls}-bottom_${expandedState}`] = props.last; } + + if (expandedState === 'open' && props.openIcon) { + stateIcon = `uf ${props.openIcon}`; + } + if (expandedState === 'close' && props.closeIcon) { + stateIcon = [`uf ${props.closeIcon}`]; + } + switcherCls[stateIcon] = stateIcon; + if (props.disabled) { switcherCls[`${prefixCls}-switcher-disabled`] = true; return ; @@ -200,10 +216,10 @@ class TreeNode extends React.Component { let newChildren = children; if (children && (children.type === TreeNode || - Array.isArray(children) && - children.every((item) => { - return item.type === TreeNode; - }))) { + Array.isArray(children) && + children.every((item) => { + return item.type === TreeNode; + }))) { const cls = { [`${props.prefixCls}-child-tree`]: true, [`${props.prefixCls}-child-tree-open`]: props.expanded, @@ -246,6 +262,8 @@ class TreeNode extends React.Component { let canRenderSwitcher = true; const content = props.title; let newChildren = this.renderChildren(props); + let openIconCls = false, + closeIconCls = false; if (!newChildren || newChildren === props.children) { // content = newChildren; newChildren = null; @@ -262,9 +280,8 @@ class TreeNode extends React.Component { const iconEleCls = { [`${prefixCls}-iconEle`]: true, [`${prefixCls}-icon_loading`]: this.state.dataLoading, - [`${prefixCls}-icon__${iconState}`]: true, + [`${prefixCls}-icon__${iconState}`]: true }; - const selectHandle = () => { const icon = (props.showIcon || props.loadData && this.state.dataLoading) ? : null; @@ -374,10 +391,12 @@ TreeNode.propTypes = { isLeaf: PropTypes.bool, root: PropTypes.object, onSelect: PropTypes.func, + openIcon: PropTypes.string, + closeIcon: PropTypes.string }; TreeNode.defaultProps = { title: defaultTitle, }; -export default TreeNode; +export default TreeNode; \ No newline at end of file