@momo-kits/calendar 0.0.48-rc.2 → 0.0.48

package/MonthList.tsx

@@ -0,0 +1,282 @@
+import React, {Component} from 'react';
+import {FlatList, Platform} from 'react-native';
+import moment from 'moment';
+import Moment from 'moment';
+import Month from './Month';
+import LunarDateConverter from './LunarDateConverter';
+import {Holidays, MonthListProps, MonthListState} from './types';
+import {ContainerContext} from './index';
+import {scaleSize, Spacing} from '@momo-kits/foundation';
+
+const MAX_RENDER_PER_BATCH = Platform.OS === 'android' ? 1 : 12;
+
+// @ts-ignore
+const converter = new LunarDateConverter();
+export default class MonthList extends Component<
+  MonthListProps,
+  MonthListState
+> {
+  currentDate;
+  data;
+  currentScrollIndex;
+  list;
+  heightStyle;
+  holidays?: Holidays[] = [];
+  currentKey: any;
+
+  constructor(props: MonthListProps) {
+    super(props);
+    this.currentDate = moment();
+    this.data = this.getMonthList();
+    this.currentScrollIndex = this.getIndexOfMonth(
+      moment(props.selectedDate),
+      this.data,
+    );
+    this.list = React.createRef<FlatList>();
+    this.heightStyle = {};
+    this.holidays = props.holidays;
+  }
+
+  renderMonth = (data: {
+    item: {dateList: any; date: moment.Moment};
+    index: number;
+  }) => {
+    const {isDoubleDateMode, disabledDays, priceList, isShowLunar} = this.props;
+    const {item, index} = data;
+
+    const keyMonth = moment(item.date)?.format('YYYY-MM');
+    const priceListDate = priceList?.[keyMonth];
+
+    return (
+      <Month
+        {...this.props}
+        key={index}
+        month={item.date || {}}
+        dateList={item.dateList || []}
+        priceListDate={priceListDate}
+        isShowLunar={isShowLunar}
+        isDoubleDateMode={isDoubleDateMode}
+        disabledDays={disabledDays}
+      />
+    );
+  };
+
+  checkRange = (
+    date?: moment.Moment | null,
+    start?: moment.Moment | null,
+    end?: moment.Moment | null,
+  ) => {
+    if (!date || !start) return false;
+    if (!end) {
+      return date.year() === start.year() && date.month() === start.month();
+    }
+    if (
+      date.year() < start.year() ||
+      (date.year() === start.year() && date.month() < start.month())
+    ) {
+      return false;
+    }
+    return !(
+      date.year() > end.year() ||
+      (date.year() === end.year() && date.month() > end.month())
+    );
+  };
+
+  shouldUpdate = (
+    month: {date: any; dateList?: any[]},
+    props?: MonthListProps,
+  ) => {
+    if (!props) return false;
+    const {startDate, endDate} = props;
+    const {startDate: curStartDate, endDate: curEndDate} = this.props;
+    const {date} = month;
+    const next = this.checkRange(date, startDate, endDate);
+    const prev = this.checkRange(date, curStartDate, curEndDate);
+    return prev || next;
+  };
+
+  convertLunarToSolar(date: moment.Moment) {
+    return date
+      ? converter.SolarToLunar({
+          solarDay: date.date(),
+          solarMonth: date.month() + 1,
+          solarYear: date.year(),
+        })
+      : {};
+  }
+
+  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);
+    }
+    return null;
+  };
+
+  checkHoliday = (date: moment.Moment) => {
+    const holiday = this.findHoliday(date);
+    return {
+      isSolarHoliday: !!(holiday && !holiday.lunar),
+      isLunarHoliday: !!(holiday && holiday.lunar),
+    };
+  };
+
+  getDayList = (date: moment.Moment) => {
+    let dayList;
+    const month = date.month();
+    let weekday = date.isoWeekday();
+    if (weekday === 1) {
+      dayList = [];
+    } else {
+      dayList = new Array(weekday - 1).fill({
+        empty: moment(date).subtract(1, 'h'),
+        lunarDate: this.convertLunarToSolar(date),
+        ...this.checkHoliday(date),
+      });
+    }
+    while (date.month() === month) {
+      const cloned = moment(date);
+      dayList.push({
+        date: cloned,
+        lunarDate: this.convertLunarToSolar(cloned),
+        ...this.checkHoliday(date),
+      });
+      date.add(1, 'days');
+    }
+    date.subtract(1, 'days');
+    weekday = date.isoWeekday();
+    if (weekday === 1) {
+      return dayList.concat(
+        new Array(6).fill({
+          empty: moment(date).hour(1),
+          lunarDate: this.convertLunarToSolar(date),
+        }),
+      );
+    }
+    return dayList.concat(
+      new Array(Math.abs(7 - weekday)).fill({
+        empty: moment(date).hour(1),
+        lunarDate: this.convertLunarToSolar(date),
+      }),
+    );
+  };
+
+  getMonthList = (props?: MonthListProps) => {
+    const minDate = moment((props || this.props).minDate).date(1);
+    const maxDate = moment((props || this.props).maxDate);
+    const monthList: {date: moment.Moment; dateList: any[]}[] = [];
+    if (!maxDate || !minDate) return monthList;
+    while (
+      maxDate > minDate ||
+      (maxDate.year() === minDate.year() && maxDate.month() === minDate.month())
+    ) {
+      const d = moment(minDate);
+      const month = {
+        date: d,
+        dateList: this.getDayList(d),
+        shouldUpdate: false,
+      };
+      month.shouldUpdate = this.shouldUpdate(month, props);
+      monthList.push(month);
+      minDate.add(1, 'month');
+    }
+
+    return monthList;
+  };
+
+  getIndexOfMonth = (month: moment.Moment, data: any[]) => {
+    return data.findIndex(item => item.date.isSame(month, 'month'));
+  };
+
+  getCurrentVisibleMonth = (info: {changed: any}) => {
+    const {changed} = info;
+    const {onScrollCalendar} = this.props;
+    if (changed && changed.length > 0) {
+      const {item, key, index} = changed[0];
+      if (onScrollCalendar && item && this.currentKey !== key) {
+        this.currentKey = key;
+        try {
+          this.heightStyle =
+            this.data && this.data[index] && this.data[index].dateList
+              ? {
+                  height:
+                    (scaleSize(48) * this.data[index].dateList.length) / 7 +
+                    Spacing.L * 2 +
+                    Spacing.XS,
+                }
+              : {};
+        } catch (e) {
+          this.heightStyle = {};
+        }
+        if (onScrollCalendar) {
+          onScrollCalendar({
+            date: item.date,
+            key,
+            currentIndex: index,
+          });
+        }
+      }
+    }
+  };
+
+  keyExtractor = (item: {date: Moment.Moment}) =>
+    `${item.date.month() + 1}/${item.date.year()}`;
+
+  scrollToMonth = (month: moment.Moment) => {
+    const index = this.getIndexOfMonth(month, this.data);
+    if (this.list.current && index !== -1) {
+      this.list.current.scrollToIndex({
+        index,
+        animated: true,
+      });
+    }
+  };
+
+  getItemLayout = (data: any, index: number, width: number) => ({
+    length: width,
+    offset: width * index,
+    index,
+  });
+
+  componentDidMount() {
+    setTimeout(() => {
+      this.scrollToMonth(this.currentDate);
+    }, 500);
+  }
+
+  render() {
+    const {priceList} = this.props;
+    return (
+      <ContainerContext.Consumer>
+        {size => (
+          <FlatList
+            extraData={priceList}
+            style={this.heightStyle}
+            pagingEnabled
+            horizontal
+            ref={this.list}
+            data={this.data}
+            renderItem={this.renderMonth}
+            showsHorizontalScrollIndicator={false}
+            keyExtractor={this.keyExtractor}
+            onViewableItemsChanged={this.getCurrentVisibleMonth}
+            onScrollToIndexFailed={() => {}}
+            scrollEnabled
+            initialNumToRender={3}
+            maxToRenderPerBatch={MAX_RENDER_PER_BATCH}
+            windowSize={1}
+            initialScrollIndex={this.currentScrollIndex}
+            getItemLayout={(data, index) =>
+              this.getItemLayout(data, index, size.width)
+            }
+            viewabilityConfig={{
+              itemVisiblePercentThreshold: 50,
+            }}
+          />
+        )}
+      </ContainerContext.Consumer>
+    );
+  }
+}

