feat: update tree-select

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 },

components/tree-select/interface.jsx

@@ -34,4 +34,5 @@ export const TreeSelectProps = () => ({
   labelInValue: PropTypes.bool,
   treeCheckStrictly: PropTypes.bool,
   getPopupContainer: PropTypes.func,
+  suffixIcon: PropTypes.any,
 })

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,
 }

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)

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),