Refactor datepicker

src/config.json

@@ -688,8 +688,8 @@
           "sort": 10,
           "show": true,
           "taro": true,
-          "author": "dsj",
-          "dd": false
+          "dd": false,
+          "author": "songsong"
         },
         {
           "version": "3.0.0",
@@ -1456,4 +1456,4 @@
       ]
     }
   ]
-}
+}

src/packages/backtop/doc.taro.md

@@ -61,7 +61,7 @@ import { BackTop } from '@nutui/nutui-react-taro'
 | threshold | 页面垂直滚动多高后出现 | `number` | `200` |
 | zIndex | 设置组件页面层级 | `number` | `900` |
 | duration | 设置动画持续时间，为 0 时表示无动画 | `number` | `1000` |
-| scrollRes | 被监听容器滚动时的回调参数，主要用于 rn、鸿蒙端 | `PageScrollObejct` | `-` |
+| scrollRes | 被监听容器滚动时的回调参数 | `PageScrollObejct` | `-` |
 | onClick | 按钮点击时触发事件 | `(event: MouseEvent<HTMLDivElement>) => void` | `-` |
 
 ## 主题定制

src/packages/calendar/demos/h5/demo6.tsx

@@ -1,5 +1,12 @@
 import React, { useRef, useState } from 'react'
-import { Cell, Calendar, DatePicker, CalendarDay } from '@nutui/nutui-react'
+import {
+  Cell,
+  Calendar,
+  DatePicker,
+  CalendarDay,
+  PickerValue,
+  PickerOptions,
+} from '@nutui/nutui-react'
 
 const padZero = (num: number | string, targetLength = 2) => {
   let str = `${num}`
@@ -32,14 +39,18 @@ const Demo6 = () => {
     const dateArr = [...[chooseData[0][3], chooseData[1][3]]]
     setDate([...dateArr])
   }
-  const confirm = (values: (string | number)[], options: any[]) => {
+  const confirm = (values: PickerValue[], options: PickerOptions) => {
     if (desc.current === 1) {
       setDesc1(
-        options.map((option) => padZero(parseInt(option.text))).join(':')
+        options
+          .map((option) => padZero(parseInt(option.label as string)))
+          .join(':')
       )
     } else {
       setDesc2(
-        options.map((option) => padZero(parseInt(option.text))).join(':')
+        options
+          .map((option) => padZero(parseInt(option.label as string)))
+          .join(':')
       )
     }
   }

src/packages/calendar/demos/taro/demo6.tsx

@@ -4,6 +4,8 @@ import {
   Calendar,
   DatePicker,
   CalendarDay,
+  PickerValue,
+  PickerOptions,
 } from '@nutui/nutui-react-taro'
 import { View } from '@tarojs/components'
 
@@ -33,14 +35,18 @@ const Demo6 = () => {
     const dateArr = [...[chooseData[0][3], chooseData[1][3]]]
     setDate([...dateArr])
   }
-  const confirm = (values: (string | number)[], options: any[]) => {
+  const confirm = (values: PickerValue[], options: PickerOptions) => {
     if (desc.current === 1) {
       setDesc1(
-        options.map((option) => padZero(parseInt(option.text))).join(':')
+        options
+          .map((option) => padZero(parseInt(option.label as string)))
+          .join(':')
       )
     } else {
       setDesc2(
-        options.map((option) => padZero(parseInt(option.text))).join(':')
+        options
+          .map((option) => padZero(parseInt(option.label as string)))
+          .join(':')
       )
     }
   }

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')
+  const lists = columns[0].querySelectorAll('.nut-pickerview-roller-item-tiled')
   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')
+  const lists = columns[1].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')
+  const lists = columns[3].querySelectorAll('.nut-pickerview-roller-item')
   expect(lists.length).toBe(4)
 })

src/packages/datepicker/datepicker.taro.tsx

@@ -5,7 +5,7 @@ import React, {
   useImperativeHandle,
 } from 'react'
 import { View } from '@tarojs/components'
-import Picker, { PickerOption } from '@/packages/picker/index.taro'
+import Picker from '@/packages/picker/index.taro'
 import { useConfig } from '@/packages/configprovider/index.taro'
 import { usePropsValue } from '@/hooks/use-props-value'
 import { ComponentDefaults } from '@/utils/typings'
@@ -17,8 +17,9 @@ import {
   getDatePartValue,
   handlePickerValueChange,
 } from './utils'
-import { DatePickerActions, DatePickerRef } from './types'
 import { DatePickerProps } from './types.taro'
+import { DatePickerActions, DatePickerRef } from './types'
+import { PickerOptions, PickerValue } from '@/packages/pickerview/types'
 
 const currentYear = new Date().getFullYear()
 
@@ -76,8 +77,8 @@ const InternalPicker: ForwardRefRenderFunction<
     seconds: lang.seconds,
   }
 
