From a0e139544ffc4da59595d444c25cf0d2dd18c022 Mon Sep 17 00:00:00 2001 From: wangxinxin10 Date: Mon, 22 Jan 2024 17:58:41 +0800 Subject: [PATCH 1/4] =?UTF-8?q?feat(CalendarPickerView):=20=E8=AE=BE?= =?UTF-8?q?=E7=BD=AEmin=E5=80=BC=E5=B9=B6=E4=B8=94=E8=AE=BE=E7=BD=AE?= =?UTF-8?q?=E4=BA=86value/defaultValue=E6=97=B6=EF=BC=8C=E8=A7=86=E5=9B=BE?= =?UTF-8?q?=E4=BC=98=E5=85=88=E6=B8=B2=E6=9F=93value/defaultValue=E5=80=BC?= =?UTF-8?q?=EF=BC=8C=E6=96=B0=E5=A2=9EscrollTo=20API=E6=94=AF=E6=8C=81?= =?UTF-8?q?=E8=B7=B3=E8=BD=AC=E5=88=B0=E6=8C=87=E5=AE=9A=E6=97=A5=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../calendar-picker-view.tsx | 17 ++++++++++++++--- .../calendar-picker/calendar-picker.tsx | 11 +++++++++-- 2 files changed, 23 insertions(+), 5 deletions(-) diff --git a/src/components/calendar-picker-view/calendar-picker-view.tsx b/src/components/calendar-picker-view/calendar-picker-view.tsx index 65643da8db..152ac977c9 100644 --- a/src/components/calendar-picker-view/calendar-picker-view.tsx +++ b/src/components/calendar-picker-view/calendar-picker-view.tsx @@ -3,6 +3,7 @@ import React, { useState, useImperativeHandle, useMemo, + useRef, } from 'react' import type { ReactNode } from 'react' import { NativeProps, withNativeProps } from '../../utils/native-props' @@ -28,6 +29,7 @@ const classPrefix = 'adm-calendar-picker-view' export type CalendarPickerViewRef = { jumpTo: (page: Page | ((page: Page) => Page)) => void jumpToToday: () => void + scrollTo: (date: Date) => void getDateRange: () => DateRange } @@ -76,6 +78,7 @@ export const CalendarPickerView = forwardRef< CalendarPickerViewRef, CalendarPickerViewProps >((p, ref) => { + const rootRef = useRef(null) const today = dayjs() const props = mergeProps(defaultProps, p) const { locale } = useConfig() @@ -123,6 +126,14 @@ export const CalendarPickerView = forwardRef< setCurrent(dayjs().date(1)) }, getDateRange: () => dateRange, + scrollTo: (date: Date) => { + const cell = rootRef.current?.querySelector( + `[data-date="${dayjs(date).format('YYYY-MM')}"` + ) + if (cell) { + cell.scrollIntoView() + } + }, })) const header = ( @@ -153,9 +164,9 @@ export const CalendarPickerView = forwardRef< year, month: month + 1, } - + const dateId = dayjs(year + '-' + (month + 1)).format('YYYY-MM') cells.push( -
+
{locale.Calendar.yearAndMonth?.replace( /\${(.*?)}/g, @@ -320,7 +331,7 @@ export const CalendarPickerView = forwardRef< return withNativeProps( props, -
+
{header} {mark} {body} diff --git a/src/components/calendar-picker/calendar-picker.tsx b/src/components/calendar-picker/calendar-picker.tsx index 314ed1e24e..99df245e03 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 } from 'react' +import React, { forwardRef, useRef, useEffect } from 'react' import { withNativeProps } from '../../utils/native-props' import classNames from 'classnames' import Button from '../button' @@ -73,7 +73,14 @@ export const CalendarPicker = forwardRef< getContainer, ...calendarViewProps } = props - + useEffect(() => { + setImmediate(() => { + const dateRange = calendarRef.current?.getDateRange() ?? null + if (dateRange && dateRange[0]) { + calendarRef.current?.scrollTo(dateRange[0]) + } + }) + }, [visible]) const footer = (
From 6f83cda4f1f5caca1930d6bf8f9657c179129b0b Mon Sep 17 00:00:00 2001 From: wangxinxin10 Date: Mon, 22 Jan 2024 19:05:02 +0800 Subject: [PATCH 2/4] =?UTF-8?q?test:=20=E6=B5=8B=E8=AF=95=E7=94=A8?= =?UTF-8?q?=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../calendar-picker-view.test.tsx.snap | 72 ++- .../tests/calendar-picker-view.test.tsx | 4 + .../calendar-picker/calendar-picker.tsx | 3 +- .../tests/calendar-picker.test.tsx | 4 + .../config-provider.test.tsx.snap | 476 +++++++++++++----- 5 files changed, 421 insertions(+), 138 deletions(-) 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 index b0fa98624c..972673662d 100644 --- 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`] = `
-
+
@@ -620,7 +622,9 @@ exports[`Calendar jump to a day 1`] = `
-
+
@@ -1111,7 +1115,9 @@ exports[`Calendar jump to a day 1`] = `
-
+
@@ -1545,7 +1551,9 @@ exports[`Calendar jump to a day 1`] = `
-
+
@@ -2024,7 +2032,9 @@ exports[`Calendar jump to a day 1`] = `
-
+
@@ -2497,7 +2507,9 @@ exports[`Calendar jump to a day 1`] = `
-
+
@@ -2991,7 +3003,9 @@ exports[`Calendar jump to a day 1`] = `
-
+
@@ -3458,7 +3472,9 @@ exports[`Calendar jump to a day 1`] = `
-
+
@@ -4013,7 +4029,9 @@ exports[`Calendar jump to a day 2`] = `
-
+
@@ -4494,7 +4512,9 @@ exports[`Calendar jump to a day 2`] = `
-
+
@@ -4967,7 +4987,9 @@ exports[`Calendar jump to a day 2`] = `
-
+
@@ -5461,7 +5483,9 @@ exports[`Calendar jump to a day 2`] = `
-
+
@@ -5943,7 +5967,9 @@ exports[`Calendar jump to a day 2`] = `
-
+
@@ -6419,7 +6445,9 @@ exports[`Calendar jump to a day 2`] = `
-
+
@@ -6916,7 +6944,9 @@ exports[`Calendar jump to a day 2`] = `
-
+
@@ -7447,7 +7477,9 @@ exports[`Calendar range mode 1`] = `
-
+
@@ -7993,7 +8025,9 @@ exports[`Calendar single mode 1`] = `
-
+
@@ -8535,7 +8569,9 @@ exports[`Calendar week start on Monday 1`] = `
-
+
diff --git a/src/components/calendar-picker-view/tests/calendar-picker-view.test.tsx b/src/components/calendar-picker-view/tests/calendar-picker-view.test.tsx index 43eecb0f87..538dc9683b 100644 --- a/src/components/calendar-picker-view/tests/calendar-picker-view.test.tsx +++ b/src/components/calendar-picker-view/tests/calendar-picker-view.test.tsx @@ -14,6 +14,10 @@ const maxDate: Date = new Date('2023-05-31') const singleDate: Date = new Date('2023-05-03') const rangeDate: [Date, Date] = [new Date('2023-05-04'), new Date('2023-05-07')] +beforeEach(() => { + window.HTMLElement.prototype.scrollIntoView = jest.fn() +}) + describe('Calendar', () => { test('a11y', async () => { await testA11y() diff --git a/src/components/calendar-picker/calendar-picker.tsx b/src/components/calendar-picker/calendar-picker.tsx index 99df245e03..04f9695d5f 100644 --- a/src/components/calendar-picker/calendar-picker.tsx +++ b/src/components/calendar-picker/calendar-picker.tsx @@ -11,6 +11,7 @@ import CalendarPickerView, { CalendarPickerViewProps, CalendarPickerViewRef, } from '../calendar-picker-view' +import { sleep } from '../../utils/sleep' const classPrefix = 'adm-calendar-picker' @@ -74,7 +75,7 @@ export const CalendarPicker = forwardRef< ...calendarViewProps } = props useEffect(() => { - setImmediate(() => { + sleep(0).then(() => { const dateRange = calendarRef.current?.getDateRange() ?? null if (dateRange && dateRange[0]) { calendarRef.current?.scrollTo(dateRange[0]) diff --git a/src/components/calendar-picker/tests/calendar-picker.test.tsx b/src/components/calendar-picker/tests/calendar-picker.test.tsx index e00891c328..0f041b4d6a 100644 --- a/src/components/calendar-picker/tests/calendar-picker.test.tsx +++ b/src/components/calendar-picker/tests/calendar-picker.test.tsx @@ -12,6 +12,10 @@ const mixDate: Date = new Date('2023-05-01') const maxDate: Date = new Date('2023-05-31') const singleDate: Date = new Date('2023-05-03') +beforeEach(() => { + window.HTMLElement.prototype.scrollIntoView = jest.fn() +}) + describe('Calendar', () => { test('a11y', async () => { await testA11y() diff --git a/src/components/config-provider/tests/__snapshots__/config-provider.test.tsx.snap b/src/components/config-provider/tests/__snapshots__/config-provider.test.tsx.snap index 032fdb81b8..9962043274 100644 --- a/src/components/config-provider/tests/__snapshots__/config-provider.test.tsx.snap +++ b/src/components/config-provider/tests/__snapshots__/config-provider.test.tsx.snap @@ -778,7 +778,9 @@ exports[`ConfigProvider should display the text as da-DK 1`] = `
-
+
@@ -1262,7 +1264,9 @@ exports[`ConfigProvider should display the text as da-DK 1`] = `
-
+
@@ -1738,7 +1742,9 @@ exports[`ConfigProvider should display the text as da-DK 1`] = `
-
+
@@ -2235,7 +2241,9 @@ exports[`ConfigProvider should display the text as da-DK 1`] = `
-
+
@@ -2705,7 +2713,9 @@ exports[`ConfigProvider should display the text as da-DK 1`] = `
-
+
@@ -3196,7 +3206,9 @@ exports[`ConfigProvider should display the text as da-DK 1`] = `
-
+
@@ -3675,7 +3687,9 @@ exports[`ConfigProvider should display the text as da-DK 1`] = `
-
+
@@ -5422,7 +5436,9 @@ exports[`ConfigProvider should display the text as en 1`] = `
-
+
@@ -5906,7 +5922,9 @@ exports[`ConfigProvider should display the text as en 1`] = `
-
+
@@ -6382,7 +6400,9 @@ exports[`ConfigProvider should display the text as en 1`] = `
-
+
@@ -6879,7 +6899,9 @@ exports[`ConfigProvider should display the text as en 1`] = `
-
+
@@ -7349,7 +7371,9 @@ exports[`ConfigProvider should display the text as en 1`] = `
-
+
@@ -7840,7 +7864,9 @@ exports[`ConfigProvider should display the text as en 1`] = `
-
+
@@ -8319,7 +8345,9 @@ exports[`ConfigProvider should display the text as en 1`] = `
-
+
@@ -10066,7 +10094,9 @@ exports[`ConfigProvider should display the text as es 1`] = `
-
+
@@ -10550,7 +10580,9 @@ exports[`ConfigProvider should display the text as es 1`] = `
-
+
@@ -11026,7 +11058,9 @@ exports[`ConfigProvider should display the text as es 1`] = `
-
+
@@ -11523,7 +11557,9 @@ exports[`ConfigProvider should display the text as es 1`] = `
-
+
@@ -11993,7 +12029,9 @@ exports[`ConfigProvider should display the text as es 1`] = `
-
+
@@ -12484,7 +12522,9 @@ exports[`ConfigProvider should display the text as es 1`] = `
-
+
@@ -12963,7 +13003,9 @@ exports[`ConfigProvider should display the text as es 1`] = `
-
+
@@ -14710,7 +14752,9 @@ exports[`ConfigProvider should display the text as fa-IR 1`] = `
-
+
@@ -15194,7 +15238,9 @@ exports[`ConfigProvider should display the text as fa-IR 1`] = `
-
+
@@ -15670,7 +15716,9 @@ exports[`ConfigProvider should display the text as fa-IR 1`] = `
-
+
@@ -16167,7 +16215,9 @@ exports[`ConfigProvider should display the text as fa-IR 1`] = `
-
+
@@ -16637,7 +16687,9 @@ exports[`ConfigProvider should display the text as fa-IR 1`] = `
-
+
@@ -17128,7 +17180,9 @@ exports[`ConfigProvider should display the text as fa-IR 1`] = `
-
+
@@ -17607,7 +17661,9 @@ exports[`ConfigProvider should display the text as fa-IR 1`] = `
-
+
@@ -19354,7 +19410,9 @@ exports[`ConfigProvider should display the text as fr-FR 1`] = `
-
+
@@ -19838,7 +19896,9 @@ exports[`ConfigProvider should display the text as fr-FR 1`] = `
-
+
@@ -20314,7 +20374,9 @@ exports[`ConfigProvider should display the text as fr-FR 1`] = `
-
+
@@ -20811,7 +20873,9 @@ exports[`ConfigProvider should display the text as fr-FR 1`] = `
-
+
@@ -21281,7 +21345,9 @@ exports[`ConfigProvider should display the text as fr-FR 1`] = `
-
+
@@ -21772,7 +21838,9 @@ exports[`ConfigProvider should display the text as fr-FR 1`] = `
-
+
@@ -22251,7 +22319,9 @@ exports[`ConfigProvider should display the text as fr-FR 1`] = `
-
+
@@ -23998,7 +24068,9 @@ exports[`ConfigProvider should display the text as id-ID 1`] = `
-
+
@@ -24482,7 +24554,9 @@ exports[`ConfigProvider should display the text as id-ID 1`] = `
-
+
@@ -24958,7 +25032,9 @@ exports[`ConfigProvider should display the text as id-ID 1`] = `
-
+
@@ -25455,7 +25531,9 @@ exports[`ConfigProvider should display the text as id-ID 1`] = `
-
+
@@ -25925,7 +26003,9 @@ exports[`ConfigProvider should display the text as id-ID 1`] = `
-
+
@@ -26416,7 +26496,9 @@ exports[`ConfigProvider should display the text as id-ID 1`] = `
-
+
@@ -26895,7 +26977,9 @@ exports[`ConfigProvider should display the text as id-ID 1`] = `
-
+
@@ -28642,7 +28726,9 @@ exports[`ConfigProvider should display the text as it-IT 1`] = `
-
+
@@ -29126,7 +29212,9 @@ exports[`ConfigProvider should display the text as it-IT 1`] = `
-
+
@@ -29602,7 +29690,9 @@ exports[`ConfigProvider should display the text as it-IT 1`] = `
-
+
@@ -30099,7 +30189,9 @@ exports[`ConfigProvider should display the text as it-IT 1`] = `
-
+
@@ -30569,7 +30661,9 @@ exports[`ConfigProvider should display the text as it-IT 1`] = `
-
+
@@ -31060,7 +31154,9 @@ exports[`ConfigProvider should display the text as it-IT 1`] = `
-
+
@@ -31539,7 +31635,9 @@ exports[`ConfigProvider should display the text as it-IT 1`] = `
-
+
@@ -33286,7 +33384,9 @@ exports[`ConfigProvider should display the text as ja-JP 1`] = `
-
+
@@ -33770,7 +33870,9 @@ exports[`ConfigProvider should display the text as ja-JP 1`] = `
-
+
@@ -34246,7 +34348,9 @@ exports[`ConfigProvider should display the text as ja-JP 1`] = `
-
+
@@ -34743,7 +34847,9 @@ exports[`ConfigProvider should display the text as ja-JP 1`] = `
-
+
@@ -35213,7 +35319,9 @@ exports[`ConfigProvider should display the text as ja-JP 1`] = `
-
+
@@ -35704,7 +35812,9 @@ exports[`ConfigProvider should display the text as ja-JP 1`] = `
-
+
@@ -36183,7 +36293,9 @@ exports[`ConfigProvider should display the text as ja-JP 1`] = `
-
+
@@ -37930,7 +38042,9 @@ exports[`ConfigProvider should display the text as kk-KZ 1`] = `
-
+
@@ -38414,7 +38528,9 @@ exports[`ConfigProvider should display the text as kk-KZ 1`] = `
-
+
@@ -38890,7 +39006,9 @@ exports[`ConfigProvider should display the text as kk-KZ 1`] = `
-
+
@@ -39387,7 +39505,9 @@ exports[`ConfigProvider should display the text as kk-KZ 1`] = `
-
+
@@ -39857,7 +39977,9 @@ exports[`ConfigProvider should display the text as kk-KZ 1`] = `
-
+
@@ -40348,7 +40470,9 @@ exports[`ConfigProvider should display the text as kk-KZ 1`] = `
-
+
@@ -40827,7 +40951,9 @@ exports[`ConfigProvider should display the text as kk-KZ 1`] = `
-
+
@@ -42574,7 +42700,9 @@ exports[`ConfigProvider should display the text as ko-KR 1`] = `
-
+
@@ -43058,7 +43186,9 @@ exports[`ConfigProvider should display the text as ko-KR 1`] = `
-
+
@@ -43534,7 +43664,9 @@ exports[`ConfigProvider should display the text as ko-KR 1`] = `
-
+
@@ -44031,7 +44163,9 @@ exports[`ConfigProvider should display the text as ko-KR 1`] = `
-
+
@@ -44501,7 +44635,9 @@ exports[`ConfigProvider should display the text as ko-KR 1`] = `
-
+
@@ -44992,7 +45128,9 @@ exports[`ConfigProvider should display the text as ko-KR 1`] = `
-
+
@@ -45471,7 +45609,9 @@ exports[`ConfigProvider should display the text as ko-KR 1`] = `
-
+
@@ -47218,7 +47358,9 @@ exports[`ConfigProvider should display the text as nb-NO 1`] = `
-
+
@@ -47702,7 +47844,9 @@ exports[`ConfigProvider should display the text as nb-NO 1`] = `
-
+
@@ -48178,7 +48322,9 @@ exports[`ConfigProvider should display the text as nb-NO 1`] = `
-
+
@@ -48675,7 +48821,9 @@ exports[`ConfigProvider should display the text as nb-NO 1`] = `
-
+
@@ -49145,7 +49293,9 @@ exports[`ConfigProvider should display the text as nb-NO 1`] = `
-
+
@@ -49636,7 +49786,9 @@ exports[`ConfigProvider should display the text as nb-NO 1`] = `
-
+
@@ -50115,7 +50267,9 @@ exports[`ConfigProvider should display the text as nb-NO 1`] = `
-
+
@@ -51862,7 +52016,9 @@ exports[`ConfigProvider should display the text as nl-NL 1`] = `
-
+
@@ -52346,7 +52502,9 @@ exports[`ConfigProvider should display the text as nl-NL 1`] = `
-
+
@@ -52822,7 +52980,9 @@ exports[`ConfigProvider should display the text as nl-NL 1`] = `
-
+
@@ -53319,7 +53479,9 @@ exports[`ConfigProvider should display the text as nl-NL 1`] = `
-
+
@@ -53789,7 +53951,9 @@ exports[`ConfigProvider should display the text as nl-NL 1`] = `
-
+
@@ -54280,7 +54444,9 @@ exports[`ConfigProvider should display the text as nl-NL 1`] = `
-
+
@@ -54759,7 +54925,9 @@ exports[`ConfigProvider should display the text as nl-NL 1`] = `
-
+
@@ -56506,7 +56674,9 @@ exports[`ConfigProvider should display the text as ru 1`] = `
-
+
@@ -56990,7 +57160,9 @@ exports[`ConfigProvider should display the text as ru 1`] = `
-
+
@@ -57466,7 +57638,9 @@ exports[`ConfigProvider should display the text as ru 1`] = `
-
+
@@ -57963,7 +58137,9 @@ exports[`ConfigProvider should display the text as ru 1`] = `
-
+
@@ -58433,7 +58609,9 @@ exports[`ConfigProvider should display the text as ru 1`] = `
-
+
@@ -58924,7 +59102,9 @@ exports[`ConfigProvider should display the text as ru 1`] = `
-
+
@@ -59403,7 +59583,9 @@ exports[`ConfigProvider should display the text as ru 1`] = `
-
+
@@ -61150,7 +61332,9 @@ exports[`ConfigProvider should display the text as tr-TR 1`] = `
-
+
@@ -61634,7 +61818,9 @@ exports[`ConfigProvider should display the text as tr-TR 1`] = `
-
+
@@ -62110,7 +62296,9 @@ exports[`ConfigProvider should display the text as tr-TR 1`] = `
-
+
@@ -62607,7 +62795,9 @@ exports[`ConfigProvider should display the text as tr-TR 1`] = `
-
+
@@ -63077,7 +63267,9 @@ exports[`ConfigProvider should display the text as tr-TR 1`] = `
-
+
@@ -63568,7 +63760,9 @@ exports[`ConfigProvider should display the text as tr-TR 1`] = `
-
+
@@ -64047,7 +64241,9 @@ exports[`ConfigProvider should display the text as tr-TR 1`] = `
-
+
@@ -65794,7 +65990,9 @@ exports[`ConfigProvider should display the text as zh-CH 1`] = `
-
+
@@ -66278,7 +66476,9 @@ exports[`ConfigProvider should display the text as zh-CH 1`] = `
-
+
@@ -66754,7 +66954,9 @@ exports[`ConfigProvider should display the text as zh-CH 1`] = `
-
+
@@ -67251,7 +67453,9 @@ exports[`ConfigProvider should display the text as zh-CH 1`] = `
-
+
@@ -67721,7 +67925,9 @@ exports[`ConfigProvider should display the text as zh-CH 1`] = `
-
+
@@ -68212,7 +68418,9 @@ exports[`ConfigProvider should display the text as zh-CH 1`] = `
-
+
@@ -68691,7 +68899,9 @@ exports[`ConfigProvider should display the text as zh-CH 1`] = `
-
+
@@ -70438,7 +70648,9 @@ exports[`ConfigProvider should display the text as zh-HK 1`] = `
-
+
@@ -70922,7 +71134,9 @@ exports[`ConfigProvider should display the text as zh-HK 1`] = `
-
+
@@ -71398,7 +71612,9 @@ exports[`ConfigProvider should display the text as zh-HK 1`] = `
-
+
@@ -71895,7 +72111,9 @@ exports[`ConfigProvider should display the text as zh-HK 1`] = `
-
+
@@ -72365,7 +72583,9 @@ exports[`ConfigProvider should display the text as zh-HK 1`] = `
-
+
@@ -72856,7 +73076,9 @@ exports[`ConfigProvider should display the text as zh-HK 1`] = `
-
+
@@ -73335,7 +73557,9 @@ exports[`ConfigProvider should display the text as zh-HK 1`] = `
-
+
@@ -75082,7 +75306,9 @@ exports[`ConfigProvider should display the text as zh-TW 1`] = `
-
+
@@ -75566,7 +75792,9 @@ exports[`ConfigProvider should display the text as zh-TW 1`] = `
-
+
@@ -76042,7 +76270,9 @@ exports[`ConfigProvider should display the text as zh-TW 1`] = `
-
+
@@ -76539,7 +76769,9 @@ exports[`ConfigProvider should display the text as zh-TW 1`] = `
-
+
@@ -77009,7 +77241,9 @@ exports[`ConfigProvider should display the text as zh-TW 1`] = `
-
+
@@ -77500,7 +77734,9 @@ exports[`ConfigProvider should display the text as zh-TW 1`] = `
-
+
@@ -77979,7 +78215,9 @@ exports[`ConfigProvider should display the text as zh-TW 1`] = `
-
+
From 14b4e2aa13c139542e71a2221385d5d3b43cc141 Mon Sep 17 00:00:00 2001 From: wangxinxin10 Date: Tue, 23 Jan 2024 11:08:07 +0800 Subject: [PATCH 3/4] =?UTF-8?q?feat:=20=E4=BF=AE=E6=94=B9scrollTo=20?= =?UTF-8?q?=E8=B0=83=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 = (
From 1934d52b54fd53a3af88411be2c3dfc283cb26a7 Mon Sep 17 00:00:00 2001 From: wangxinxin10 Date: Tue, 23 Jan 2024 14:40:53 +0800 Subject: [PATCH 4/4] =?UTF-8?q?fix:=20test=20=E6=8A=A5=E9=94=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/calendar-picker-view/calendar-picker-view.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/calendar-picker-view/calendar-picker-view.tsx b/src/components/calendar-picker-view/calendar-picker-view.tsx index 0e9623d13e..71e53fca3e 100644 --- a/src/components/calendar-picker-view/calendar-picker-view.tsx +++ b/src/components/calendar-picker-view/calendar-picker-view.tsx @@ -114,7 +114,7 @@ export const CalendarPickerView = forwardRef< const cell = rootRef.current?.querySelector( `[data-date="${convertPageToDayjs(page).format('YYYY-MM')}"` ) - if (cell) { + if (cell && cell.scrollIntoView) { cell.scrollIntoView() } }