package/TabHeader.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import {TouchableWithoutFeedback, View} from 'react-native';
+import Moment from 'moment';
+import Util from './Util';
+import {
+  ApplicationContext,
+  Colors,
+  Radius,
+  Spacing,
+  Text,
+} from '@momo-kits/foundation';
+import {TabHeaderProps, TabHeaderState} from './types';
+
+export default class TabHeader extends React.Component<
+  TabHeaderProps,
+  TabHeaderState
+> {
+  static contextType = ApplicationContext;
+  label;
+  defaultDate: Moment.Moment;
+
+  constructor(props: TabHeaderProps) {
+    super(props);
+    this.state = {
+      active: props.activeTab,
+    };
+    this.label = props.label;
+    this.defaultDate = props.date ? Moment(props.date) : Moment();
+  }
+
+  onChangeTab = () => {
+    const {onChangeTab, id} = this.props;
+    onChangeTab?.(id);
+  };
+
+  updateView = (date?: Moment.Moment | Date | null, activeTab?: boolean) => {
+    this.setState({
+      date: date ? Moment(date) : Moment(),
+      active: activeTab,
+    });
+  };
+
+  setActiveTab = (active: boolean) => {
+    this.setState({active});
+  };
+
+  render() {
+    const {label, disabled} = this.props;
+    const {date, active} = this.state;
+    const {theme, translate} = this.context;
+
+    const formattedDateFromState = date ? date.format('DD/MM/YYYY') : '';
+    const formattedDateFromDefault = this.defaultDate
+      ? this.defaultDate.format('DD/MM/YYYY')
+      : '';
+    const dayOfWeekFromState = date
+      ? `${translate(Util.WEEKDAYSFROMMOMENT[date.day()])} -`
+      : '';
+    const dayOfWeekFromDefault = this.defaultDate
+      ? `${translate(Util.WEEKDAYSFROMMOMENT[this.defaultDate.day()])} -`
+      : '';
+
+    return (
+      <TouchableWithoutFeedback disabled={disabled} onPress={this.onChangeTab}>
+        <View
+          style={[
+            {
+              flex: 1,
+              padding: Spacing.S,
+              borderRadius: Radius.S,
+            },
+            active &&
+              !disabled && {
+                backgroundColor: theme.colors.background.surface,
+              },
+          ]}>
+          <Text
+            typography={'description_default_regular'}
+            color={Colors.black_12}>
+            {translate(label)}
+          </Text>
+          <Text typography={'header_s_semibold'}>
+            {`${dayOfWeekFromState || dayOfWeekFromDefault || '--'} `}
+            {formattedDateFromState || formattedDateFromDefault || '--/--/----'}
+          </Text>
+        </View>
+      </TouchableWithoutFeedback>
+    );
+  }
+}

