@momo-kits/calendar 0.121.0-rc.11 → 0.121.0-rc.3

package/MonthList.tsx

@@ -1,219 +1,282 @@
-import {scaleSize, Spacing} from '@momo-kits/foundation';
-import moment, {Moment} from 'moment';
-import React, {
-  forwardRef,
-  useImperativeHandle,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import React, {Component} from 'react';
 import {FlatList, Platform} from 'react-native';
-import {ContainerContext} from './index';
-import LunarDateConverter from './LunarDateConverter';
+import moment from 'moment';
+import Moment from 'moment';
 import Month from './Month';
-import {MonthListProps, MonthListRef} from './types';
+import LunarDateConverter from './LunarDateConverter';
+import {Holidays, MonthListProps, MonthListState} from './types';
+import {ContainerContext} from './index';
+import {scaleSize, Spacing} from '@momo-kits/foundation';
 
 const MAX_RENDER_PER_BATCH = Platform.OS === 'android' ? 1 : 12;
 
 // @ts-ignore
 const converter = new LunarDateConverter();
+export default class MonthList extends Component<
+  MonthListProps,
+  MonthListState
+> {
+  currentDate;
+  data;
+  currentScrollIndex;
+  list;
+  heightStyle;
+  holidays?: Holidays[] = [];
+  currentKey: any;
+
+  constructor(props: MonthListProps) {
+    super(props);
+    this.currentDate = moment();
+    this.data = this.getMonthList();
+    this.currentScrollIndex = this.getIndexOfMonth(
+      moment(props.selectedDate),
+      this.data,
+    );
+    this.list = React.createRef<FlatList>();
+    this.heightStyle = {};
+    this.holidays = props.holidays;
+  }
+
+  renderMonth = (data: {
+    item: {dateList: any; date: moment.Moment};
+    index: number;
+  }) => {
+    const {isDoubleDateMode, disabledDays, priceList, isShowLunar} = this.props;
+    const {item, index} = data;
+
+    const keyMonth = moment(item.date)?.format('YYYY-MM');
+    const priceListDate = priceList?.[keyMonth];
+
+    return (
+      <Month
+        {...this.props}
+        key={index}
+        month={item.date || {}}
+        dateList={item.dateList || []}
+        priceListDate={priceListDate}
+        isShowLunar={isShowLunar}
+        isDoubleDateMode={isDoubleDateMode}
+        disabledDays={disabledDays}
+      />
+    );
+  };
+
+  checkRange = (
+    date?: moment.Moment | null,
+    start?: moment.Moment | null,
+    end?: moment.Moment | null,
+  ) => {
+    if (!date || !start) return false;
+    if (!end) {
+      return date.year() === start.year() && date.month() === start.month();
+    }
+    if (
+      date.year() < start.year() ||
+      (date.year() === start.year() && date.month() < start.month())
+    ) {
+      return false;
+    }
+    return !(
+      date.year() > end.year() ||
+      (date.year() === end.year() && date.month() > end.month())
+    );
+  };
+
+  shouldUpdate = (
+    month: {date: any; dateList?: any[]},
+    props?: MonthListProps,
+  ) => {
+    if (!props) return false;
+    const {startDate, endDate} = props;
+    const {startDate: curStartDate, endDate: curEndDate} = this.props;
+    const {date} = month;
+    const next = this.checkRange(date, startDate, endDate);
+    const prev = this.checkRange(date, curStartDate, curEndDate);
+    return prev || next;
+  };
+
+  convertLunarToSolar(date: moment.Moment) {
+    return date
+      ? converter.SolarToLunar({
+          solarDay: date.date(),
+          solarMonth: date.month() + 1,
+          solarYear: date.year(),
+        })
+      : {};
+  }
+
+  findHoliday = (date: Moment.Moment) => {
+    const {holidays} = this.props;
+    if (date && holidays && holidays.length > 0) {
+      const day = date.date();
+      const month = date.month() + 1;
+      return holidays.find(item => item.day === day && item.month === month);
+    }
+    return null;
+  };
+
+  checkHoliday = (date: moment.Moment) => {
+    const holiday = this.findHoliday(date);
+    return {
+      isSolarHoliday: !!(holiday && !holiday.lunar),
+      isLunarHoliday: !!(holiday && holiday.lunar),
+    };
+  };
 
-const MonthList = forwardRef<MonthListRef, MonthListProps>((props, ref) => {
-  const {
-    selectedDate,
-    minDate,
-    maxDate,
-    startDate,
-    endDate,
-    holidays = [],
-    priceList,
-    isShowLunar,
-    isDoubleDateMode,
-    disabledDays,
-    onScrollCalendar,
-    ...restProps
-  } = props;
-
-  const size = useContext(ContainerContext);
-  const listRef = useRef<FlatList>(null);
-  const currentKey = useRef<string | null>(null);
-  const [heightStyle, setHeightStyle] = useState({});
-
-  const data = useMemo(() => {
-    const months: {date: Moment; dateList: any[]}[] = [];
-    const mMin = moment(minDate).date(1);
-    const mMax = moment(maxDate);
+  getDayList = (date: moment.Moment) => {
+    let dayList;
+    const month = date.month();
+    let weekday = date.isoWeekday();
+    if (weekday === 1) {
+      dayList = [];
+    } else {
+      dayList = new Array(weekday - 1).fill({
+        empty: moment(date).subtract(1, 'h'),
+        lunarDate: this.convertLunarToSolar(date),
+        ...this.checkHoliday(date),
+      });
+    }
+    while (date.month() === month) {
+      const cloned = moment(date);
+      dayList.push({
+        date: cloned,
+        lunarDate: this.convertLunarToSolar(cloned),
+        ...this.checkHoliday(date),
+      });
+      date.add(1, 'days');
+    }
+    date.subtract(1, 'days');
+    weekday = date.isoWeekday();
+    if (weekday === 1) {
+      return dayList.concat(
+        new Array(6).fill({
+          empty: moment(date).hour(1),
+          lunarDate: this.convertLunarToSolar(date),
+        }),
+      );
+    }
+    return dayList.concat(
+      new Array(Math.abs(7 - weekday)).fill({
+        empty: moment(date).hour(1),
+        lunarDate: this.convertLunarToSolar(date),
+      }),
+    );
+  };
+
+  getMonthList = (props?: MonthListProps) => {
+    const minDate = moment((props || this.props).minDate).date(1);
+    const maxDate = moment((props || this.props).maxDate);
+    const monthList: {date: moment.Moment; dateList: any[]}[] = [];
+    if (!maxDate || !minDate) return monthList;
     while (
-      mMax > mMin ||
-      (mMax.year() === mMin.year() && mMax.month() === mMin.month())
+      maxDate > minDate ||
+      (maxDate.year() === minDate.year() && maxDate.month() === minDate.month())
     ) {
-      const d = moment(mMin);
-      const dayList: any[] = [];
-      const monthIdx = d.month();
-      let cursor = d.clone();
-      let weekday = cursor.isoWeekday();
-      if (weekday !== 1) {
-        dayList.push(
-          ...new Array(weekday - 1).fill(0).map(() => ({ isEmpty: true }))
-        );
-      }
-      while (cursor.month() === monthIdx) {
-        const cloned = cursor.clone();
-        const hol = holidays.find(
-          h => h.day === cloned.date() && h.month === cloned.month() + 1
-        );
-        dayList.push({
-          isEmpty: false,
-          date: cloned,
-          lunarDate: converter.SolarToLunar({
-            solarDay: cloned.date(),
-            solarMonth: cloned.month() + 1,
-            solarYear: cloned.year(),
-          }),
-          isSolarHoliday: !!(hol && !hol.lunar),
-          isLunarHoliday: !!(hol && hol.lunar),
-        });
-        cursor.add(1, 'days');
-      }
-      cursor.subtract(1, 'days');
-      weekday = cursor.isoWeekday();
-      if (weekday !== 7) {
-        dayList.push(
-          ...new Array(7 - weekday).fill(0).map(() => ({ isEmpty: true }))
-        );
-      }
-      months.push({date: d, dateList: dayList});
-      mMin.add(1, 'month');
+      const d = moment(minDate);
+      const month = {
+        date: d,
+        dateList: this.getDayList(d),
+        shouldUpdate: false,
+      };
+      month.shouldUpdate = this.shouldUpdate(month, props);
+      monthList.push(month);
+      minDate.add(1, 'month');
     }
-    return months;
-  }, [minDate, maxDate, holidays]);
-
-  const getIndexOfMonth = useCallback(
-    (date: Moment) => data.findIndex(item => item.date.isSame(date, 'month')),
-    [data]
-  );
-
-  const currentScrollIndex = useMemo(
-    () => getIndexOfMonth(moment(selectedDate)),
-    [selectedDate, getIndexOfMonth]
-  );
-
-  const scrollToMonth = useCallback(
-    (month: Moment) => {
-      const idx = getIndexOfMonth(month);
-      if (listRef.current && idx !== -1) {
-        listRef.current.scrollToIndex({index: idx, animated: true});
-      }
-    },
-    [getIndexOfMonth]
-  );
 
-  useImperativeHandle(ref, () => ({scrollToMonth}));
+    return monthList;
+  };
 
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      scrollToMonth(selectedDate);
-    }, 500);
-    return () => clearTimeout(timer);
-  }, []);
+  getIndexOfMonth = (month: moment.Moment, data: any[]) => {
+    return data.findIndex(item => item.date.isSame(month, 'month'));
+  };
 
