feat: 修改scrollTo 调用时机

ant-design · Jan 22, 2024 · 1fdf7e1 · 1fdf7e1
1 parent 6f83cda
commit 1fdf7e1
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 20 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
 }
 
@@ -108,6 +109,21 @@ export const CalendarPickerView = forwardRef<
   const [current, setCurrent] = useState(() =>
     dayjs(dateRange ? dateRange[0] : today).date(1)
   )
+  useEffect(() => {
+    if (dateRange) {
+      const curr = dayjs(dateRange[0])
+      scrollTo({ year: curr.year(), month: curr.month() + 1 })
+    }
+  }, [dateRange])
+
+  const scrollTo = (page: Page) => {
+    const cell = rootRef.current?.querySelector(
+      `[data-date="${convertPageToDayjs(page).format('YYYY-MM')}"`
+    )
+    if (cell) {
+      cell.scrollIntoView()
+    }
+  }
 
   useImperativeHandle(ref, () => ({
     jumpTo: pageOrPageGenerator => {
@@ -121,19 +137,15 @@ export const CalendarPickerView = forwardRef<
         page = pageOrPageGenerator
       }
       setCurrent(convertPageToDayjs(page))
+      scrollTo(page)
     },
     jumpToToday: () => {
-      setCurrent(dayjs().date(1))
+      const curr = dayjs().date(1)
+      setCurrent(curr)
+      scrollTo({ year: curr.year(), month: curr.month() + 1 })
     },
     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, useRef } from 'react'
 import { withNativeProps } from '../../utils/native-props'
 import classNames from 'classnames'
 import Button from '../button'
@@ -11,7 +11,6 @@ import CalendarPickerView, {
   CalendarPickerViewProps,
   CalendarPickerViewRef,
 } from '../calendar-picker-view'
-import { sleep } from '../../utils/sleep'
 
 const classPrefix = 'adm-calendar-picker'
 
@@ -74,14 +73,7 @@ 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])
-      }
-    })
-  }, [visible])
+
   const footer = (
     <div className={`${classPrefix}-footer`}>
       <Divider />