Skip to content

Commit 106b82c

Browse files
tangjinzhoutangjinzhou
committed
feat: select
1 parent 5a0bb6d commit 106b82c

File tree

10 files changed

+83
-94
lines changed

10 files changed

+83
-94
lines changed

‎components/_util/props-util.js

+3-2
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ const getSlotOptions = ele => {
9595
};
9696
const findDOMNode = instance => {
9797
let node = instance.$el;
98-
while (!node.tagName) {
98+
while (node && !node.tagName) {
9999
node = node.nextSibling;
100100
}
101101
return node;
@@ -200,7 +200,8 @@ const getAllProps = ele => {
200200
return props;
201201
};
202202

203-
const getPropsData = vnode => {
203+
const getPropsData = ins => {
204+
const vnode = ins.$ ? ins.$ : ins;
204205
const res = {};
205206
const originProps = vnode.props || {};
206207
const props = {};

‎components/select/index.jsx

-4
Original file line numberDiff line numberDiff line change
@@ -107,10 +107,6 @@ const Select = {
107107
choiceTransitionName: PropTypes.string.def('zoom'),
108108
},
109109
propTypes: SelectPropTypes,
110-
// model: {
111-
// prop: 'value',
112-
// event: 'change',
113-
// },
114110
setup() {
115111
return {
116112
configProvider: inject('configProvider', ConfigConsumerProps),

‎components/vc-menu/Menu.jsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -154,7 +154,9 @@ const Menu = {
154154

155155
render() {
156156
const props = { ...getOptionProps(this), ...this.$attrs };
157-
props.class += ` ${props.prefixCls}-root`;
157+
props.class = props.class
158+
? `${props.class} ${props.prefixCls}-root`
159+
: `${props.prefixCls}-root`;
158160
const subPopupMenuProps = {
159161
...props,
160162
itemIcon: getComponent(this, 'itemIcon', props),

‎components/vc-select/DropdownMenu.jsx

+8-8
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import scrollIntoView from 'dom-scroll-into-view';
55
import { getSelectKeys, preventDefaultEvent, saveRef } from './util';
66
import { cloneElement } from '../_util/vnode';
77
import BaseMixin from '../_util/BaseMixin';
8-
import { getSlotOptions, findDOMNode } from '../_util/props-util';
8+
import { findDOMNode } from '../_util/props-util';
99

1010
export default {
1111
name: 'DropdownMenu',
@@ -151,10 +151,11 @@ export default {
151151
};
152152

153153
clonedMenuItems = menuItems.map(item => {
154-
debugger;
155-
if (getSlotOptions(item).isMenuItemGroup) {
156-
const children = item.componentOptions.children.map(clone);
157-
return cloneElement(item, { children });
154+
if (item.type.isMenuItemGroup) {
155+
const children = (item.children?.default() || []).map(clone);
156+
const newItem = cloneElement(item);
157+
newItem.children = { ...item.children, default: () => children };
158+
return newItem;
158159
}
159160
return clone(item);
160161
});
@@ -182,9 +183,8 @@ export default {
182183
{...menuProps}
183184
selectedKeys={selectedKeys}
184185
prefixCls={`${prefixCls}-menu`}
185-
>
186-
{clonedMenuItems}
187-
</Menu>
186+
children={clonedMenuItems}
187+
></Menu>
188188
);
189189
}
190190
return null;

‎components/vc-select/Select.jsx

+25-32
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import {TransitionGroup} from 'vue';
12
import KeyCode from '../_util/KeyCode';
23
import PropTypes from '../_util/vue-types';
34
import classnames from 'classnames';
@@ -8,13 +9,10 @@ import Option from './Option';
89
import OptGroup from './OptGroup';
910
import {
1011
hasProp,
11-
getSlotOptions,
1212
getPropsData,
1313
getValueByProp as getValue,
1414
getComponent,
1515
getEvents,
16-
getClass,
17-
getAttrs,
1816
getOptionProps,
1917
} from '../_util/props-util';
2018
import getTransitionProps from '../_util/getTransitionProps';
@@ -106,10 +104,6 @@ const Select = {
106104
// onDeselect: noop,
107105
// onInputKeydown: noop,
108106
},
109-
// model: {
110-
// prop: 'value',
111-
// event: 'change',
112-
// },
113107
created() {
114108
this.saveInputRef = saveRef(this, 'inputRef');
115109
this.saveInputMirrorRef = saveRef(this, 'inputMirrorRef');
@@ -175,7 +169,7 @@ const Select = {
175169
__propsSymbol__() {
176170
Object.assign(this.$data, this.getDerivedState(getOptionProps(this), this.$data));
177171
},
178-
'$data._inputValue'(val) {
172+
_inputValue(val) {
179173
this.$data._mirrorInputValue = val;
180174
},
181175
},
@@ -232,8 +226,8 @@ const Select = {
232226
if (!child.data || child.data.slot !== undefined) {
233227
return;
234228
}
235-
if (getSlotOptions(child).isSelectOptGroup) {
236-
this.getOptionsFromChildren(child.componentOptions.children, options);
229+
if (child.type?.isSelectOptGroup) {
230+
this.getOptionsFromChildren(child.children?.default(), options);
237231
} else {
238232
options.push(child);
239233
}
@@ -787,32 +781,31 @@ const Select = {
787781
_getInputElement() {
788782
const props = this.$props;
789783
const { _inputValue: inputValue, _mirrorInputValue } = this.$data;
790-
const attrs = getAttrs(this);
784+
const attrs = this.$attrs;
791785
const defaultInput = <input id={attrs.id} autoComplete="off" />;
792786

793787
const inputElement = props.getInputElement ? props.getInputElement() : defaultInput;
794-
const inputCls = classnames(getClass(inputElement), {
788+
const inputCls = classnames(inputElement.class, {
795789
[`${props.prefixCls}-search__field`]: true,
796790
});
797791
const inputEvents = getEvents(inputElement);
798792
// https://github.com/ant-design/ant-design/issues/4992#issuecomment-281542159
799793
// Add space to the end of the inputValue as the width measurement tolerance
800-
inputElement.data = inputElement.data || {};
801794
return (
802795
<div class={`${props.prefixCls}-search__field__wrap`} onClick={this.inputClick}>
803796
{cloneElement(inputElement, {
804797
disabled: props.disabled,
805798
value: inputValue,
806-
...(inputElement.data.attrs || {}),
799+
...(inputElement.props || {}),
807800
disabled: props.disabled,
808801
value: inputValue,
809802
class: inputCls,
810803
ref: this.saveInputRef,
811-
directives: [
812-
{
813-
name: 'ant-input',
814-
},
815-
],
804+
// directives: [
805+
// {
806+
// name: 'ant-input',
807+
// },
808+
// ],
816809
onInput: this.onInputChange,
817810
onKeydown: chaining(
818811
this.onInputKeydown,
@@ -1099,6 +1092,7 @@ const Select = {
10991092
const vls = this.getVLForOnChange(value);
11001093
const options = this.getOptionsBySingleValue(value);
11011094
this._valueOptions = options;
1095+
this.$emit('update:value', vls);
11021096
this.$emit('change', vls, isMultipleOrTags(this.$props) ? options : options[0]);
11031097
},
11041098

@@ -1186,16 +1180,11 @@ const Select = {
11861180
const { _inputValue: inputValue } = this.$data;
11871181
const tags = props.tags;
11881182
children.forEach(child => {
1189-
const type = child.type;
1190-
warning(
1191-
typeof type === 'object' && type.isSelectOption,
1192-
'the children of `Select` should be `Select.Option` or `Select.OptGroup`, ' +
1193-
`instead of \`${getSlotOptions(child).name || getSlotOptions(child)}\`.`,
1194-
);
1195-
if (typeof type !== 'object' || !type.isSelectOption) {
1183+
if (!child) {
11961184
return;
11971185
}
1198-
if (type.isSelectOptGroup) {
1186+
const type = child.type;
1187+
if (type?.isSelectOptGroup) {
11991188
let label = getComponent(child, 'label');
12001189
let key = child.key;
12011190
if (!key && typeof label === 'string') {
@@ -1211,14 +1200,14 @@ const Select = {
12111200
const childValueSub = getValuePropValue(subChild) || subChild.key;
12121201
return (
12131202
<MenuItem key={childValueSub} value={childValueSub} {...subChild.props}>
1214-
{subChild.children?.default()}
1203+
{...(subChild.children?.default())}
12151204
</MenuItem>
12161205
);
12171206
});
12181207

12191208
sel.push(
12201209
<MenuItemGroup key={key} title={label} class={child.props?.class}>
1221-
{innerItems}
1210+
{...innerItems}
12221211
</MenuItemGroup>,
12231212
);
12241213

@@ -1232,14 +1221,18 @@ const Select = {
12321221
if (innerItems.length) {
12331222
sel.push(
12341223
<MenuItemGroup key={key} title={label} {...child.props}>
1235-
{innerItems}
1224+
{...innerItems}
12361225
</MenuItemGroup>,
12371226
);
12381227
}
12391228
}
12401229

12411230
return;
12421231
}
1232+
warning(
1233+
typeof type === 'object' && type.isSelectOption,
1234+
'the children of `Select` should be `Select.Option` or `Select.OptGroup`, ',
1235+
);
12431236

12441237
const childValue = getValuePropValue(child);
12451238

@@ -1416,10 +1409,10 @@ const Select = {
14161409
if (isMultipleOrTags(props) && choiceTransitionName) {
14171410
const transitionProps = getTransitionProps(choiceTransitionName, {
14181411
tag: 'ul',
1419-
afterLeave: this.onChoiceAnimationLeave,
1412+
onAfterLeave: this.onChoiceAnimationLeave,
14201413
});
14211414
innerNode = (
1422-
<transition-group {...transitionProps}>{selectedValueNodes}</transition-group>
1415+
<TransitionGroup {...transitionProps}>{selectedValueNodes}</TransitionGroup>
14231416
);
14241417
} else {
14251418
innerNode = <ul>{selectedValueNodes}</ul>;

‎components/vc-select/index.js

+2-4
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
11
// based on vc-select 9.2.2
2-
import ProxySelect, { Select } from './Select';
2+
import Select from './Select';
33
import Option from './Option';
44
import { SelectPropTypes } from './PropTypes';
55
import OptGroup from './OptGroup';
66
Select.Option = Option;
77
Select.OptGroup = OptGroup;
8-
ProxySelect.Option = Option;
9-
ProxySelect.OptGroup = OptGroup;
108
export { Select, Option, OptGroup, SelectPropTypes };
11-
export default ProxySelect;
9+
export default Select;

‎components/vc-select/util.js

+14-19
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import { getPropsData, getSlotOptions, getKey, getComponent } from '../_util/props-util';
1+
import { getPropsData, getComponent } from '../_util/props-util';
22
import { cloneElement } from '../_util/vnode';
3+
import { isVNode, Text } from 'vue';
34

45
export function toTitle(title) {
56
if (typeof title === 'string') {
@@ -15,8 +16,8 @@ export function getValuePropValue(child) {
1516
if ('value' in props) {
1617
return props.value;
1718
}
18-
if (getKey(child) !== undefined) {
19-
return getKey(child);
19+
if (child.key !== undefined) {
20+
return child.key;
2021
}
2122
if (typeof child.type === 'object' && child.type.isSelectOptGroup) {
2223
const label = getComponent(child, 'label');
@@ -32,20 +33,14 @@ export function getPropValue(child, prop) {
3233
return getValuePropValue(child);
3334
}
3435
if (prop === 'children') {
35-
const newChild = child.$slots
36-
? cloneElement(child.$slots.default)
37-
: cloneElement(child.componentOptions.children);
38-
if (newChild.length === 1 && !newChild[0].tag) {
39-
return newChild[0].text;
36+
const newChild = cloneElement(getComponent(child));
37+
if (isVNode(newChild) && newChild.type === Text) {
38+
return newChild.children;
4039
}
4140
return newChild;
4241
}
43-
const data = getPropsData(child);
44-
if (prop in data) {
45-
return data[prop];
46-
} else {
47-
return child.props && child.props[prop];
48-
}
42+
const props = getPropsData(child);
43+
return props[prop];
4944
}
5045

5146
export function isMultiple(props) {
@@ -113,14 +108,14 @@ export function getLabelFromPropsValue(value, key) {
113108
return label;
114109
}
115110

116-
export function getSelectKeys(menuItems, value) {
111+
export function getSelectKeys(menuItems = [], value) {
117112
if (value === null || value === undefined) {
118113
return [];
119114
}
120115
let selectedKeys = [];
121116
menuItems.forEach(item => {
122-
if (getSlotOptions(item).isMenuItemGroup) {
123-
selectedKeys = selectedKeys.concat(getSelectKeys(item.componentOptions.children, value));
117+
if (item.type?.isMenuItemGroup) {
118+
selectedKeys = selectedKeys.concat(getSelectKeys(item.children?.default(), value));
124119
} else {
125120
const itemValue = getValuePropValue(item);
126121
const itemKey = item.key;
@@ -145,8 +140,8 @@ export function findFirstMenuItem(children) {
145140
for (let i = 0; i < children.length; i++) {
146141
const child = children[i];
147142
const props = getPropsData(child);
148-
if (getSlotOptions(child).isMenuItemGroup) {
149-
const found = findFirstMenuItem(child.componentOptions.children);
143+
if (child.type?.isMenuItemGroup) {
144+
const found = findFirstMenuItem(child.children?.default());
150145
if (found) {
151146
return found;
152147
}

0 commit comments

Comments
 (0)