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

package/MonthList.tsx

@@ -1,282 +1,219 @@
-import React, {Component} from 'react';
+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 {FlatList, Platform} from 'react-native';
-import moment from 'moment';
-import Moment from 'moment';
-import Month from './Month';
-import LunarDateConverter from './LunarDateConverter';
-import {Holidays, MonthListProps, MonthListState} from './types';
 import {ContainerContext} from './index';
-import {scaleSize, Spacing} from '@momo-kits/foundation';
+import LunarDateConverter from './LunarDateConverter';
+import Month from './Month';
+import {MonthListProps, MonthListRef} from './types';
 
 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),
-    };
-  };
 
-  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;
+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);
     while (
-      maxDate > minDate ||
-      (maxDate.year() === minDate.year() && maxDate.month() === minDate.month())
+      mMax > mMin ||
+      (mMax.year() === mMin.year() && mMax.month() === mMin.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');
+      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');
     }
+    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]
+  );
 
-    return monthList;
-  };
+  useImperativeHandle(ref, () => ({scrollToMonth}));
 
-  getIndexOfMonth = (month: moment.Moment, data: any[]) => {
-    return data.findIndex(item => item.date.isSame(month, 'month'));
-  };
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      scrollToMonth(selectedDate);
+    }, 500);
+    return () => clearTimeout(timer);
+  }, []);
 
-  getCurrentVisibleMonth = (info: {changed: any}) => {
-    const {changed} = info;
-    const {onScrollCalendar} = this.props;
-    if (changed && changed.length > 0) {
+  const onViewableItemsChanged = useRef(({changed}: {changed: any[]}) => {
+    if (changed.length > 0) {
       const {item, key, index} = changed[0];
-      if (onScrollCalendar && item && this.currentKey !== key) {
-        this.currentKey = key;
+      if (onScrollCalendar && item && currentKey.current !== key) {
+        currentKey.current = key;
         try {
-          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,
+          setHeightStyle({
+            height:
+              (scaleSize(48) * item.dateList.length) / 7 +
+              Spacing.L * 2 +
+              Spacing.XS,
           });
+        } catch {
+          setHeightStyle({});
         }
+        onScrollCalendar({date: item.date, key, currentIndex: index});
       }
     }
-  };
-
-  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>
-    );
-  }
-}
+  }).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];
+      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;

package/TabHeader.tsx

@@ -17,7 +17,7 @@ export default class TabHeader extends React.Component<
 > {
   static contextType = ApplicationContext;
   label;
-  defaultDate: Moment.Moment;
+  defaultDate: Moment.Moment | null;
 
   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) : Moment();
+    this.defaultDate = props.date ? Moment(props.date) : null;
   }
 
   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) : Moment(),
+      date: date ? Moment(date) : undefined,
       active: activeTab,
     });
   };

package/Util.ts

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