feat: Tree with line & Tree customize icon demo (#5261)

* Tree with line & Tree customize icon demo * improve
8 years ago · 27b099e58e
9 changed files with 201 additions and 23 deletions
--- a/components/style/themes/default.less
+++ b/components/style/themes/default.less
@ -265,6 +265,10 @@
@rate-star-color: #f5a623;
@rate-star-bg: #e9e9e9;

+// Tree
+// ---
+@tree-icon-color: #999;
+
 // Card
 // ---
@card-head-height: 48px;
--- a/components/tree-select/style/index.less
+++ b/components/tree-select/style/index.less
@ -77,17 +77,13 @@
        &.@{select-tree-prefix-cls}-center_open,
        &.@{select-tree-prefix-cls}-bottom_open,
        &.@{select-tree-prefix-cls}-noline_open {
-          .antTreeSwitcherIcon();
+          .antTreeSwitcherIcon("open");
        }
        &.@{select-tree-prefix-cls}-roots_close,
        &.@{select-tree-prefix-cls}-center_close,
        &.@{select-tree-prefix-cls}-bottom_close,
        &.@{select-tree-prefix-cls}-noline_close {
-          .antTreeSwitcherIcon();
-          .ie-rotate(3);
-          &:after {
-            transform: rotate(270deg) scale(0.5);
-          }
+          .antTreeSwitcherIcon("close");
        }
      }
    }
--- a/components/tree/demo/customized-icon.md
+++ b/components/tree/demo/customized-icon.md
@ -0,0 +1,90 @@
+---
+order: 6
+title:
+  zh-CN: 自定义图标
+  en-US: Customize Icon
+---
+
+## zh-CN
+
+可以针对不同节点采用样式覆盖的方式定制图标。
+
+## en-US
+
+You can customize icons for different nodes by styles override.
+
+````jsx
+import { Tree } from 'antd';
+const TreeNode = Tree.TreeNode;
+
+class Demo extends React.Component {
+  onSelect = (selectedKeys, info) => {
+    console.log('selected', selectedKeys, info);
+  }
+  render() {
+    return (
+      <Tree
+        showIcon
+        showLine
+        defaultExpandedKeys={['0-0-0', '0-0-1']}
+        defaultSelectedKeys={['0-0-0', '0-0-1']}
+        onSelect={this.onSelect}
+      >
+        <TreeNode title="parent 1" key="0-0">
+          <TreeNode title="parent 1-0" key="0-0-0">
+            <TreeNode title="leaf" key="0-0-0-0" />
+            <TreeNode title="leaf" key="0-0-0-1" />
+          </TreeNode>
+          <TreeNode title="parent 1-1" key="0-0-1">
+            <TreeNode title="leaf" key="0-0-1-0" />
+          </TreeNode>
+          <TreeNode title="leaf" key="0-0-2" />
+        </TreeNode>
+      </Tree>
+    );
+  }
+}
+
+ReactDOM.render(<Demo />, mountNode);
+````
+
+```css
+#components-tree-demo-customized-icon .ant-tree-iconEle {
+  position: absolute;
+  left: 0;
+  background: #fff;
+}
+#components-tree-demo-customized-icon .ant-tree-iconEle::after {
+  font-size: 12px;
+  font-size: 8px \9;
+  transform: scale(0.66666667) rotate(0deg);
+  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1, M12=0, M21=0, M22=1)";
+  zoom: 1;
+  display: inline-block;
+  font-family: 'anticon';
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-weight: bold;
+  color: #999;
+  transition: transform .3s ease;
+  margin-top: 2px;
+}
+#components-tree-demo-customized-icon .ant-tree-iconEle.ant-tree-icon__docu::after {
+  content: "\E664";
+}
+#components-tree-demo-customized-icon .ant-tree-iconEle.ant-tree-icon__open::after {
+  content: "\E699";
+}
+#components-tree-demo-customized-icon .ant-tree-iconEle.ant-tree-icon__close::after {
+  content: "\E662";
+}
+#components-tree-demo-customized-icon .ant-tree-switcher {
+  position: relative;
+  z-index: 1;
+  background: transparent;
+}
+#components-tree-demo-customized-icon .ant-tree-switcher::after {
+  opacity: 0;
+}
+```
--- a/components/tree/demo/line.md
+++ b/components/tree/demo/line.md
@ -0,0 +1,51 @@
+---
+order: 5
+title:
+  zh-CN: 连接线
+  en-US: Tree With Line
+---
+
+## zh-CN
+
+带连接线的树。
+
+## en-US
+
+Tree With Line
+
+````jsx
+import { Tree } from 'antd';
+const TreeNode = Tree.TreeNode;
+
+class Demo extends React.Component {
+  onSelect = (selectedKeys, info) => {
+    console.log('selected', selectedKeys, info);
+  }
+  render() {
+    return (
+      <Tree
+        showLine
+        defaultExpandedKeys={['0-0-0']}
+        onSelect={this.onSelect}
+      >
+        <TreeNode title="parent 1" key="0-0">
+          <TreeNode title="parent 1-0" key="0-0-0">
+            <TreeNode title="leaf" key="0-0-0-0" />
+            <TreeNode title="leaf" key="0-0-0-1" />
+            <TreeNode title="leaf" key="0-0-0-2" />
+          </TreeNode>
+          <TreeNode title="parent 1-1" key="0-0-1">
+            <TreeNode title="leaf" key="0-0-1-0" />
+          </TreeNode>
+          <TreeNode title="parent 1-2" key="0-0-2">
+            <TreeNode title="leaf" key="0-0-2-0" />
+            <TreeNode title="leaf" key="0-0-2-1" />
+          </TreeNode>
+        </TreeNode>
+      </Tree>
+    );
+  }
+}
+
+ReactDOM.render(<Demo />, mountNode);
+````
--- a/components/tree/index.en-US.md
+++ b/components/tree/index.en-US.md
@ -38,6 +38,8 @@ Directory, organization, biological classification, country, and etc. Almost thi
 |onDragLeave | Defines a function will be called when the onDragLeave event occurs | function({event, node}) | - |
 |onDragEnd | Defines a function will be called when the onDragEnd event occurs | function({event, node}) | - |
 |onDrop | Defines a function will be called when the onDrop event occurs | function({event, node, dragNode, dragNodesKeys}) | - |
