feat(picker): support custom column field names (#2460)

jdf2e · Aug 17, 2023 · 977a805 · 977a805
1 parent 6e61205
commit 977a805
Show file tree

Hide file tree

Showing 13 changed files with 492 additions and 210 deletions.
diff --git a/src/packages/__VUE/picker/Column.vue b/src/packages/__VUE/picker/Column.vue
@@ -6,23 +6,23 @@
       :style="threeDimensional ? touchRollerStyle : touchTileStyle"
       @transitionend="stopMomentum"
     >
-      <template v-for="(item, index) in column" :key="item.value ? item.value : index">
+      <template v-for="(item, index) in column" :key="item[fieldNames.value] ?? index">
         <!-- 3D 效果 -->
         <view
           class="nut-picker-roller-item"
           :class="{ 'nut-picker-roller-item-hidden': isHidden(index + 1) }"
           :style="setRollerStyle(index + 1)"
-          v-if="item && item.text && threeDimensional"
+          v-if="item && item[fieldNames.text] && threeDimensional"
         >
-          {{ item.text }}
+          {{ item[fieldNames.text] }}
         </view>
         <!-- 平铺 -->
         <view
           class="nut-picker-roller-item-tile"
           :style="{ height: pxCheck(optionHeight), lineHeight: pxCheck(optionHeight) }"
-          v-if="item && item.text && !threeDimensional"
+          v-if="item && item[fieldNames.text] && !threeDimensional"
         >
-          {{ item.text }}
+          {{ item[fieldNames.text] }}
         </view>
       </template>
     </view>
@@ -32,7 +32,7 @@
 <script lang="ts">
 import { reactive, ref, watch, computed, toRefs, onMounted, PropType } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-import { PickerOption, TouchParams } from './types';
+import { PickerOption, TouchParams, PickerFieldNames } from './types';
 import { preventDefault, clamp } from '@/packages/utils/util';
 import { pxCheck } from '@/packages/utils/pxCheck';
 import { useTouch } from '@/packages/utils/useTouch';
@@ -63,6 +63,10 @@ export default create({
     optionHeight: {
       type: [Number, String],
       default: 36
+    },
+    fieldNames: {
+      type: Object as PropType<Required<PickerFieldNames>>,
+      default: () => ({})
     }
   },
 
@@ -255,7 +259,7 @@ export default create({
 
     const modifyStatus = (type: boolean) => {
       const { column } = props;
-      let index = column.findIndex((columnItem) => columnItem.value === props.value);
+      let index = column.findIndex((columnItem) => columnItem[props.fieldNames.value] === props.value);
 
       state.currIndex = index === -1 ? 1 : (index as number) + 1;
       let move = index === -1 ? 0 : (index as number) * +props.optionHeight;

diff --git a/src/packages/__VUE/picker/__tests__/picker.spec.ts b/src/packages/__VUE/picker/__tests__/picker.spec.ts
@@ -25,6 +25,14 @@ const multipleColumns = [
   ]
 ];
 
+const customColumns = [
+  { label: '周一', value: 'Monday' },
+  { label: '周二', value: 'Tuesday' },
+  { label: '周三', value: 'Wednesday' },
+  { label: '周四', value: 'Thursday' },
+  { label: '周五', value: 'Friday' }
+];
+
 test('first render', async () => {
   const wrapper = mount(Picker, {
     props: {
@@ -107,3 +115,26 @@ test('multiple columns render', async () => {
   const columnItems = wrapper.findAll('.nut-picker__columnitem');
   expect(columnItems.length).toEqual(2);
 });
+
+test('custom columns field', async () => {
+  const wrapper = mount(Picker, {
+    props: {
+      visible: true,
+      columns: customColumns,
+      fieldNames: {
+        text: 'label',
+        value: 'value'
+      }
+    }
+  });
+  await nextTick();
+  const columnItems = wrapper.findAll('.nut-picker__columnitem');
+  expect(columnItems.length).toEqual(1);
+  wrapper.find('.nut-picker__right').trigger('click');
+  expect(wrapper.emitted().confirm[0]).toEqual([
+    {
+      selectedOptions: [{ label: '周一', value: 'Monday' }],
+      selectedValue: ['Monday']
+    }
+  ]);
+});
diff --git a/src/packages/__VUE/picker/baseProps.ts b/src/packages/__VUE/picker/baseProps.ts
@@ -1,5 +1,5 @@
 import { PropType } from 'vue';
-import { PickerOption } from './types';
+import { PickerOption, PickerFieldNames } from './types';
 export default {
   modelValue: {
     type: Array as PropType<(string | number)[]>,
@@ -42,5 +42,9 @@ export default {
   optionHeight: {
     type: [Number, String],
     default: 36
+  },
+  fieldNames: {
+    type: Object as PropType<PickerFieldNames>,
+    default: () => ({})
   }
 };
diff --git a/src/packages/__VUE/picker/common.ts b/src/packages/__VUE/picker/common.ts
@@ -14,7 +14,8 @@ export const componentWeb = {
   props: baseProps,
   emits: ['cancel', 'change', 'confirm', 'update:modelValue'],
   setup(props: any, { emit }: any) {
-    const { changeHandler, confirm, defaultValues, columnsList, columnsType, classes, cancel } = usePicker(props, emit);
+    const { changeHandler, confirm, defaultValues, columnsList, columnsType, columnFieldNames, classes, cancel } =
+      usePicker(props, emit);
 
     const state = reactive<{
       ENV: TaroGeneral.ENV_TYPE;
@@ -54,6 +55,7 @@ export const componentWeb = {
       column,
       columnsType,
       columnsList,
+      columnFieldNames,
       cancel,
       changeHandler,
       confirmHandler,
@@ -73,10 +75,17 @@ export const componentWeapp = {
   props: baseProps,
   emits: ['cancel', 'change', 'confirm', 'update:modelValue'],
   setup(props: any, { emit }: any) {
-    const { changeHandler, confirm, defaultValues, columnsList, isSameValue, columnsType, classes, cancel } = usePicker(
-      props,
-      emit
-    );
+    const {
+      changeHandler,
+      confirm,
+      defaultValues,
+      columnsList,
+      isSameValue,
+      columnsType,
+      columnFieldNames,
+      classes,
+      cancel
+    } = usePicker(props, emit);
     const state = reactive({
       show: false,
       picking: false,
@@ -96,10 +105,11 @@ export const componentWeapp = {
 
     const defaultValuesConvert = () => {
       const defaultIndexs: number[] = [];
+      const fields = columnFieldNames.value;
       if (defaultValues.value.length > 0) {
         defaultValues.value.forEach((value, index) => {
           for (let i = 0; i < columnsList.value[index].length; i++) {
-            if (columnsList.value[index][i].value === value) {
+            if (columnsList.value[index][i][fields.value] === value) {
               defaultIndexs.push(i);
               break;
             }
@@ -109,7 +119,7 @@ export const componentWeapp = {
         if (columnsList && columnsList.value.length > 0) {
           columnsList.value.forEach((item) => {
             defaultIndexs.push(0);
-            item.length > 0 && defaultValues.value.push(item[0].value);
+            item.length > 0 && defaultValues.value.push(item[0][fields.value]);
           });
         }
       }
@@ -177,6 +187,7 @@ export const componentWeapp = {
       column,
       columnsType,
       columnsList,
+      columnFieldNames,
       cancel,
       changeHandler,
       confirmHandler,