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

package/CalendarPro.tsx

@@ -1,14 +1,7 @@
-import React, {
-  useContext,
-  useRef,
-  useState,
-  useEffect,
-  useMemo,
-  forwardRef,
-  useImperativeHandle,
-} from 'react';
+import React, {Component, createRef} from 'react';
+
 import {ScrollView, View} from 'react-native';
-import moment, {Moment} from 'moment';
+import Moment from 'moment';
 import {
   ApplicationContext,
   CheckBox,
@@ -22,281 +15,377 @@ import LunarDateConverter from './LunarDateConverter';
 import Util from './Util';
 import {
   CalendarProProps,
-  CalendarProRef,
+  CalendarProState,
   HeaderControlRef,
-  MonthListRef,
   Holidays,
 } from './types';
 import {ContainerContext} from './index';
 import styles from './styles';
 
-const CalendarPro = forwardRef<CalendarProRef, CalendarProProps>(
-  (
-    {
-      startDate: propStartDate,
-      endDate: propEndDate,
-      minDate: propMinDate,
-      maxDate: propMaxDate,
-      isShowLunar: propIsShowLunar,
-      selectedDate: propSelectedDate,
-      isDoubleDateMode,
-      onDateChange,
-      priceList,
-      isHideHoliday,
-      isOffLunar,
-      onCallbackCalendar,
-      disabledDays,
-    },
-    ref
-  ) => {
-    const {theme, translate} = useContext(ApplicationContext);
-    const size = useContext(ContainerContext);
-
-    const today = useMemo(() => moment(), []);
-    const headerRef = useRef<Moment>(today.clone());
-    const headerControlRef = useRef<HeaderControlRef>(null);
-    const monthListRef = useRef<MonthListRef>(null);
+export default class CalendarPro extends Component<
+  CalendarProProps,
+  CalendarProState
+> {
+  static contextType = ApplicationContext;
+  today: Moment.Moment;
+  year: number;
+  header: Moment.Moment;
+  selectedDate: Moment.Moment;
+  converter: typeof LunarDateConverter;
+  minDate: Moment.Moment = Moment();
+  maxDate: Moment.Moment = Moment();
+  monthListRef?: MonthList | null;
+  headerControlRef;
 
-    // Compute min/max date range
-    const [minDate, maxDate] = useMemo(() => {
-      let max = moment(propMaxDate);
-      let min = moment(propMinDate);
-      const maxValid = max.isValid();
-      const minValid = min.isValid();
-      if (!maxValid && !minValid) {
-        max = moment().add(12, 'months');
-        min = moment();
-      } else if (!maxValid && minValid) {
-        max = min.clone().add(12, 'months');
-      } else if (maxValid && !minValid) {
-        min = max.clone().subtract(12, 'months');
-      }
-      return [min, max];
-    }, [propMinDate, propMaxDate, isDoubleDateMode]);
+  constructor(props: CalendarProProps) {
+    super(props);
+    this.today = Moment();
+    this.year = this.today.year();
+    this.getDateRange();
+    this.header = this.today.clone();
+    this.selectedDate = props.selectedDate;
+    this.headerControlRef = createRef<HeaderControlRef>();
+    this.state = {
+      startDate: props.startDate,
+      endDate: props.endDate,
+      showLunar: props.isShowLunar,
+      tabSelected: 0,
+      holidays: [],
+      ownUpdate: false,
+    };
+    // @ts-ignore
+    this.converter = new LunarDateConverter();
+  }
 
-    // State
-    const [startDate, setStartDate] = useState<Moment>(propStartDate);
-    const [endDate, setEndDate] = useState<Moment | null>(propEndDate || null);
-    const [showLunar, setShowLunar] = useState<boolean>(!!propIsShowLunar);
-    const [tabSelected, setTabSelected] = useState<number>(0);
-    const [holidays, setHolidays] = useState<Holidays[]>([]);
-    const [temp, setTemp] = useState<any[]>([]);
-    const [headerKey, setHeaderKey] = useState<string>('');
-    const [ownUpdate, setOwnUpdate] = useState<boolean>(false);
+  static getDerivedStateFromProps(
+    nextProps: {isShowLunar: any},
+    prevState: {ownUpdate: any; showLunar: any}
+  ) {
+    if (prevState.ownUpdate) {
+      return {
+        ownUpdate: false,
+      };
+    }
+    if (nextProps.isShowLunar !== prevState.showLunar) {
+      return {showLunar: nextProps.isShowLunar};
+    }
+    return null;
+  }
 
-    const converter: any = useMemo(() => LunarDateConverter(), []);
+  setDateRange = (
+    dateRange: {startDate: any; endDate: any},
+    isScrollToStartDate: any
+  ) => {
+    if (dateRange && dateRange.startDate && dateRange.endDate) {
+      this.setState(
+        {
+          startDate: dateRange.startDate,
+          endDate: dateRange.endDate,
+        },
+        () => {
+          const dateScroll = isScrollToStartDate
+            ? dateRange.startDate
+            : dateRange.endDate;
 
-    useImperativeHandle(ref, () => ({
-      setDoubleDateAndTabIndex: (
-        firstDate?: Moment | null,
-        secondDate?: Moment | null,
-        tabIdx?: number
-      ) => {
-        if (typeof tabIdx === 'number') setTabSelected(tabIdx);
-        if (firstDate) setStartDate(firstDate);
-        if (secondDate !== undefined) setEndDate(secondDate);
-      },
-      setDateRange: (
-        dateRange: {startDate: any; endDate: any},
-      ) => {
-        if (monthListRef.current && dateRange.startDate) {
-          monthListRef.current.scrollToMonth(moment(dateRange.startDate));
+          this.monthListRef?.scrollToMonth(dateScroll);
         }
-      },
-    }));
+      );
+    }
+  };
 
-    // Sync showLunar prop
-    useEffect(() => {
-      if (ownUpdate) {
-        setOwnUpdate(false);
-      } else if (propIsShowLunar !== showLunar) {
-        setShowLunar(!!propIsShowLunar);
-      }
-    }, [propIsShowLunar]);
+  ownSetState(state: any) {
+    this.setState({
+      ...state,
+      ownUpdate: true,
+    });
+  }
 
-    // Scroll to initial selected date on mount or when it changes
-    useEffect(() => {
-      const timer = setTimeout(() => {
-        monthListRef.current?.scrollToMonth(propSelectedDate);
-      }, 500);
-      return () => clearTimeout(timer);
-    }, [propSelectedDate]);
+  getDateRange = () => {
+    const {maxDate, minDate} = this.props;
+    let max = Moment(maxDate);
+    let min = Moment(minDate);
+    const maxValid = max.isValid();
+    const minValid = min.isValid();
+    if (!maxValid && !minValid) {
+      max = Moment().add(12, 'months');
+      min = Moment();
+    }
+    if (!maxValid && minValid) {
+      max = min.add(12, 'months');
+    }
+    if (maxValid && !minValid) {
+      min = max.subtract(12, 'months');
+    }
+    if (min.isSame(max) && this.props.isDoubleDateMode) return {};
+    if (min.isAfter(max)) return {};
+    this.minDate = min;
+    this.maxDate = max;
+  };
 
-    // Handlers
-    const onChooseDay = (day: Moment) => {
-      if (isDoubleDateMode) {
-        if (tabSelected === 1) {
-          if (startDate && day >= startDate) {
-            setEndDate(day);
-          } else if (startDate && day < startDate) {
-            setStartDate(day);
-            setEndDate(null);
-          }
-        } else {
-          setStartDate(day);
+  onChoose = (day: Moment.Moment) => {
+    const {startDate, tabSelected} = this.state;
+    const {isDoubleDateMode, onDateChange} = this.props;
+    if (isDoubleDateMode) {
+      if (tabSelected === 1) {
+        if (startDate && day >= Moment(startDate)) {
+          this.ownSetState({
+            endDate: day,
+          });
+        } else if (startDate && day < Moment(startDate)) {
+          this.ownSetState({
+            startDate: day,
+            endDate: null,
+          });
         }
       } else {
-        setStartDate(day);
-        setEndDate(null);
+        this.ownSetState({
+          startDate: day,
+        });
       }
-      onDateChange?.(day);
-    };
+    } else {
+      this.ownSetState({
+        startDate: day,
+        endDate: null,
+      });
+    }
+    if (onDateChange) {
+      onDateChange(day);
+    }
+  };
 
-    const executeProcessAfterScrollCalendar = (date: Moment, key: string) => {
-      // get sorted array of holidays directly
-      const allHolidays = Util.getHolidaysInMonth(moment(date));
-      const filtered = showLunar
-        ? allHolidays
-        : allHolidays.filter(item => !item.lunar || item.mixedLabel);
-      headerControlRef.current?.onUpdateInfo({date});
-      headerRef.current = date.clone().startOf('month');
-      setHolidays(allHolidays);
-      setTemp(filtered);
-      setHeaderKey(key);
-    };
+  executeProcessAfterScrollCalendar = (date: Moment.Moment, key: any) => {
+    const holidays: any[] = Object.values(
+      Util.getHolidaysInMonth(Moment(date))
+    );
+    const {showLunar} = this.state;
+    if (this.headerControlRef) {
+      this.headerControlRef.current?.onUpdateInfo({date});
+      this.header = date.clone().startOf('month');
+    }
+    let data = [];
+    if (!showLunar) {
+      data = holidays.filter(item => !item.lunar || item.mixedLabel);
+    } else {
+      data = holidays;
+    }
+    this.ownSetState({
+      holidays,
+      temp: data,
+      headerKey: key,
+    });
+  };
 
-    const onScrollCalendar = (info: {
-      date: Moment;
-      key: string;
-      currentIndex: number;
-    }) => {
-      if (info.key !== headerKey) {
-        executeProcessAfterScrollCalendar(info.date, info.key);
+  onScrollCalendar = (data: {key: string; date: Moment.Moment}) => {
+    const {headerKey} = this.state;
+    if (data) {
+      if (data.key !== headerKey) {
+        this.executeProcessAfterScrollCalendar(data.date, data.key);
       }
-    };
+    }
+  };
 
-    const onToggleLunar = () => {
-      setOwnUpdate(true);
-      const next = !showLunar;
-      const filtered = next
-        ? holidays
-        : holidays.filter(item => !item.lunar || item.mixedLabel);
-      onCallbackCalendar?.('lunar', next);
-      setShowLunar(next);
-      setTemp(filtered);
-    };
+  setDoubleDateAndTabIndex = (
+    firstDate: Moment.Moment | Date | undefined,
+    secondDate?: Moment.Moment | Date | undefined | null,
+    tabSelected?: any
+  ) => {
+    this.ownSetState({
+      startDate: firstDate ? Moment(firstDate) : null,
+      endDate: secondDate ? Moment(secondDate) : null,
+      tabSelected,
+    });
+  };
 
-    const onPressBackArrow = () => {
-      const prev = headerRef.current
-        .clone()
-        .startOf('month')
-        .subtract(1, 'months');
-      if (prev.isSameOrAfter(minDate, 'month')) {
-        headerRef.current = prev;
-        headerControlRef.current?.onUpdateInfo({date: prev});
-        monthListRef.current?.scrollToMonth(prev);
-      }
-    };
+  toggleLunarDate = () => {
+    const {showLunar, holidays} = this.state;
+    const {onCallbackCalendar} = this.props;
+    let data: Holidays[] = [];
+    const nextStateShowLunar = !showLunar;
+    if (!nextStateShowLunar) {
+      data = holidays?.filter(item => !item.lunar || item.mixedLabel);
+    } else {
+      data = holidays;
+    }
+    if (onCallbackCalendar) {
+      onCallbackCalendar('lunar', nextStateShowLunar);
+    }
 
-    const onPressNextArrow = () => {
-      const next = headerRef.current.clone().startOf('month').add(1, 'months');
-      if (next.isSameOrBefore(maxDate, 'month')) {
-        headerRef.current = next;
-        headerControlRef.current?.onUpdateInfo({date: next});
-        monthListRef.current?.scrollToMonth(next);
-      }
-    };
+    this.ownSetState({
+      showLunar: !showLunar,
+      temp: data,
+      ownUpdate: true,
+    });
+  };
+
+  onPressBackArrow = () => {
+    const previousDate = Moment(this.header)
+      .startOf('month')
+      .subtract(1, 'months');
+    if (
+      this.headerControlRef &&
+      previousDate.isSameOrAfter(this.minDate, 'month')
+    ) {
+      this.header = previousDate;
+      this.headerControlRef.current?.onUpdateInfo({date: previousDate});
+      this.monthListRef?.scrollToMonth(previousDate);
+    }
+  };
 
-    // Determine price list format
+  onPressNextArrow = () => {
+    const nextDate = Moment(this.header).startOf('month').add(1, 'months');
+    if (
+      this.headerControlRef &&
+      nextDate.isSameOrBefore(this.maxDate, 'month')
+    ) {
+      this.header = nextDate;
+      this.headerControlRef.current?.onUpdateInfo({date: nextDate});
+      this.monthListRef?.scrollToMonth(nextDate);
+    }
+  };
+
+  render() {
+    const {
+      startDate,
+      endDate,
+      showLunar = false,
+      tabSelected,
+      holidays,
+      temp,
+    } = this.state;
+    const {
+      isDoubleDateMode,
+      priceList,
+      disabledDays,
+      isHideHoliday,
+      isOffLunar,
+    } = this.props;
     let priceListFormat = priceList?.outbound;
     if (isDoubleDateMode) {
       priceListFormat =
         tabSelected === 0 ? priceList?.outbound : priceList?.inbound;
     }
 
+    const {theme, translate} = this.context;
+
     return (
-      <View style={styles.container}>
-        <HeaderControl
-          ref={headerControlRef}
-          selectedDate={propSelectedDate}
-          onPressBackArrow={onPressBackArrow}
-          onPressNextArrow={onPressNextArrow}
-        />
-        <View style={styles.blueSeperator} />
-        <View>
-          <View style={styles.viewDay}>
-            {[1, 2, 3, 4, 5, 6, 7].map(dayIdx => (
-              <Text
-                key={dayIdx}
-                color={dayIdx >= 6 ? Colors.red_03 : Colors.black_17}
-                typography="label_s_medium"
+      <ContainerContext.Consumer>
+        {size => (
+          <View style={styles.container}>
+            <View>
+              <HeaderControl
+                ref={this.headerControlRef}
+                selectedDate={this.selectedDate}
+                onPressBackArrow={this.onPressBackArrow}
+                onPressNextArrow={this.onPressNextArrow}
+              />
+              <View style={styles.blueSeperator} />
+              <View>
+                <View style={styles.viewDay}>
+                  {[1, 2, 3, 4, 5, 6, 7].map(item => (
+                    <Text
+                      color={
+                        item === 6 || item === 7
+                          ? Colors.red_03
+                          : Colors.black_17
+                      }
+                      typography={'label_s_medium'}
+                      style={[
+                        styles.textDay,
+                        {
+                          width: (size.width - Spacing.M * 2) / 7,
+                        },
+                      ]}
+                      key={item}>
+                      {translate(Util.mapWeeKDate(item))}
+                    </Text>
+                  ))}
+                </View>
+                <MonthList
+                  ref={ref => (this.monthListRef = ref)}
+                  today={this.today}
+                  minDate={this.minDate}
+                  maxDate={this.maxDate}
+                  startDate={startDate}
+                  endDate={endDate}
+                  onChoose={this.onChoose}
+                  onScrollCalendar={this.onScrollCalendar}
+                  isShowLunar={!isOffLunar && showLunar}
+                  isDoubleDateMode={isDoubleDateMode}
+                  tabSelected={tabSelected}
+                  lunarConverter={this.converter}
+                  holidays={holidays}
+                  selectedDate={this.selectedDate}
+                  priceList={priceListFormat}
+                  disabledDays={disabledDays}
+                />
+              </View>
+            </View>
+            {!isOffLunar && (
+              <View
                 style={[
-                  styles.textDay,
-                  {width: (size.width - Spacing.M * 2) / 7},
+                  styles.viewLunar,
+                  {borderColor: theme.colors.border.default},
                 ]}>
-                {translate?.(Util.mapWeeKDate(dayIdx))}
-              </Text>
-            ))}
-          </View>
-          <MonthList
-            ref={monthListRef}
-            today={today}
-            minDate={minDate}
-            maxDate={maxDate}
-            startDate={startDate!}
-            endDate={endDate!}
-            onChoose={onChooseDay}
-            onScrollCalendar={onScrollCalendar}
-            isShowLunar={!isOffLunar && showLunar}
-            isDoubleDateMode={isDoubleDateMode}
-            tabSelected={tabSelected}
-            lunarConverter={converter}
-            holidays={holidays}
-            selectedDate={propSelectedDate}
-            priceList={priceListFormat}
-            disabledDays={disabledDays}
-          />
-        </View>
-        {!isOffLunar && (
-          <View
-            style={[
-              styles.viewLunar,
-              {borderColor: theme.colors.border.default},
-            ]}>
-            <CheckBox
-              onChange={onToggleLunar}
-              value={showLunar}
-              label={translate?.('showLunar')}
-            />
+                <CheckBox
+                  onChange={this.toggleLunarDate}
+                  value={showLunar}
+                  label={translate('showLunar')}
+                />
+              </View>
+            )}
+
+            {!isHideHoliday && (
+              <ScrollView
+                contentContainerStyle={styles.contentScroll}
+                showsVerticalScrollIndicator={false}
+                nestedScrollEnabled>
+                {temp &&
+                  temp.length > 0 &&
+                  temp.map(
+                    (
+                      item: {
+                        mixedLabel: any;
+                        label: any;
+                        day: number;
+                        month: number;
+                        highlight: string;
+                      },
+                      idx: {toString: () => React.Key | null | undefined}
+                    ) => {
+                      const labelHoliday = showLunar
+                        ? item.mixedLabel || item.label || ''
+                        : item.label || '';
+                      const labelDate = `${
+                        item.day > 9 ? item.day : `0${item.day}`
+                      }/${item.month > 9 ? item.month : `0${item.month}`}`;
+                      const labelHighlight = showLunar
+                        ? item.highlight || ''
+                        : '';
+                      return (
+                        <View style={styles.row} key={idx.toString()}>
+                          <Text
+                            color={theme.colors.error.primary}
+                            typography={'description_default_regular'}
+                            style={styles.txtMonthLunar}>
+                            {labelDate}
+                          </Text>
+                          <Text
+                            typography={'description_default_regular'}
+                            style={styles.subTextLunar}>
+                            {`${translate(labelHoliday)}`}
+                          </Text>
+                          <Text typography={'description_default_regular'}>
+                            {labelHighlight}
+                          </Text>
+                        </View>
+                      );
+                    }
+                  )}
+              </ScrollView>
+            )}
           </View>
         )}
-        {!isHideHoliday && (
-          <ScrollView
-            contentContainerStyle={styles.contentScroll}
-            showsVerticalScrollIndicator={false}
-            nestedScrollEnabled>
-            {temp.map((item, idx) => {
-              const labelDate = `${item.day > 9 ? item.day : `0${item.day}`}/${
-                item.month > 9 ? item.month : `0${item.month}`
-              }`;
-              const labelHoliday = showLunar
-                ? item.mixedLabel || item.label
-                : item.label;
-              const labelHighlight = showLunar ? item.highlight || '' : '';
-              return (
-                <View style={styles.row} key={idx.toString()}>
-                  <Text
-                    color={theme.colors.error.primary}
-                    typography="description_default_regular"
-                    style={styles.txtMonthLunar}>
-                    {labelDate}
-                  </Text>
-                  <Text
-                    typography="description_default_regular"
-                    style={styles.subTextLunar}>
-                    {translate?.(labelHoliday)}
-                  </Text>
-                  <Text typography="description_default_regular">
-                    {labelHighlight}
-                  </Text>
-                </View>
-              );
-            })}
-          </ScrollView>
-        )}
-      </View>
+      </ContainerContext.Consumer>
     );
   }
-);
-
-export default CalendarPro;
+}