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

package/Day.tsx

@@ -1,5 +1,4 @@
-import React, {Component} from 'react';
-
+import React, {useContext} from 'react';
 import {Text as RNText, TouchableOpacity, View} from 'react-native';
 import {
   ApplicationContext,
@@ -12,209 +11,130 @@ import {DayProps} from './types';
 import {ContainerContext} from './index';
 import styles from './styles';
 
-class Day extends Component<DayProps> {
-  static contextType = ApplicationContext;
-  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;
+const Day: React.FC<DayProps> = props => {
+  const {
+    startDate,
+    endDate,
+    date,
+    minDate,
+    maxDate,
+    isEmpty,
+    index,
+    isShowLunar,
+    isDoubleDateMode,
+    lunarDate,
+    isSolarHoliday,
+    isLunarHoliday,
+    tabSelected,
+    isDisabled = false,
+    onChoose,
+    price,
+    isBestPrice,
+  } = props;
+
+  const {theme} = useContext(ApplicationContext);
+  const size = useContext(ContainerContext);
 
-  constructor(props: DayProps) {
-    super(props);
-    this.statusCheck();
+  const itemWidth = (size.width - Spacing.M) / 7;
+  if (isEmpty || !date) {
+    return <View style={[styles.dayContainer, {width: itemWidth}]} />;
   }
 
-  chooseDay = () => {
-    const {onChoose, date} = this.props;
-    onChoose && onChoose(date);
-  };
+  const isValid =
+    !isDisabled &&
+    (date.isAfter(minDate, 'day') || date.isSame(minDate, 'day')) &&
+    (date.isBefore(maxDate, 'day') || date.isSame(maxDate, 'day'));
 
-  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;
+  const isMid =
+    isDoubleDateMode &&
+    date.isAfter(startDate, 'day') &&
+    date.isBefore(endDate, 'day');
 
-    return this.isFocus || this.diffPrice;
-  };
+  const isStart = date.isSame(startDate, 'day');
+  const isStartPart = !!(isStart && endDate);
+  const isEnd = isDoubleDateMode && date.isSame(endDate, 'day');
+  const isWeekEnd = index === 6 || index === 5;
+  const showLunar = isShowLunar;
 
-  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
-    );
-  }
+  const isInScope = isDoubleDateMode
+    ? tabSelected === 0 || date.isSameOrAfter(startDate, 'day')
+    : true;
 
-  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;
+  const chooseDay = () => {
+    onChoose && onChoose(date);
+  };
 
-    if (this.isWeekEnd || this.isSolarHoliday || this.isLunarHoliday) {
-      textColor = theme.colors.error.primary;
-      priceColor = theme.colors.error.primary;
-    }
+  let textColor = theme.colors.text.default;
+  let lunarTextColor = theme.colors.text.hint;
+  let priceColor = theme.colors.text.default;
 
-    if (isBestPrice) {
-      priceColor = theme.colors.error.primary;
-    }
+  if (isWeekEnd || isSolarHoliday || isLunarHoliday) {
+    textColor = theme.colors.error.primary;
+    priceColor = theme.colors.error.primary;
+  }
 
-    if (this.isStart || this.isEnd) {
-      textColor = Colors.black_01;
-      priceColor = Colors.black_01;
-      lunarTextColor = Colors.black_01;
-    }
+  if (isBestPrice) {
+    priceColor = theme.colors.error.primary;
+  }
 
-    if (!this.isValid || !this.isInScope) {
-      textColor = theme.colors.text.disable;
-      priceColor = theme.colors.text.disable;
-      lunarTextColor = theme.colors.text.disable;
-    }
+  if (isStart || isEnd) {
+    textColor = Colors.black_01;
+    priceColor = Colors.black_01;
+    lunarTextColor = Colors.black_01;
+  }
 
-    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 && (
-                    <RNText
-                      style={{
-                        position: 'absolute',
-                        top: Spacing.XS,
-                        right: Spacing.XS,
-                        color: lunarTextColor,
-                      }}>
-                      {this.lunarDate.lunarDay === 1
-                        ? `${this.lunarDate.lunarDay}/${this.lunarDate.lunarMonth}`
-                        : this.lunarDate.lunarDay}
-                    </RNText>
-                  )}
-                  <Text typography={'header_s_semibold'} color={textColor}>
-                    {text}
-                  </Text>
-                  {!!price && (
-                    <Text
-                      typography={'description_xs_regular'}
-                      color={priceColor}>
-                      {price}
-                    </Text>
-                  )}
-                </TouchableOpacity>
-              </View>
-            </View>
-          );
-        }}
-      </ContainerContext.Consumer>
-    );
+  if (!isValid || !isInScope) {
+    textColor = theme.colors.text.disable;
+    priceColor = theme.colors.text.disable;
+    lunarTextColor = theme.colors.text.disable;
   }
