@momo-kits/native-kits 0.157.1-beta.9 → 0.157.1-com.1-debug

package/src/libs/Calendar/MonthList.tsx

@@ -0,0 +1,226 @@
+import { useScaleSize, Spacing } from '@momo-kits/foundation';
+import moment, { Moment } from 'moment';
+import React, {
+  forwardRef,
+  useImperativeHandle,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { FlatList, Platform } from 'react-native';
+import { ContainerContext } from './index';
+import LunarDateConverter from './LunarDateConverter';
+import Month from './Month';
+import { MonthListProps, MonthListRef } from './types';
+
+const MAX_RENDER_PER_BATCH = Platform.OS === 'android' ? 1 : 12;
+
+// @ts-ignore
+const converter = new LunarDateConverter();
+
+const MonthList = forwardRef<MonthListRef, MonthListProps>((props, ref) => {
+  const {
+    selectedDate,
+    minDate,
+    maxDate,
+    startDate,
+    endDate,
+    holidays = [],
+    priceList,
+    isShowLunar,
+    isDoubleDateMode,
+    disabledDays,
+    onScrollCalendar,
+    ...restProps
+  } = props;
+
+  const size = useContext(ContainerContext);
+  const scaledHeight48 = useScaleSize(48);
+  const listRef = useRef<FlatList>(null);
+  const currentKey = useRef<string | null>(null);
+  const [heightStyle, setHeightStyle] = useState({});
+
+  const data = useMemo(() => {
+    const months: { date: Moment; dateList: any[] }[] = [];
+    const mMin = moment(minDate).date(1);
+    const mMax = moment(maxDate);
+    while (
+      mMax > mMin ||
+      (mMax.year() === mMin.year() && mMax.month() === mMin.month())
+    ) {
+      const d = moment(mMin);
+      const dayList: any[] = [];
+      const monthIdx = d.month();
+      let cursor = d.clone();
+      let weekday = cursor.isoWeekday();
+      if (weekday !== 1) {
+        dayList.push(
+          ...new Array(weekday - 1).fill(0).map(() => ({ isEmpty: true })),
+        );
+      }
+      while (cursor.month() === monthIdx) {
+        const cloned = cursor.clone();
+        const hol = holidays.find(
+          h => h.day === cloned.date() && h.month === cloned.month() + 1,
+        );
+        dayList.push({
+          isEmpty: false,
+          date: cloned,
+          lunarDate: converter.SolarToLunar({
+            solarDay: cloned.date(),
+            solarMonth: cloned.month() + 1,
+            solarYear: cloned.year(),
+          }),
+          isSolarHoliday: !!(hol && !hol.lunar),
+          isLunarHoliday: !!(hol && hol.lunar),
+        });
+        cursor.add(1, 'days');
+      }
+      cursor.subtract(1, 'days');
+      weekday = cursor.isoWeekday();
+      if (weekday !== 7) {
+        dayList.push(
+          ...new Array(7 - weekday).fill(0).map(() => ({ isEmpty: true })),
+        );
+      }
+      months.push({ date: d, dateList: dayList });
+      mMin.add(1, 'month');
+    }
+    return months;
+  }, [minDate, maxDate, holidays]);
+
+  const getIndexOfMonth = useCallback(
+    (date: Moment) => data.findIndex(item => item.date.isSame(date, 'month')),
+    [data],
+  );
+
+  const currentScrollIndex = useMemo(
+    () => getIndexOfMonth(moment(selectedDate)),
+    [selectedDate, getIndexOfMonth],
+  );
+
+  const scrollToMonth = useCallback(
+    (month: Moment) => {
+      const idx = getIndexOfMonth(month);
+      if (listRef.current && idx !== -1) {
+        listRef.current.scrollToIndex({ index: idx, animated: true });
+      }
+    },
+    [getIndexOfMonth],
+  );
+
+  useImperativeHandle(ref, () => ({ scrollToMonth }));
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      scrollToMonth(selectedDate);
+    }, 500);
+    return () => clearTimeout(timer);
+  }, []);
+
+  const onViewableItemsChanged = useRef(({ changed }: { changed: any[] }) => {
+    if (changed.length > 0) {
+      const { item, key, index } = changed[0];
+      if (onScrollCalendar && item && currentKey.current !== key) {
+        currentKey.current = key;
+        try {
+          setHeightStyle({
+            height:
+              (scaledHeight48 * item.dateList.length) / 7 +
+              Spacing.L * 2 +
+              Spacing.XS,
+          });
+        } catch {
+          setHeightStyle({});
+        }
+        onScrollCalendar({ date: item.date, key, currentIndex: index });
+      }
+    }
+  }).current;
+
+  const viewabilityConfig = { itemVisiblePercentThreshold: 50 };
+
+  const keyExtractor = useCallback(
+    (item: { date: Moment }) => `${item.date.month() + 1}/${item.date.year()}`,
+    [],
+  );
+
+  const getItemLayout = useCallback(
+    (_: any, index: number) => ({
+      length: size.width,
+      offset: size.width * index,
+      index,
+    }),
+    [size.width],
+  );
+
+  const renderItem = useCallback(
+    ({
+      item,
+      index,
+    }: {
+      item: { date: Moment; dateList: any[] };
+      index: number;
+    }) => {
+      const keyMonth = moment(item.date).format('YYYY-MM');
+      const priceListDate = priceList?.[keyMonth]?.day;
+      return (
+        <Month
+          {...restProps}
+          key={index}
+          month={item.date}
+          dateList={item.dateList}
+          priceListDate={priceListDate}
+          holidays={holidays}
+          minDate={minDate}
+          maxDate={maxDate}
+          startDate={startDate}
+          endDate={endDate}
+          isShowLunar={isShowLunar}
+          isDoubleDateMode={isDoubleDateMode}
+          disabledDays={disabledDays}
+        />
+      );
+    },
+    [
+      restProps,
+      priceList,
+      holidays,
+      minDate,
+      maxDate,
+      startDate,
+      endDate,
+      isShowLunar,
+      isDoubleDateMode,
+      disabledDays,
+    ],
+  );
+
+  return (
+    <FlatList
+      extraData={priceList}
+      style={heightStyle}
+      pagingEnabled
+      horizontal
+      ref={listRef}
+      data={data}
+      renderItem={renderItem}
+      showsHorizontalScrollIndicator={false}
+      keyExtractor={keyExtractor}
+      onScrollToIndexFailed={() => {}}
+      scrollEnabled
+      initialNumToRender={3}
+      maxToRenderPerBatch={MAX_RENDER_PER_BATCH}
+      windowSize={1}
+      onViewableItemsChanged={onViewableItemsChanged}
+      initialScrollIndex={currentScrollIndex}
+      getItemLayout={getItemLayout}
+      viewabilityConfig={viewabilityConfig}
+    />
+  );
+});
+
+export default MonthList;

