Skip to content

Commit c304ebb

Browse files
tangjinzhoutangjinzhou
committed
refactor: cascader
1 parent 3a6cc6a commit c304ebb

File tree

17 files changed

+595
-257
lines changed

17 files changed

+595
-257
lines changed

‎components/calendar/Header.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ function YearSelect<DateType>(props: SharedProps<DateType>) {
4545
options={options}
4646
value={year}
4747
class={`${prefixCls}-year-select`}
48-
onChange={numYear => {
48+
onChange={(numYear: number) => {
4949
let newDate = generateConfig.setYear(value, numYear);
5050

5151
if (validRange) {
@@ -108,7 +108,7 @@ function MonthSelect<DateType>(props: SharedProps<DateType>) {
108108
class={`${prefixCls}-month-select`}
109109
value={month}
110110
options={options}
111-
onChange={newMonth => {
111+
onChange={(newMonth: number) => {
112112
onChange(generateConfig.setMonth(value, newMonth));
113113
}}
114114
getPopupContainer={() => divRef!.value!}

‎components/cascader/__tests__/__snapshots__/demo.test.js.snap

+123-26
Large diffs are not rendered by default.

‎components/cascader/__tests__/__snapshots__/index.test.js.snap

+137-93
Large diffs are not rendered by default.

‎components/cascader/__tests__/index.test.js

+28-12
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,14 @@ function filter(inputValue, path) {
4646
return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
4747
}
4848

49+
function toggleOpen(wrapper) {
50+
wrapper.find('.ant-select-selector').trigger('mousedown');
51+
}
52+
53+
function isOpen(wrapper) {
54+
return !!wrapper.findComponent({ name: 'Trigger' }).props().popupVisible;
55+
}
56+
4957
describe('Cascader', () => {
5058
focusTest(Cascader);
5159
beforeEach(() => {
@@ -65,7 +73,7 @@ describe('Cascader', () => {
6573
it('popup correctly when panel is open', async () => {
6674
const wrapper = mount(Cascader, { props: { options }, sync: false, attachTo: 'body' });
6775
await asyncExpect(() => {
68-
wrapper.find('input').trigger('click');
76+
toggleOpen(wrapper);
6977
});
7078
expect($$('.ant-cascader-menus').length).toBe(1);
7179
await asyncExpect(() => {
@@ -95,7 +103,7 @@ describe('Cascader', () => {
95103
});
96104

97105
await asyncExpect(() => {
98-
wrapper.find('input').trigger('click');
106+
toggleOpen(wrapper);
99107
});
100108
expect($$('.ant-cascader-menus').length).toBe(1);
101109
await asyncExpect(() => {
@@ -106,9 +114,8 @@ describe('Cascader', () => {
106114
it('can be selected', async () => {
107115
const wrapper = mount(Cascader, { props: { options }, sync: false });
108116
await asyncExpect(() => {
109-
wrapper.find('input').trigger('click');
117+
toggleOpen(wrapper);
110118
});
111-
112119
await asyncExpect(() => {
113120
$$('.ant-cascader-menu')[0].querySelectorAll('.ant-cascader-menu-item')[0].click();
114121
});
@@ -134,23 +141,36 @@ describe('Cascader', () => {
134141
});
135142
});
136143

137-
it('backspace should work with `Cascader[showSearch]`', async () => {
144+
fit('backspace should work with `Cascader[showSearch]`', async () => {
138145
const wrapper = mount(Cascader, { props: { options, showSearch: true }, sync: false });
139146
await asyncExpect(() => {
140147
wrapper.find('input').element.value = '123';
141148
wrapper.find('input').trigger('input');
142149
});
143150
await asyncExpect(() => {
144-
expect(wrapper.vm.inputValue).toBe('123');
151+
expect(isOpen(wrapper)).toBeTruthy();
145152
});
146153
await asyncExpect(() => {
147154
wrapper.find('input').element.keyCode = KeyCode.BACKSPACE;
148155
wrapper.find('input').trigger('keydown');
149156
});
150157
await asyncExpect(() => {
151-
// trigger onKeyDown will not trigger onChange by default, so the value is still '123'
152-
expect(wrapper.vm.inputValue).toBe('123');
158+
expect(isOpen(wrapper)).toBeTruthy();
159+
});
160+
await asyncExpect(() => {
161+
wrapper.find('input').element.value = '';
162+
wrapper.find('input').trigger('input');
163+
});
164+
await asyncExpect(() => {
165+
expect(isOpen(wrapper)).toBeTruthy();
153166
});
167+
// await asyncExpect(() => {
168+
// wrapper.find('input').element.keyCode = KeyCode.BACKSPACE;
169+
// wrapper.find('input').trigger('keydown');
170+
// });
171+
// await asyncExpect(() => {
172+
// expect(isOpen(wrapper)).toBeFalsy();
173+
// }, 0);
154174
});
155175

156176
describe('limit filtered item count', () => {
@@ -191,7 +211,6 @@ describe('Cascader', () => {
191211
});
192212

193213
it('negative limit', async () => {
194-
const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
195214
const wrapper = mount(Cascader, {
196215
props: { options, showSearch: { filter, limit: -1 } },
197216
sync: false,
@@ -203,9 +222,6 @@ describe('Cascader', () => {
203222
await asyncExpect(() => {
204223
expect($$('.ant-cascader-menu-item').length).toBe(2);
205224
}, 0);
206-
expect(errorSpy).toBeCalledWith(
207-
"Warning: [antdv: Cascader] 'limit' of showSearch in Cascader should be positive number or false.",
208-
);
209225
});
210226
});
211227
});

‎components/date-picker/generatePicker/generateRangePicker.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { getTimeProps, Components } from '.';
1111
import { computed, defineComponent, nextTick, onMounted, ref } from 'vue';
1212
import useConfigInject from '../../_util/hooks/useConfigInject';
1313
import classNames from '../../_util/classNames';
14+
import type { CommonProps, RangePickerProps } from './props';
1415
import { commonProps, rangePickerProps } from './props';
1516
import type { PanelMode, RangeValue } from '../../vc-picker/interface';
1617
import type { RangePickerSharedProps } from '../../vc-picker/RangePicker';
@@ -41,7 +42,8 @@ export default function generateRangePicker<DateType, ExtraProps = {}>(
4142
'renderExtraFooter',
4243
// 'separator',
4344
],
44-
setup(props, { expose, slots, attrs, emit }) {
45+
setup(_props, { expose, slots, attrs, emit }) {
46+
const props = _props as unknown as CommonProps<DateType> & RangePickerProps<DateType>;
4547
const formItemContext = useInjectFormItemContext();
4648
devWarning(
4749
!attrs.getCalendarContainer,

‎components/date-picker/generatePicker/generateSinglePicker.tsx

+12-6
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { getTimeProps, Components } from '.';
1111
import { computed, defineComponent, nextTick, onMounted, ref } from 'vue';
1212
import useConfigInject from '../../_util/hooks/useConfigInject';
1313
import classNames from '../../_util/classNames';
14+
import type { CommonProps, DatePickerProps } from './props';
1415
import { commonProps, datePickerProps } from './props';
1516

1617
import devWarning from '../../vc-util/devWarning';
@@ -21,14 +22,15 @@ export default function generateSinglePicker<DateType, ExtraProps = {}>(
2122
extraProps: ExtraProps,
2223
) {
2324
function getPicker(picker?: PickerMode, displayName?: string) {
25+
const comProps = {
26+
...commonProps<DateType>(),
27+
...datePickerProps<DateType>(),
28+
...extraProps,
29+
};
2430
return defineComponent({
2531
name: displayName,
2632
inheritAttrs: false,
27-
props: {
28-
...commonProps<DateType>(),
29-
...datePickerProps<DateType>(),
30-
...extraProps,
31-
},
33+
props: comProps,
3234
slots: [
3335
'suffixIcon',
3436
// 'clearIcon',
@@ -41,7 +43,11 @@ export default function generateSinglePicker<DateType, ExtraProps = {}>(
4143
'renderExtraFooter',
4244
'monthCellRender',
4345
],
44-
setup(props, { slots, expose, attrs, emit }) {
46+
setup(_props, { slots, expose, attrs, emit }) {
47+
// 兼容 vue 3.2.7
48+
const props = _props as unknown as CommonProps<DateType> &
49+
DatePickerProps<DateType> &
50+
ExtraProps;
4551
const formItemContext = useInjectFormItemContext();
4652
devWarning(
4753
!(props.monthCellContentRender || slots.monthCellContentRender),

‎components/date-picker/generatePicker/props.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import type { SharedTimeProps } from '../../vc-picker/panels/TimePanel';
1818
import type { RangeDateRender, RangeInfo, RangeType } from '../../vc-picker/RangePicker';
1919
import type { VueNode } from '../../_util/type';
2020

21-
function commonProps<DateType>() {
21+
function commonProps<DateType = any>() {
2222
return {
2323
id: String,
2424
dropdownClassName: String,
@@ -138,7 +138,7 @@ export interface CommonProps<DateType> {
138138
valueFormat?: string;
139139
}
140140

141-
function datePickerProps<DateType>() {
141+
function datePickerProps<DateType = any>() {
142142
return {
143143
defaultPickerValue: { type: [String, Object] as PropType<DateType | string> },
144144
defaultValue: { type: [String, Object] as PropType<DateType | string> },

‎components/empty/__tests__/__snapshots__/demo.test.js.snap

+10-4
Original file line numberDiff line numberDiff line change
@@ -41,17 +41,23 @@ exports[`renders ./components/empty/demo/config-provider.vue correctly 1`] = `
4141
<!---->
4242
</div>
4343
<h3>TreeSelect</h3>
44-
<div style="width: 200px;" class="ant-select ant-tree-select ant-select-single ant-select-show-arrow">
44+
<div style="width: 200px;" class="ant-select ant-tree-select ant-select-single ant-select-show-arrow" customslots="[object Object]">
4545
<!---->
4646
<!---->
47-
<div class="ant-select-selector"><span class="ant-select-selection-search"><input id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" style="opacity: 0;" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-activedescendant="rc_select_TEST_OR_SSR_list_0" readonly="" unselectable="on" type="search"></span>
47+
<div class="ant-select-selector"><span class="ant-select-selection-search"><input id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" style="opacity: 0;" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" readonly="" unselectable="on" type="search"></span>
4848
<!----><span class="ant-select-selection-placeholder"><!----></span>
4949
</div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
5050
<!---->
5151
</div>
5252
<h3>Cascader</h3>
53-
<!----><span class="ant-cascader-picker ant-cascader-picker-show-search" style="width: 200px;" tabindex="0"><span class="ant-cascader-picker-label"></span><input placeholder="Please select" autocomplete="off" type="text" class="ant-input ant-cascader-input">
54-
<!----><span role="img" aria-label="down" class="anticon anticon-down ant-cascader-picker-arrow"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
53+
<div style="width: 200px;" class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-show-search">
54+
<!---->
55+
<!---->
56+
<div class="ant-select-selector"><span class="ant-select-selection-search"><input id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" type="search"></span>
57+
<!----><span class="ant-select-selection-placeholder"><!----></span>
58+
</div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
59+
<!---->
60+
</div>
5561
<h3>Transfer</h3>
5662
<div class="ant-transfer">
5763
<div class="ant-transfer-list">

‎components/input-number/__tests__/__snapshots__/demo.test.js.snap

+8-2
Original file line numberDiff line numberDiff line change
@@ -68,8 +68,14 @@ exports[`renders ./components/input-number/demo/addon.vue correctly 1`] = `
6868
<div class="ant-input-number-input-wrap"><input autocomplete="off" role="spinbutton" aria-valuenow="100" step="1" class="ant-input-number-input"></div>
6969
</div>
7070
<div class="ant-input-number-group-addon">
71-
<!----><span class="ant-cascader-picker" style="width: 150px;" tabindex="0"><span class="ant-cascader-picker-label"></span><input placeholder="cascader" autocomplete="off" type="text" readonly="" class="ant-input ant-cascader-input">
72-
<!----><span role="img" aria-label="down" class="anticon anticon-down ant-cascader-picker-arrow"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
71+
<div style="width: 150px;" class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow">
72+
<!---->
73+
<!---->
74+
<div class="ant-select-selector"><span class="ant-select-selection-search"><input id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" style="opacity: 0;" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" readonly="" unselectable="on" type="search"></span>
75+
<!----><span class="ant-select-selection-placeholder">cascader</span>
76+
</div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
77+
<!---->
78+
</div>
7379
</div>
7480
</div>
7581
</div>

‎components/input/__tests__/__snapshots__/demo.test.js.snap

+8-2
Original file line numberDiff line numberDiff line change
@@ -79,8 +79,14 @@ exports[`renders ./components/input/demo/group.vue correctly 1`] = `
7979
</div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
8080
<!---->
8181
</div>
82-
<!----><span class="ant-cascader-picker" style="width: 70%;" tabindex="0"><span class="ant-cascader-picker-label"></span><input placeholder="Select Address" autocomplete="off" type="text" readonly="" class="ant-input ant-cascader-input">
83-
<!----><span role="img" aria-label="down" class="anticon anticon-down ant-cascader-picker-arrow"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span></span></div>
82+
<div style="width: 70%;" class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow">
83+
<!---->
84+
<!---->
85+
<div class="ant-select-selector"><span class="ant-select-selection-search"><input id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" style="opacity: 0;" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" readonly="" unselectable="on" type="search"></span>
86+
<!----><span class="ant-select-selection-placeholder">Select Address</span>
87+
</div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
88+
<!---->
89+
</div></span></div>
8490
`;
8591
8692
exports[`renders ./components/input/demo/password-input.vue correctly 1`] = `<span class="ant-input-affix-wrapper ant-input-password"><!----><input placeholder="input password" type="password" class="ant-input"><span class="ant-input-suffix"><!----><span tabindex="-1" role="img" aria-label="eye-invisible" class="anticon anticon-eye-invisible ant-input-password-icon"><svg focusable="false" class="" data-icon="eye-invisible" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z"></path><path d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z"></path></svg></span></span></span>`;

0 commit comments

Comments
 (0)