Skip to content

Commit 7a2e2e3

Browse files
tangjinzhoutangjinzhou
committed
feat: update vc-tree-select
1 parent 4be3da0 commit 7a2e2e3

File tree

13 files changed

+102
-106
lines changed

13 files changed

+102
-106
lines changed

‎components/_util/getTransitionGroupProps.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,18 @@ const getTransitionGroupProps = (transitionName, opt = {}) => {
33
if (process.env.NODE_ENV === 'test') {
44
return { css: false, ...opt };
55
}
6-
const transitionProps = {
6+
const transitionProps = transitionName ? {
77
appear: true,
88
appearFromClass: `${transitionName}-appear ${transitionName}-appear-prepare`,
99
appearActiveClass: `${transitionName}`,
10-
appearToClass: `${transitionName}-appear-active`,
10+
appearToClass: `${transitionName}-appear ${transitionName}-appear-active`,
1111
enterFromClass: `${transitionName}-appear ${transitionName}-enter ${transitionName}-appear-prepare ${transitionName}-enter-prepare`,
1212
enterActiveClass: `${transitionName}`,
13-
enterToClass: `${transitionName}-appear-active ${transitionName}-enter-active`,
13+
enterToClass: `${transitionName}-enter ${transitionName}-appear ${transitionName}-appear-active ${transitionName}-enter-active`,
1414
leaveActiveClass: `${transitionName} ${transitionName}-leave`,
1515
leaveToClass: `${transitionName}-leave-active`,
1616
...opt,
17-
};
17+
} : { css: false, ...opt };
1818
return transitionProps;
1919
};
2020

