@momo-kits/calendar 0.73.3-beta.4 → 0.74.2-react-native.1

package/CalendarPro.tsx

@@ -0,0 +1,390 @@
+import React, {Component, createRef} from 'react';
+
+import {Dimensions, ScrollView, View} from 'react-native';
+import Moment from 'moment';
+import {
+  ApplicationContext,
+  CheckBox,
+  Colors,
+  Spacing,
+  Text,
+} from '@momo-kits/foundation';
+import MonthList from './MonthList';
+import HeaderControl from './HeaderControl';
+import LunarDateConverter from './LunarDateConverter';
+import Util from './Util';
+import {
+  CalendarProProps,
+  CalendarProState,
+  HeaderControlRef,
+  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;
+
+  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();
+  }
+
+  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;
+  }
+
+  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;
+
+          this.monthListRef?.scrollToMonth(dateScroll);
+        },
+      );
+    }
+  };
+
+  ownSetState(state: any) {
+    this.setState({
+      ...state,
+      ownUpdate: true,
+    });
+  }
+
+  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.isSameOrAfter(max)) return {};
+    this.minDate = min;
+    this.maxDate = max;
+  };
+
+  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 {
+        this.ownSetState({
+          startDate: day,
+        });
+      }
+    } else {
+      this.ownSetState({
+        startDate: day,
+        endDate: null,
+      });
+    }
+    if (onDateChange) {
+      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,
+    });
+  };
+
+  onScrollCalendar = (data: {key: string; date: Moment.Moment}) => {
+    const {headerKey} = this.state;
+    if (data) {
+      if (data.key !== headerKey) {
+        this.executeProcessAfterScrollCalendar(data.date, data.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,
+    });
+  };
+
+  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);
+    }
+  };
+
+  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 (
+      <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.viewLunar,
+                  {borderColor: theme.colors.border.default},
+                ]}>
+                <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>
+        )}
+      </ContainerContext.Consumer>
+    );
+  }
+}

package/Day.tsx

