Fix/calendar scroll (#1147)

* feat: 支持滚动到当前选择的日期 * feat: 支持滚动到当前选择的日期 * feat: 日历组件提供可以通过ref，让当前日期回到可视区域内 * feat: 微信版本也支持指定日期滚动
ant-design · Apr 10, 2024 · 76881b1 · 76881b1
1 parent 7bd9366
commit 76881b1
Show file tree

Hide file tree

Showing 9 changed files with 57 additions and 27 deletions.
diff --git a/compiled/alipay/demo/pages/Calendar/index.axml b/compiled/alipay/demo/pages/Calendar/index.axml
@@ -107,8 +107,8 @@
     slot="content"
     style="height: 1000rpx">
     <ant-calendar
+      ref="handleRef"
       value="{{ demo9.value }}"
-      monthRange="{{ demo9.monthRange }}"
       onChange="demo9HandleChange"
       selectionMode="single"
       changedScrollIntoView />
@@ -126,8 +126,8 @@
     <ant-button
       style="margin-top: 8rpx"
       type="primary"
-      onTap="demo9HandleInit">
-      回到初始化日期
+      onTap="demo9HandleScrollIntoView">
+      滚动到指定日期
     </ant-button>
   </view>
 </collapse-container>
diff --git a/compiled/alipay/demo/pages/Calendar/index.js b/compiled/alipay/demo/pages/Calendar/index.js
@@ -39,10 +39,11 @@ function demoFormatter(cell, value) {
     }
     return {};
 }
