Fix/picker swipercell

packages/vantui-demo/src/pages/swipe-cell/index.js

@@ -52,7 +52,7 @@ export default class Index extends Component {
           <DemoBlock title="基础用法">
             <SwipeCell
               rightWidth={65}
-              leftWidth={65}
+              leftWidth={0}
               renderLeft={
                 <>
                   <View className="van-swipe-cell__left_">选择</View>

packages/vantui/src/datetime-picker/index.tsx

@@ -1,5 +1,12 @@
-import { useState, useCallback, useEffect, useRef } from 'react'
+import {
+  useState,
+  useCallback,
+  useEffect,
+  useRef,
+  useLayoutEffect,
+} from 'react'
 import { ITouchEvent } from '@tarojs/components'
+import { PickerChangeEvents } from 'packages/vantui/types/picker'
 import VanPicker from '../picker/index'
 import {
   DatetimePickerProps,
@@ -15,7 +22,6 @@ import {
   range,
   isValidDate,
   currentYear,
-  diff,
 } from './wxs'
 
 export function DatetimePicker(props: DatetimePickerProps) {
@@ -55,50 +61,53 @@ export function DatetimePicker(props: DatetimePickerProps) {
     if (PickRef.current) {
       const { setColumnValues } = PickRef.current
       PickRef.current.setColumnValues = (...args: any) =>
-        setColumnValues.apply(PickRef.current, [...args, false])
+        setColumnValues.apply(PickRef.current, [args[1], args[2], false])
     }
     return PickRef.current
   }, [])
 
-  const getBoundary = useCallback(function (type, innerValue) {
-    const value = new Date(innerValue)
-    // const boundary = new Date(data[`${type}Date`])
-    const boundary = new Date()
-    let year = boundary.getFullYear() - 5
-    let month = 1
-    let date = 1
-    let hour = 0
-    let minute = 0
-    if (type === 'max') {
-      month = 12
-      date = getMonthEndDay(value.getFullYear(), value.getMonth() + 1)
-      hour = 23
-      minute = 59
-      year = year + 10
-    }
-    // if (value.getFullYear() === year) {
-    //   month = boundary.getMonth() + 1
-    //   if (value.getMonth() + 1 === month) {
-    //     date = boundary.getDate()
-    //     if (value.getDate() === date) {
-    //       hour = boundary.getHours()
-    //       if (value.getHours() === hour) {
-    //         minute = boundary.getMinutes()
-    //       }
-    //     }
-    //   }
-    // }
-    return {
-      [`${type}Year`]: year,
-      [`${type}Month`]: month,
-      [`${type}Date`]: date,
-      [`${type}Hour`]: hour,
-      [`${type}Minute`]: minute,
-    }
-  }, [])
+  const getBoundary = useCallback(
+    function (type, innerValue) {
+      const value = new Date(innerValue)
+      const yearDate = `${type}Date` === 'maxDate' ? maxDate : minDate
+      const boundary = new Date(yearDate)
+      const year = boundary.getFullYear()
+      let month = 1
+      let date = 1
+      let hour = 0
+      let minute = 0
+      if (type === 'max') {
+        month = 12
+        date = getMonthEndDay(value.getFullYear(), value.getMonth() + 1)
+        hour = 23
+        minute = 59
+      }
+      if (value.getFullYear() === year) {
+        month = boundary.getMonth() + 1
+        if (value.getMonth() + 1 === month) {
+          date = boundary.getDate()
+          if (value.getDate() === date) {
+            hour = boundary.getHours()
+            if (value.getHours() === hour) {
+              minute = boundary.getMinutes()
+            }
+          }
+        }
+      }
+
+      return {
+        [`${type}Year`]: year,
+        [`${type}Month`]: month,
+        [`${type}Date`]: date,
+        [`${type}Hour`]: hour,
+        [`${type}Minute`]: minute,
+      }
+    },
+    [maxDate, minDate],
+  )
 
   const getRanges = useCallback(
-    function (): any {
+    function (nowValue?: any): any {
       const res = [
         {
           type: 'hour',
@@ -114,11 +123,11 @@ export function DatetimePicker(props: DatetimePickerProps) {
       }
       const { maxYear, maxDate, maxMonth, maxHour, maxMinute } = getBoundary(
         'max',
-        innerValue,
+        nowValue || innerValue,
       )
       const { minYear, minDate, minMonth, minHour, minMinute } = getBoundary(
         'min',
-        innerValue,
+        nowValue || innerValue,
       )
       const result = [
         {
@@ -151,8 +160,8 @@ export function DatetimePicker(props: DatetimePickerProps) {
   )
 
   const getOriginColumns = useCallback(
-    function () {
-      const results = getRanges().map(({ type, range }: any) => {
+    function (nowValue?: any) {
+      const results = getRanges(nowValue).map(({ type, range }: any) => {
         let values = times(range[1] - range[0] + 1, (index: number) => {
           const value = range[0] + index
           return type === 'year' ? `${value}` : padZero(value)
@@ -169,17 +178,15 @@ export function DatetimePicker(props: DatetimePickerProps) {
   )
 
   const updateColumns = useCallback(
-    function () {
-      const results = getOriginColumns().map((column: any) => ({
+    function (nowValue?: any) {
+      const results = getOriginColumns(nowValue).map((column: any) => ({
         values: column.values.map((value: any) =>
           formatter(column.type, value),
         ),
       }))
-      if (!diff(results, columns)) {
-        return setColumns(results)
-      }
+      return setColumns(results)
     },
-    [columns, formatter, getOriginColumns],
+    [formatter, getOriginColumns],
   )
 
   const updateColumnValue = useCallback(
@@ -207,13 +214,13 @@ export function DatetimePicker(props: DatetimePickerProps) {
         }
       }
       setInnerValue(value)
-      updateColumns()
+      updateColumns(value)
 
       return new Promise((resolve) => {
         setTimeout(() => {
           picker.setValues(values)
           resolve(value)
-        }, 6)
+        }, 16)
       })
     },
     [formatter, getPicker, type, updateColumns],
@@ -243,13 +250,19 @@ export function DatetimePicker(props: DatetimePickerProps) {
     [maxDate, maxHour, maxMinute, minDate, minHour, minMinute, type],
   )
 
+  useLayoutEffect(function () {
+    const val = correctValue(value)
+    updateColumnValue(val)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
   useEffect(
     function () {
       const val = correctValue(value)
       const isEqual = val === innerValue
       if (!isEqual) {
         updateColumnValue(val).then(() => {
-          if (onInput)
+          if (onInput) {
             onInput({
               detail: val,
               currentTarget: {
@@ -258,16 +271,32 @@ export function DatetimePicker(props: DatetimePickerProps) {
                 },
               },
             } as any)
+          }
         })
       }
     },
-    [correctValue, innerValue, onInput, updateColumnValue, value, type],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [value, type, minDate, maxDate, minHour, maxHour, minMinute, maxMinute],
   )
 
-  const onChange_ = function () {
+  const onChange_ = function (e: PickerChangeEvents) {
+    const valueArr: any = e.detail.value
     let value: any
     const picker = getPicker()
-    const originColumns = getOriginColumns()
+    if (type === 'datetime') {
+      value = new Date(
+        `${valueArr[0]}-${valueArr[1]}-${valueArr[2]} ${valueArr[3]}:${valueArr[4]}`,
+      ).getTime()
+    } else if (type === 'date') {
+      value = new Date(`${valueArr[0]}-${valueArr[1]}-${valueArr[2]}`).getTime()
+    } else if (type === 'time') {
+      value = new Date(`${valueArr[0]}:${valueArr[1]}`).getTime()
+    } else if (type === 'year-month') {
+      value = new Date(`${valueArr[0]}-${valueArr[1]}`).getTime()
+    }
+
+    const originColumns = getOriginColumns(value)
+
     if (type === 'time') {
       const indexes = picker.getIndexes()
       value = `${+originColumns[0].values[indexes[0]]}:${+originColumns[1]

packages/vantui/src/picker-column/index.tsx

@@ -33,7 +33,7 @@ function Index(
   } = props
 
   const [options, setOptions] = useState<Array<any>>([])
-  const [currentIndex, setCurrentIndex] = useState(0)
+  const [currentIndex, setCurrentIndex] = useState<unknown>()
   const [duration, setDuration] = useState(0)
   const [startY, setStartY] = useState(0)
   const [offset, setOffset] = useState(0)
@@ -46,7 +46,9 @@ function Index(
 
   const adjustIndex = useCallback(
     function (index: number): any {
-      const initialOptions_ = options as Array<any>
+      const initialOptions_ = (
+        options.length ? options : initialOptions
+      ) as Array<any>
       const count = initialOptions_.length
       index = range(index, 0, count)
       for (let i = index; i < count; i++) {
@@ -60,7 +62,7 @@ function Index(
         }
       }
     },
-    [isDisabled, options],
+    [isDisabled, options, initialOptions],
   )
 
   const setIndex = useCallback(
@@ -78,19 +80,19 @@ function Index(
     [adjustIndex, curColIndex, currentIndex, itemHeight, onChange],
   )
 
+  useEffect(function () {
+    setCurrentIndex(defaultIndex)
+    setIndex(defaultIndex || 0)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
   useEffect(
     function () {
-      if (defaultIndex && !currentIndex) setCurrentIndex(defaultIndex || 0)
       if (canInit) {
         setOptions(initialOptions || [])
       }
-      setTimeout(() => {
-        if (defaultIndex && !currentIndex) {
-          setIndex(defaultIndex || 0)
-        }
-      })
     },
-    [currentIndex, initialOptions, setIndex, defaultIndex, canInit],
+    [canInit, initialOptions],
   )
 
   const onTouchMove = useCallback(
@@ -129,7 +131,7 @@ function Index(
         )
         setTimeout(() => {
           setIndex(index, true)
-        }, 16)
+        }, 5.5)
       }
     },
     [startOffset, offset, itemHeight, options.length, setIndex],
@@ -154,7 +156,7 @@ function Index(
 
   const getValue = useCallback(
     function () {
-      return options[currentIndex]
+      return options[currentIndex as number]
     },
     [options, currentIndex],
   )

packages/vantui/src/picker/index.less

@@ -79,14 +79,14 @@
     backface-visibility: hidden;
     pointer-events: none;
   }
+}
 
-  &__frame {
-    position: absolute;
-    top: 50%;
-    right: @padding-md;
-    left: @padding-md;
-    z-index: 1;
-    transform: translateY(-50%);
-    pointer-events: none;
-  }
+.van-picker .van-picker__frame {
+  position: absolute;
+  top: 50%;
+  right: @padding-md;
+  left: @padding-md;
+  z-index: 1;
+  transform: translateY(-50%);
+  pointer-events: none;
 }

packages/vantui/src/picker/index.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import {
   useEffect,
-  useState,
   useCallback,
   useRef,
   forwardRef,
@@ -42,13 +41,10 @@ const Picker = forwardRef(function Index(
     ...others
   } = props
 
-  const [simple, setSimple] = useState(false)
   const children = useRef<Array<any>>([])
 
   useEffect(
     function () {
-      const simple = Boolean(columns && columns.length && !columns[0])
-      setSimple(simple)
       if (Array.isArray(children) && children.length) {
         setColumns().catch(() => {})
       }
@@ -58,6 +54,7 @@ const Picker = forwardRef(function Index(
 
   const emit = useCallback(function (event = {}) {
     const type = event?.currentTarget?.dataset['type']
+    const simple = columns && columns.length && !columns[0].values
     if (typeof event === 'number' || !type) {
       if (onChange) {
         const event_ = {}
@@ -126,19 +123,20 @@ const Picker = forwardRef(function Index(
 
   const setColumns = useCallback(
     function () {
+      const simple = columns && columns.length && !columns[0].values
       const columns_ = simple ? [{ values: columns }] : columns
       const stack = (columns_ || []).map((column, index) =>
         setColumnValues(index, column.values),
       )
       return Promise.all(stack)
     },
-    [columns, simple],
+    [columns],
   )
 
   const setColumnValues = useCallback(function (
     index,
     options,
-    needReset = true,
+    needReset = false,
   ) {
     const column = children.current[index]
     if (column == null) {