package/src/libs/Calendar/TabHeader.tsx

@@ -0,0 +1,91 @@
+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;
+  context: React.ContextType<typeof ApplicationContext> = {} as React.ContextType<typeof ApplicationContext>;
+  label;
+  defaultDate: Moment.Moment | null;
+
+  constructor(props: TabHeaderProps) {
+    super(props);
+    this.state = {
+      active: props.activeTab,
+    };
+    this.label = props.label;
+    this.defaultDate = props.date ? Moment(props.date) : null;
+  }
+
+  onChangeTab = () => {
+    const {onChangeTab, id} = this.props;
+    onChangeTab?.(id);
+  };
+
+  updateView = (date?: Moment.Moment | Date | null, activeTab?: boolean) => {
+    this.setState({
+      date: date ? Moment(date) : undefined,
+      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/src/libs/Calendar/Util.ts

@@ -0,0 +1,288 @@
+import moment from 'moment';
+import LunarDateConverter from './LunarDateConverter';
+import holiday from './holidayData';
+import {Holidays} from './types';
+
+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: Holidays[]
+): {[key: string]: Holidays} => {
+  const groupedHolidays: {[key: string]: Holidays} = {};
+  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;
+};
+
+/**
+ * Sort and group holidays by date, return sorted array of unique Holidays.
+ */
+const sortByDate = (arr: Holidays[]): Holidays[] => {
+  if (arr && arr.length > 1) {
+    arr.sort((a, b) =>
+      a.month !== b.month ? a.month - b.month : a.day - b.day
+    );
+  }
+  // group by date string and return unique values in sorted order
+  const grouped = groupHolidaysByDate(arr);
+  return Object.values(grouped);
+};
+
+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();
+  },
+
+  /**
+   * Get sorted list of holidays within the given month.
+   */
+  getHolidaysInMonth(headerInfo: moment.Moment): Holidays[] {
+    if (headerInfo) {
+      // @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.isBetween(startDate, endDate, 'day', '[]')) {
+              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, 'day', '[]')
+          ) {
+            holidays.push({
+              ...item,
+              day: solar1.solarDay,
+              month: solar1.solarMonth,
+            });
+          } else if (
+            solar2AsMoment.isBetween(startDate, endDate, 'day', '[]')
+          ) {
+            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, 'day', '[]')
+          ) {
+            holidays.push({
+              ...item,
+              day: solar.solarDay,
+              month: solar.solarMonth,
+            });
+          }
+        }
+      });
+
+      return sortByDate(holidays);
+    }
+    return [];
+  },
+  I18N_MAP,
+};
+
+export default Utils;

