feat: 修改scrollTo 调用时机

ant-design · Jan 23, 2024 · 14b4e2a · 14b4e2a
1 parent 6f83cda
commit 14b4e2a
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 18 deletions.
diff --git a/src/components/calendar-picker-view/calendar-picker-view.tsx b/src/components/calendar-picker-view/calendar-picker-view.tsx
@@ -4,6 +4,7 @@ import React, {
   useImperativeHandle,
   useMemo,
   useRef,
+  useEffect,
 } from 'react'
 import type { ReactNode } from 'react'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
@@ -29,7 +30,7 @@ const classPrefix = 'adm-calendar-picker-view'
 export type CalendarPickerViewRef = {
   jumpTo: (page: Page | ((page: Page) => Page)) => void
   jumpToToday: () => void
-  scrollTo: (date: Date) => void
+  scrollTo: (page: Page) => void
   getDateRange: () => DateRange
 }
 
@@ -109,6 +110,19 @@ export const CalendarPickerView = forwardRef<
     dayjs(dateRange ? dateRange[0] : today).date(1)
   )
 
+  const scrollTo = (page: Page) => {
+    const cell = rootRef.current?.querySelector(
+      `[data-date="${convertPageToDayjs(page).format('YYYY-MM')}"`
+    )
+    if (cell) {
+      cell.scrollIntoView()
+    }
+  }
+
+  useEffect(() => {
+    scrollTo({ year: current.year(), month: current.month() + 1 })
+  }, [current])
+
   useImperativeHandle(ref, () => ({
     jumpTo: pageOrPageGenerator => {
       let page: Page
@@ -123,17 +137,11 @@ export const CalendarPickerView = forwardRef<
       setCurrent(convertPageToDayjs(page))
     },
     jumpToToday: () => {
-      setCurrent(dayjs().date(1))
+      const curr = dayjs().date(1)
+      setCurrent(curr)
     },
     getDateRange: () => dateRange,
-    scrollTo: (date: Date) => {
-      const cell = rootRef.current?.querySelector(
-        `[data-date="${dayjs(date).format('YYYY-MM')}"`
-      )
-      if (cell) {
-        cell.scrollIntoView()
-      }
-    },
+    scrollTo: scrollTo,
   }))
 
   const header = (

diff --git a/src/components/calendar-picker/calendar-picker.tsx b/src/components/calendar-picker/calendar-picker.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef, useRef, useEffect } from 'react'
+import React, { forwardRef, useEffect, useRef } from 'react'
 import { withNativeProps } from '../../utils/native-props'
 import classNames from 'classnames'
 import Button from '../button'
@@ -11,7 +11,7 @@ import CalendarPickerView, {
   CalendarPickerViewProps,
   CalendarPickerViewRef,
 } from '../calendar-picker-view'
-import { sleep } from '../../utils/sleep'
+import dayjs from 'dayjs'
 
 const classPrefix = 'adm-calendar-picker'
 
@@ -74,14 +74,22 @@ export const CalendarPicker = forwardRef<
     getContainer,
     ...calendarViewProps
   } = props
+
   useEffect(() => {
-    sleep(0).then(() => {
-      const dateRange = calendarRef.current?.getDateRange() ?? null
-      if (dateRange && dateRange[0]) {
-        calendarRef.current?.scrollTo(dateRange[0])
-      }
-    })
+    if (visible) {
+      setTimeout(() => {
+        const dateRange = calendarRef.current?.getDateRange() ?? null
+        if (dateRange && dateRange[0]) {
+          const curr = dayjs(dateRange[0])
+          calendarRef.current?.scrollTo({
+            year: curr.year(),
+            month: curr.month() + 1,
+          })
+        }
+      }, 0)
+    }
   }, [visible])
+
   const footer = (
     <div className={`${classPrefix}-footer`}>
       <Divider />