@@ -0,0 +1,221 @@
+import React, {Component} from 'react';
+
+import {TouchableOpacity, View} from 'react-native';
+import {
+  ApplicationContext,
+  Colors,
+  scaleSize,
+  Spacing,
+  Text,
+} from '@momo-kits/foundation';
+import {DayProps} from './types';
+import {ContainerContext} from './index';
+import styles from './styles';
+
+class Day extends Component<DayProps> {
+  isFocus?: boolean;
+  isValid?: boolean;
+  isMid?: boolean;
+  isStart?: boolean;
+  isStartPart?: boolean;
+  isEnd?: boolean;
+  isWeekEnd?: boolean;
+  showLunar?: boolean;
+  lunarDate?: {lunarDay: number; lunarMonth: number};
+  isDoubleDateMode?: boolean;
+  isLunarHoliday?: boolean;
+  isLunarDayStart?: boolean;
+  isSolarHoliday?: boolean;
+  isInScope?: boolean;
+  diffPrice: any;
+
+  static contextType = ApplicationContext;
+  constructor(props: DayProps) {
+    super(props);
+    this.statusCheck();
+  }
+
+  chooseDay = () => {
+    const {onChoose, date} = this.props;
+    onChoose && onChoose(date);
+  };
+
+  statusCheck = (props?: DayProps) => {
+    const {
+      startDate,
+      endDate,
+      date,
+      minDate,
+      maxDate,
+      empty,
+      index,
+      isShowLunar,
+      isDoubleDateMode,
+      lunarDate,
+      isSolarHoliday,
+      isLunarHoliday,
+      tabSelected,
+      isDisabled = false,
+    } = props || this.props;
+    this.isValid =
+      !isDisabled &&
+      date &&
+      (date >= minDate || date.isSame(minDate, 'day')) &&
+      (date <= maxDate || date.isSame(maxDate, 'day'));
+    this.isMid =
+      (isDoubleDateMode && date > startDate && date < endDate) ||
+      (!date && empty >= startDate && empty <= endDate);
+    this.isStart = date && date.isSame(startDate, 'd');
+    this.isStartPart = !!(this.isStart && endDate);
+    this.isEnd = isDoubleDateMode && date && date.isSame(endDate, 'day');
+    this.isFocus = this.isMid || this.isStart || this.isEnd;
+    this.isWeekEnd = index === 6 || index === 5;
+    this.showLunar = isShowLunar;
+    this.lunarDate = lunarDate;
+    this.isDoubleDateMode = isDoubleDateMode;
+    this.isLunarHoliday = isLunarHoliday;
+    this.isLunarDayStart = this.lunarDate && this.lunarDate.lunarDay === 1;
+    this.isSolarHoliday = isSolarHoliday;
+    this.isInScope = isDoubleDateMode
+      ? tabSelected === 0 ||
+        (tabSelected === 1 &&
+          startDate &&
+          date &&
+          date.isSameOrAfter(startDate, 'day'))
+      : true;
+
+    return this.isFocus || this.diffPrice;
+  };
+
+  shouldComponentUpdate(nextProps: DayProps) {
+    const {
+      isDoubleDateMode,
+      isShowLunar,
+      tabSelected,
+      isSolarHoliday,
+      isLunarHoliday,
+      price,
+      isBestPrice,
+      startDate,
+      endDate,
+    } = this.props;
+    const prevStatus = this.isFocus;
+    const selectionModeChange = isDoubleDateMode !== nextProps.isDoubleDateMode;
+    const lunarChange = isShowLunar !== nextProps.isShowLunar;
+    const nextStatus = this.statusCheck(nextProps);
+    const tabChange = tabSelected !== nextProps.tabSelected;
+    const solarHoliday = isSolarHoliday !== nextProps.isSolarHoliday;
+    const lunarHoliday = isLunarHoliday !== nextProps.isLunarHoliday;
+    const diffPrice =
+      price !== nextProps.price && isBestPrice !== nextProps.isBestPrice;
+    const startDateChange =
+      startDate && !startDate?.isSame?.(nextProps.startDate, 'day');
+    const endDateChange =
+      endDate && !endDate?.isSame?.(nextProps.endDate, 'day');
+    return (
+      prevStatus !== nextStatus ||
+      selectionModeChange ||
+      lunarChange ||
+      tabChange ||
+      solarHoliday ||
+      lunarHoliday ||
+      diffPrice ||
+      startDateChange ||
+      endDateChange
+    );
+  }
+
+  render() {
+    const {theme} = this.context;
+    const {date, empty, price, isBestPrice} = this.props;
+    const text = date ? date.date() : '';
+    let textColor = theme.colors.text.default;
+    let lunarTextColor = theme.colors.text.hint;
+    let priceColor = theme.colors.text.default;
+
+    if (this.isWeekEnd || this.isSolarHoliday || this.isLunarHoliday) {
+      textColor = theme.colors.error.primary;
+      priceColor = theme.colors.error.primary;
+    }
+
+    if (isBestPrice) {
+      priceColor = theme.colors.error.primary;
+    }
+
+    if (this.isStart || this.isEnd) {
+      textColor = Colors.black_01;
+      priceColor = Colors.black_01;
+      lunarTextColor = Colors.black_01;
+    }
+
+    if (!this.isValid || !this.isInScope) {
+      textColor = theme.colors.text.disable;
+      priceColor = theme.colors.text.disable;
+      lunarTextColor = theme.colors.text.disable;
+    }
+
+    return (
+      <ContainerContext.Consumer>
+        {size => {
+          const itemWidth = (size.width - Spacing.M) / 7;
+          return (
+            <View style={[styles.dayContainer, {width: itemWidth}]}>
+              <View
+                style={[
+                  this.isMid &&
+                    !empty && {
+                      backgroundColor: theme.colors.background.tonal,
+                    },
+                  this.isStartPart && styles.dayStartContainer,
+                  this.isEnd && styles.dayEndContainer,
+                ]}>
+                <TouchableOpacity
+                  style={[
+                    styles.day,
+                    {
+                      width: itemWidth,
+                      paddingVertical: !!price ? Spacing.XS : Spacing.S,
+                    },
+                    (this.isStart || this.isEnd) && {
+                      backgroundColor: theme.colors.primary,
+                    },
+                    !!price && {height: scaleSize(48)},
+                    {height: size.height},
+                  ]}
+                  disabled={!(this.isValid && this.isInScope)}
+                  onPress={this.chooseDay}>
+                  {this.lunarDate && this.showLunar && !!text && (
+                    <Text
+                      style={{
+                        position: 'absolute',
+                        top: Spacing.XS,
+                        right: Spacing.XS,
+                      }}
+                      typography={'label_xs_medium'}
+                      color={lunarTextColor}>
+                      {this.lunarDate.lunarDay === 1
+                        ? `${this.lunarDate.lunarDay}/${this.lunarDate.lunarMonth}`
+                        : this.lunarDate.lunarDay}
+                    </Text>
+                  )}
+                  <Text typography={'header_s_semibold'} color={textColor}>
+                    {text}
+                  </Text>
+                  {!!price && (
+                    <Text
+                      typography={'description_xs_regular'}
+                      color={priceColor}>
+                      {price}
+                    </Text>
+                  )}
+                </TouchableOpacity>
+              </View>
+            </View>
+          );
+        }}
+      </ContainerContext.Consumer>
+    );
+  }
+}
+
+export default Day;

package/HeaderControl.tsx

@@ -0,0 +1,55 @@
+import React, {
+  forwardRef,
+  ForwardRefRenderFunction,
+  useContext,
+  useImperativeHandle,
+  useState,
+} from 'react';
+import {TouchableOpacity, View} from 'react-native';
+import moment from 'moment';
+import Moment from 'moment';
+import {ApplicationContext, Icon, Text} from '@momo-kits/foundation';
+
+import Util from './Util';
+import {HeaderControlProps, HeaderControlRef} from './types';
+import styles from './styles';
+
+const HeaderControl: ForwardRefRenderFunction<
+  HeaderControlRef,
+  HeaderControlProps
+> = ({onPressBackArrow, onPressNextArrow, selectedDate}, ref) => {
+  const {translate} = useContext(ApplicationContext);
+  const [info, setInfo] = useState<{date: Moment.Moment}>({
+    date: moment(selectedDate || new Date()),
+  });
+
+  useImperativeHandle(ref, () => ({
+    onUpdateInfo,
+  }));
+
+  const onUpdateInfo = (date: React.SetStateAction<{date: moment.Moment}>) => {
+    setInfo(date);
+  };
+
+  if (info && info.date) {
+    const headerFormat = `${translate?.(
+      Util.mapMonth(info.date.month() + 1) || '',
+    )}/${info.date.year()}`;
+    return (
+      <View style={styles.headerControlContainer}>
+        <TouchableOpacity onPress={onPressBackArrow}>
+          <Icon source="24_arrow_chevron_left_small" />
+        </TouchableOpacity>
+        <Text typography={'header_s_semibold'} style={styles.txtHeader}>
+          {headerFormat}
+        </Text>
+        <TouchableOpacity onPress={onPressNextArrow}>
+          <Icon source="24_arrow_chevron_right_small" />
+        </TouchableOpacity>
+      </View>
+    );
+  }
+  return <View />;
+};
+
+export default forwardRef(HeaderControl);