‎components/_util/getTransitionProps.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ const getTransitionProps = (transitionName, opt = {}) => {
22
if (process.env.NODE_ENV === 'test') {
33
return { css: false, ...opt };
44
}
5-
const transitionProps = {
5+
const transitionProps = transitionName ? {
66
appear: true,
77
appearFromClass: `${transitionName}-appear ${transitionName}-appear-prepare`,
88
// appearActiveClass: `antdv-base-transtion`,
@@ -14,7 +14,7 @@ const getTransitionProps = (transitionName, opt = {}) => {
1414
leaveActiveClass: `${transitionName}-leave ${transitionName}-leave-active`,
1515
leaveToClass: `${transitionName}-leave ${transitionName}-leave-active`,
1616
...opt,
17-
};
17+
}: { css: false, ...opt };
1818
return transitionProps;
1919
};
2020

‎components/upload/UploadList.jsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import Tooltip from '../tooltip';
1515
import Progress from '../progress';
1616
import classNames from '../_util/classNames';
1717
import { UploadListProps } from './interface';
18+
import getTransitionGroupProps from '../_util/getTransitionGroupProps';
1819

1920
export default {
2021
name: 'AUploadList',
@@ -265,7 +266,7 @@ export default {
265266
[`${prefixCls}-list-${listType}`]: true,
266267
});
267268
const animationDirection = listType === 'picture-card' ? 'animate-inline' : 'animate';
268-
const transitionGroupProps = getTransitionProps(`${prefixCls}-${animationDirection}`);
269+
const transitionGroupProps = getTransitionGroupProps(`${prefixCls}-${animationDirection}`);
269270
return (
270271
<TransitionGroup {...transitionGroupProps} tag="div" class={listClassNames}>
271272
{list}

‎components/vc-notification/Notification.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ import PropTypes from '../_util/vue-types';
33
import { getComponent } from '../_util/props-util';
44
import BaseMixin from '../_util/BaseMixin';
55
import createChainedFunction from '../_util/createChainedFunction';
6-
import getTransitionProps from '../_util/getTransitionProps';
76
import Notice from './Notice';
7+
import getTransitionGroupProps from '../_util/getTransitionGroupProps';
88

99
function noop() {}
1010

@@ -75,7 +75,7 @@ const Notification = defineComponent({
7575

7676
render() {
7777
const { prefixCls, notices, remove, getTransitionName, $attrs } = this;
78-
const transitionProps = getTransitionProps(getTransitionName());
78+
const transitionProps = getTransitionGroupProps(getTransitionName());
7979
const noticeNodes = notices.map((notice, index) => {
8080
const update = Boolean(index === notices.length - 1 && notice.updateKey);
8181
const key = notice.updateKey ? notice.updateKey : notice.key;

‎components/vc-select/Selector/MultipleSelector.tsx

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -158,11 +158,9 @@ const SelectSelector = defineComponent<SelectorProps>({
158158
: maxTagPlaceholder,
159159
});
160160
}
161-
const transitionProps = choiceTransitionName
162-
? getTransitionGroupProps(choiceTransitionName, {
163-
appear: motionAppear,
164-
})
165-
: { css: false };
161+
const transitionProps = getTransitionGroupProps(choiceTransitionName, {
162+
appear: motionAppear,
163+
})
166164
selectionNode.value = (
167165
<TransitionGroup {...transitionProps}>
168166
{...displayValues.map(

‎components/vc-tree-select/src/Base/BaseSelector.jsx

Lines changed: 24 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,12 @@ export const selectorPropTypes = () => ({
3030
placeholder: PropTypes.any,
3131
disabled: PropTypes.looseBool,
3232
focused: PropTypes.looseBool,
33+
isMultiple: PropTypes.looseBool,
34+
showSearch: PropTypes.looseBool,
3335
});
3436

3537
function noop() {}
36-
export default function(modeName) {
38+
export default function() {
3739
const BaseSelector = {
3840
name: 'BaseSelector',
3941
inheritAttrs: false,
@@ -101,7 +103,7 @@ export default function(modeName) {
101103
}
102104
const clearIcon = getComponent(this, 'clearIcon');
103105
return (
104-
<span key="clear" class={`${prefixCls}-selection__clear`} onClick={onSelectorClear}>
106+
<span key="clear" unselectable="on" aria-hidden="true" style="user-select: none;" class={`${prefixCls}-clear`} onClick={onSelectorClear}>
105107
{clearIcon}
106108
</span>
107109
);
@@ -114,7 +116,7 @@ export default function(modeName) {
114116
}
115117
const inputIcon = getComponent(this, 'inputIcon');
116118
return (
117-
<span key="arrow" class={`${prefixCls}-arrow`} style={{ outline: 'none' }}>
119+
<span key="arrow" class={`${prefixCls}-arrow`} style={{ outline: 'none', userSelect: 'none' }}>
118120
{inputIcon}
119121
</span>
120122
);
@@ -132,6 +134,9 @@ export default function(modeName) {
132134
renderSelection,
133135
renderPlaceholder,
134136
tabindex,
137+
isMultiple,
138+
showArrow,
139+
showSearch,
135140
} = this.$props;
136141
const { class: className, style, onClick = noop } = this.$attrs;
137142
const {
@@ -142,18 +147,21 @@ export default function(modeName) {
142147
if (disabled) {
143148
myTabIndex = null;
144149
}
145-
150+
const mergedClassName = classNames(prefixCls, className, {
151+
[`${prefixCls}-focused`]: open || focused,
152+
[`${prefixCls}-multiple`]: isMultiple,
153+
[`${prefixCls}-single`]: !isMultiple,
154+
[`${prefixCls}-allow-clear`]: allowClear,
155+
[`${prefixCls}-show-arrow`]: showArrow,
156+
[`${prefixCls}-disabled`]: disabled,
157+
[`${prefixCls}-open`]: open,
158+
[`${prefixCls}-show-search`]: showSearch,
159+
});
146160
return (
147-
<span
161+
<div
148162
style={style}
149163
onClick={onClick}
150-
class={classNames(className, prefixCls, {
151-
[`${prefixCls}-open`]: open,
152-
[`${prefixCls}-focused`]: open || focused,
153-
[`${prefixCls}-disabled`]: disabled,
154-
[`${prefixCls}-enabled`]: !disabled,
155-
[`${prefixCls}-allow-clear`]: allowClear,
156-
})}
164+
class={mergedClassName}
157165
ref={this.domRef}
158166
role="combobox"
159167
aria-expanded={open}
@@ -166,17 +174,13 @@ export default function(modeName) {
166174
onBlur={this.onBlur}
167175
onKeydown={onSelectorKeyDown}
168176
>
169-
<span
170-
key="selection"
171-
class={classNames(`${prefixCls}-selection`, `${prefixCls}-selection--${modeName}`)}
172-
>
177+
<span class={`${prefixCls}-selector`}>
173178
{renderSelection()}
174-
{this.renderClear()}
175-
{this.renderArrow()}
176-
177179
{renderPlaceholder && renderPlaceholder()}
178180
</span>
179-
</span>
181+
{this.renderArrow()}
182+
{this.renderClear()}
183+
</div>
180184
);
181185
},
182186
};

‎components/vc-tree-select/src/Popup/SinglePopup.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ const SinglePopup = {
4040
display: searchValue ? 'none' : 'block',
4141
}}
4242
onClick={this.onPlaceholderClick}
43-
class={`${prefixCls}-search__field__placeholder`}
43+
class={`${prefixCls}-selection-placeholder`}
4444
>
4545
{searchPlaceholder}
4646
</span>

‎components/vc-tree-select/src/SearchInput.jsx

Lines changed: 49 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
* - multiple: in the selector
55
* Move the code as a SearchInput for easy management.
66
*/
7-
import { inject, withDirectives } from 'vue';
7+
import { inject, withDirectives, ref, onMounted, computed, watch } from 'vue';
88
import antInput from '../../_util/antInputDirective';
99
import PropTypes from '../../_util/vue-types';
1010
import { createRef } from './util';
@@ -21,8 +21,22 @@ const SearchInput = {
2121
needAlign: PropTypes.looseBool,
2222
ariaId: PropTypes.string,
2323
},
24-
setup() {
24+
setup(props) {
25+
const measureRef = ref();
26+
const inputWidth = ref(0);
27+
// We measure width and set to the input immediately
28+
onMounted(() => {
29+
watch(
30+
computed(()=>props.searchValue),
31+
() => {
32+
inputWidth.value = measureRef.value.scrollWidth;
33+
},
34+
{ flush: 'post' },
35+
);
36+
});
2537
return {
38+
measureRef,
39+
inputWidth,
2640
vcTreeSelect: inject('vcTreeSelect', {}),
2741
};
2842
},
@@ -38,7 +52,7 @@ const SearchInput = {
3852
},
3953
created() {
4054
this.inputRef = createRef();
41-
this.mirrorInputRef = createRef();
55+
// this.mirrorInputRef = createRef();
4256
this.prevProps = { ...this.$props };
4357
},
4458
mounted() {
@@ -55,15 +69,15 @@ const SearchInput = {
5569
},
5670

5771
updated() {
58-
const { open, searchValue, needAlign } = this.$props;
72+
const { open } = this.$props;
5973
const { prevProps } = this;
6074
this.$nextTick(() => {
6175
if (open && prevProps.open !== open) {
6276
this.focus();
6377
}
64-
if (needAlign && searchValue !== prevProps.searchValue) {
65-
this.alignInputWidth();
66-
}
78+
// if (needAlign && searchValue !== prevProps.searchValue) {
79+
// this.alignInputWidth();
80+
// }
6781
this.prevProps = { ...this.$props };
6882
});
6983
},
@@ -73,10 +87,10 @@ const SearchInput = {
7387
* ref: https://github.com/react-component/tree-select/issues/65
7488
* clientWidth 0 when mounted in vue. why?
7589
*/
76-
alignInputWidth() {
77-
this.inputRef.current.style.width = `${this.mirrorInputRef.current.clientWidth ||
78-
this.mirrorInputRef.current.offsetWidth}px`;
79-
},
90+
// alignInputWidth() {
91+
// this.inputRef.current.style.width = `${this.mirrorInputRef.current.clientWidth ||
92+
// this.mirrorInputRef.current.offsetWidth}px`;
93+
// },
8094

8195
/**
8296
* Need additional timeout for focus cause parent dom is not ready when didMount trigger
@@ -116,31 +130,34 @@ const SearchInput = {
116130
vcTreeSelect: { onSearchInputKeyDown },
117131
handleInputChange,
118132
mirrorSearchValue,
133+
inputWidth,
119134
} = this;
120135
return (
121-
<span class={`${prefixCls}-search__field__wrap`}>
122-
{withDirectives(
123-
<input
124-
type="text"
125-
ref={this.inputRef}
126-
onInput={handleInputChange}
127-
onChange={handleInputChange}
128-
onKeydown={onSearchInputKeyDown}
129-
value={searchValue}
130-
disabled={disabled}
131-
class={`${prefixCls}-search__field`}
132-
aria-label="filter select"
133-
aria-autocomplete="list"
134-
aria-controls={open ? ariaId : undefined}
135-
aria-multiline="false"
136-
/>,
137-
[[antInput]],
138-
)}
139-
<span ref={this.mirrorInputRef} class={`${prefixCls}-search__field__mirror`}>
140-
{mirrorSearchValue}&nbsp;
136+
<>
137+
<span class={`${prefixCls}-selection-search`} style={{ width: inputWidth + 'px' }}>
138+
{withDirectives(
139+
<input
140+
type="text"
141+
ref={this.inputRef}
142+
onInput={handleInputChange}
143+
onChange={handleInputChange}
144+
onKeydown={onSearchInputKeyDown}
145+
value={searchValue}
146+
disabled={disabled}
147+
class={`${prefixCls}-selection-search-input`}
148+
aria-label="filter select"
149+
aria-autocomplete="list"
150+
aria-controls={open ? ariaId : undefined}
151+
aria-multiline="false"
152+
/>,
153+
[[antInput]],
154+
)}
155+
<span ref="measureRef" class={`${prefixCls}-selection-search-mirror`} aria-hidden>
156+
{mirrorSearchValue}&nbsp;
157+
</span>
141158
</span>
142159
{renderPlaceholder && !mirrorSearchValue ? renderPlaceholder() : null}
143-
</span>
160+
</>
144161
);
145162
},
146163
};

‎components/vc-tree-select/src/Select.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1096,7 +1096,7 @@ const Select = defineComponent({
10961096
const $popup = <Popup {...popupProps} __propsSymbol__={[]} />;
10971097

10981098
const Selector = isMultiple ? MultipleSelector : SingleSelector;
1099-
const $selector = <Selector {...passProps} ref={this.selectorRef} />;
1099+
const $selector = <Selector {...passProps} isMultiple={isMultiple} ref={this.selectorRef} />;
11001100
const selectTriggerProps = {
11011101
...passProps,
11021102
popupElement: $popup,

‎components/vc-tree-select/src/Selector/MultipleSelector/Selection.jsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -32,20 +32,20 @@ const Selection = {
3232
}
3333
const { class: className, style, onRemove } = this.$attrs;
3434
return (
35-
<li
35+
<span
3636
style={{ ...UNSELECTABLE_STYLE, ...style }}
3737
{...UNSELECTABLE_ATTRIBUTE}
3838
role="menuitem"
39-
class={classNames(`${prefixCls}-selection__choice`, className)}
39+
class={classNames(`${prefixCls}-selection-item`, className)}
4040
title={toTitle(label)}
4141
>
42+
<span class={`${prefixCls}-selection-item-content`}>{content}</span>
4243
{onRemove && (
43-
<span class={`${prefixCls}-selection__choice__remove`} onClick={this.onRemove}>
44+
<span class={`${prefixCls}-selection-item-remove`} onClick={this.onRemove}>
4445
{getComponent(this, 'removeIcon')}
4546
</span>
4647
)}
47-
<span class={`${prefixCls}-selection__choice__content`}>{content}</span>
48-
</li>
48+
</span>
4949
);
5050
},
5151
};

0 commit comments

Comments
 (0)