fix: date-range 按年份加载

baidu · Dec 13, 2024 · 48be413 · 48be413
1 parent 4773176
commit 48be413
Showing 1 changed file with 10 additions and 55 deletions.
diff --git a/packages/amis-ui/src/components/CalendarMobile.tsx b/packages/amis-ui/src/components/CalendarMobile.tsx
@@ -59,7 +59,6 @@ export interface CalendarMobileProps extends ThemeProps, LocaleProps {
 export interface CalendarMobileState {
   startDate?: moment.Moment;
   endDate?: moment.Moment;
-  monthHeights?: number[];
   currentDate: moment.Moment;
   showToast: boolean;
   isScrollToBottom: boolean;
@@ -207,24 +206,13 @@ export class CalendarMobile extends React.Component<
 
   initMonths() {
     if (this.mobileBody.current) {
-      const header = this.mobileHeader.current;
-      let monthHeights: number[] = [];
-      const monthCollection = this.mobileBody.current.children;
-      for (let i = 0; i < monthCollection.length; i++) {
-        monthHeights[i] = monthCollection[i].offsetTop - header.clientHeight;
-      }
-      this.setState({
-        monthHeights
-      });
       const defaultDate = this.props.defaultDate || this.state.currentDate;
       this.scollToDate(defaultDate ? moment(defaultDate) : moment());
     }
   }
 
   scollToDate(date: moment.Moment) {
-    const {showViewMode} = this.props;
-    const {minDate} = this.state;
-    const index = date.diff(minDate, showViewMode);
+    const index = date.month();
     const currentEl = this.mobileBody.current.children[index];
     if (!currentEl) {
       return;
@@ -238,33 +226,6 @@ export class CalendarMobile extends React.Component<
     );
   }
 
-  @autobind
-  onMobileBodyScroll(e: any) {
-    const {showViewMode} = this.props;
-    const {monthHeights} = this.state;
-    let minDate = this.state.minDate?.clone();
-    if (!this.mobileBody?.current || !monthHeights || !minDate) {
-      return;
-    }
-    const scrollTop = this.mobileBody.current.scrollTop;
-    const clientHeight = this.mobileBody.current.clientHeight;
-    const scrollHeight = this.mobileBody.current.scrollHeight;
-
-    let i = 0;
-    for (i; i < monthHeights.length; i++) {
-      if (scrollTop < monthHeights[i]) {
-        break;
-      }
-    }
-    i--;
-    i < 0 && (i = 0);
-    const currentDate = minDate.add(i, showViewMode);
-    this.setState({
-      currentDate,
-      isScrollToBottom: scrollTop + clientHeight === scrollHeight
-    });
-  }
-
   @autobind
   scrollPreYear() {
     if (!this.state.currentDate) {
@@ -585,11 +546,12 @@ export class CalendarMobile extends React.Component<
     } = this.props;
     const __ = this.props.translate;
 
-    const {minDate, maxDate} = this.state;
+    const {minDate, maxDate, currentDate} = this.state;
     if (!minDate || !maxDate) {
       return;
     }
     let calendarDates: moment.Moment[] = [];
+    const currentYear = moment(currentDate).format('YYYY');
     for (
       let minDateClone = minDate.clone();
       minDateClone.isSameOrBefore(maxDate);
@@ -602,15 +564,13 @@ export class CalendarMobile extends React.Component<
           month: date.get('month')
         });
       }
-      calendarDates.push(date);
+      if (date.year() === +currentYear) {
+        calendarDates.push(date);
+      }
     }
 
     return (
-      <div
-        className={cx('CalendarMobile-body')}
-        ref={this.mobileBody}
-        onScroll={this.onMobileBodyScroll}
-      >
+      <div className={cx('CalendarMobile-body')} ref={this.mobileBody}>
         {calendarDates.map((calendarDate: moment.Moment, index: number) => {
           const rdtOldNone =
             showViewMode === 'months' &&
@@ -766,13 +726,6 @@ export class CalendarMobile extends React.Component<
       maxDate,
       isPopupOpen
     } = this.state;
-    let dateNow = currentDate
-      ? currentDate.format(
-          __(`Calendar.${showViewMode === 'months' ? 'yearmonth' : 'year'}`)
-        )
-      : moment().format(
-          __(`Calendar.${showViewMode === 'months' ? 'yearmonth' : 'year'}`)
-        );
 
     const header = (
       <div className={cx('CalendarMobile-header')} ref={this.mobileHeader}>
@@ -784,7 +737,9 @@ export class CalendarMobile extends React.Component<
                 &lsaquo;
               </a>
             )}
-            <span onClick={this.openDatePicker}>{dateNow}</span>
+            <span onClick={this.openDatePicker}>
+              {moment(currentDate).format('YYYY')}
+            </span>
             {(currentDate &&
               currentDate.isSameOrAfter(maxDate, showViewMode)) ||
             isScrollToBottom ? null : (