From 02c3af5c7c86271a95df5dc95dee6782aca72ff7 Mon Sep 17 00:00:00 2001 From: tanjinzhou <415800467@qq.com> Date: Wed, 21 Oct 2020 18:33:15 +0800 Subject: [PATCH] fix: tree-select search value logic --- .../vc-tree-select/src/Base/BaseSelector.jsx | 1 + components/vc-tree-select/src/SearchInput.jsx | 45 ++++++-------- components/vc-tree-select/src/Select.jsx | 6 +- .../src/Selector/MultipleSelector/index.jsx | 9 +-- .../src/Selector/SingleSelector.jsx | 58 ++++++++++++++----- 5 files changed, 68 insertions(+), 51 deletions(-) diff --git a/components/vc-tree-select/src/Base/BaseSelector.jsx b/components/vc-tree-select/src/Base/BaseSelector.jsx index 0a3beed21..f6a22aa13 100644 --- a/components/vc-tree-select/src/Base/BaseSelector.jsx +++ b/components/vc-tree-select/src/Base/BaseSelector.jsx @@ -32,6 +32,7 @@ export const selectorPropTypes = () => ({ focused: PropTypes.looseBool, isMultiple: PropTypes.looseBool, showSearch: PropTypes.looseBool, + searchValue: PropTypes.string, }); function noop() {} diff --git a/components/vc-tree-select/src/SearchInput.jsx b/components/vc-tree-select/src/SearchInput.jsx index b7f8dcea9..cdf453d38 100644 --- a/components/vc-tree-select/src/SearchInput.jsx +++ b/components/vc-tree-select/src/SearchInput.jsx @@ -20,19 +20,23 @@ const SearchInput = { renderPlaceholder: PropTypes.func, needAlign: PropTypes.looseBool, ariaId: PropTypes.string, + isMultiple: PropTypes.looseBool.def(true), }, setup(props) { const measureRef = ref(); const inputWidth = ref(0); // We measure width and set to the input immediately onMounted(() => { - watch( - computed(()=>props.searchValue), - () => { - inputWidth.value = measureRef.value.scrollWidth; - }, - { flush: 'post' }, - ); + if(props.isMultiple) { + watch( + computed(()=>props.searchValue), + () => { + inputWidth.value = measureRef.value.scrollWidth; + }, + { flush: 'post', immediate: true }, + ); + } + }); return { measureRef, @@ -52,15 +56,11 @@ const SearchInput = { }, created() { this.inputRef = createRef(); - // this.mirrorInputRef = createRef(); this.prevProps = { ...this.$props }; }, mounted() { this.$nextTick(() => { - const { open, needAlign } = this.$props; - if (needAlign) { - this.alignInputWidth(); - } + const { open } = this.$props; if (open) { this.focus(true); @@ -75,22 +75,11 @@ const SearchInput = { if (open && prevProps.open !== open) { this.focus(); } - // if (needAlign && searchValue !== prevProps.searchValue) { - // this.alignInputWidth(); - // } + this.prevProps = { ...this.$props }; }); }, methods: { - /** - * `scrollWidth` is not correct in IE, do the workaround. - * ref: https://github.com/react-component/tree-select/issues/65 - * clientWidth 0 when mounted in vue. why? - */ - // alignInputWidth() { - // this.inputRef.current.style.width = `${this.mirrorInputRef.current.clientWidth || - // this.mirrorInputRef.current.offsetWidth}px`; - // }, /** * Need additional timeout for focus cause parent dom is not ready when didMount trigger @@ -125,7 +114,7 @@ const SearchInput = { }, render() { - const { searchValue, prefixCls, disabled, renderPlaceholder, open, ariaId } = this.$props; + const { searchValue, prefixCls, disabled, renderPlaceholder, open, ariaId, isMultiple } = this.$props; const { vcTreeSelect: { onSearchInputKeyDown }, handleInputChange, @@ -134,7 +123,7 @@ const SearchInput = { } = this; return ( <> - + {withDirectives( , [[antInput]], )} - + {isMultiple ? {mirrorSearchValue}  - + : null} {renderPlaceholder && !mirrorSearchValue ? renderPlaceholder() : null} diff --git a/components/vc-tree-select/src/Select.jsx b/components/vc-tree-select/src/Select.jsx index 240491eeb..8cd92746e 100644 --- a/components/vc-tree-select/src/Select.jsx +++ b/components/vc-tree-select/src/Select.jsx @@ -29,8 +29,6 @@ import KeyCode from '../../_util/KeyCode'; import SelectTrigger from './SelectTrigger'; import SingleSelector from './Selector/SingleSelector'; import MultipleSelector from './Selector/MultipleSelector'; -import SinglePopup from './Popup/SinglePopup'; -import MultiplePopup from './Popup/MultiplePopup'; import { SHOW_ALL, SHOW_PARENT, SHOW_CHILD } from './strategies'; import BaseMixin from '../../_util/BaseMixin'; @@ -58,6 +56,7 @@ import { getPropsData, findDOMNode, } from '../../_util/props-util'; +import BasePopup from './Popup/MultiplePopup'; function getWatch(keys = []) { const watch = {}; keys.forEach(k => { @@ -1092,8 +1091,7 @@ const Select = defineComponent({ ref: this.setPopupRef, }; - const Popup = isMultiple ? MultiplePopup : SinglePopup; - const $popup = ; + const $popup = ; const Selector = isMultiple ? MultipleSelector : SingleSelector; const $selector = ; diff --git a/components/vc-tree-select/src/Selector/MultipleSelector/index.jsx b/components/vc-tree-select/src/Selector/MultipleSelector/index.jsx index e3be42087..a3780aa5d 100644 --- a/components/vc-tree-select/src/Selector/MultipleSelector/index.jsx +++ b/components/vc-tree-select/src/Selector/MultipleSelector/index.jsx @@ -23,7 +23,6 @@ const MultipleSelector = { ...SearchInput.props, selectorValueList: PropTypes.array, disabled: PropTypes.looseBool, - searchValue: PropTypes.string, labelInValue: PropTypes.looseBool, maxTagCount: PropTypes.number, maxTagPlaceholder: PropTypes.any, @@ -142,11 +141,9 @@ const MultipleSelector = { selectedValueNodes.push( {children} diff --git a/components/vc-tree-select/src/Selector/SingleSelector.jsx b/components/vc-tree-select/src/Selector/SingleSelector.jsx index 47c5e4f0d..fab71f15e 100644 --- a/components/vc-tree-select/src/Selector/SingleSelector.jsx +++ b/components/vc-tree-select/src/Selector/SingleSelector.jsx @@ -2,6 +2,7 @@ import generateSelector, { selectorPropTypes } from '../Base/BaseSelector'; import { toTitle } from '../util'; import { getOptionProps } from '../../../_util/props-util'; import { createRef } from '../util'; +import SearchInput from '../SearchInput'; const Selector = generateSelector('single'); const SingleSelector = { @@ -10,31 +11,61 @@ const SingleSelector = { props: selectorPropTypes(), created() { this.selectorRef = createRef(); + this.inputRef = createRef(); }, methods: { + onPlaceholderClick() { + this.inputRef.current.focus(); + }, focus() { this.selectorRef.current.focus(); }, blur() { this.selectorRef.current.blur(); }, - renderSelection() { - const { selectorValueList, placeholder, prefixCls } = this.$props; + _renderPlaceholder() { + const { + prefixCls, + placeholder, + searchPlaceholder, + searchValue, + selectorValueList, + } = this.$props; + const currentPlaceholder = placeholder || searchPlaceholder; + + if (!currentPlaceholder) return null; + + const hidden = searchValue || selectorValueList.length; + + // [Legacy] Not remove the placeholder + return ( + + ); + }, + renderSelection() { + const { selectorValueList, prefixCls } = this.$props; + const selectedValueNodes = []; if (selectorValueList.length) { const { label, value } = selectorValueList[0]; - return ( - - {label || value} - - ); - } else { - return ( - - {placeholder} - - ); + selectedValueNodes.push({label || value}); } + selectedValueNodes.push( + ); + return selectedValueNodes; }, }, @@ -43,6 +74,7 @@ const SingleSelector = { ...getOptionProps(this), ...this.$attrs, renderSelection: this.renderSelection, + renderPlaceholder: this._renderPlaceholder, ref: this.selectorRef, }; return ;