From 14b4e2aa13c139542e71a2221385d5d3b43cc141 Mon Sep 17 00:00:00 2001
From: wangxinxin10 <wangxinxin10@58.com>
Date: Tue, 23 Jan 2024 11:08:07 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BF=AE=E6=94=B9scrollTo=20=E8=B0=83?=
 =?UTF-8?q?=E7=94=A8=E6=97=B6=E6=9C=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../calendar-picker-view.tsx                  | 28 ++++++++++++-------
 .../calendar-picker/calendar-picker.tsx       | 24 ++++++++++------
 2 files changed, 34 insertions(+), 18 deletions(-)

diff --git a/src/components/calendar-picker-view/calendar-picker-view.tsx b/src/components/calendar-picker-view/calendar-picker-view.tsx
index 152ac977c9..0e9623d13e 100644
--- 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
index 04f9695d5f..2ec3e47b77 100644
--- 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 />