-}
+
+  return (
+    <View style={[styles.dayContainer, {width: itemWidth}]}>
+      <View
+        style={[
+          isMid && {backgroundColor: theme.colors.background.tonal},
+          isStartPart && styles.dayStartContainer,
+          isEnd && styles.dayEndContainer,
+        ]}>
+        <TouchableOpacity
+          style={[
+            styles.day,
+            {
+              width: itemWidth,
+              paddingVertical: !!price ? Spacing.XS : Spacing.S,
+            },
+            (isStart || isEnd) && {backgroundColor: theme.colors.primary},
+            !!price && {height: scaleSize(48)},
+            {height: size.height},
+          ]}
+          disabled={!(isValid && isInScope)}
+          onPress={chooseDay}>
+          {lunarDate && showLunar && !!date && (
+            <RNText
+              style={{
+                position: 'absolute',
+                top: Spacing.XS,
+                right: Spacing.XS,
+                color: lunarTextColor,
+              }}>
+              {lunarDate.lunarDay === 1
+                ? `${lunarDate.lunarDay}/${lunarDate.lunarMonth}`
+                : lunarDate.lunarDay}
+            </RNText>
+          )}
+          <Text typography="header_s_semibold" color={textColor}>
+            {date ? date.date() : ''}
+          </Text>
+          {!!price && (
+            <Text typography="description_xs_regular" color={priceColor}>
+              {price}
+            </Text>
+          )}
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};
 
 export default Day;

package/LunarDateConverter.ts

