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 (
+
+ )
+ }
+ if (isLeaf) {
+ return null
+ }
+ return (
+
+ )
+ },
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 =
}
+
+ const inputIcon = suffixIcon && (
+ isValidElement(suffixIcon)
+ ? cloneElement(suffixIcon) : suffixIcon) || (
+
+ )
+
+ const removeIcon = (
+
+ )
+
+ const clearIcon = (
+
+ )
+
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}
{content}
)
@@ -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 = ()
+ >{clearIcon})
const selectTriggerProps = {
props: {
...props,
@@ -1026,7 +1022,7 @@ const Select = {
class={`${prefixCls}-arrow`}
style={{ outline: 'none' }}
>
-
+ {inputIcon}
)}
{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),