From ca81ab3a468f175ab4d31c7359f042a93d1588fe Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Wed, 12 Dec 2018 21:24:12 +0800
Subject: [PATCH] feat: update tree-select

---
 components/tree-select/index.jsx              | 50 ++++++++++++++++++-
 components/tree-select/interface.jsx          |  1 +
 components/vc-tree-select/src/PropTypes.js    |  4 ++
 components/vc-tree-select/src/Select.jsx      | 14 ++----
 .../vc-tree-select/src/SelectTrigger.jsx      |  1 +
 5 files changed, 59 insertions(+), 11 deletions(-)

diff --git a/components/tree-select/index.jsx b/components/tree-select/index.jsx
index a57e8d7fb..e5e345239 100644
--- a/components/tree-select/index.jsx
+++ b/components/tree-select/index.jsx
@@ -4,10 +4,14 @@ import classNames from 'classnames'
 import { TreeSelectProps } from './interface'
 import LocaleReceiver from '../locale-provider/LocaleReceiver'
 import warning from '../_util/warning'
-import { initDefaultProps, getOptionProps, getComponentFromProp, filterEmpty } from '../_util/props-util'
+import { initDefaultProps, getOptionProps, getComponentFromProp, filterEmpty, isValidElement } from '../_util/props-util'
 
 export { TreeData, TreeSelectProps } from './interface'
 
