From b423decad054dfdbfbe4a59933d300072b6e08ec Mon Sep 17 00:00:00 2001 From: Gavin <19986739+wjw-gavin@users.noreply.github.com> Date: Wed, 30 Nov 2022 21:38:43 +0800 Subject: [PATCH] feat(Picker): add selectedIndexes to the confirm event (#11329) --- .../vant/src/date-picker/test/index.spec.ts | 2 ++ packages/vant/src/picker/Picker.tsx | 9 +++++++++ packages/vant/src/picker/README.md | 8 ++++---- packages/vant/src/picker/README.zh-CN.md | 8 ++++---- packages/vant/src/picker/test/index.spec.tsx | 17 +++++++++++++++-- packages/vant/src/picker/types.ts | 1 + .../vant/src/time-picker/test/index.spec.tsx | 5 +++++ 7 files changed, 40 insertions(+), 10 deletions(-) diff --git a/packages/vant/src/date-picker/test/index.spec.ts b/packages/vant/src/date-picker/test/index.spec.ts index 5c57a6a35..b26846dab 100644 --- a/packages/vant/src/date-picker/test/index.spec.ts +++ b/packages/vant/src/date-picker/test/index.spec.ts @@ -26,6 +26,7 @@ test('should emit confirm event correctly', async () => { { text: '01', value: '01' }, ], selectedValues: ['2030', '01', '01'], + selectedIndexes: [0, 0, 0], } ); }); @@ -47,6 +48,7 @@ test('should emit cancel event correctly', async () => { { text: '01', value: '01' }, ], selectedValues: ['2030', '01', '01'], + selectedIndexes: [0, 0, 0], }); }); diff --git a/packages/vant/src/picker/Picker.tsx b/packages/vant/src/picker/Picker.tsx index 9fceec638..4cf5f11b8 100644 --- a/packages/vant/src/picker/Picker.tsx +++ b/packages/vant/src/picker/Picker.tsx @@ -122,6 +122,14 @@ export default defineComponent({ ) ); + const selectedIndexes = computed(() => + currentColumns.value.map((options, index) => + options.findIndex( + (option) => option[fields.value.value] === selectedValues.value[index] + ) + ) + ); + const setValue = (index: number, value: Numeric) => { if (selectedValues.value[index] !== value) { const newValues = selectedValues.value.slice(0); @@ -133,6 +141,7 @@ export default defineComponent({ const getEventParams = () => ({ selectedValues: selectedValues.value.slice(0), selectedOptions: selectedOptions.value, + selectedIndexes: selectedIndexes.value, }); const onChange = (value: Numeric, columnIndex: number) => { diff --git a/packages/vant/src/picker/README.md b/packages/vant/src/picker/README.md index 839b501fa..b51226c04 100644 --- a/packages/vant/src/picker/README.md +++ b/packages/vant/src/picker/README.md @@ -355,10 +355,10 @@ export default { | Event | Description | Arguments | | --- | --- | --- | -| confirm | Emitted when the confirm button is clicked | _{ selectedValues, selectedOptions }_ | -| cancel | Emitted when the cancel button is clicked | _{ selectedValues, selectedOptions }_ | -| change | Emitted when current option is changed | _{ selectedValues, selectedOptions, columnIndex }_ | -| click-option | Emitted when an option is clicked | _{ currentOption, selectedValues, selectedOptions, columnIndex }_ | +| confirm | Emitted when the confirm button is clicked | _{ selectedValues, selectedOptions, selectedIndexes }_ | +| cancel | Emitted when the cancel button is clicked | _{ selectedValues, selectedOptions, selectedIndexes }_ | +| change | Emitted when current option is changed | _{ selectedValues, selectedOptions,selectedIndexes, columnIndex }_ | +| click-option | Emitted when an option is clicked | _{ currentOption, selectedValues, selectedOptions, selectedIndexes, columnIndex }_ | ### Slots diff --git a/packages/vant/src/picker/README.zh-CN.md b/packages/vant/src/picker/README.zh-CN.md index 1cab78f55..6282aee64 100644 --- a/packages/vant/src/picker/README.zh-CN.md +++ b/packages/vant/src/picker/README.zh-CN.md @@ -376,10 +376,10 @@ export default { | 事件名 | 说明 | 回调参数 | | --- | --- | --- | -| confirm | 点击完成按钮时触发 | _{ selectedValues, selectedOptions }_ | -| cancel | 点击取消按钮时触发 | _{ selectedValues, selectedOptions }_ | -| change | 选项改变时触发 | _{ selectedValues, selectedOptions, columnIndex }_ | -| click-option | 点击选项时触发 | _{ currentOption, selectedValues, selectedOptions, columnIndex }_ | +| confirm | 点击完成按钮时触发 | _{ selectedValues, selectedOptions, selectedIndexes }_ | +| cancel | 点击取消按钮时触发 | _{ selectedValues, selectedOptions, selectedIndexes }_ | +| change | 选项改变时触发 | _{ selectedValues, selectedOptions, selectedIndexes, columnIndex }_ | +| click-option | 点击选项时触发 | _{ currentOption, selectedValues, selectedOptions, selectedIndexes, columnIndex }_ | ### Slots diff --git a/packages/vant/src/picker/test/index.spec.tsx b/packages/vant/src/picker/test/index.spec.tsx index 5447b1d19..87fe78c7d 100644 --- a/packages/vant/src/picker/test/index.spec.tsx +++ b/packages/vant/src/picker/test/index.spec.tsx @@ -23,6 +23,7 @@ test('should emit confirm event after clicking the confirm button', async () => { selectedOptions: [{ text: '1990', value: '1990' }], selectedValues: ['1990'], + selectedIndexes: [0], }, ]); }); @@ -40,6 +41,7 @@ test('should emit cancel event after clicking the cancel button', () => { { selectedOptions: [{ text: '1990', value: '1990' }], selectedValues: ['1990'], + selectedIndexes: [0], }, ]); }); @@ -60,6 +62,7 @@ test('should emit change event after draging the column', () => { columnIndex: 0, selectedOptions: [{ text: '1995', value: '1995' }], selectedValues: ['1995'], + selectedIndexes: [5], }, ], ]); @@ -83,6 +86,7 @@ test('should emit change event when after clicking a option', async () => { columnIndex: 0, selectedOptions: [{ text: 'B', value: 'B' }], selectedValues: ['B'], + selectedIndexes: [1], }, ], ]); @@ -134,6 +138,7 @@ test('should emit click-option event after clicking an option', async () => { currentOption: { text: '1990', value: '1990' }, selectedOptions: [{ text: '1990', value: '1990' }], selectedValues: ['1990'], + selectedIndexes: [0], }, ]); }); @@ -180,7 +185,11 @@ test('should allow to update columns props dynamically', async () => { await wrapper.find('.van-picker__confirm').trigger('click'); expect(wrapper.emitted<[string, number]>('confirm')![0]).toEqual([ - { selectedOptions: [{ text: '2', value: '2' }], selectedValues: ['2'] }, + { + selectedOptions: [{ text: '2', value: '2' }], + selectedValues: ['2'], + selectedIndexes: [0], + }, ]); }); @@ -205,7 +214,11 @@ test('should not reset index when columns unchanged', async () => { await wrapper.find('.van-picker__confirm').trigger('click'); expect(wrapper.emitted<[string, number]>('confirm')![0]).toEqual([ - { selectedOptions: [{ text: '2', value: '2' }], selectedValues: ['2'] }, + { + selectedOptions: [{ text: '2', value: '2' }], + selectedValues: ['2'], + selectedIndexes: [1], + }, ]); }); diff --git a/packages/vant/src/picker/types.ts b/packages/vant/src/picker/types.ts index a85bd8e9c..a6a84b073 100644 --- a/packages/vant/src/picker/types.ts +++ b/packages/vant/src/picker/types.ts @@ -47,6 +47,7 @@ export type PickerInstance = ComponentPublicInstance; export type PickerConfirmEventParams = { selectedValues: Numeric[]; selectedOptions: Array; + selectedIndexes: number[]; }; export type PickerCancelEventParams = PickerConfirmEventParams; diff --git a/packages/vant/src/time-picker/test/index.spec.tsx b/packages/vant/src/time-picker/test/index.spec.tsx index 3d1f08370..afc3f3505 100644 --- a/packages/vant/src/time-picker/test/index.spec.tsx +++ b/packages/vant/src/time-picker/test/index.spec.tsx @@ -77,6 +77,7 @@ test('should emit confirm event after clicking the confirm button', async () => { text: '00', value: '00' }, ], selectedValues: ['12', '00'], + selectedIndexes: [12, 0], }, ], ]); @@ -105,6 +106,7 @@ test('should emit confirm event correctly after setting values', async () => { { text: '00', value: '00' }, ], selectedValues: ['00', '00'], + selectedIndexes: [0, 0], }, ], [ @@ -114,6 +116,7 @@ test('should emit confirm event correctly after setting values', async () => { { text: '30', value: '30' }, ], selectedValues: ['22', '30'], + selectedIndexes: [22, 30], }, ], ]); @@ -141,6 +144,7 @@ test('should emit confirm event correctly after setting range', async () => { { text: '30', value: '30' }, ], selectedValues: ['20', '30'], + selectedIndexes: [0, 0], }, ], ]); @@ -167,6 +171,7 @@ test('should emit confirm event correctly after setting smaller max-hour and max { text: '00', value: '00' }, ], selectedValues: ['00', '00'], + selectedIndexes: [0, 0], }, ], ]);