package/src/libs/Calendar/holidayData.ts

@@ -0,0 +1,118 @@
+const holidayData = {
+  solar: {
+    1: [
+      {
+        day: 1,
+        month: 1,
+        label: 'newYear',
+      },
+    ],
+    2: [
+      {
+        day: 14,
+        month: 2,
+        label: 'valentine',
+      },
+    ],
+    3: [
+      {
+        day: 8,
+        month: 3,
+        label: 'womenDay',
+      },
+    ],
+    4: [
+      {
+        day: 30,
+        month: 4,
+        label: 'liberationDay',
+      },
+    ],
+    5: [
+      {
+        day: 1,
+        month: 5,
+        label: 'laborDay',
+      },
+    ],
+    6: [
+      {
+        day: 1,
+        month: 6,
+        label: 'childrenDay',
+      },
+    ],
+    9: [
+      {
+        day: 2,
+        month: 9,
+        label: 'nationalDay',
+      },
+    ],
+    10: [
+      {
+        day: 20,
+        month: 10,
+        label: 'womenDayVN',
+      },
+    ],
+    11: [
+      {
+        day: 20,
+        month: 11,
+        label: 'teacherDay',
+      },
+    ],
+    12: [
+      {
+        day: 24,
+        month: 12,
+        label: 'christmasEve',
+      },
+      {
+        day: 25,
+        month: 12,
+        label: 'christmas',
+      },
+    ],
+  },
+  lunar: [
+    {
+      lunarDay: 1,
+      lunarMonth: 1,
+      lunar: true,
+      label: 'lunarNewYear',
+      highlight: '(1/1)',
+    },
+    {
+      lunarDay: 2,
+      lunarMonth: 1,
+      lunar: true,
+      label: 'lunarNewYear',
+      highlight: '(2/1)',
+    },
+    {
+      lunarDay: 3,
+      lunarMonth: 1,
+      lunar: true,
+      label: 'lunarNewYear',
+      highlight: '(3/1)',
+    },
+    {
+      lunarDay: 4,
+      lunarMonth: 1,
+      lunar: true,
+      label: 'lunarNewYear',
+      highlight: '(4/1)',
+    },
+    {
+      lunarDay: 10,
+      lunarMonth: 3,
+      lunar: true,
+      label: 'hungKingDay',
+      highlight: '(10/3)',
+    },
+  ],
+};
+
+export default holidayData;