@momo-kits/calendar 0.79.6 → 0.80.2

package/src/CalendarPro.tsx

@@ -1,436 +0,0 @@
-import React, {Component} from 'react';
-
-import {Dimensions, ScrollView, StyleSheet, View} from 'react-native';
-import Moment from 'moment';
-import {
-  ApplicationContext,
-  CheckBox,
-  Colors,
-  Radius,
-  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} from '../types';
-
-const widthScreen = Dimensions.get('window').width;
-
-export default class CalendarPro extends Component<
-  CalendarProProps,
-  CalendarProState
-> {
-  static contextType = ApplicationContext;
-  today: Moment.Moment;
-  year: number;
-  header: Moment.Moment;
-  selectedDate: Date;
-  converter: typeof LunarDateConverter;
-  minDate?: Moment.Moment;
-  maxDate?: Moment.Moment;
-
-  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.state = {
-      startDate: props.startDate,
-      endDate: props.endDate,
-      showLunar: props.isShowLunar,
-      tabSelected: 0,
-      holidays: [],
-      ownUpdate: false,
-    };
-    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.refs.MonthList.scrollToMonth(dateScroll);
-        },
-      );
-    }
-  };
-
-  ownSetState(state: CalendarProState) {
-    this.setState({
-      ...state,
-      ownUpdate: true,
-    });
-  }
-
-  getDateRange = () => {
-    const {maxDate, minDate, format} = this.props;
-    let max = Moment(maxDate, format);
-    let min = Moment(minDate, format);
-    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: number) => {
-    const {startDate, tabSelected} = this.state;
-    const {isDoubleDateMode, onDateChange} = this.props;
-    if (isDoubleDateMode) {
-      if (tabSelected === 1) {
-        if (startDate && day >= startDate) {
-          this.ownSetState({
-            endDate: day,
-          });
-        } else if (startDate && day < 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.MomentInput | undefined,
-    key: any,
-  ) => {
-    const holidays = Object.values(Util.getHolidaysInMonth(Moment(date)));
-    const {showLunar} = this.state;
-    if (this.refs && this.refs.HeaderControl) {
-      this.refs.HeaderControl.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: any;
-    date: Moment.MomentInput | undefined;
-  }) => {
-    const {headerKey} = this.state;
-    if (data) {
-      if (data.key !== headerKey) {
-        this.executeProcessAfterScrollCalendar(data.date, data.key);
-      }
-    }
-  };
-
-  setDoubleDateAndTabIndex = (
-    firstDate: Moment.MomentInput | undefined,
-    secondDate: Moment.MomentInput | undefined,
-    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 = [];
-    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.refs &&
-      this.refs.HeaderControl &&
-      previousDate.isSameOrAfter(this.minDate, 'month')
-    ) {
-      this.header = previousDate;
-      this.refs.HeaderControl.onUpdateInfo({date: previousDate});
-      this.refs.MonthList.scrollToMonth(previousDate);
-    }
-  };
-
-  onPressNextArrow = () => {
-    const nextDate = Moment(this.header).startOf('month').add(1, 'months');
-    if (
-      this.refs &&
-      this.refs.HeaderControl &&
-      nextDate.isSameOrBefore(this.maxDate, 'month')
-    ) {
-      this.header = nextDate;
-      this.refs.HeaderControl.onUpdateInfo({date: nextDate});
-      this.refs.MonthList.scrollToMonth(nextDate);
-    }
-  };
-
-  render() {
-    const {
-      startDate,
-      endDate,
-      showLunar = false,
-      tabSelected,
-      holidays,
-      temp,
-    } = this.state;
-    const {
-      i18n,
-      isDoubleDateMode,
-      priceList,
-      labelFrom,
-      labelTo,
-      isHideLabel,
-      isHideHoliday,
-      isOffLunar,
-      disabledWeekend,
-      isShowLunar,
-      containerWidth,
-    } = this.props;
-    let priceListFormat = priceList?.outbound;
-    if (isDoubleDateMode) {
-      priceListFormat =
-        tabSelected === 0 ? priceList?.outbound : priceList?.inbound;
-    }
-    const isDisabledWeekend =
-      disabledWeekend && !priceList && !isShowLunar && !isDoubleDateMode;
-
-    const {theme, translate} = this.context;
-
-    return (
-      <View style={styles.container}>
-        <View style={styles.viewDate}>
-          <HeaderControl
-            ref="HeaderControl"
-            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'}
-                  style={[
-                    styles.textDay,
-                    {width: (containerWidth - Spacing.M) / 7},
-                  ]}
-                  key={item}>
-                  {Util.mapWeeKDate(item)}
-                </Text>
-              ))}
-            </View>
-            <MonthList
-              containerWidth={containerWidth}
-              disabledWeekend={isDisabledWeekend}
-              ref="MonthList"
-              today={this.today}
-              minDate={this.minDate}
-              maxDate={this.maxDate}
-              startDate={startDate}
-              endDate={endDate}
-              onChoose={this.onChoose}
-              i18n={i18n}
-              onScrollCalendar={this.onScrollCalendar}
-              isShowLunar={!isOffLunar && showLunar}
-              isDoubleDateMode={isDoubleDateMode}
-              tabSelected={tabSelected}
-              lunarConverter={this.converter}
-              holidays={holidays}
-              selectedDate={this.selectedDate}
-              priceList={priceListFormat}
-              labelFrom={labelFrom}
-              labelTo={labelTo}
-              isHideLabel={isHideLabel}
-            />
-          </View>
-        </View>
-        {!isOffLunar && (
-          <View style={[styles.viewLunar]}>
-            <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;
-                  },
-                  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}`}`;
-                  return (
-                    <View style={styles.row} key={idx.toString()}>
-                      <Text
-                        color={theme.colors.error.primary}
-                        typography={'description_s'}
-                        style={styles.txtMonthLunar}>
-                        {labelDate}
-                      </Text>
-                      <Text
-                        typography={'description_s'}
-                        style={styles.subTextLunar}>
-                        {`${translate(labelHoliday)}`}
-                      </Text>
-                    </View>
-                  );
-                },
-              )}
-          </ScrollView>
-        )}
-      </View>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  row: {flexDirection: 'row'},
-  txtMonthLunar: {
-    color: Colors.red_03,
-    marginRight: Spacing.S,
-  },
-  subTextLunar: {
-    color: Colors.black_17,
-  },
-  contentScroll: {
-    paddingHorizontal: 12,
-    paddingVertical: 10,
-  },
-  iconSelected: {
-    width: 24,
-    height: 24,
-    resizeMode: 'cover',
-  },
-  txtLunar: {
-    paddingLeft: 6,
-    color: '#222222',
-    fontSize: 14,
-  },
-  viewLunar: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginHorizontal: Spacing.M,
-    borderTopWidth: 1,
-    paddingTop: Spacing.M,
-    borderStyle: 'solid',
-    borderColor: Colors.black_04,
-  },
-  viewDate: {},
-  textDay: {
-    textAlign: 'center',
-  },
-  viewDay: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    paddingHorizontal: Spacing.S,
-    paddingTop: 15,
-    paddingBottom: 10,
-  },
-  container: {
-    flex: 1,
-    backgroundColor: 'white',
-    marginTop: Spacing.S,
-    borderRadius: Radius.XS,
-  },
-  blueSeperator: {
-    height: 1,
-    width: '100%',
-    backgroundColor: Colors.blue_05,
-  },
-});

