From 0d0d628dfb4cabce631a52060a188775653c47f8 Mon Sep 17 00:00:00 2001
From: wangxinxin10 <wangxinxin10@58.com>
Date: Mon, 22 Jan 2024 19:57:57 +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                  | 32 +++++++++++++------
 .../calendar-picker/calendar-picker.tsx       | 19 ++++++-----
 2 files changed, 31 insertions(+), 20 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..b684cda600 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
 }
 
@@ -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
index 04f9695d5f..9d95a20628 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, 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,14 @@ 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])
+  // 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 />