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