refactor: picker

src/config.json

@@ -582,7 +582,7 @@
           "show": true,
           "taro": true,
           "author": "dsj",
-          "dd": false
+          "dd": true
         },
         {
           "version": "2.0.0",
@@ -594,7 +594,7 @@
           "show": true,
           "taro": true,
           "author": "hanyuxinting",
-          "dd": false
+          "dd": true
         },
         {
           "version": "2.0.0",
@@ -607,7 +607,7 @@
           "taro": true,
           "exportEmpty": true,
           "author": "hanyuxinting",
-          "dd": false
+          "dd": true
         },
         {
           "version": "3.0.0",
@@ -687,8 +687,20 @@
           "sort": 10,
           "show": true,
           "taro": true,
-          "author": "dsj",
-          "dd": false
+          "dd": true,
+          "author": "songsong"
+        },
+        {
+          "version": "2.0.0",
+          "name": "PickerView",
+          "type": "component",
+          "cName": "选择器视图",
+          "desc": "PickerView 是 Picker 的内容区域。",
+          "sort": 15,
+          "show": true,
+          "taro": true,
+          "dd": true,
+          "author": "songsong"
         },
         {
           "version": "3.0.0",

src/packages/datepicker/__test__/datepicker.spec.tsx

@@ -21,7 +21,7 @@ test('Show Chinese', async () => {
   fireEvent.click(confirmBtn)
   await waitFor(() => {
     expect(
-      confirm.mock.calls[0][0].map((option: any) => option.text).join('')
+      confirm.mock.calls[0][0].map((option: any) => option.label).join('')
     ).toEqual(`${currentYear - 10}年01月01日`)
   })
 })
@@ -40,13 +40,9 @@ test('Min date & Max date', async () => {
     />
   )
 
-  const columns = container.querySelectorAll('.nut-picker-list')[0]
-  const lists = columns.querySelectorAll('.nut-picker-roller-item-title')
-  const years = ['2020', '2021', '2022']
+  const columns = container.querySelectorAll('.nut-pickerview-list')[0]
+  const lists = columns.querySelectorAll('.nut-pickerview-roller-item-title')
   expect(lists.length).toBe(3)
-  lists.forEach((list, i) => {
-    expect(list.textContent).toEqual(years[i])
-  })
   rerender(
     <DatePicker
       title="日期选择"
@@ -98,22 +94,22 @@ test('Min date & Max date', async () => {
   const formatter = (type: string, option: any) => {
     switch (type) {
       case 'year':
-        option.text += ''
+        option.label += ''
         break
       case 'month':
-        option.text += 'M'
+        option.label += 'M'
         break
       case 'day':
-        option.text += 'D'
+        option.label += 'D'
         break
       case 'hour':
-        option.text += 'H'
+        option.label += 'H'
         break
       case 'minute':
-        option.text += 'M'
+        option.label += 'M'
         break
       default:
-        option.text += ''
+        option.label += ''
     }
     return option
   }
@@ -148,7 +144,7 @@ test('should pick defaultValue', async () => {
   fireEvent.click(confirmBtn)
   await waitFor(() =>
     expect(
-      confirm.mock.calls[0][0].map((option: any) => option.text).join('')
+      confirm.mock.calls[0][0].map((option: any) => option.label).join('')
     ).toEqual('20210301')
   )
 })
@@ -166,8 +162,8 @@ test('Increment step setting', async () => {
     />
   )
 
-  const columns = container.querySelectorAll('.nut-picker-list')[1]
-  const lists = columns.querySelectorAll('.nut-picker-roller-item')
+  const columns = container.querySelectorAll('.nut-pickerview-list')[1]
+  const lists = columns.querySelectorAll('.nut-pickerview-roller-item')
   expect(lists.length).toBe(12)
 })
 
@@ -189,7 +185,7 @@ test('Filter Time', async () => {
     />
   )
 
-  const columns = container.querySelectorAll('.nut-picker-list')[3]
-  const lists = columns.querySelectorAll('.nut-picker-roller-item')
+  const columns = container.querySelectorAll('.nut-pickerview-list')[3]
+  const lists = columns.querySelectorAll('.nut-pickerview-roller-item')
   expect(lists.length).toBe(4)
 })

src/packages/datepicker/datepicker.taro.tsx

@@ -1,11 +1,12 @@
 import React, { FunctionComponent, useState, useEffect } from 'react'
 import { View } from '@tarojs/components'
-import Picker, { PickerOption, PickerProps } from '@/packages/picker/index.taro'
+import Picker, { PickerProps } from '@/packages/picker/index.taro'
 import { useConfig } from '@/packages/configprovider/index.taro'
 import { usePropsValue } from '@/hooks/use-props-value'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 import { isDate } from '@/utils/is-date'
 import { padZero } from '@/utils/pad-zero'
+import { PickerOptionItem, PickerValue } from '@/packages/pickerview/index.taro'
 
 export interface DatePickerProps extends BasicComponent {
   value?: Date
@@ -38,17 +39,17 @@ export interface DatePickerProps extends BasicComponent {
       | 'onChange'
     >
   >
-  formatter: (type: string, option: PickerOption) => PickerOption
-  filter: (type: string, option: PickerOption[]) => PickerOption[]
+  formatter: (type: string, option: PickerOptionItem) => PickerOptionItem
+  filter: (type: string, option: PickerOptionItem[]) => PickerOptionItem[]
   onClose: () => void
   onCancel: () => void
   onConfirm: (
-    selectedOptions: PickerOption[],
-    selectedValue: (string | number)[]
+    selectedOptions: PickerOptionItem[],
+    selectedValue: PickerValue[]
   ) => void
   onChange?: (
-    selectedOptions: PickerOption[],
-    selectedValue: (string | number)[],
+    selectedOptions: PickerOptionItem[],
+    selectedValue: PickerValue[],
     columnIndex: number
   ) => void
 }
@@ -104,8 +105,8 @@ export const DatePicker: FunctionComponent<
     minute: lang.min,
     seconds: lang.seconds,
   }
-  const [pickerValue, setPickerValue] = useState<(string | number)[]>([])
-  const [pickerOptions, setPickerOptions] = useState<PickerOption[][]>([])
+  const [pickerValue, setPickerValue] = useState<PickerValue[]>([])
+  const [pickerOptions, setPickerOptions] = useState<PickerOptionItem[][]>([])
   const formatValue = (value: Date | null) => {
     if (!value || (value && !isDate(value))) {
       value = startDate
@@ -218,7 +219,7 @@ export const DatePicker: FunctionComponent<
   const compareDateChange = (
     currentDate: number,
     newDate: Date | null,
-    selectedOptions: PickerOption[],
+    selectedOptions: PickerOptionItem[],
     index: number
   ) => {
     const isEqual = new Date(currentDate)?.getTime() === newDate?.getTime()
@@ -238,8 +239,8 @@ export const DatePicker: FunctionComponent<
     }
   }
   const handlePickerChange = (
-    selectedOptions: PickerOption[],
-    selectedValue: (number | string)[],
+    selectedOptions: PickerOptionItem[],
+    selectedValue: PickerValue[],
     index: number
   ) => {
     const rangeType = type.toLocaleLowerCase()
@@ -248,7 +249,7 @@ export const DatePicker: FunctionComponent<
         rangeType
       )
     ) {
-      const formatDate: (number | string)[] = []
+      const formatDate: PickerValue[] = []
       selectedValue.forEach((item) => {
         formatDate.push(item)
       })
@@ -313,13 +314,13 @@ export const DatePicker: FunctionComponent<
   const formatOption = (type: string, value: string | number) => {
     if (formatter) {
       return formatter(type, {
-        text: padZero(value, 2),
+        label: padZero(value, 2),
         value: padZero(value, 2),
       })
     }
     const padMin = padZero(value, 2)
     const fatter = showChinese ? zhCNType[type] : ''
-    return { text: padMin + fatter, value: padMin }
+    return { label: padMin + fatter, value: padMin }
   }
 
   const generateColumn = (
@@ -330,7 +331,7 @@ export const DatePicker: FunctionComponent<
     columnIndex: number
   ) => {
     let cmin = min
-    const arr: Array<PickerOption> = []
+    const arr: Array<PickerOptionItem> = []
     let index = 0
     while (cmin <= max) {
       arr.push(formatOption(type, cmin))
@@ -412,14 +413,13 @@ export const DatePicker: FunctionComponent<
           onClose={onClose}
           onCancel={onCancel}
           value={pickerValue}
-          onConfirm={(options: PickerOption[], value: (string | number)[]) =>
-            onConfirm && onConfirm(options, value)
-          }
-          onChange={(
-            options: PickerOption[],
-            value: (number | string)[],
-            index: number
-          ) => handlePickerChange(options, value, index)}
+          onConfirm={(
+            selectedOptions: PickerOptionItem[],
+            selectedValue: PickerValue[]
+          ) => onConfirm && onConfirm(selectedOptions, selectedValue)}
+          onChange={({ value, index, selectedOptions }) => {
+            handlePickerChange(selectedOptions, value, index)
+          }}
           threeDimensional={threeDimensional}
         />
       )}

src/packages/datepicker/datepicker.tsx

@@ -1,11 +1,12 @@
 import React, { FunctionComponent, useState, useEffect } from 'react'
 import Picker from '@/packages/picker'
-import { PickerOption, PickerProps } from '@/packages/picker/index'
+import { PickerProps } from '@/packages/picker/index'
 import { useConfig } from '@/packages/configprovider'
 import { usePropsValue } from '@/hooks/use-props-value'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 import { isDate } from '@/utils/is-date'
 import { padZero } from '@/utils/pad-zero'
+import { PickerOptionItem, PickerValue } from '@/packages/pickerview/index'
 
 export interface DatePickerProps extends BasicComponent {
   value?: Date
@@ -38,17 +39,17 @@ export interface DatePickerProps extends BasicComponent {
       | 'onChange'
     >
   >
-  formatter: (type: string, option: PickerOption) => PickerOption
-  filter: (type: string, option: PickerOption[]) => PickerOption[]
+  formatter: (type: string, option: PickerOptionItem) => PickerOptionItem
+  filter: (type: string, option: PickerOptionItem[]) => PickerOptionItem[]
   onClose: () => void
   onCancel: () => void
   onConfirm: (
-    selectedOptions: PickerOption[],
-    selectedValue: (string | number)[]
+    selectedOptions: PickerOptionItem[],
+    selectedValue: PickerValue[]
   ) => void
   onChange?: (
-    selectedOptions: PickerOption[],
-    selectedValue: (string | number)[],
+    selectedOptions: PickerOptionItem[],
+    selectedValue: PickerValue[],
     columnIndex: number
   ) => void
 }
@@ -104,8 +105,8 @@ export const DatePicker: FunctionComponent<
     minute: lang.min,
     seconds: lang.seconds,
   }
-  const [pickerValue, setPickerValue] = useState<(string | number)[]>([])
-  const [pickerOptions, setPickerOptions] = useState<PickerOption[][]>([])
+  const [pickerValue, setPickerValue] = useState<PickerValue[]>([])
+  const [pickerOptions, setPickerOptions] = useState<PickerOptionItem[][]>([])
   const formatValue = (value: Date | null) => {
     if (!value || (value && !isDate(value))) {
       value = startDate
@@ -218,7 +219,7 @@ export const DatePicker: FunctionComponent<
   const compareDateChange = (
     currentDate: number,
     newDate: Date | null,
-    selectedOptions: PickerOption[],
+    selectedOptions: PickerOptionItem[],
     index: number
   ) => {
     const isEqual = new Date(currentDate)?.getTime() === newDate?.getTime()
@@ -238,8 +239,8 @@ export const DatePicker: FunctionComponent<
     }
   }
   const handlePickerChange = (
-    selectedOptions: PickerOption[],
-    selectedValue: (number | string)[],
+    selectedOptions: PickerOptionItem[],
+    selectedValue: PickerValue[],
     index: number
   ) => {
     const rangeType = type.toLocaleLowerCase()
@@ -248,7 +249,7 @@ export const DatePicker: FunctionComponent<
         rangeType
       )
     ) {
-      const formatDate: (number | string)[] = []
+      const formatDate: PickerValue[] = []
       selectedValue.forEach((item) => {
         formatDate.push(item)
       })
@@ -313,13 +314,13 @@ export const DatePicker: FunctionComponent<
   const formatOption = (type: string, value: string | number) => {
     if (formatter) {
       return formatter(type, {
-        text: padZero(value, 2),
+        label: padZero(value, 2),
         value: padZero(value, 2),
       })
     }
     const padMin = padZero(value, 2)
     const fatter = showChinese ? zhCNType[type] : ''
-    return { text: padMin + fatter, value: padMin }
+    return { label: padMin + fatter, value: padMin }
   }
 
   const generateColumn = (
@@ -330,7 +331,7 @@ export const DatePicker: FunctionComponent<
     columnIndex: number
   ) => {
     let cmin = min
-    const arr: Array<PickerOption> = []
+    const arr: Array<PickerOptionItem> = []
     let index = 0
     while (cmin <= max) {
       arr.push(formatOption(type, cmin))
@@ -407,14 +408,13 @@ export const DatePicker: FunctionComponent<
           onClose={onClose}
           onCancel={onCancel}
           value={pickerValue}
-          onConfirm={(options: PickerOption[], value: (string | number)[]) =>
-            onConfirm && onConfirm(options, value)
-          }
-          onChange={(
-            options: PickerOption[],
-            value: (number | string)[],
-            index: number
-          ) => handlePickerChange(options, value, index)}
+          onConfirm={(
+            selectedOptions: PickerOptionItem[],
+            selectedValue: PickerValue[]
+          ) => onConfirm && onConfirm(selectedOptions, selectedValue)}
+          onChange={({ value, index, selectedOptions }) => {
+            handlePickerChange(selectedOptions, value, index)
+          }}
           threeDimensional={threeDimensional}
         />
       )}