fix(CalendarPicker): fix jumpTo & jumpToToday not trigger panel s…

…croll (#6660) * chore: jumpTo should also jump to the view * test: add test case * chore: rollback package.json * chore: back of ignore * test: update snapshot * chore: fix import * test: update snapshot
ant-design · Jul 2, 2024 · 89e5774 · 89e5774
1 parent a1018a7
commit 89e5774
Show file tree

Hide file tree

Showing 7 changed files with 751 additions and 229 deletions.
diff --git a/src/components/calendar-picker-view/calendar-picker-view.tsx b/src/components/calendar-picker-view/calendar-picker-view.tsx
@@ -1,30 +1,39 @@
+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 React, {
   forwardRef,
-  useState,
+  useContext,
   useImperativeHandle,
   useMemo,
+  useRef,
+  useState,
 } from 'react'
-import type { ReactNode } from 'react'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
-import dayjs from 'dayjs'
-import classNames from 'classnames'
+import { usePropsValue } from '../../utils/use-props-value'
 import { mergeProps } from '../../utils/with-default-props'
 import { useConfig } from '../config-provider'
-import isoWeek from 'dayjs/plugin/isoWeek'
-import isSameOrBefore from 'dayjs/plugin/isSameOrBefore'
-import { usePropsValue } from '../../utils/use-props-value'
 import {
-  convertValueToRange,
-  convertPageToDayjs,
   DateRange,
   Page,
+  convertPageToDayjs,
+  convertValueToRange,
 } from './convert'
+import useSyncScroll from './useSyncScroll'
 
 dayjs.extend(isoWeek)
 dayjs.extend(isSameOrBefore)
 
 const classPrefix = 'adm-calendar-picker-view'
 
+export const Context = React.createContext<{
+  visible: boolean
+}>({
+  visible: false,
+})
+
 export type CalendarPickerViewRef = {
   jumpTo: (page: Page | ((page: Page) => Page)) => void
   jumpToToday: () => void
@@ -76,9 +85,11 @@ export const CalendarPickerView = forwardRef<
   CalendarPickerViewRef,
   CalendarPickerViewProps
 >((p, ref) => {
+  const bodyRef = useRef<HTMLDivElement>(null)
   const today = dayjs()
   const props = mergeProps(defaultProps, p)
   const { locale } = useConfig()
+
   const markItems = [...locale.Calendar.markItems]
   if (props.weekStartsOn === 'Sunday') {
     const item = markItems.pop()
@@ -106,6 +117,21 @@ export const CalendarPickerView = forwardRef<
     dayjs(dateRange ? dateRange[0] : today).date(1)
   )
 
+  // =============================== Scroll ===============================
+  const context = useContext(Context)
+  const scrollTo = useSyncScroll(current, context.visible, bodyRef)
+
+  // ============================== Boundary ==============================
+  const maxDay = useMemo(
+    () => (props.max ? dayjs(props.max) : current.add(6, 'month')),
+    [props.max, current]
+  )
+  const minDay = useMemo(
+    () => (props.min ? dayjs(props.min) : current),
+    [props.min, current]
+  )
+
+  // ================================ Refs ================================
   useImperativeHandle(ref, () => ({
     jumpTo: pageOrPageGenerator => {
       let page: Page
@@ -117,14 +143,19 @@ export const CalendarPickerView = forwardRef<
       } else {
         page = pageOrPageGenerator
       }
-      setCurrent(convertPageToDayjs(page))
+      const next = convertPageToDayjs(page)
+      setCurrent(next)
+      scrollTo(next)
     },
     jumpToToday: () => {
-      setCurrent(dayjs().date(1))
+      const next = dayjs().date(1)
+      setCurrent(next)
+      scrollTo(next)
     },
     getDateRange: () => dateRange,
   }))
 
+  // =============================== Render ===============================
   const header = (
     <div className={`${classPrefix}-header`}>
       <div className={`${classPrefix}-title`}>
@@ -133,29 +164,23 @@ export const CalendarPickerView = forwardRef<
     </div>
   )
 
-  const maxDay = useMemo(
-    () => (props.max ? dayjs(props.max) : current.add(6, 'month')),
-    [props.max, current]
-  )
-  const minDay = useMemo(
-    () => (props.min ? dayjs(props.min) : current),
-    [props.min, current]
-  )
-
   function renderBody() {
     const cells: ReactNode[] = []
     let monthIterator = minDay
     // 遍历月份
     while (monthIterator.isSameOrBefore(maxDay, 'month')) {
       const year = monthIterator.year()
-      const month = monthIterator.month()
+      const month = monthIterator.month() + 1
+
       const renderMap = {
         year,
-        month: month + 1,
+        month,
       }
 
+      const yearMonth = `${year}-${month}`
+
       cells.push(
-        <div key={`${year}-${month}`}>
+        <div key={yearMonth} data-year-month={yearMonth}>
           <div className={`${classPrefix}-title`}>
             {locale.Calendar.yearAndMonth?.replace(
               /\${(.*?)}/g,
@@ -306,7 +331,11 @@ export const CalendarPickerView = forwardRef<
 
     return cells
   }
-  const body = <div className={`${classPrefix}-body`}>{renderBody()}</div>
+  const body = (
+    <div className={`${classPrefix}-body`} ref={bodyRef}>
+      {renderBody()}
+    </div>
+  )
 
   const mark = (
     <div className={`${classPrefix}-mark`}>

diff --git a/src/components/calendar-picker-view/tests/__snapshots__/calendar-picker-view.test.tsx.snap b/src/components/calendar-picker-view/tests/__snapshots__/calendar-picker-view.test.tsx.snap
@@ -56,7 +56,9 @@ exports[`Calendar custom top 1`] = `
     <div
       class="adm-calendar-picker-view-body"
     >
-      <div>
+      <div
+        data-year-month="2023-5"
+      >
         <div
           class="adm-calendar-picker-view-title"
         >
@@ -620,7 +622,9 @@ exports[`Calendar jump to a day 1`] = `
     <div
       class="adm-calendar-picker-view-body"
     >
-      <div>
+      <div
+        data-year-month="2021-1"
+      >
         <div
           class="adm-calendar-picker-view-title"
         >
@@ -1111,7 +1115,9 @@ exports[`Calendar jump to a day 1`] = `
           </div>
         </div>
       </div>
-      <div>
+      <div
+        data-year-month="2021-2"
+      >
         <div
           class="adm-calendar-picker-view-title"
         >
@@ -1545,7 +1551,9 @@ exports[`Calendar jump to a day 1`] = `
           </div>
         </div>
       </div>
-      <div>
+      <div
+        data-year-month="2021-3"
+      >
         <div
           class="adm-calendar-picker-view-title"
         >
@@ -2024,7 +2032,9 @@ exports[`Calendar jump to a day 1`] = `
           </div>
         </div>
       </div>
-      <div>
+      <div
+        data-year-month="2021-4"
+      >
         <div
           class="adm-calendar-picker-view-title"
         >
@@ -2497,7 +2507,9 @@ exports[`Calendar jump to a day 1`] = `
           </div>
         </div>
       </div>
-      <div>
+      <div
+        data-year-month="2021-5"
+      >
         <div
           class="adm-calendar-picker-view-title"
         >
@@ -2991,7 +3003,9 @@ exports[`Calendar jump to a day 1`] = `
           </div>
         </div>
       </div>
-      <div>
+      <div
+        data-year-month="2021-6"
+      >
         <div
           class="adm-calendar-picker-view-title"
         >
@@ -3458,7 +3472,9 @@ exports[`Calendar jump to a day 1`] = `
           </div>
         </div>
       </div>
-      <div>
+      <div
+        data-year-month="2021-7"
+      >
         <div
           class="adm-calendar-picker-view-title"
         >
@@ -4013,7 +4029,9 @@ exports[`Calendar jump to a day 2`] = `
     <div
       class="adm-calendar-picker-view-body"
     >
-      <div>
+      <div
+        data-year-month="2023-5"
+      >
         <div
           class="adm-calendar-picker-view-title"
         >
@@ -4494,7 +4512,9 @@ exports[`Calendar jump to a day 2`] = `
           </div>
         </div>
       </div>
-      <div>
+      <div
+        data-year-month="2023-6"
+      >
         <div
           class="adm-calendar-picker-view-title"
         >
@@ -4967,7 +4987,9 @@ exports[`Calendar jump to a day 2`] = `
           </div>
         </div>
       </div>
-      <div>
+      <div
+        data-year-month="2023-7"
+      >
         <div
           class="adm-calendar-picker-view-title"
         >
@@ -5461,7 +5483,9 @@ exports[`Calendar jump to a day 2`] = `
           </div>
         </div>
       </div>
-      <div>
+      <div
+        data-year-month="2023-8"
+      >
         <div
           class="adm-calendar-picker-view-title"
         >
@@ -5943,7 +5967,9 @@ exports[`Calendar jump to a day 2`] = `
           </div>
         </div>
       </div>
-      <div>
+      <div
+        data-year-month="2023-9"
+      >
         <div
           class="adm-calendar-picker-view-title"
         >
@@ -6419,7 +6445,9 @@ exports[`Calendar jump to a day 2`] = `
           </div>
         </div>
       </div>
-      <div>
+      <div
+        data-year-month="2023-10"
+      >
         <div
           class="adm-calendar-picker-view-title"
         >
@@ -6916,7 +6944,9 @@ exports[`Calendar jump to a day 2`] = `
           </div>
         </div>
       </div>
-      <div>
+      <div
+        data-year-month="2023-11"
+      >
         <div
           class="adm-calendar-picker-view-title"
         >
@@ -7447,7 +7477,9 @@ exports[`Calendar range mode 1`] = `
     <div
       class="adm-calendar-picker-view-body"
     >
-      <div>
+      <div
+        data-year-month="2023-5"
+      >
         <div
           class="adm-calendar-picker-view-title"
         >
@@ -7993,7 +8025,9 @@ exports[`Calendar single mode 1`] = `
     <div
       class="adm-calendar-picker-view-body"
     >
-      <div>
+      <div
+        data-year-month="2023-5"
+      >
         <div
           class="adm-calendar-picker-view-title"
         >
@@ -8535,7 +8569,9 @@ exports[`Calendar week start on Monday 1`] = `
     <div
       class="adm-calendar-picker-view-body"
     >
-      <div>
+      <div
+        data-year-month="2023-5"
+      >
         <div
           class="adm-calendar-picker-view-title"
         >