package/Util.ts

@@ -0,0 +1,293 @@
+import moment from 'moment';
+import LunarDateConverter from './LunarDateConverter';
+import holiday from './holidayData';
+
+const I18N_MAP = {
+  en: {
+    w: ['', 'Mon', 'Tues', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun'],
+    weekday: [
+      '',
+      'Monday',
+      'Tuesday',
+      'Wednesday',
+      'Thursday',
+      'Friday',
+      'Saturday',
+      'Sunday',
+    ],
+    text: {
+      start: 'Start',
+      end: 'End',
+      date: 'Date',
+      save: 'Save',
+      clear: 'Reset',
+    },
+    date: 'DD / MM',
+  },
+  vi: {
+    w: ['', 'T2', 'T3', 'T4', 'T5', 'T6', 'T7', 'CN'],
+    weekday: [
+      '',
+      'Thứ hai',
+      'Thứ ba',
+      'Thứ tư',
+      'Thứ năm',
+      'Thứ sáu',
+      'Thứ bảy',
+      'Chủ nhật',
+    ],
+    text: {
+      start: 'Start',
+      end: 'End',
+      date: 'Date',
+      save: 'Save',
+      clear: 'Reset',
+    },
+    date: 'DD / MM',
+  },
+};
+
+const Solar = (momentDate: moment.Moment) => ({
+  solarDay: momentDate.date(),
+  solarMonth: momentDate.month() + 1,
+  solarYear: momentDate.year(),
+});
+
+const formatYYYYMMDD = (dd: number, mm: number, yyyy: any) =>
+  `${yyyy}-${mm < 10 ? `0${mm}` : mm}-${dd < 10 ? `0${dd}` : dd}`;
+
+const formatDDMM = (dd: number, mm: number) =>
+  `${dd < 10 ? `0${dd}` : dd}/${mm < 10 ? `0${mm}` : mm}`;
+
+const groupHolidaysByDate = (holidays: any[]) => {
+  const groupedHolidays: {[key: string]: string[]} = {};
+  if (holidays && holidays.length > 0) {
+    holidays.forEach(item => {
+      const {day, month, lunar, label} = item;
+      const key = formatDDMM(day, month);
+      let holidaysObj = groupedHolidays[key]
+        ? {...groupedHolidays[key]}
+        : {...item};
+      if (groupedHolidays[key]) {
+        if (holidaysObj.lunar && !lunar) {
+          holidaysObj = {
+            ...holidaysObj,
+            label,
+            mixedLabel: `${label}, ${holidaysObj.label}`,
+          };
+        } else if (!holidaysObj.lunar && lunar) {
+          holidaysObj = {
+            ...holidaysObj,
+            label: holidaysObj.lunar,
+            mixedLabel: `${holidaysObj.lunar}, ${label}`,
+          };
+        }
+      }
+      groupedHolidays[key] = holidaysObj;
+    });
+  }
+
+  return groupedHolidays;
+};
+
+const sortByDate = (arr: any[]) => {
+  if (arr && arr.length > 1) {
+    arr.sort((a, b) => {
+      if (a.month > b.month || (a.month === b.month && a.day > b.day)) {
+        return 1;
+      }
+      return -1;
+    });
+  }
+
+  return groupHolidaysByDate(arr);
+};
+
+const Utils = {
+  WEEKDAYS: ['T2', 'T3', 'T4', 'T5', 'T6', 'T7', 'CN'],
+
+  WEEKDAYSFROMMOMENT: ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'],
+
+  WEEKDAYSNAME: [
+    'Thứ 2',
+    'Thứ 3',
+    'Thứ 4',
+    'Thứ 5',
+    'Thứ 6',
+    'Thứ 7',
+    'Chủ nhật',
+  ],
+
+  MONTHS: [
+    'Tháng 1',
+    'Tháng 2',
+    'Tháng 3',
+    'Tháng 4',
+    'Tháng 5',
+    'Tháng 6',
+    'Tháng 7',
+    'Tháng 8',
+    'Tháng 9',
+    'Tháng 10',
+    'Tháng 11',
+    'Tháng 12',
+  ],
+
+  MAX_ROWS: 7,
+
+  MAX_COLUMNS: 7,
+
+  mapWeeKDate(i: number) {
+    const date = ['', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'];
+    return date[i];
+  },
+
+  mapMonth(i: number) {
+    const month = new Map([
+      [1, 'jan'],
+      [2, 'feb'],
+      [3, 'mar'],
+      [4, 'apr'],
+      [5, 'may'],
+      [6, 'jun'],
+      [7, 'jul'],
+      [8, 'aug'],
+      [9, 'sep'],
+      [10, 'oct'],
+      [11, 'nov'],
+      [12, 'dec'],
+    ]);
+    return month.get(i);
+  },
+
+  mapMonthShorten(i: number) {
+    const month = new Map([
+      [1, 'Jan'],
+      [2, 'Feb'],
+      [3, 'Mar'],
+      [4, 'Apr'],
+      [5, 'May'],
+      [6, 'Jun'],
+      [7, 'Jul'],
+      [8, 'Aug'],
+      [9, 'Sep'],
+      [10, 'Oct'],
+      [11, 'Nov'],
+      [12, 'Dec'],
+    ]);
+    return month.get(i);
+  },
+
+  getDaysInMonth(month: number, year: number) {
+    const lastDayOfMonth = new Date(year, month + 1, 0);
+    return lastDayOfMonth.getDate();
+  },
+
+  getHolidaysInMonth(headerInfo: moment.Moment) {
+    if (headerInfo) {
+      const today = moment();
+      // @ts-ignore
+      const converter = new LunarDateConverter();
+      const startDate = moment(headerInfo).startOf('month');
+      const endDate = moment(headerInfo).endOf('month');
+      const minLunarDate = converter.SolarToLunar(Solar(startDate));
+      const maxLunarDate = converter.SolarToLunar(Solar(endDate));
+      const holidays: any[] = [];
+      const currentYear =
+        minLunarDate.lunarYear !== maxLunarDate.lunarYear
+          ? [minLunarDate.lunarYear, maxLunarDate.lunarYear]
+          : minLunarDate.lunarYear;
+
+      // Handle Solar holidays
+      // @ts-ignore
+      if (holiday.solar[headerInfo.month() + 1]) {
+        // @ts-ignore
+        holiday.solar[headerInfo.month() + 1].forEach(
+          (date: {month: number; day: any}) => {
+            const dateAsMoment = moment({
+              year: headerInfo.year(),
+              month: date.month - 1,
+              date: date.day,
+            });
+            if (dateAsMoment.isSameOrAfter(today, 'date')) {
+              holidays.push(date);
+            }
+          },
+        );
+      }
+
+      holiday.lunar.forEach((item: {lunarDay: any; lunarMonth: any}) => {
+        if (currentYear instanceof Array) {
+          const solar1 = converter.LunarToSolar({
+            lunarDay: item.lunarDay,
+            lunarMonth: item.lunarMonth,
+            lunarYear: currentYear[0],
+          });
+          const solar2 = converter.LunarToSolar({
+            lunarDay: item.lunarDay,
+            lunarMonth: item.lunarMonth,
+            lunarYear: currentYear[1],
+          });
+          const solar1AsMoment = moment(
+            formatYYYYMMDD(
+              solar1.solarDay,
+              solar1.solarMonth,
+              solar1.solarYear,
+            ),
+          );
+          const solar2AsMoment = moment(
+            formatYYYYMMDD(
+              solar2.solarDay,
+              solar2.solarMonth,
+              solar2.solarYear,
+            ),
+          );
+          if (
+            solar1AsMoment.isBetween(startDate, endDate) &&
+            solar1AsMoment.isSameOrAfter(today, 'date')
+          ) {
+            holidays.push({
+              ...item,
+              day: solar1.solarDay,
+              month: solar1.solarMonth,
+            });
+          } else if (
+            solar2AsMoment.isBetween(startDate, endDate) &&
+            solar2AsMoment.isSameOrAfter(today, 'date')
+          ) {
+            holidays.push({
+              ...item,
+              day: solar2.solarDay,
+              month: solar2.solarMonth,
+            });
+          }
+        } else {
+          const solar = converter.LunarToSolar({
+            lunarDay: item.lunarDay,
+            lunarMonth: item.lunarMonth,
+            lunarYear: currentYear,
+          });
+          const solarAsMoment = moment(
+            formatYYYYMMDD(solar.solarDay, solar.solarMonth, solar.solarYear),
+          );
+          if (
+            solarAsMoment.isBetween(startDate, endDate) &&
+            solarAsMoment.isSameOrAfter(today, 'date')
+          ) {
+            holidays.push({
+              ...item,
+              day: solar.solarDay,
+              month: solar.solarMonth,
+            });
+          }
+        }
+      });
+
+      return sortByDate(holidays);
+    }
+    return [];
+  },
+  I18N_MAP,
+};
+
+export default Utils;