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

package/CalendarPro.tsx

@@ -1,7 +1,14 @@
-import React, {Component, createRef} from 'react';
-
+import React, {
+  useContext,
+  useRef,
+  useState,
+  useEffect,
+  useMemo,
+  forwardRef,
+  useImperativeHandle,
+} from 'react';
 import {ScrollView, View} from 'react-native';
-import Moment from 'moment';
+import moment, {Moment} from 'moment';
 import {
   ApplicationContext,
   CheckBox,
@@ -15,377 +22,281 @@ import LunarDateConverter from './LunarDateConverter';
 import Util from './Util';
 import {
   CalendarProProps,
-  CalendarProState,
+  CalendarProRef,
   HeaderControlRef,
+  MonthListRef,
   Holidays,
 } from './types';
 import {ContainerContext} from './index';
 import styles from './styles';
 
-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;
+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);
 
-  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();
-  }
+    const today = useMemo(() => moment(), []);
+    const headerRef = useRef<Moment>(today.clone());
+    const headerControlRef = useRef<HeaderControlRef>(null);
+    const monthListRef = useRef<MonthListRef>(null);
 
-  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;
-  }
+    // 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]);
 
-  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;
+    // 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);
+
+    const converter: any = useMemo(() => LunarDateConverter(), []);
 
-          this.monthListRef?.scrollToMonth(dateScroll);
+    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));
         }
-      );
-    }
-  };
+      },
+    }));
 
-  ownSetState(state: any) {
-    this.setState({
-      ...state,
-      ownUpdate: true,
-    });
-  }
+    // Sync showLunar prop
+    useEffect(() => {
+      if (ownUpdate) {
+        setOwnUpdate(false);
+      } else if (propIsShowLunar !== showLunar) {
+        setShowLunar(!!propIsShowLunar);
+      }
+    }, [propIsShowLunar]);
 
-  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;
-  };
+    // Scroll to initial selected date on mount or when it changes
+    useEffect(() => {
+      const timer = setTimeout(() => {
+        monthListRef.current?.scrollToMonth(propSelectedDate);
+      }, 500);
+      return () => clearTimeout(timer);
+    }, [propSelectedDate]);
 
-  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,
-          });
+    // 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);
         }
       } else {
-        this.ownSetState({
-          startDate: day,
-        });
+        setStartDate(day);
+        setEndDate(null);
       }
-    } else {
-      this.ownSetState({
-        startDate: day,
-        endDate: null,
-      });
-    }
-    if (onDateChange) {
-      onDateChange(day);
-    }
-  };
+      onDateChange?.(day);
+    };
 
-  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 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);
+    };
 
-  onScrollCalendar = (data: {key: string; date: Moment.Moment}) => {
-    const {headerKey} = this.state;
-    if (data) {
-      if (data.key !== headerKey) {
-        this.executeProcessAfterScrollCalendar(data.date, data.key);
+    const onScrollCalendar = (info: {
+      date: Moment;
+      key: string;
+      currentIndex: number;
+    }) => {
+      if (info.key !== headerKey) {
+        executeProcessAfterScrollCalendar(info.date, info.key);
       }
-    }
-  };
-
-  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,
-    });
-  };
-
-  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);
-    }
+    };
 
-    this.ownSetState({
-      showLunar: !showLunar,
-      temp: data,
-      ownUpdate: true,
-    });
-  };
+    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);
+    };
 
-  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);
-    }
-  };
+    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);
+      }
+    };
 
-  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);
-    }
-  };
+    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);
+      }
+    };
 
-  render() {
-    const {
-      startDate,
-      endDate,
-      showLunar = false,
-      tabSelected,
-      holidays,
-      temp,
-    } = this.state;
-    const {
-      isDoubleDateMode,
-      priceList,
-      disabledDays,
-      isHideHoliday,
-      isOffLunar,
-    } = this.props;
+    // Determine price list format
     let priceListFormat = priceList?.outbound;
     if (isDoubleDateMode) {
       priceListFormat =
         tabSelected === 0 ? priceList?.outbound : priceList?.inbound;
     }
 
-    const {theme, translate} = this.context;
-
     return (
-      <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
+      <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"
                 style={[
-                  styles.viewLunar,
-                  {borderColor: theme.colors.border.default},
+                  styles.textDay,
+                  {width: (size.width - Spacing.M * 2) / 7},
                 ]}>
-                <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>
-            )}
+                {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')}
+            />
           </View>
         )}
-      </ContainerContext.Consumer>
+        {!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>
     );
   }
-}
+);
+
+export default CalendarPro;