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

package/src/libs/Calendar/MonthList.tsx

@@ -1,226 +0,0 @@
-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

@@ -1,91 +0,0 @@
-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

@@ -1,288 +0,0 @@
-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

@@ -1,118 +0,0 @@
-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;