@@ -132,6 +132,13 @@ function LunarSolarConverter(this: any) {
     lunarMonth: number;
     lunarDay: number;
   }) {
+    // year range check: only support lunar calendar from 1900
+    const minLunarYear = 1900;
+    // using converter data, maximum supported lunar year
+    const maxLunarYear = this.lunar_month_days[0] + this.lunar_month_days.length - 1;
+    if (lunar.lunarYear < minLunarYear || lunar.lunarYear > maxLunarYear) {
+      throw new Error(`LunarToSolar: year ${lunar.lunarYear} out of supported range ${minLunarYear}-${maxLunarYear}`);
+    }
     const days =
       this.lunar_month_days[lunar.lunarYear - this.lunar_month_days[0]];
     const leap = this.GetBitInt(days, 4, 13);
@@ -163,6 +170,13 @@ function LunarSolarConverter(this: any) {
     solarMonth: number;
     solarDay: number;
   }) {
+    // year range check: only support solar dates from 1900
+    const minSolarYear = 1900;
+    // using converter data, maximum supported solar year
+    const maxSolarYear = this.solar_1_1[0] + this.solar_1_1.length - 1;
+    if (solar.solarYear < minSolarYear || solar.solarYear > maxSolarYear) {
+      throw new Error(`SolarToLunar: year ${solar.solarYear} out of supported range ${minSolarYear}-${maxSolarYear}`);
+    }
     // @ts-ignore
     const lunar = new Lunar();
     let index = solar.solarYear - this.solar_1_1[0];

package/Month.tsx

@@ -1,114 +1,117 @@
-import React, {PureComponent} from 'react';
-
+import React, {useContext, useMemo} from 'react';
 import {View} from 'react-native';
-import moment from 'moment';
-import Moment from 'moment';
+import moment, {Moment} from 'moment';
 import Day from './Day';
 import {scaleSize, Spacing} from '@momo-kits/foundation';
 import {MonthProps} from './types';
 import {ContainerContext} from './index';
 
-export default class Month extends PureComponent<MonthProps> {
-  rowArray;
-  temp;
-  constructor(props: MonthProps) {
-    super(props);
-    const {dateList} = props;
-    this.rowArray = new Array(dateList.length / 7).fill('');
-    this.temp = this.rowArray.map((item, i) =>
-      dateList.slice(i * 7, i * 7 + 7),
-    );
-  }
+const Month: React.FC<MonthProps> = ({
+  dateList,
+  holidays,
+  priceListDate,
+  minDate,
+  maxDate,
+  startDate,
+  endDate,
+  isShowLunar,
+  isDoubleDateMode,
+  disabledDays,
+  month,
+  ...props
+}) => {
+  const rows = useMemo(() => {
+    const rowCount = dateList.length / 7;
+    const rowArray = new Array(rowCount).fill('');
+    return rowArray.map((_, i) => dateList.slice(i * 7, i * 7 + 7));
+  }, [dateList]);
 
-  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);
+  const findHoliday = (date?: Moment) => {
+    if (!date || !holidays || holidays.length === 0) {
+      return null;
     }
-    return null;
+    const day = date.date();
+    const monthNum = date.month() + 1;
+    return (
+      holidays.find(item => item.day === day && item.month === monthNum) || null
+    );
   };
 
-  checkHoliday = (date: moment.Moment) => {
-    const holiday = this.findHoliday(date);
+  const checkHoliday = (date?: Moment) => {
+    const holiday = findHoliday(date);
     return {
       isSolarHoliday: !!(holiday && !holiday.lunar),
       isLunarHoliday: !!(holiday && holiday.lunar),
     };
   };
 
-  renderDayRow = (dayList: any[], index: number) => (
-    <View
-      style={{
-        flexDirection: 'row',
-        alignItems: 'center',
-        marginBottom: Spacing.XS,
-        height: scaleSize(48),
-      }}
-      key={`row${index}`}>
-      {dayList.map((item, i) => {
-        const keyDay = moment(item.date).format('YYYY-MM-DD');
-        const priceInfo = this.props?.priceListDate?.[keyDay];
-        const {
-          minDate,
-          maxDate,
-          startDate,
-          endDate,
-          isShowLunar,
-          isDoubleDateMode,
-          disabledDays,
-        } = this.props;
-
-        const dateItem = new Date(item.date);
-        const mappedDisabledArray = disabledDays?.map(item => String(item));
-        const isDisabled = mappedDisabledArray?.includes(String(dateItem));
+  const size = useContext(ContainerContext);
 
-        return (
-          <Day
-            {...this.props}
-            minDate={minDate}
-            maxDate={maxDate}
-            isShowLunar={isShowLunar}
-            isDoubleDateMode={isDoubleDateMode}
-            startDate={startDate}
-            endDate={endDate}
-            {...this.checkHoliday(item.date)}
-            date={item.date}
-            havePriceList={!!this.props.priceListDate}
-            lunarDate={item.lunarDate}
-            empty={item.empty}
-            key={`day${i.toString()}`}
-            index={i}
-            price={priceInfo?.priceAsString}
-            isBestPrice={priceInfo?.isBestPrice}
-            isDisabled={isDisabled}
-          />
-        );
-      })}
-    </View>
+  // Precompute disabled dates set for fast lookup (format: YYYY-MM-DD)
+  const disabledSet = useMemo(
+    () => new Set((disabledDays || []).map(d => moment(d).format('YYYY-MM-DD'))),
+    [disabledDays]
   );
 
-  render() {
-    const {month} = this.props;
-    if (month) {
-      return (
-        <ContainerContext.Consumer>
-          {size => (
-            <View style={{width: size.width}}>
-              <View
-                style={{
-                  paddingHorizontal: Spacing.S,
-                  width: '100%',
-                  alignItems: 'center',
-                }}>
-                {this.temp.map((item, i) => this.renderDayRow(item, i))}
-              </View>
-            </View>
-          )}
-        </ContainerContext.Consumer>
-      );
-    }
+  if (!month) {
     return <View />;
   }
-}
+
+  return (
+    <View style={{width: size.width}}>
+      <View
+        style={{
+          paddingHorizontal: Spacing.S,
+          width: '100%',
+          alignItems: 'center',
+        }}>
+        {rows.map((dayList, rowIndex) => (
+          <View
+            key={`row${rowIndex}`}
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+              marginBottom: Spacing.XS,
+              height: scaleSize(48),
+            }}>
+            {dayList.map((item, i) => {
+              const {isEmpty, date: dateMoment, lunarDate} = item;
+              // compute key for price/disabled only if not empty
+              const keyDay = !isEmpty && dateMoment
+                ? dateMoment.format('YYYY-MM-DD')
+                : '';
+              const priceInfo = keyDay ? priceListDate?.[keyDay] : undefined;
+              const isDisabled = keyDay
+                ? disabledSet.has(keyDay)
+                : false;
+
+              return (
+                <Day
+                  {...props}
+                  minDate={minDate}
+                  maxDate={maxDate}
+                  isShowLunar={isShowLunar}
+                  isDoubleDateMode={isDoubleDateMode}
+                  startDate={startDate}
+                  endDate={endDate}
+                  {...checkHoliday(dateMoment)}
+                  date={dateMoment}
+                  havePriceList={!!priceListDate}
+                  lunarDate={lunarDate}
+                  isEmpty={isEmpty}
+                  key={`day${i}`}
+                  index={i}
+                  price={priceInfo?.priceAsString}
+                  isBestPrice={priceInfo?.isBestPrice}
+                  isDisabled={isDisabled}
+                />
+              );
+            })}
+          </View>
+        ))}
+      </View>
+    </View>
+  );
+};
+
+export default React.memo(Month);