add：自定义icon

2017-10-18 10:59:51 +08:00 · 2017-10-18 10:59:51 +08:00 · 531e81063b
parent a0815f0107
commit 531e81063b
6 changed files with 167 additions and 42 deletions
--- a/demo/demolist/Demo6.js
+++ 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 (
+
+			<Tree className="myCls"  checkable openIcon="uf-minus" closeIcon="uf-plus"
+	        defaultExpandedKeys={this.state.defaultExpandedKeys}
+	        defaultSelectedKeys={this.state.defaultSelectedKeys}
+	        defaultCheckedKeys={this.state.defaultCheckedKeys}
+	        onSelect={this.onSelect} onCheck={this.onCheck}
+	      >
+	        <TreeNode title="parent 1" key="0-0">
+	          <TreeNode title="parent 1-0" key="0-0-0" disabled>
+	            <TreeNode title="leaf" key="0-0-0-0" disableCheckbox />
+	            <TreeNode title="leaf" key="0-0-0-1" />
+	          </TreeNode>
+	          <TreeNode title="parent 1-1" key="0-0-1">
+	            <TreeNode title={<span style={{ color: '#08c' }}>sss</span>} key="0-0-1-0" />
+	          </TreeNode>
+	        </TreeNode>
+	      </Tree>
+		);
+	}
+}
+
+Demo1.defaultProps = defaultProps;
+
+
+export default Demo1;
--- a/demo/index.js
+++ b/demo/index.js
--- 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
--- 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;
--- 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:"";
+  }
+}
--- 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 <span className={classNames(switcherCls)}></span>;
@ -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) ?
        <span className={classNames(iconEleCls)}></span> : 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;