-  const onViewableItemsChanged = useRef(({changed}: {changed: any[]}) => {
-    if (changed.length > 0) {
+  getCurrentVisibleMonth = (info: {changed: any}) => {
+    const {changed} = info;
+    const {onScrollCalendar} = this.props;
+    if (changed && changed.length > 0) {
       const {item, key, index} = changed[0];
-      if (onScrollCalendar && item && currentKey.current !== key) {
-        currentKey.current = key;
+      if (onScrollCalendar && item && this.currentKey !== key) {
+        this.currentKey = key;
         try {
-          setHeightStyle({
-            height:
-              (scaleSize(48) * item.dateList.length) / 7 +
-              Spacing.L * 2 +
-              Spacing.XS,
+          this.heightStyle =
+            this.data && this.data[index] && this.data[index].dateList
+              ? {
+                  height:
+                    (scaleSize(48) * this.data[index].dateList.length) / 7 +
+                    Spacing.L * 2 +
+                    Spacing.XS,
+                }
+              : {};
+        } catch (e) {
+          this.heightStyle = {};
+        }
+        if (onScrollCalendar) {
+          onScrollCalendar({
+            date: item.date,
+            key,
+            currentIndex: index,
           });
-        } catch {
-          setHeightStyle({});
         }
-        onScrollCalendar({date: item.date, key, currentIndex: index});
       }
     }
-  }).current;
-
-  const viewabilityConfig = {itemVisiblePercentThreshold: 50};
-
-  const keyExtractor = useCallback(
-    (item: {date: Moment}) => `${item.date.month() + 1}/${item.date.year()}`,
-    []
-  );
-
-  const getItemLayout = useCallback(
-    (_: any, index: number) => ({
-      length: size.width,
-      offset: size.width * index,
-      index,
-    }),
-    [size.width]
-  );
-
-  const renderItem = useCallback(
-    ({item, index}: {item: {date: Moment; dateList: any[]}; index: number}) => {
-      const keyMonth = moment(item.date).format('YYYY-MM');
-      const priceListDate = priceList?.[keyMonth]?.day;
-      return (
-        <Month
-          {...restProps}
-          key={index}
-          month={item.date}
-          dateList={item.dateList}
-          priceListDate={priceListDate}
-          holidays={holidays}
-          minDate={minDate}
-          maxDate={maxDate}
-          startDate={startDate}
-          endDate={endDate}
-          isShowLunar={isShowLunar}
-          isDoubleDateMode={isDoubleDateMode}
-          disabledDays={disabledDays}
-        />
-      );
-    },
-    [
-      restProps,
-      priceList,
-      holidays,
-      minDate,
-      maxDate,
-      startDate,
-      endDate,
-      isShowLunar,
-      isDoubleDateMode,
-      disabledDays,
-    ]
-  );
-
-  return (
-    <FlatList
-      extraData={priceList}
-      style={heightStyle}
-      pagingEnabled
-      horizontal
-      ref={listRef}
-      data={data}
-      renderItem={renderItem}
-      showsHorizontalScrollIndicator={false}
-      keyExtractor={keyExtractor}
-      onScrollToIndexFailed={() => {}}
-      scrollEnabled
-      initialNumToRender={3}
-      maxToRenderPerBatch={MAX_RENDER_PER_BATCH}
-      windowSize={1}
-      onViewableItemsChanged={onViewableItemsChanged}
-      initialScrollIndex={currentScrollIndex}
-      getItemLayout={getItemLayout}
-      viewabilityConfig={viewabilityConfig}
-    />
-  );
-});
-
-export default MonthList;
+  };
+
+  keyExtractor = (item: {date: Moment.Moment}) =>
+    `${item.date.month() + 1}/${item.date.year()}`;
+
+  scrollToMonth = (month: moment.Moment) => {
+    const index = this.getIndexOfMonth(month, this.data);
+    if (this.list.current && index !== -1) {
+      this.list.current.scrollToIndex({
+        index,
+        animated: true,
+      });
+    }
+  };
+
+  getItemLayout = (data: any, index: number, width: number) => ({
+    length: width,
+    offset: width * index,
+    index,
+  });
+
+  componentDidMount() {
+    setTimeout(() => {
+      this.scrollToMonth(this.currentDate);
+    }, 500);
+  }
+
+  render() {
+    const {priceList} = this.props;
+    return (
+      <ContainerContext.Consumer>
+        {size => (
+          <FlatList
+            extraData={priceList}
+            style={this.heightStyle}
+            pagingEnabled
+            horizontal
+            ref={this.list}
+            data={this.data}
+            renderItem={this.renderMonth}
+            showsHorizontalScrollIndicator={false}
+            keyExtractor={this.keyExtractor}
+            onViewableItemsChanged={this.getCurrentVisibleMonth}
+            onScrollToIndexFailed={() => {}}
+            scrollEnabled
+            initialNumToRender={3}
+            maxToRenderPerBatch={MAX_RENDER_PER_BATCH}
+            windowSize={1}
+            initialScrollIndex={this.currentScrollIndex}
+            getItemLayout={(data, index) =>
+              this.getItemLayout(data, index, size.width)
+            }
+            viewabilityConfig={{
+              itemVisiblePercentThreshold: 50,
+            }}
+          />
+        )}
+      </ContainerContext.Consumer>
+    );
+  }
+}

package/TabHeader.tsx

@@ -17,7 +17,7 @@ export default class TabHeader extends React.Component<
 > {
   static contextType = ApplicationContext;
   label;
-  defaultDate: Moment.Moment | null;
+  defaultDate: Moment.Moment;
 
   constructor(props: TabHeaderProps) {
     super(props);
@@ -25,7 +25,7 @@ export default class TabHeader extends React.Component<
       active: props.activeTab,
     };
     this.label = props.label;
-    this.defaultDate = props.date ? Moment(props.date) : null;
+    this.defaultDate = props.date ? Moment(props.date) : Moment();
   }
 
   onChangeTab = () => {
@@ -35,7 +35,7 @@ export default class TabHeader extends React.Component<
 
   updateView = (date?: Moment.Moment | Date | null, activeTab?: boolean) => {
     this.setState({
-      date: date ? Moment(date) : undefined,
+      date: date ? Moment(date) : Moment(),
       active: activeTab,
     });
   };

package/Util.ts

@@ -1,7 +1,6 @@
 import moment from 'moment';
 import LunarDateConverter from './LunarDateConverter';
 import holiday from './holidayData';
-import {Holidays} from './types';
 
 const I18N_MAP = {
   en: {
@@ -60,10 +59,8 @@ const formatYYYYMMDD = (dd: number, mm: number, yyyy: any) =>
 const formatDDMM = (dd: number, mm: number) =>
   `${dd < 10 ? `0${dd}` : dd}/${mm < 10 ? `0${mm}` : mm}`;
 
-const groupHolidaysByDate = (
-  holidays: Holidays[]
-): {[key: string]: Holidays} => {
-  const groupedHolidays: {[key: string]: Holidays} = {};
+const groupHolidaysByDate = (holidays: any[]) => {
+  const groupedHolidays: {[key: string]: string[]} = {};
   if (holidays && holidays.length > 0) {
     holidays.forEach(item => {
       const {day, month, lunar, label} = item;
@@ -93,18 +90,17 @@ const groupHolidaysByDate = (
   return groupedHolidays;
 };
 
-/**
- * Sort and group holidays by date, return sorted array of unique Holidays.
- */
-const sortByDate = (arr: Holidays[]): Holidays[] => {
+const sortByDate = (arr: any[]) => {
   if (arr && arr.length > 1) {
-    arr.sort((a, b) =>
-      a.month !== b.month ? a.month - b.month : a.day - b.day
-    );
+    arr.sort((a, b) => {
+      if (a.month > b.month || (a.month === b.month && a.day > b.day)) {
+        return 1;
+      }
+      return -1;
+    });
   }
-  // group by date string and return unique values in sorted order
-  const grouped = groupHolidaysByDate(arr);
-  return Object.values(grouped);
+
+  return groupHolidaysByDate(arr);
 };
 
 const Utils = {
@@ -187,11 +183,9 @@ const Utils = {
     return lastDayOfMonth.getDate();
   },
 
-  /**
-   * Get sorted list of holidays within the given month.
-   */
-  getHolidaysInMonth(headerInfo: moment.Moment): Holidays[] {
+  getHolidaysInMonth(headerInfo: moment.Moment) {
     if (headerInfo) {
+      const today = moment();
       // @ts-ignore
       const converter = new LunarDateConverter();
       const startDate = moment(headerInfo).startOf('month');
@@ -215,10 +209,10 @@ const Utils = {
               month: date.month - 1,
               date: date.day,
             });
-            if (dateAsMoment.isBetween(startDate, endDate, 'day', '[]')) {
+            if (dateAsMoment.isSameOrAfter(today, 'date')) {
               holidays.push(date);
             }
-          }
+          },
         );
       }
 
@@ -235,13 +229,22 @@ const Utils = {
             lunarYear: currentYear[1],
           });
           const solar1AsMoment = moment(
-            formatYYYYMMDD(solar1.solarDay, solar1.solarMonth, solar1.solarYear)
+            formatYYYYMMDD(
+              solar1.solarDay,
+              solar1.solarMonth,
+              solar1.solarYear,
+            ),
           );
           const solar2AsMoment = moment(
-            formatYYYYMMDD(solar2.solarDay, solar2.solarMonth, solar2.solarYear)
+            formatYYYYMMDD(
+              solar2.solarDay,
+              solar2.solarMonth,
+              solar2.solarYear,
+            ),
           );
           if (
-            solar1AsMoment.isBetween(startDate, endDate, 'day', '[]')
+            solar1AsMoment.isBetween(startDate, endDate) &&
+            solar1AsMoment.isSameOrAfter(today, 'date')
           ) {
             holidays.push({
               ...item,
@@ -249,7 +252,8 @@ const Utils = {
               month: solar1.solarMonth,
             });
           } else if (
-            solar2AsMoment.isBetween(startDate, endDate, 'day', '[]')
+            solar2AsMoment.isBetween(startDate, endDate) &&
+            solar2AsMoment.isSameOrAfter(today, 'date')
           ) {
             holidays.push({
               ...item,
@@ -264,10 +268,11 @@ const Utils = {
             lunarYear: currentYear,
           });
           const solarAsMoment = moment(
-            formatYYYYMMDD(solar.solarDay, solar.solarMonth, solar.solarYear)
+            formatYYYYMMDD(solar.solarDay, solar.solarMonth, solar.solarYear),
           );
           if (
-            solarAsMoment.isBetween(startDate, endDate, 'day', '[]')
+            solarAsMoment.isBetween(startDate, endDate) &&
+            solarAsMoment.isSameOrAfter(today, 'date')
           ) {
             holidays.push({
               ...item,