+import Icon from '../icon'
+import omit from 'omit.js'
+import { cloneElement } from '../_util/vnode'
+
 const TreeSelect = {
   TreeNode: { ...TreeNode, name: 'ATreeSelectNode' },
   SHOW_ALL,
@@ -39,6 +43,25 @@ const TreeSelect = {
     blur () {
       this.$refs.vcTreeSelect.blur()
     },
+    renderSwitcherIcon ({ isLeaf, loading }) {
+      const {
+        prefixCls,
+      } = this.$props
+      if (loading) {
+        return (
+          <Icon
+            type='loading'
+            class={`${prefixCls}-switcher-loading-icon`}
+          />
+        )
+      }
+      if (isLeaf) {
+        return null
+      }
+      return (
+        <Icon type='caret-down' class={`${prefixCls}-switcher-icon`} />
+      )
+    },
     onChange () {
       this.$emit('change', ...arguments)
     },
@@ -64,6 +87,7 @@ const TreeSelect = {
     },
     renderTreeSelect (locale) {
       const props = getOptionProps(this)
+
       const {
         prefixCls,
         size,
@@ -72,6 +96,9 @@ const TreeSelect = {
         dropdownClassName,
         ...restProps
       } = props
+      const rest = omit(restProps, ['inputIcon', 'removeIcon', 'clearIcon', 'switcherIcon', 'suffixIcon'])
+      let suffixIcon = getComponentFromProp(this, 'suffixIcon')
+      suffixIcon = Array.isArray(suffixIcon) ? suffixIcon[0] : suffixIcon
       this.updateTreeData(props.treeData || [])
       const cls = {
         [`${prefixCls}-lg`]: size === 'large',
@@ -82,9 +109,28 @@ const TreeSelect = {
       if (checkable) {
         checkable = <span class={`${prefixCls}-tree-checkbox-inner`} />
       }
+
+      const inputIcon = suffixIcon && (
+        isValidElement(suffixIcon)
+          ? cloneElement(suffixIcon) : suffixIcon) || (
+        <Icon type='down' class={`${prefixCls}-arrow-icon`} />
+      )
+
+      const removeIcon = (
+        <Icon type='close' class={`${prefixCls}-remove-icon`} />
+      )
+
+      const clearIcon = (
+        <Icon type='close-circle' class={`${prefixCls}-clear-icon`} theme='filled' />
+      )
+
       const VcTreeSelectProps = {
         props: {
-          ...restProps,
+          switcherIcon: this.renderSwitcherIcon,
+          inputIcon,
+          removeIcon,
+          clearIcon,
+          ...rest,
           dropdownClassName: classNames(dropdownClassName, `${prefixCls}-tree-dropdown`),
           prefixCls,
           dropdownStyle: { maxHeight: '100vh', overflow: 'auto', ...dropdownStyle },
diff --git a/components/tree-select/interface.jsx b/components/tree-select/interface.jsx
index 23564b3cc..22069cf87 100644
--- a/components/tree-select/interface.jsx
+++ b/components/tree-select/interface.jsx
@@ -34,4 +34,5 @@ export const TreeSelectProps = () => ({
   labelInValue: PropTypes.bool,
   treeCheckStrictly: PropTypes.bool,
   getPopupContainer: PropTypes.func,
+  suffixIcon: PropTypes.any,
 })
diff --git a/components/vc-tree-select/src/PropTypes.js b/components/vc-tree-select/src/PropTypes.js
index 3d8af18f1..661715f66 100644
--- a/components/vc-tree-select/src/PropTypes.js
+++ b/components/vc-tree-select/src/PropTypes.js
@@ -107,4 +107,8 @@ export const SelectPropTypes = {
   children: PropTypes.any,
   autoFocus: PropTypes.bool,
   getPopupContainer: PropTypes.func,
+  switcherIcon: PropTypes.func,
+  inputIcon: PropTypes.any,
+  removeIcon: PropTypes.any,
+  clearIcon: PropTypes.any,
 }
diff --git a/components/vc-tree-select/src/Select.jsx b/components/vc-tree-select/src/Select.jsx
index 02ec2861c..b450941de 100644
--- a/components/vc-tree-select/src/Select.jsx
+++ b/components/vc-tree-select/src/Select.jsx
@@ -20,9 +20,6 @@ import { initDefaultProps, getOptionProps, hasProp, getAllProps, getComponentFro
 import BaseMixin from '../../_util/BaseMixin'
 import getTransitionProps from '../../_util/getTransitionProps'
 
-function noop () {
-}
-
 function filterFn (input, child) {
   return String(getPropValue(child, labelCompatible(this.$props.treeNodeFilterProp)))
     .indexOf(input) > -1
@@ -842,7 +839,7 @@ const Select = {
     renderTopControlNode () {
       const { sValue: value } = this.$data
       const props = this.$props
-      const { choiceTransitionName, prefixCls, maxTagTextLength } = props
+      const { choiceTransitionName, prefixCls, maxTagTextLength, removeIcon } = props
       const multiple = isMultiple(props)
 
       // single and not combobox, input is inside dropdown
@@ -887,7 +884,7 @@ const Select = {
               onClick={(event) => {
                 this.removeSelected(singleValue.value, event)
               }}
-            />
+            >{removeIcon}</span>
             <span class={`${prefixCls}-selection__choice__content`}>{content}</span>
           </li>
         )
@@ -946,7 +943,7 @@ const Select = {
     const props = this.$props
     const multiple = isMultiple(props)
     const state = this.$data
-    const { disabled, allowClear, prefixCls } = props
+    const { disabled, allowClear, prefixCls, inputIcon, clearIcon } = props
     const ctrlNode = this.renderTopControlNode()
     let extraSelectionProps = {}
     if (!multiple) {
@@ -970,12 +967,11 @@ const Select = {
       [`${prefixCls}-enabled`]: !disabled,
       [`${prefixCls}-allow-clear`]: !!props.allowClear,
     }
-
     const clear = (<span
       key='clear'
       class={`${prefixCls}-selection__clear`}
       onClick={this.onClearSelection}
-    />)
+    >{clearIcon}</span>)
     const selectTriggerProps = {
       props: {
         ...props,
@@ -1026,7 +1022,7 @@ const Select = {
                 class={`${prefixCls}-arrow`}
                 style={{ outline: 'none' }}
               >
-                <b/>
+                {inputIcon}
               </span>)}
             {multiple
               ? this.getSearchPlaceholderElement(!!state.sInputValue || state.sValue.length)
diff --git a/components/vc-tree-select/src/SelectTrigger.jsx b/components/vc-tree-select/src/SelectTrigger.jsx
index 47830c838..249a13879 100644
--- a/components/vc-tree-select/src/SelectTrigger.jsx
+++ b/components/vc-tree-select/src/SelectTrigger.jsx
@@ -280,6 +280,7 @@ const SelectTrigger = {
           ...child.data,
           props: {
             ...getAllProps(child),
+            switcherIcon: props.switcherIcon,
             title: getComponentFromProp(child, 'title') || getComponentFromProp(child, 'label'),
           },
           key: String(child.key),