+const nowDate = Date.now();
 Page({
     data: {
         demo1: {
-            defaultValue: [Date.now(), Date.now()],
+            defaultValue: [nowDate, nowDate],
             visible: true,
         },
         demo2: {
@@ -75,7 +76,7 @@ Page({
         },
         demo9: {
             visible: true,
-            value: Date.now(),
+            value: nowDate,
         },
     },
     demo3NextMonth() {
@@ -111,9 +112,10 @@ Page({
             'demo9.value': this.data.demo9.value + 1000 * 24 * 3600,
         });
     },
-    demo9HandleInit() {
-        this.setData({
-            'demo9.value': Date.now(),
-        });
+    demo9HandleScrollIntoView() {
+        this.ref.scrollIntoView(nowDate);
+    },
+    handleRef(ref) {
+        this.ref = ref;
     },
 });
diff --git a/compiled/alipay/src/Calendar/index.ts b/compiled/alipay/src/Calendar/index.ts
@@ -8,6 +8,7 @@ import {
 } from 'functional-mini/component';
 import { mountComponent } from '../_util/component';
 import { useComponentEvent } from '../_util/hooks/useComponentEvent';
+import { triggerRefEvent } from '../_util/hooks/useReportRef';
 import { hasValue, useMergedState } from '../_util/hooks/useMergedState';
 import {
   CalendarValue,
@@ -55,6 +56,12 @@ const Calendar = (props: ICalendarProps) => {
 
   const [scrollIntoViewId, setScrollIntoViewId] = useState<string>('');
 
+  useEvent('scrollIntoView', (value) => {
+    updateScrollIntoViewId(getScrollIntoViewId(value));
+  });
+
+  triggerRefEvent();
+
   // scroll 触发滚动之后需要重置 scrollIntoViewId
   function updateScrollIntoViewId(id) {
     setScrollIntoViewId(id);

diff --git a/compiled/wechat/demo/pages/Calendar/index.js b/compiled/wechat/demo/pages/Calendar/index.js
@@ -39,10 +39,11 @@ function demoFormatter(cell, value) {
     }
     return {};
 }
+const nowDate = Date.now();
 Page({
     data: {
         demo1: {
-            defaultValue: [Date.now(), Date.now()],
+            defaultValue: [nowDate, nowDate],
             visible: true,
         },
         demo2: {
@@ -77,7 +78,7 @@ Page({
         demo8Formatter,
         demo9: {
             visible: true,
-            value: Date.now(),
+            value: nowDate,
         },
     },
     demo3NextMonth() {
@@ -113,9 +114,10 @@ Page({
             'demo9.value': this.data.demo9.value + 1000 * 24 * 3600,
         });
     },
-    demo9HandleInit() {
-        this.setData({
-            'demo9.value': Date.now(),
-        });
+    demo9HandleScrollIntoView() {
+        this.ref.scrollIntoView(nowDate);
+    },
+    handleRef(ref) {
+        this.ref = ref.detail;
     },
 });
diff --git a/compiled/wechat/demo/pages/Calendar/index.wxml b/compiled/wechat/demo/pages/Calendar/index.wxml
@@ -93,8 +93,8 @@
     slot="content"
     style="height: 1000rpx">
     <ant-calendar
+      bind:ref="handleRef"
       value="{{ demo9.value }}"
-      monthRange="{{ demo9.monthRange }}"
       bind:change="demo9HandleChange"
       selectionMode="single"
       changedScrollIntoView />
@@ -112,8 +112,8 @@
     <ant-button
       style="margin-top: 8rpx"
       type="primary"
-      bind:tap="demo9HandleInit">
-      回到初始化日期
+      bind:tap="demo9HandleScrollIntoView">
+      滚动到指定日期
     </ant-button>
   </view>
 </collapse-container>
diff --git a/compiled/wechat/src/Calendar/index.js b/compiled/wechat/src/Calendar/index.js
@@ -22,6 +22,7 @@ import dayjs from 'dayjs';
 import { useComponent, useEvent, useReady, useState, useEffect, } from 'functional-mini/component';
 import { mountComponent } from '../_util/component';
 import { useComponentEvent } from '../_util/hooks/useComponentEvent';
+import { triggerRefEvent } from '../_util/hooks/useReportRef';
 import { hasValue, useMergedState } from '../_util/hooks/useMergedState';
 import { defaultLocaleText, } from './props';
 import { defaultMonthRange, getMonthListFromRange, getSelectionModeFromValue, renderCells, getScrollIntoViewId, } from './utils';
@@ -55,6 +56,10 @@ var Calendar = function (props) {
         value: props.value,
     }), value = _c[0], setValue = _c[1];
     var _d = useState(''), scrollIntoViewId = _d[0], setScrollIntoViewId = _d[1];
+    useEvent('scrollIntoView', function (value) {
+        updateScrollIntoViewId(getScrollIntoViewId(value));
+    });
+    triggerRefEvent();
     // scroll 触发滚动之后需要重置 scrollIntoViewId
     function updateScrollIntoViewId(id) {
         setScrollIntoViewId(id);

diff --git a/demo/pages/Calendar/index.axml.tsx b/demo/pages/Calendar/index.axml.tsx
@@ -121,8 +121,8 @@ export default ({
       <CollapseContainer title="受控模式">
         <View slot="content" style="height: 1000rpx">
           <AntCalendar
+            ref="handleRef"
             value={demo9.value}
-            monthRange={demo9.monthRange}
             onChange="demo9HandleChange"
             selectionMode="single"
             changedScrollIntoView
@@ -140,9 +140,9 @@ export default ({
           <AntButton
             style="margin-top:8rpx"
             type="primary"
-            onTap="demo9HandleInit"
+            onTap="demo9HandleScrollIntoView"
           >
-            回到初始化日期
+            滚动到指定日期
           </AntButton>
         </View>
       </CollapseContainer>

diff --git a/demo/pages/Calendar/index.ts b/demo/pages/Calendar/index.ts
@@ -47,10 +47,11 @@ function demoFormatter(cell, value) {
   return {};
 }
 
+const nowDate = Date.now();
 Page({
   data: {
     demo1: {
-      defaultValue: [Date.now(), Date.now()],
+      defaultValue: [nowDate, nowDate],
       visible: true,
     },
     demo2: {
@@ -87,7 +88,7 @@ Page({
     /// #endif
     demo9: {
       visible: true,
-      value: Date.now(),
+      value: nowDate,
     },
   },
   demo3NextMonth() {
@@ -132,9 +133,15 @@ Page({
       'demo9.value': this.data.demo9.value + 1000 * 24 * 3600,
     });
   },
-  demo9HandleInit() {
-    this.setData({
-      'demo9.value': Date.now(),
-    });
+  demo9HandleScrollIntoView() {
+    this.ref.scrollIntoView(nowDate);
+  },
+  handleRef(ref) {
+    /// #if ALIPAY
+    this.ref = ref;
+    /// #endif
+    /// #if WECHAT
+    this.ref = ref.detail;
+    /// #endif
   },
 });
diff --git a/src/Calendar/index.ts b/src/Calendar/index.ts
@@ -8,6 +8,7 @@ import {
 } from 'functional-mini/component';
 import { mountComponent } from '../_util/component';
 import { useComponentEvent } from '../_util/hooks/useComponentEvent';
+import { triggerRefEvent } from '../_util/hooks/useReportRef';
 import { hasValue, useMergedState } from '../_util/hooks/useMergedState';
 import {
   CalendarValue,
@@ -55,6 +56,12 @@ const Calendar = (props: ICalendarProps) => {
 
   const [scrollIntoViewId, setScrollIntoViewId] = useState<string>('');
 
+  useEvent('scrollIntoView', (value) => {
+    updateScrollIntoViewId(getScrollIntoViewId(value));
+  });
+
+  triggerRefEvent();
+
   // scroll 触发滚动之后需要重置 scrollIntoViewId
   function updateScrollIntoViewId(id) {
     setScrollIntoViewId(id);