From 040ffbb8cafedf5d606ac2ce895c16794a8be53d Mon Sep 17 00:00:00 2001 From: ywymoshi <46644748+ywymoshi@users.noreply.github.com> Date: Thu, 12 May 2022 10:23:44 +0800 Subject: [PATCH] fix(Picker): picker columnsfieldnames responsiveness (#10562) * fix(Picker): picker columnsfieldnames responsiveness * fix(Picker): picker columnsfieldnames responsiveness by computed Co-authored-by: wenyaoyan --- packages/vant/src/picker/Picker.tsx | 57 ++++++++++---------- packages/vant/src/picker/test/index.spec.tsx | 26 ++++++++- 2 files changed, 54 insertions(+), 29 deletions(-) diff --git a/packages/vant/src/picker/Picker.tsx b/packages/vant/src/picker/Picker.tsx index 92a3a393f..049b1bd0c 100644 --- a/packages/vant/src/picker/Picker.tsx +++ b/packages/vant/src/picker/Picker.tsx @@ -90,19 +90,14 @@ export default defineComponent({ const hasOptions = ref(false); const formattedColumns = ref([]); - const { - text: textKey, - values: valuesKey, - children: childrenKey, - } = extend( - { - // compatible with valueKey prop - text: props.valueKey || 'text', - values: 'values', - children: 'children', - }, - props.columnsFieldNames - ); + const columnsFieldNames = computed(() => { + const { columnsFieldNames } = props; + return { + text: columnsFieldNames?.text || props.valueKey || 'text', + values: columnsFieldNames?.values || 'values', + children: columnsFieldNames?.children || 'children', + }; + }); const { children, linkChildren } = useChildren(PICKER_KEY); @@ -113,10 +108,10 @@ export default defineComponent({ const dataType = computed(() => { const firstColumn = props.columns[0]; if (typeof firstColumn === 'object') { - if (childrenKey in firstColumn) { + if (columnsFieldNames.value.children in firstColumn) { return 'cascade'; } - if (valuesKey in firstColumn) { + if (columnsFieldNames.value.values in firstColumn) { return 'object'; } } @@ -127,11 +122,11 @@ export default defineComponent({ const formatted: PickerObjectColumn[] = []; let cursor: PickerObjectColumn = { - [childrenKey]: props.columns, + [columnsFieldNames.value.children]: props.columns, }; - while (cursor && cursor[childrenKey]) { - const children = cursor[childrenKey]; + while (cursor && cursor[columnsFieldNames.value.children]) { + const children = cursor[columnsFieldNames.value.children]; let defaultIndex = cursor.defaultIndex ?? +props.defaultIndex; while (children[defaultIndex] && children[defaultIndex].disabled) { @@ -144,7 +139,8 @@ export default defineComponent({ } formatted.push({ - [valuesKey]: cursor[childrenKey], + [columnsFieldNames.value.values]: + cursor[columnsFieldNames.value.children], className: cursor.className, defaultIndex, }); @@ -159,7 +155,9 @@ export default defineComponent({ const { columns } = props; if (dataType.value === 'plain') { - formattedColumns.value = [{ [valuesKey]: columns }]; + formattedColumns.value = [ + { [columnsFieldNames.value.values]: columns }, + ]; } else if (dataType.value === 'cascade') { formatCascade(); } else { @@ -167,7 +165,9 @@ export default defineComponent({ } hasOptions.value = formattedColumns.value.some( - (item) => item[valuesKey] && item[valuesKey].length !== 0 + (item) => + item[columnsFieldNames.value.values] && + item[columnsFieldNames.value.values].length !== 0 ); }; @@ -185,18 +185,19 @@ export default defineComponent({ const onCascadeChange = (columnIndex: number) => { let cursor: PickerObjectColumn = { - [childrenKey]: props.columns, + [columnsFieldNames.value.children]: props.columns, }; const indexes = getIndexes(); for (let i = 0; i <= columnIndex; i++) { - cursor = cursor[childrenKey][indexes[i]]; + cursor = cursor[columnsFieldNames.value.children][indexes[i]]; } - while (cursor && cursor[childrenKey]) { + while (cursor && cursor[columnsFieldNames.value.children]) { columnIndex++; - setColumnValues(columnIndex, cursor[childrenKey]); - cursor = cursor[childrenKey][cursor.defaultIndex || 0]; + setColumnValues(columnIndex, cursor[columnsFieldNames.value.children]); + cursor = + cursor[columnsFieldNames.value.children][cursor.defaultIndex || 0]; } }; @@ -345,14 +346,14 @@ export default defineComponent({ formattedColumns.value.map((item, columnIndex) => ( onChange(columnIndex)} /> diff --git a/packages/vant/src/picker/test/index.spec.tsx b/packages/vant/src/picker/test/index.spec.tsx index ae2a47dad..678eaa040 100644 --- a/packages/vant/src/picker/test/index.spec.tsx +++ b/packages/vant/src/picker/test/index.spec.tsx @@ -28,7 +28,6 @@ test('simple columns confirm & cancel event', () => { expect(wrapper.emitted('cancel')![0]).toEqual(['1990', 0]); wrapper.unmount(); }); - test('multiple columns confirm & cancel event', () => { const wrapper = mount(Picker, { props: { @@ -359,3 +358,28 @@ test('should not render mask and frame when options is empty', async () => { expect(wrapper.find('.van-picker__mask').exists()).toBeTruthy(); expect(wrapper.find('.van-picker__frame').exists()).toBeTruthy(); }); + +test('columns-field-names responsiveness', async () => { + const columnsOne = [ + { type: 1, name: 'Ios' }, + { type: 2, name: 'Android' }, + ]; + const columnsTwo = [ + { type: 1, serverName: 'server1' }, + { type: 2, serverName: 'server2' }, + ]; + const wrapper = mount(Picker, { + props: { + columns: columnsOne, + columnsFieldNames: { + text: 'name', + }, + }, + }); + expect(wrapper.findAll('.van-ellipsis')[0].text()).toEqual('Ios'); + await wrapper.setProps({ + columns: columnsTwo, + columnsFieldNames: { text: 'serverName' }, + }); + expect(wrapper.findAll('.van-ellipsis')[0].text()).toEqual('server1'); +});