fix: 修复 calendar-picker-view 的一些问题 (#6760)

* fix: 修复 calendar-picker-view 的一些问题 - 修复了默认的 minDay 和 maxDay 会随着 current 变化的问题 - 修复了 view 打开时不会自动滚动到选中值的问题 * test: 补充单元测试 * fix: remove console.log * fix: 无 min 和 max 时，默认值根据 value 进行扩充 * fix: 添加注释 * fix: 优化 defaultMax 取值 * fix: cr 问题修复， --------- Co-authored-by: 高舒夜 <[email protected]>
ant-design · Oct 17, 2024 · 763125e · 763125e
1 parent 26268e8
commit 763125e
Show file tree

Hide file tree

Showing 8 changed files with 324 additions and 3,144 deletions.
diff --git a/src/components/calendar-picker-view/calendar-picker-view.tsx b/src/components/calendar-picker-view/calendar-picker-view.tsx
@@ -1,11 +1,12 @@
 import classNames from 'classnames'
 import dayjs from 'dayjs'
-import isSameOrBefore from 'dayjs/plugin/isSameOrBefore'
 import isoWeek from 'dayjs/plugin/isoWeek'
-import type { ReactNode } from 'react'
+import isSameOrBefore from 'dayjs/plugin/isSameOrBefore'
 import React, {
   forwardRef,
+  ReactNode,
   useContext,
+  useEffect,
   useImperativeHandle,
   useMemo,
   useRef,
@@ -16,10 +17,10 @@ import { usePropsValue } from '../../utils/use-props-value'
 import { mergeProps } from '../../utils/with-default-props'
 import { useConfig } from '../config-provider'
 import {
-  DateRange,
-  Page,
   convertPageToDayjs,
   convertValueToRange,
+  DateRange,
+  Page,
 } from './convert'
 import useSyncScroll from './useSyncScroll'
 
@@ -117,20 +118,45 @@ export const CalendarPickerView = forwardRef<
     dayjs(dateRange ? dateRange[0] : today).date(1)
   )
 
+  const onDateChange = (v: DateRange) => {
+    if (v) {
+      setCurrent(dayjs(v[0]).date(1))
+    }
+
+    setDateRange(v)
+  }
+
   const showHeader = props.title !== false
 
   // =============================== Scroll ===============================
   const context = useContext(Context)
   const scrollTo = useSyncScroll(current, context.visible, bodyRef)
 
   // ============================== Boundary ==============================
+  // 记录默认的 min 和 max，并在外部的值超出边界时自动扩充
+  const [defaultMin, setDefaultMin] = useState(current)
+  const [defaultMax, setDefaultMax] = useState(() => current.add(6, 'month'))
+
+  useEffect(() => {
+    if (dateRange) {
+      const [startDate, endDate] = dateRange
+      if (!props.min && startDate && dayjs(startDate).isBefore(defaultMin)) {
+        setDefaultMin(dayjs(startDate).date(1))
+      }
+
+      if (!props.max && endDate && dayjs(endDate).isAfter(defaultMax)) {
+        setDefaultMax(dayjs(endDate).endOf('month'))
+      }
+    }
+  }, [dateRange])
+
   const maxDay = useMemo(
-    () => (props.max ? dayjs(props.max) : current.add(6, 'month')),
-    [props.max, current]
+    () => (props.max ? dayjs(props.max) : defaultMax),
+    [props.max, defaultMax]
   )
   const minDay = useMemo(
-    () => (props.min ? dayjs(props.min) : current),
-    [props.min, current]
+    () => (props.min ? dayjs(props.min) : defaultMin),
+    [props.min, defaultMin]
   )
 
   // ================================ Refs ================================
@@ -288,29 +314,29 @@ export const CalendarPickerView = forwardRef<
                       }
                       if (props.selectionMode === 'single') {
                         if (props.allowClear && shouldClear()) {
-                          setDateRange(null)
+                          onDateChange(null)
                           return
                         }
-                        setDateRange([date, date])
+                        onDateChange([date, date])
                       } else if (props.selectionMode === 'range') {
                         if (!dateRange) {
-                          setDateRange([date, date])
+                          onDateChange([date, date])
                           setIntermediate(true)
                           return
                         }
                         if (shouldClear()) {
-                          setDateRange(null)
+                          onDateChange(null)
                           setIntermediate(false)
                           return
                         }
                         if (intermediate) {
                           const another = dateRange[0]
-                          setDateRange(
+                          onDateChange(
                             another > date ? [date, another] : [another, date]
                           )
                           setIntermediate(false)
                         } else {
-                          setDateRange([date, date])
+                          onDateChange([date, date])
                           setIntermediate(true)
                         }
                       }

diff --git a/src/components/calendar-picker-view/demos/demo1.tsx b/src/components/calendar-picker-view/demos/demo1.tsx
@@ -1,6 +1,6 @@
-import React from 'react'
 import { CalendarPickerView } from 'antd-mobile'
 import { DemoBlock } from 'demos'
+import React from 'react'
 
 export default () => {
   return (