ant-design · afc163 · Sep 23, 2019 · Sep 19, 2019 · Sep 20, 2019 · Sep 22, 2019
diff --git a/components/tree-select/__tests__/__snapshots__/demo.test.js.snap b/components/tree-select/__tests__/__snapshots__/demo.test.js.snap
@@ -179,6 +179,148 @@ exports[`renders ./components/tree-select/demo/checkable.md correctly 1`] = `
 </span>
 `;
 
+exports[`renders ./components/tree-select/demo/clear-remove-icon.md correctly 1`] = `
+<span
+  aria-haspopup="listbox"
+  class="ant-select ant-select-enabled ant-select-allow-clear"
+  role="combobox"
+  style="width:300px"
+  tabindex="-1"
+>
+  <span
+    class="ant-select-selection ant-select-selection--multiple"
+  >
+    <ul
+      class="ant-select-selection__rendered"
+      role="menubar"
+    >
+      <li
+        class="ant-select-selection__choice"
+        role="menuitem"
+        style="user-select:none;-webkit-user-select:none"
+        title="my leaf"
+        unselectable="unselectable"
+      >
+        <span
+          class="ant-select-selection__choice__remove"
+        >
+          <i
+            aria-label="icon: dislike"
+            class="anticon anticon-dislike ant-select-remove-icon"
+          >
+            <svg
+              aria-hidden="true"
+              class=""
+              data-icon="dislike"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M885.9 490.3c3.6-12 5.4-24.4 5.4-37 0-28.3-9.3-55.5-26.1-77.7 3.6-12 5.4-24.4 5.4-37 0-28.3-9.3-55.5-26.1-77.7 3.6-12 5.4-24.4 5.4-37 0-51.6-30.7-98.1-78.3-118.4a66.1 66.1 0 0 0-26.5-5.4H144c-17.7 0-32 14.3-32 32v364c0 17.7 14.3 32 32 32h129.3l85.8 310.8C372.9 889 418.9 924 470.9 924c29.7 0 57.4-11.8 77.9-33.4 20.5-21.5 31-49.7 29.5-79.4l-6-122.9h239.9c12.1 0 23.9-3.2 34.3-9.3 40.4-23.5 65.5-66.1 65.5-111 0-28.3-9.3-55.5-26.1-77.7zM184 456V172h81v284h-81zm627.2 160.4H496.8l9.6 198.4c.6 11.9-4.7 23.1-14.6 30.5-6.1 4.5-13.6 6.8-21.1 6.7a44.28 44.28 0 0 1-42.2-32.3L329 459.2V172h415.4a56.85 56.85 0 0 1 33.6 51.8c0 9.7-2.3 18.9-6.9 27.3l-13.9 25.4 21.9 19a56.76 56.76 0 0 1 19.6 43c0 9.7-2.3 18.9-6.9 27.3l-13.9 25.4 21.9 19a56.76 56.76 0 0 1 19.6 43c0 9.7-2.3 18.9-6.9 27.3l-14 25.5 21.9 19a56.76 56.76 0 0 1 19.6 43c0 19.1-11 37.5-28.8 48.4z"
+              />
+            </svg>
+          </i>
+        </span>
+        <span
+          class="ant-select-selection__choice__content"
+        >
+          my leaf
+        </span>
+      </li>
+      <li
+        class="ant-select-selection__choice"
+        role="menuitem"
+        style="user-select:none;-webkit-user-select:none"
+        title="your leaf"
+        unselectable="unselectable"
+      >
+        <span
+          class="ant-select-selection__choice__remove"
+        >
+          <i
+            aria-label="icon: dislike"
+            class="anticon anticon-dislike ant-select-remove-icon"
+          >
+            <svg
+              aria-hidden="true"
+              class=""
+              data-icon="dislike"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M885.9 490.3c3.6-12 5.4-24.4 5.4-37 0-28.3-9.3-55.5-26.1-77.7 3.6-12 5.4-24.4 5.4-37 0-28.3-9.3-55.5-26.1-77.7 3.6-12 5.4-24.4 5.4-37 0-51.6-30.7-98.1-78.3-118.4a66.1 66.1 0 0 0-26.5-5.4H144c-17.7 0-32 14.3-32 32v364c0 17.7 14.3 32 32 32h129.3l85.8 310.8C372.9 889 418.9 924 470.9 924c29.7 0 57.4-11.8 77.9-33.4 20.5-21.5 31-49.7 29.5-79.4l-6-122.9h239.9c12.1 0 23.9-3.2 34.3-9.3 40.4-23.5 65.5-66.1 65.5-111 0-28.3-9.3-55.5-26.1-77.7zM184 456V172h81v284h-81zm627.2 160.4H496.8l9.6 198.4c.6 11.9-4.7 23.1-14.6 30.5-6.1 4.5-13.6 6.8-21.1 6.7a44.28 44.28 0 0 1-42.2-32.3L329 459.2V172h415.4a56.85 56.85 0 0 1 33.6 51.8c0 9.7-2.3 18.9-6.9 27.3l-13.9 25.4 21.9 19a56.76 56.76 0 0 1 19.6 43c0 9.7-2.3 18.9-6.9 27.3l-13.9 25.4 21.9 19a56.76 56.76 0 0 1 19.6 43c0 9.7-2.3 18.9-6.9 27.3l-14 25.5 21.9 19a56.76 56.76 0 0 1 19.6 43c0 19.1-11 37.5-28.8 48.4z"
+              />
+            </svg>
+          </i>
+        </span>
+        <span
+          class="ant-select-selection__choice__content"
+        >
+          your leaf
+        </span>
+      </li>
+      <li
+        class="ant-select-search ant-select-search--inline"
+      >
+        <span
+          class="ant-select-search__field__wrap"
+        >
+          <input
+            aria-autocomplete="list"
+            aria-label="filter select"
+            aria-multiline="false"
+            class="ant-select-search__field"
+            type="text"
+            value=""
+          />
+          <span
+            class="ant-select-search__field__mirror"
+          >
+
+          </span>
+        </span>
+      </li>
+    </ul>
+    <span
+      class="ant-select-selection__clear"
+    >
+      <i
+        aria-label="icon: heart"
+        class="anticon anticon-heart ant-select-clear-icon"
+      >
+        <svg
+          aria-hidden="true"
+          class=""
+          data-icon="heart"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M923 283.6a260.04 260.04 0 0 0-56.9-82.8 264.4 264.4 0 0 0-84-55.5A265.34 265.34 0 0 0 679.7 125c-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5a258.44 258.44 0 0 0-56.9 82.8c-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3.1-35.3-7-69.6-20.9-101.9zM512 814.8S156 586.7 156 385.5C156 283.6 240.3 201 344.3 201c73.1 0 136.5 40.8 167.7 100.4C543.2 241.8 606.6 201 679.7 201c104 0 188.3 82.6 188.3 184.5 0 201.2-356 429.3-356 429.3z"
+          />
+        </svg>
+      </i>
+    </span>
+    <span
+      class="ant-select-search__field__placeholder"
+      style="display:none"
+    >
+      Please select
+    </span>
+  </span>
+</span>
+`;
+
 exports[`renders ./components/tree-select/demo/multiple.md correctly 1`] = `
 <span
   aria-haspopup="listbox"

diff --git a/components/tree-select/demo/clear-remove-icon.md b/components/tree-select/demo/clear-remove-icon.md
@@ -0,0 +1,64 @@
+---
+order: 13
+debug: true
+title:
+  zh-CN: 清空与清除图标
+  en-US: clear and remove icon
+---
+
+## zh-CN
+
+最简单的用法。
+
+## en-US
+
+The most basic usage.
+
+```jsx
+import { TreeSelect, Icon } from 'antd';
+
+const { TreeNode } = TreeSelect;
+const clearIcon = <Icon type="heart" />;
+const removeIcon = <Icon type="dislike" />;
+
+class Demo extends React.Component {
+  state = {
+    value: ['leaf1', 'leaf2'],
+  };
+
+  onChange = value => {
+    console.log(value);
+    this.setState({ value });
+  };
+
+  render() {
+    return (
+      <TreeSelect
+        showSearch
+        clearIcon={clearIcon}
+        removeIcon={removeIcon}
+        style={{ width: 300 }}
+        value={this.state.value}
+        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+        placeholder="Please select"
+        multiple
+        allowClear
+        treeDefaultExpandAll
+        onChange={this.onChange}
+      >
+        <TreeNode value="parent 1" title="parent 1" key="0-1">
+          <TreeNode value="parent 1-0" title="parent 1-0" key="0-1-1">
+            <TreeNode value="leaf1" title="my leaf" key="random" />
+            <TreeNode value="leaf2" title="your leaf" key="random1" />
+          </TreeNode>
+          <TreeNode value="parent 1-1" title="parent 1-1" key="random2">
+            <TreeNode value="sss" title={<b style={{ color: '#08c' }}>sss</b>} key="random3" />
+          </TreeNode>
+        </TreeNode>
+      </TreeSelect>
+    );
+  }
+}
+
+ReactDOM.render(<Demo />, mountNode);
+```
diff --git a/components/tree-select/index.en-US.md b/components/tree-select/index.en-US.md
@@ -38,6 +38,8 @@ Tree selection control.
 | showSearch | Support search or not | boolean | single: `false` \| multiple: `true` |  |
 | size | To set the size of the select input, options: `large` `small` | string | 'default' |  |
 | suffixIcon | The custom suffix icon | ReactNode | - | 3.10.0 |
+| removeIcon | The custom remove icon | ReactNode | - | 3.23.5 |
+| clearIcon | The custom clear icon | ReactNode | - | 3.23.5 |
 | treeCheckable | Whether to show checkbox on the treeNodes | boolean | false |  |
 | treeCheckStrictly | Whether to check nodes precisely (in the `checkable` mode), means parent and child nodes are not associated, and it will make `labelInValue` be true | boolean | false |  |
 | treeData | Data of the treeNodes, manual construction work is no longer needed if this property has been set(ensure the Uniqueness of each value) | array\<{ value, title, children, \[disabled, disableCheckbox, selectable] }> | \[] |  |

diff --git a/components/tree-select/index.tsx b/components/tree-select/index.tsx
@@ -74,6 +74,8 @@ export default class TreeSelect<T extends TreeNodeValue> extends React.Component
       dropdownStyle,
       dropdownClassName,
       suffixIcon,
+      removeIcon,
+      clearIcon,
       getPopupContainer,
       ...restProps
     } = this.props;
@@ -104,10 +106,20 @@ export default class TreeSelect<T extends TreeNodeValue> extends React.Component
         ? React.cloneElement(suffixIcon)
         : suffixIcon)) || <Icon type="down" className={`${prefixCls}-arrow-icon`} />;
 
-    const removeIcon = <Icon type="close" className={`${prefixCls}-remove-icon`} />;
-
-    const clearIcon = (
-      <Icon type="close-circle" className={`${prefixCls}-clear-icon`} theme="filled" />
+    const finalRemoveIcon = (removeIcon &&
+      (React.isValidElement<{ className?: string }>(removeIcon)
+        ? React.cloneElement(removeIcon, {
+            className: classNames(removeIcon.props.className, `${prefixCls}-remove-icon`),
+          })
+        : removeIcon)) || <Icon type="close" className={`${prefixCls}-remove-icon`} />;
+
+    const finalClearIcon = (clearIcon &&
+      (React.isValidElement<{ className?: string }>(clearIcon)
+        ? React.cloneElement(clearIcon, {
+            className: classNames(clearIcon.props.className, `${prefixCls}-clear-icon`),
+          })
+        : clearIcon)) || (
+      <Icon type="close-circle" theme="filled" className={`${prefixCls}-clear-icon`} />
     );
 
     return (
@@ -116,8 +128,8 @@ export default class TreeSelect<T extends TreeNodeValue> extends React.Component
           this.renderSwitcherIcon(prefixCls, nodeProps)
         }
         inputIcon={inputIcon}
-        removeIcon={removeIcon}
-        clearIcon={clearIcon}
+        removeIcon={finalRemoveIcon}
+        clearIcon={finalClearIcon}
         {...rest}
         showSearch={showSearch}
         getPopupContainer={getPopupContainer || getContextPopupContainer}

diff --git a/components/tree-select/index.zh-CN.md b/components/tree-select/index.zh-CN.md
@@ -39,6 +39,8 @@ title: TreeSelect
 | showSearch | 是否支持搜索框 | boolean | 单选：`false` \| 多选：`true` |  |
 | size | 选择框大小，可选 `large` `small` | string | 'default' |  |
 | suffixIcon | 自定义的选择框后缀图标 | ReactNode | - | 3.10.0 |
+| removeIcon | 自定义的多选框清除图标 | ReactNode | - | 3.23.5 |
+| clearIcon | 自定义的多选框清空图标 | ReactNode | - | 3.23.5 |
 | treeCheckable | 显示 checkbox | boolean | false |  |
 | treeCheckStrictly | checkable 状态下节点选择完全受控（父子节点选中状态不再关联），会使得 `labelInValue` 强制为 true | boolean | false |  |
 | treeData | treeNodes 数据，如果设置则不需要手动构造 TreeNode 节点（value 在整个树范围内唯一） | array\<{value, title, children, \[disabled, disableCheckbox, selectable]}> | \[] |  |

diff --git a/components/tree-select/interface.tsx b/components/tree-select/interface.tsx
@@ -52,6 +52,8 @@ export interface TreeSelectProps<T extends TreeNodeValue> extends AbstractSelect
   searchValue?: string;
   showCheckedStrategy?: 'SHOW_ALL' | 'SHOW_PARENT' | 'SHOW_CHILD';
   suffixIcon?: React.ReactNode;
+  removeIcon?: React.ReactNode;
+  clearIcon?: React.ReactNode;
   treeCheckable?: boolean | React.ReactNode;
   treeCheckStrictly?: boolean;
   treeData?: Array<TreeNode>;