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

package/Day.tsx

@@ -1,4 +1,5 @@
-import React, {useContext} from 'react';
+import React, {Component} from 'react';
+
 import {Text as RNText, TouchableOpacity, View} from 'react-native';
 import {
   ApplicationContext,
@@ -11,130 +12,209 @@ import {DayProps} from './types';
 import {ContainerContext} from './index';
 import styles from './styles';
 
-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);
+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 itemWidth = (size.width - Spacing.M) / 7;
-  if (isEmpty || !date) {
-    return <View style={[styles.dayContainer, {width: itemWidth}]} />;
+  constructor(props: DayProps) {
+    super(props);
+    this.statusCheck();
   }
 
-  const isValid =
-    !isDisabled &&
-    (date.isAfter(minDate, 'day') || date.isSame(minDate, 'day')) &&
-    (date.isBefore(maxDate, 'day') || date.isSame(maxDate, 'day'));
+  chooseDay = () => {
+    const {onChoose, date} = this.props;
+    onChoose && onChoose(date);
+  };
 
-  const isMid =
-    isDoubleDateMode &&
-    date.isAfter(startDate, 'day') &&
-    date.isBefore(endDate, '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 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;
+    return this.isFocus || this.diffPrice;
+  };
 
-  const isInScope = isDoubleDateMode
-    ? tabSelected === 0 || date.isSameOrAfter(startDate, 'day')
-    : true;
+  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 chooseDay = () => {
-    onChoose && onChoose(date);
-  };
+  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;
 
-  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 (isWeekEnd || isSolarHoliday || isLunarHoliday) {
-    textColor = theme.colors.error.primary;
-    priceColor = theme.colors.error.primary;
-  }
+    if (isBestPrice) {
+      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 (isStart || 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;
+    }
 
-  if (!isValid || !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 && (
+                    <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>
+    );
   }
-
-  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,13 +132,6 @@ 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);
@@ -170,13 +163,6 @@ 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,117 +1,114 @@
-import React, {useContext, useMemo} from 'react';
+import React, {PureComponent} from 'react';
+
 import {View} from 'react-native';
-import moment, {Moment} from 'moment';
+import moment from 'moment';
+import Moment from 'moment';
 import Day from './Day';
 import {scaleSize, Spacing} from '@momo-kits/foundation';
 import {MonthProps} from './types';
 import {ContainerContext} from './index';
 
-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]);
+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 findHoliday = (date?: Moment) => {
-    if (!date || !holidays || holidays.length === 0) {
-      return null;
+  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 day = date.date();
-    const monthNum = date.month() + 1;
-    return (
-      holidays.find(item => item.day === day && item.month === monthNum) || null
-    );
+    return null;
   };
 
-  const checkHoliday = (date?: Moment) => {
-    const holiday = findHoliday(date);
+  checkHoliday = (date: moment.Moment) => {
+    const holiday = this.findHoliday(date);
     return {
       isSolarHoliday: !!(holiday && !holiday.lunar),
       isLunarHoliday: !!(holiday && holiday.lunar),
     };
   };
 
-  const size = useContext(ContainerContext);
-
-  // 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]
-  );
-
-  if (!month) {
-    return <View />;
-  }
+  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;
 
-  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;
+        const dateItem = new Date(item.date);
+        const mappedDisabledArray = disabledDays?.map(item => String(item));
+        const isDisabled = mappedDisabledArray?.includes(String(dateItem));
 
-              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>
+        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>
   );
-};
 
-export default React.memo(Month);
+  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>
+      );
+    }
+    return <View />;
+  }
+}