From 49719b20d8c473df05d96144b692c353e9315ca0 Mon Sep 17 00:00:00 2001
From: zombieJ <smith3816@gmail.com>
Date: Wed, 4 Apr 2018 16:39:50 +0800
Subject: [PATCH] update tree doc for customize icon (#9893)

* update doc for customize icon
* add test case
---
 .../__tests__/__snapshots__/demo.test.js.snap | 120 +++---------------
 components/tree/demo/customized-icon.md       |  70 ++--------
 components/tree/index.en-US.md                |   1 +
 components/tree/index.zh-CN.md                |   1 +
 4 files changed, 37 insertions(+), 155 deletions(-)

diff --git a/components/tree/__tests__/__snapshots__/demo.test.js.snap b/components/tree/__tests__/__snapshots__/demo.test.js.snap
index 03bed7d2d6..c4f1abe09b 100644
--- a/components/tree/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/tree/__tests__/__snapshots__/demo.test.js.snap
@@ -486,7 +486,7 @@ exports[`renders ./components/tree/demo/basic-controlled.md correctly 1`] = `
 
 exports[`renders ./components/tree/demo/customized-icon.md correctly 1`] = `
 <ul
-  class="ant-tree ant-tree-show-line"
+  class="ant-tree"
   role="tree-node"
   unselectable="on"
 >
@@ -501,8 +501,12 @@ exports[`renders ./components/tree/demo/customized-icon.md correctly 1`] = `
       title="parent 1"
     >
       <span
-        class="ant-tree-iconEle ant-tree-icon__open"
-      />
+        class="ant-tree-iconEle ant-tree-icon__customize"
+      >
+        <i
+          class="anticon anticon-smile-o"
+        />
+      </span>
       <span
         class="ant-tree-title"
       >
@@ -517,111 +521,25 @@ exports[`renders ./components/tree/demo/customized-icon.md correctly 1`] = `
         class=""
       >
         <span
-          class="ant-tree-switcher ant-tree-switcher_open"
+          class="ant-tree-switcher ant-tree-switcher-noop"
         />
         <span
-          class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open ant-tree-node-selected"
-          title="parent 1-0"
+          class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal ant-tree-node-selected"
+          title="leaf"
         >
           <span
-            class="ant-tree-iconEle ant-tree-icon__open"
-          />
-          <span
-            class="ant-tree-title"
+            class="ant-tree-iconEle ant-tree-icon__customize"
           >
-            parent 1-0
-          </span>
-        </span>
-        <ul
-          class="ant-tree-child-tree ant-tree-child-tree-open"
-          data-expanded="true"
-        >
-          <li
-            class=""
-          >
-            <span
-              class="ant-tree-switcher ant-tree-switcher-noop"
+            <i
+              class="anticon anticon-meh-o"
             />
-            <span
-              class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"
-              title="leaf"
-            >
-              <span
-                class="ant-tree-iconEle ant-tree-icon__docu"
-              />
-              <span
-                class="ant-tree-title"
-              >
-                leaf
-              </span>
-            </span>
-          </li>
-          <li
-            class=""
-          >
-            <span
-              class="ant-tree-switcher ant-tree-switcher-noop"
-            />
-            <span
-              class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"
-              title="leaf"
-            >
-              <span
-                class="ant-tree-iconEle ant-tree-icon__docu"
-              />
-              <span
-                class="ant-tree-title"
-              >
-                leaf
-              </span>
-            </span>
-          </li>
-        </ul>
-      </li>
-      <li
-        class=""
-      >
-        <span
-          class="ant-tree-switcher ant-tree-switcher_open"
-        />
-        <span
-          class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"
-          title="parent 1-1"
-        >
-          <span
-            class="ant-tree-iconEle ant-tree-icon__open"
-          />
+          </span>
           <span
             class="ant-tree-title"
           >
-            parent 1-1
+            leaf
           </span>
         </span>
-        <ul
-          class="ant-tree-child-tree ant-tree-child-tree-open"
-          data-expanded="true"
-        >
-          <li
-            class=""
-          >
-            <span
-              class="ant-tree-switcher ant-tree-switcher-noop"
-            />
-            <span
-              class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"
-              title="leaf"
-            >
-              <span
-                class="ant-tree-iconEle ant-tree-icon__docu"
-              />
-              <span
-                class="ant-tree-title"
-              >
-                leaf
-              </span>
-            </span>
-          </li>
-        </ul>
       </li>
       <li
         class=""
@@ -634,8 +552,12 @@ exports[`renders ./components/tree/demo/customized-icon.md correctly 1`] = `
           title="leaf"
         >
           <span
-            class="ant-tree-iconEle ant-tree-icon__docu"
-          />
+            class="ant-tree-iconEle ant-tree-icon__customize"
+          >
+            <i
+              class="anticon anticon-frown-o"
+            />
+          </span>
           <span
             class="ant-tree-title"
           >
diff --git a/components/tree/demo/customized-icon.md b/components/tree/demo/customized-icon.md
index 90e04ecdaa..547ebed9ce 100644
--- a/components/tree/demo/customized-icon.md
+++ b/components/tree/demo/customized-icon.md
@@ -1,6 +1,5 @@
 ---
 order: 6
-debug: true
 title:
   zh-CN: 自定义图标
   en-US: Customize Icon
@@ -8,38 +7,33 @@ title:
 
 ## zh-CN
 
-可以针对不同节点采用样式覆盖的方式定制图标。
+可以针对不同的节点定制图标。
 
 ## en-US
 
-You can customize icons for different nodes by styles override.
+You can customize icons for different nodes.
 
 ````jsx
-import { Tree } from 'antd';
+import { Tree, Icon } 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}
+        defaultExpandAll
+        defaultSelectedKeys={['0-0-0']}
       >
-        <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 icon={<Icon type="smile-o" />} title="parent 1" key="0-0">
+          <TreeNode icon={<Icon type="meh-o" />} title="leaf" key="0-0-0" />
+          <TreeNode
+            icon={({ selected }) => (
+              <Icon type={selected ? 'frown' : 'frown-o'} />
+            )}
+            title="leaf"
+            key="0-0-1"
+          />
         </TreeNode>
       </Tree>
     );
@@ -48,39 +42,3 @@ class Demo extends React.Component {
 
 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;
-  zoom: 1;
-  display: inline-block;
-  font-family: 'anticon';
-  text-rendering: optimizeLegibility;
-  color: #999;
-  transition: transform .3s ease;
-  margin-top: 2px;
-  background: #fff;
-}
-#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;
-}
-```
diff --git a/components/tree/index.en-US.md b/components/tree/index.en-US.md
index 505fd03812..f9ec8fc284 100644
--- a/components/tree/index.en-US.md
+++ b/components/tree/index.en-US.md
@@ -57,6 +57,7 @@ Almost anything can be represented in a tree structure. Examples include directo
 
 ## Note
 
+Before `3.4.0`:
 The number of treeNodes can be very large, but when `checkable=true`,
 it will increase the compute time. So, we cache some calculations (e.g. `this.treeNodesStates`)
 to avoid double computing. But, this brings some restrictions.
diff --git a/components/tree/index.zh-CN.md b/components/tree/index.zh-CN.md
index b982491320..7c908a96a0 100644
--- a/components/tree/index.zh-CN.md
+++ b/components/tree/index.zh-CN.md
@@ -58,6 +58,7 @@ subtitle: 树形控件
 
 ## 注意
 
+在 `3.4.0` 之前：
 树节点可以有很多，但在设置`checkable`时，将会花费更多的计算时间，因此我们缓存了一些计算结果（`this.treeNodesStates`）来复用，避免多次重复计算，以此提高性能。但这也带来了一些限制，当你异步加载树节点时，你需要这样渲染树：
 
 ```jsx