package/src/Day/index.tsx

@@ -1,248 +0,0 @@
-import React, {Component} from 'react';
-
-import {TouchableHighlight, View} from 'react-native';
-import {ApplicationContext, Colors, Spacing, Text} from '@momo-kits/foundation';
-import style from './style';
-
-class Day extends Component {
-  static contextType = ApplicationContext;
-  constructor(props) {
-    super(props);
-    this.statusCheck();
-  }
-
-  chooseDay = () => {
-    const {onChoose, date} = this.props;
-    onChoose && onChoose(date);
-  };
-
-  findHoliday = (date, holidays) => {
-    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);
-    }
-    return null;
-  };
-
-  checkHoliday = (date, holidays) => {
-    const holiday = this.findHoliday(date, holidays);
-    return {
-      solarHoliday: !!(holiday && !holiday.lunar),
-      lunarHoliday: !!(holiday && holiday.lunar),
-    };
-  };
-
-  statusCheck = props => {
-    const {
-      startDate,
-      endDate,
-      date = null,
-      minDate,
-      maxDate,
-      empty,
-      index,
-      isShowLunar,
-      isDoubleDateMode,
-      lunarDate,
-      isSolarHoliday,
-      isLunarHoliday,
-    } = props || this.props;
-    this.isValid =
-      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 = true;
-    return this.isFocus || this.diffPrice;
-  };
-
-  shouldComponentUpdate(nextProps) {
-    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 {date, empty, price, isBestPrice, disabledWeekend, width} =
-      this.props;
-    const {theme, translate} = this.context;
-
-    const text = date ? date.date() : '';
-    let textDayColor = theme.colors.text.default;
-    let lunarDayColor = theme.colors.text.hint;
-
-    if (this.isWeekEnd || this.isSolarHoliday || this.isWeekEnd) {
-      textDayColor = theme.colors.error.primary;
-    }
-
-    if (this.isStart || this.isEnd) {
-      textDayColor = Colors.black_01;
-      lunarDayColor = Colors.black_01;
-    }
-
-    if (this.isLunarHoliday || this.isLunarDayStart) {
-      lunarDayColor = theme.colors.error.primary;
-    }
-
-    return (
-      <View style={[style.dayContainer, {width, borderWidth: 1}]}>
-        <View
-          style={[
-            this.isMid &&
-              !empty && {backgroundColor: theme.colors.background.tonal},
-            this.isStartPart && style.dayStartContainer,
-            this.isEnd && style.dayEndContainer,
-          ]}>
-          {this.isValid && this.isInScope ? (
-            <TouchableHighlight
-              style={[
-                style.day,
-                {
-                  paddingVertical: !!price ? Spacing.XS : Spacing.S,
-                },
-                (this.isStart || this.isEnd) && {
-                  backgroundColor: theme.colors.primary,
-                },
-              ]}
-              underlayColor="rgba(255, 255, 255, 0.35)"
-              onPress={this.chooseDay}>
-              <>
-                {this.lunarDate && this.showLunar && (
-                  <Text
-                    color={lunarDayColor}
-                    typography={'label_xxs'}
-                    style={style.lunarDayText}>
-                    {this.lunarDate.lunarDay === 1
-                      ? `${this.lunarDate.lunarDay}/${this.lunarDate.lunarMonth}`
-                      : this.lunarDate.lunarDay}
-                  </Text>
-                )}
-                <Text
-                  color={textDayColor}
-                  typography={'header_s'}
-                  style={[style.dayText, {paddingTop: !!price ? 4 : 0}]}>
-                  {text}
-                </Text>
-                {!!price ? (
-                  <Text
-                    style={[
-                      this.isValid && this.isInScope
-                        ? style.price
-                        : style.dayTextDisabled,
-                      isBestPrice && {
-                        color: theme.colors.primary,
-                      },
-                      (this.isStart || this.isEnd) && {
-                        color: Colors.black_01,
-                      },
-                    ]}>
-                    {price}
-                  </Text>
-                ) : (
-                  <View
-                    style={{
-                      paddingBottom: this.props.havePriceList ? Spacing.S : 0,
-                    }}
-                  />
-                )}
-              </>
-            </TouchableHighlight>
-          ) : (
-            <View
-              style={[
-                style.day,
-                {
-                  paddingVertical: !!price
-                    ? Spacing.XS + Spacing.XXS
-                    : Spacing.S,
-                },
-              ]}>
-              {this.lunarDate && this.showLunar && text ? (
-                <Text
-                  color={theme.colors.text.disable}
-                  typography={'label_xxs'}
-                  style={style.lunarDayText}>
-                  {this.lunarDate.lunarDay === 1
-                    ? `${this.lunarDate.lunarDay}/${this.lunarDate.lunarMonth}`
-                    : this.lunarDate.lunarDay}
-                </Text>
-              ) : (
-                <View />
-              )}
-              <Text color={theme.colors.text.disable} style={style.dayText}>
-                {text}
-              </Text>
-              {text && !!price ? (
-                <Text
-                  style={[
-                    this.isValid && this.isInScope
-                      ? style.price
-                      : style.dayTextDisabled,
-                    isBestPrice && {
-                      color: theme.colors.primary,
-                    },
-                  ]}>
-                  {price}
-                </Text>
-              ) : (
-                <View
-                  style={{
-                    paddingBottom: this.props.havePriceList ? Spacing.S : 0,
-                  }}
-                />
-              )}
-            </View>
-          )}
-        </View>
-      </View>
-    );
-  }
-}
-
-export default Day;