+|showLine | Whether show connecting line | boolean | false |
+|showIcon | Whether show the icon before TreeNode title, which has no default style, you must set custom style for it if set to true | boolean | false |

 ### TreeNode props

--- a/components/tree/index.tsx
+++ b/components/tree/index.tsx
@ -1,6 +1,7 @@
 import React from 'react';
 import RcTree, { TreeNode } from 'rc-tree';
 import animation from '../_util/openAnimation';
+import classNames from 'classnames';

 export interface AntTreeNodeProps {
  disabled?: boolean;
@ -96,11 +97,16 @@ export default class Tree extends React.Component<TreeProps, any> {

  render() {
    const props = this.props;
+    const { prefixCls, className, showLine } = props;
    let checkable = props.checkable;
+    const classString = classNames({
+      [`${prefixCls}-show-line`]: !!showLine,
+    }, className);
    return (
      <RcTree
        {...props}
-        checkable={checkable ? (<span className={`${props.prefixCls}-checkbox-inner`} />) : checkable }
+        className={classString}
+        checkable={checkable ? (<span className={`${prefixCls}-checkbox-inner`} />) : checkable }
      >
        {this.props.children}
      </RcTree>
--- a/components/tree/index.zh-CN.md
+++ b/components/tree/index.zh-CN.md
@ -39,6 +39,8 @@ subtitle: 树形控件
 |onDragLeave | dragleave 触发时调用 | function({event, node}) | - |
 |onDragEnd | dragend 触发时调用 | function({event, node}) | - |
 |onDrop | drop 触发时调用 | function({event, node, dragNode, dragNodesKeys}) | - |
+|showLine | 是否展示连接线 | boolean | false |
+|showIcon | 是否展示 TreeNode title 前的图标，没有默认样式，如设置为 true，需要自行定义图标相关样式 | boolean | false |

 ### TreeNode props

--- a/components/tree/style/index.less
+++ b/components/tree/style/index.less
@ -21,7 +21,7 @@
      user-select: none;
      border-top: 2px transparent solid;
      border-bottom: 2px transparent solid;
-
+      margin-top: -2px;
      /* Required to make elements draggable in old WebKit */
      -khtml-user-drag: element;
      -webkit-user-drag: element;
@ -96,23 +96,27 @@
      }
      &.@{tree-prefix-cls}-switcher {
        &.@{tree-prefix-cls}-switcher-noop {
-          cursor: auto;
+          cursor: default;
        }
        &.@{tree-prefix-cls}-roots_open,
        &.@{tree-prefix-cls}-center_open,
        &.@{tree-prefix-cls}-bottom_open,
        &.@{tree-prefix-cls}-noline_open {
-          .antTreeSwitcherIcon();
+          .antTreeSwitcherIcon("open");
        }
        &.@{tree-prefix-cls}-roots_close,
        &.@{tree-prefix-cls}-center_close,
        &.@{tree-prefix-cls}-bottom_close,
        &.@{tree-prefix-cls}-noline_close {
-          .antTreeSwitcherIcon();
-          .ie-rotate(3);
-          &:after {
-            transform: rotate(270deg) scale(0.6);
-          }
+          .antTreeSwitcherIcon("close");
+        }
+      }
+    }
+    &:last-child > span {
+      &.@{tree-prefix-cls}-switcher,
+      &.@{tree-prefix-cls}-iconEle {
+        &:before {
+          display: none;
        }
      }
    }
@ -147,4 +151,27 @@
    margin-right: 2px;
    vertical-align: top;
  }
+  // Tree with line
+  &&-show-line {
+    li {
+      position: relative;
+      span {
+        &.@{tree-prefix-cls}-switcher {
+          background: @component-background;
+          &.@{tree-prefix-cls}-switcher-noop {
+            .antTreeSwitcherIcon("doc");
+          }
+        }
+      }
+    }
+    li:not(:last-child):before {
+      content: ' ';
+      width: 1px;
+      border-left: 1px solid @border-color-base;
+      height: 100%;
+      position: absolute;
+      left: 6px;
+      margin: 16px 0;
+    }
+  }
 }
--- a/components/tree/style/mixin.less
+++ b/components/tree/style/mixin.less
@ -1,16 +1,16 @@
@import "../../style/mixins/index";

-.antTreeSwitcherIcon() {
-  position: relative;
+@open: "\e621";
+@close: "\e645";
+@doc: "\e664";
+
+.antTreeSwitcherIcon(@type) {
  &:after {
-    .iconfont-size-under-12px(7px);
+    .iconfont-size-under-12px(8px);
    display: inline-block;
-    .iconfont-font("\e606");
+    .iconfont-font(@@type);
    font-weight: bold;
-    position: absolute;
-    top: 0;
-    right: 4px;
-    color: @text-color;
+    color: @tree-icon-color;
    transition: transform .3s ease;
  }
 }