-  const [pickerValue, setPickerValue] = useState<(string | number)[]>([])
-  const [pickerOptions, setPickerOptions] = useState<PickerOption[][]>([])
+  const [pickerValue, setPickerValue] = useState<PickerValue[]>([])
+  const [pickerOptions, setPickerOptions] = useState<PickerOptions[]>([])
 
   const [selectedDate, setSelectedDate] = usePropsValue<number>({
     value: props.value && formatValue(props.value, startDate, endDate),
@@ -107,7 +108,7 @@ const InternalPicker: ForwardRefRenderFunction<
 
   const handleDateComparison = (
     newDate: Date | null,
-    selectedOptions: PickerOption[],
+    selectedOptions: PickerOptions,
     index: number
   ) => {
     const isEqual = new Date(innerDate)?.getTime() === newDate?.getTime()
@@ -146,10 +147,7 @@ const InternalPicker: ForwardRefRenderFunction<
     onClose?.()
   }
 
-  const handleConfirm = (
-    options: PickerOption[],
-    value: (string | number)[]
-  ) => {
+  const handleConfirm = (options: PickerOptions, value: PickerValue[]) => {
     handlePickerValueChange(
       options,
       value,
@@ -162,8 +160,8 @@ const InternalPicker: ForwardRefRenderFunction<
   }
 
   const handleChange = (
-    selectedOptions: PickerOption[],
-    selectedValue: (string | number)[],
+    selectedOptions: PickerOptions,
+    selectedValue: PickerValue[],
     index: number
   ) => {
     innerVisible &&
@@ -177,7 +175,7 @@ const InternalPicker: ForwardRefRenderFunction<
       )
   }
 
-  const generatePickerColumns = (): PickerOption[][] => {
+  const generatePickerColumns = (): PickerOptions[] => {
     const dateRanges = generateDatePickerRanges(
       type,
       innerDate,
@@ -236,11 +234,9 @@ const InternalPicker: ForwardRefRenderFunction<
             onClose={handleClose}
             onCancel={handleCancel}
             onConfirm={handleConfirm}
-            onChange={(
-              options: PickerOption[],
-              value: (string | number)[],
-              index: number
-            ) => handleChange(options, value, index)}
+            onChange={({ value, index, selectedOptions }) => {
+              handleChange(selectedOptions, value, index)
+            }}
             threeDimensional={threeDimensional}
           />
         )}

src/packages/datepicker/datepicker.tsx

@@ -4,7 +4,7 @@ import React, {
   ForwardRefRenderFunction,
   useImperativeHandle,
 } from 'react'
-import Picker, { PickerOption } from '@/packages/picker'
+import Picker from '@/packages/picker'
 import { useConfig } from '@/packages/configprovider'
 import { usePropsValue } from '@/hooks/use-props-value'
 import { ComponentDefaults } from '@/utils/typings'
@@ -17,6 +17,7 @@ import {
   handlePickerValueChange,
 } from './utils'
 import { DatePickerActions, DatePickerProps, DatePickerRef } from './types'
+import { PickerOptions, PickerValue } from '@/packages/pickerview/types'
 
 const currentYear = new Date().getFullYear()
 
@@ -74,8 +75,8 @@ const InternalPicker: ForwardRefRenderFunction<
     seconds: lang.seconds,
   }
 
-  const [pickerValue, setPickerValue] = useState<(string | number)[]>([])
-  const [pickerOptions, setPickerOptions] = useState<PickerOption[][]>([])
+  const [pickerValue, setPickerValue] = useState<PickerValue[]>([])
+  const [pickerOptions, setPickerOptions] = useState<PickerOptions[]>([])
 
   const [selectedDate, setSelectedDate] = usePropsValue<number>({
     value: props.value && formatValue(props.value, startDate, endDate),
@@ -105,7 +106,7 @@ const InternalPicker: ForwardRefRenderFunction<
 
   const handleDateComparison = (
     newDate: Date | null,
-    selectedOptions: PickerOption[],
+    selectedOptions: PickerOptions,
     index: number
   ) => {
     const isEqual = new Date(innerDate)?.getTime() === newDate?.getTime()
@@ -144,10 +145,7 @@ const InternalPicker: ForwardRefRenderFunction<
     onClose?.()
   }
 
-  const handleConfirm = (
-    options: PickerOption[],
-    value: (string | number)[]
-  ) => {
+  const handleConfirm = (options: PickerOptions, value: PickerValue[]) => {
     handlePickerValueChange(
       options,
       value,
@@ -160,8 +158,8 @@ const InternalPicker: ForwardRefRenderFunction<
   }
 
   const handleChange = (
-    selectedOptions: PickerOption[],
-    selectedValue: (string | number)[],
+    selectedOptions: PickerOptions,
+    selectedValue: PickerValue[],
     index: number
   ) => {
     innerVisible &&
@@ -175,7 +173,7 @@ const InternalPicker: ForwardRefRenderFunction<
       )
   }
 
-  const generatePickerColumns = (): PickerOption[][] => {
+  const generatePickerColumns = (): PickerOptions[] => {
     const dateRanges = generateDatePickerRanges(
       type,
       innerDate,
@@ -234,11 +232,9 @@ const InternalPicker: ForwardRefRenderFunction<
             onClose={handleClose}
             onCancel={handleCancel}
             onConfirm={handleConfirm}
-            onChange={(
-              options: PickerOption[],
-              value: (string | number)[],
-              index: number
-            ) => handleChange(options, value, index)}
+            onChange={({ value, index, selectedOptions }) => {
+              handleChange(selectedOptions, value, index)
+            }}
             threeDimensional={threeDimensional}
           />
         )}

src/packages/datepicker/demos/h5/demo1.tsx

@@ -1,5 +1,10 @@
 import React, { useState } from 'react'
-import { DatePicker, Cell, type PickerOption } from '@nutui/nutui-react'
+import {
+  DatePicker,
+  Cell,
+  PickerValue,
+  PickerOptions,
+} from '@nutui/nutui-react'
 import isEqual from 'react-fast-compare'
 
 const useDatePicker = (initialDate: Date) => {
@@ -31,17 +36,17 @@ const Demo1 = () => {
 
   const handleConfirm =
     (setDesc: (desc: string) => void, setValue?: (value: string) => void) =>
-    (options: PickerOption[], values: (string | number)[]) => {
+    (options: PickerOptions, values: PickerValue[]) => {
       if (setValue) {
         if (isEqual(values, ['2026', '02', '21'])) {
           setValue('2026/03/22')
           setDesc('2026年03月22日')
         } else {
           setValue(values.join('/'))
-          setDesc(options.map((option) => option.text).join(''))
+          setDesc(options.map((option) => option.label).join(''))
         }
       } else {
-        setDesc(options.map((option) => option.text).join(''))
+        setDesc(options.map((option) => option.label).join(''))
       }
     }