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

package/src/libs/Calendar/CalendarPro.tsx

@@ -1,307 +0,0 @@
-import React, {
-  useContext,
-  useRef,
-  useState,
-  useEffect,
-  useMemo,
-  forwardRef,
-  useImperativeHandle,
-} from 'react';
-import { ScrollView, View } from 'react-native';
-import moment, { Moment } from 'moment';
-import {
-  ApplicationContext,
-  CheckBox,
-  Colors,
-  Spacing,
-  Text,
-} from '@momo-kits/foundation';
-import MonthList from './MonthList';
-import HeaderControl from './HeaderControl';
-import LunarDateConverter from './LunarDateConverter';
-import Util from './Util';
-import {
-  CalendarProProps,
-  CalendarProRef,
-  HeaderControlRef,
-  MonthListRef,
-  Holidays,
-} from './types';
-import { ContainerContext } from './index';
-import styles from './styles';
-
-const CalendarPro = forwardRef<CalendarProRef, CalendarProProps>(
-  (
-    {
-      startDate: propStartDate,
-      endDate: propEndDate,
-      minDate: propMinDate,
-      maxDate: propMaxDate,
-      isShowLunar: propIsShowLunar,
-      selectedDate: propSelectedDate,
-      isDoubleDateMode,
-      onDateChange,
-      priceList,
-      isHideHoliday,
-      isOffLunar,
-      onCallbackCalendar,
-      disabledDays,
-      bestPriceColor,
-    },
-    ref,
-  ) => {
-    const { theme, translate } = useContext(ApplicationContext);
-    const size = useContext(ContainerContext);
-
-    const today = useMemo(() => moment(), []);
-    const headerRef = useRef<Moment>(today.clone());
-    const headerControlRef = useRef<HeaderControlRef>(null);
-    const monthListRef = useRef<MonthListRef>(null);
-
-    // Compute min/max date range
-    const [minDate, maxDate] = useMemo(() => {
-      let max = moment(propMaxDate);
-      let min = moment(propMinDate);
-      const maxValid = max.isValid();
-      const minValid = min.isValid();
-      if (!maxValid && !minValid) {
-        max = moment().add(12, 'months');
-        min = moment();
-      } else if (!maxValid && minValid) {
-        max = min.clone().add(12, 'months');
-      } else if (maxValid && !minValid) {
-        min = max.clone().subtract(12, 'months');
-      }
-      return [min, max];
-    }, [propMinDate, propMaxDate]);
-
-    // State
-    const [startDate, setStartDate] = useState<Moment>(propStartDate);
-    const [endDate, setEndDate] = useState<Moment | null>(propEndDate || null);
-    const [showLunar, setShowLunar] = useState<boolean>(!!propIsShowLunar);
-    const [tabSelected, setTabSelected] = useState<number>(0);
-    const [holidays, setHolidays] = useState<Holidays[]>([]);
-    const [temp, setTemp] = useState<any[]>([]);
-    const [headerKey, setHeaderKey] = useState<string>('');
-    const [ownUpdate, setOwnUpdate] = useState<boolean>(false);
-
-    const converter: any = useMemo(() => LunarDateConverter(), []);
-
-    useImperativeHandle(ref, () => ({
-      setDoubleDateAndTabIndex: (
-        firstDate?: Moment | null,
-        secondDate?: Moment | null,
-        tabIdx?: number,
-      ) => {
-        if (typeof tabIdx === 'number') setTabSelected(tabIdx);
-        if (firstDate) setStartDate(firstDate);
-        if (secondDate !== undefined) setEndDate(secondDate);
-      },
-      setDateRange: (dateRange: { startDate: any; endDate: any }) => {
-        if (monthListRef.current && dateRange.startDate) {
-          monthListRef.current.scrollToMonth(moment(dateRange.startDate));
-        }
-      },
-    }));
-
-    // Sync showLunar prop
-    useEffect(() => {
-      if (ownUpdate) {
-        setOwnUpdate(false);
-      } else if (propIsShowLunar !== showLunar) {
-        setShowLunar(!!propIsShowLunar);
-      }
-    }, [ownUpdate, propIsShowLunar, showLunar]);
-
-    // Scroll to initial selected date on mount or when it changes
-    useEffect(() => {
-      const timer = setTimeout(() => {
-        monthListRef.current?.scrollToMonth(propSelectedDate);
-      }, 500);
-      return () => clearTimeout(timer);
-    }, [propSelectedDate]);
-
-    // Handlers
-    const onChooseDay = (day: Moment) => {
-      if (isDoubleDateMode) {
-        if (tabSelected === 1) {
-          if (startDate && day >= startDate) {
-            setEndDate(day);
-          } else if (startDate && day < startDate) {
-            setStartDate(day);
-            setEndDate(null);
-          }
-        } else {
-          setStartDate(day);
-        }
-      } else {
-        setStartDate(day);
-        setEndDate(null);
-      }
-      onDateChange?.(day);
-    };
-
-    const executeProcessAfterScrollCalendar = (date: Moment, key: string) => {
-      // get sorted array of holidays directly
-      const allHolidays = Util.getHolidaysInMonth(moment(date));
-      const filtered = showLunar
-        ? allHolidays
-        : allHolidays.filter(item => !item.lunar || item.mixedLabel);
-      headerControlRef.current?.onUpdateInfo({ date });
-      headerRef.current = date.clone().startOf('month');
-      setHolidays(allHolidays);
-      setTemp(filtered);
-      setHeaderKey(key);
-    };
-
-    const onScrollCalendar = (info: {
-      date: Moment;
-      key: string;
-      currentIndex: number;
-    }) => {
-      if (info.key !== headerKey) {
-        executeProcessAfterScrollCalendar(info.date, info.key);
-      }
-    };
-
-    const onToggleLunar = () => {
-      setOwnUpdate(true);
-      const next = !showLunar;
-      const filtered = next
-        ? holidays
-        : holidays.filter(item => !item.lunar || item.mixedLabel);
-      onCallbackCalendar?.('lunar', next);
-      setShowLunar(next);
-      setTemp(filtered);
-    };
-
-    const onPressBackArrow = () => {
-      const prev = headerRef.current
-        .clone()
-        .startOf('month')
-        .subtract(1, 'months');
-      if (prev.isSameOrAfter(minDate, 'month')) {
-        headerRef.current = prev;
-        headerControlRef.current?.onUpdateInfo({ date: prev });
-        monthListRef.current?.scrollToMonth(prev);
-      }
-    };
-
-    const onPressNextArrow = () => {
-      const next = headerRef.current.clone().startOf('month').add(1, 'months');
-      if (next.isSameOrBefore(maxDate, 'month')) {
-        headerRef.current = next;
-        headerControlRef.current?.onUpdateInfo({ date: next });
-        monthListRef.current?.scrollToMonth(next);
-      }
-    };
-
-    // Determine price list format
-    let priceListFormat = priceList?.outbound;
-    if (isDoubleDateMode) {
-      priceListFormat =
-        tabSelected === 0 ? priceList?.outbound : priceList?.inbound;
-    }
-
-    return (
-      <View style={styles.container}>
-        <HeaderControl
-          ref={headerControlRef}
-          selectedDate={propSelectedDate}
-          onPressBackArrow={onPressBackArrow}
-          onPressNextArrow={onPressNextArrow}
-        />
-        <View style={styles.blueSeperator} />
-        <View>
-          <View style={styles.viewDay}>
-            {[1, 2, 3, 4, 5, 6, 7].map(dayIdx => (
-              <Text
-                key={dayIdx}
-                color={dayIdx >= 6 ? Colors.red_03 : Colors.black_17}
-                typography="label_s_medium"
-                style={[
-                  styles.textDay,
-                  { width: (size.width - Spacing.M * 2) / 7 },
-                ]}
-              >
-                {translate?.(Util.mapWeeKDate(dayIdx))}
-              </Text>
-            ))}
-          </View>
-          <MonthList
-            ref={monthListRef}
-            today={today}
-            minDate={minDate}
-            maxDate={maxDate}
-            startDate={startDate!}
-            endDate={endDate!}
-            onChoose={onChooseDay}
-            onScrollCalendar={onScrollCalendar}
-            isShowLunar={!isOffLunar && showLunar}
-            isDoubleDateMode={isDoubleDateMode}
-            tabSelected={tabSelected}
-            lunarConverter={converter}
-            holidays={holidays}
-            selectedDate={propSelectedDate}
-            priceList={priceListFormat}
-            disabledDays={disabledDays}
-            bestPriceColor={bestPriceColor}
-          />
-        </View>
-        {!isOffLunar && (
-          <View
-            style={[
-              styles.viewLunar,
-              { borderColor: theme.colors.border.default },
-            ]}
-          >
-            <CheckBox
-              onChange={onToggleLunar}
-              value={showLunar}
-              label={translate?.('showLunar')}
-            />
-          </View>
-        )}
-        {!isHideHoliday && (
-          <ScrollView
-            contentContainerStyle={styles.contentScroll}
-            showsVerticalScrollIndicator={false}
-            nestedScrollEnabled
-          >
-            {temp.map((item, idx) => {
-              const labelDate = `${item.day > 9 ? item.day : `0${item.day}`}/${
-                item.month > 9 ? item.month : `0${item.month}`
-              }`;
-              const labelHoliday = showLunar
-                ? item.mixedLabel || item.label
-                : item.label;
-              const labelHighlight = showLunar ? item.highlight || '' : '';
-              return (
-                <View style={styles.row} key={idx.toString()}>
-                  <Text
-                    color={theme.colors.error.primary}
-                    typography="description_default_regular"
-                    style={styles.txtMonthLunar}
-                  >
-                    {labelDate}
-                  </Text>
-                  <Text
-                    typography="description_default_regular"
-                    style={styles.subTextLunar}
-                  >
-                    {translate?.(labelHoliday)}
-                  </Text>
-                  <Text typography="description_default_regular">
-                    {labelHighlight}
-                  </Text>
-                </View>
-              );
-            })}
-          </ScrollView>
-        )}
-      </View>
-    );
-  },
-);
-
-export default CalendarPro;

package/src/libs/Calendar/Day.tsx

@@ -1,150 +0,0 @@
-import React, { useContext } from 'react';
-import { Text as RNText, TouchableOpacity, View } from 'react-native';
-import {
-  ApplicationContext,
-  Colors,
-  useScaleSize,
-  Spacing,
-  Text,
-} from '@momo-kits/foundation';
-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,
-    bestPriceColor,
-  } = props;
-
-  const { theme } = useContext(ApplicationContext);
-  const size = useContext(ContainerContext);
-  const scaledHeight = useScaleSize(48);
-  const scaledSpacing = useScaleSize(Spacing.XS);
-  const scaledFontSize = useScaleSize(8);
-  const scaledLineHeight = useScaleSize(12);
-
-  const itemWidth = (size.width - Spacing.M) / 7;
-  if (isEmpty || !date) {
-    return <View style={[styles.dayContainer, { width: itemWidth }]} />;
-  }
-
-  const isValid =
-    !isDisabled &&
-    (date.isAfter(minDate, 'day') || date.isSame(minDate, 'day')) &&
-    (date.isBefore(maxDate, 'day') || date.isSame(maxDate, 'day'));
-
-  const isMid =
-    isDoubleDateMode &&
-    date.isAfter(startDate, 'day') &&
-    date.isBefore(endDate, 'day');
-
-  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;
-
-  const isInScope = isDoubleDateMode
-    ? tabSelected === 0 || date.isSameOrAfter(startDate, 'day')
-    : true;
-
-  const chooseDay = () => {
-    onChoose && onChoose(date);
-  };
-
-  let textColor = theme.colors.text.default;
-  let lunarTextColor = theme.colors.text.hint;
-  let priceColor = theme.colors.text.default;
-
-  if (isWeekEnd || isSolarHoliday || isLunarHoliday) {
-    textColor = theme.colors.error.primary;
-  }
-
-  if (isBestPrice && bestPriceColor) {
-    priceColor = bestPriceColor;
-  }
-
-  if (isStart || isEnd) {
-    textColor = Colors.black_01;
-    priceColor = Colors.black_01;
-    lunarTextColor = Colors.black_01;
-  }
-
-  if (!isValid || !isInScope) {
-    textColor = theme.colors.text.disable;
-    priceColor = theme.colors.text.disable;
-    lunarTextColor = theme.colors.text.disable;
-  }
-
-  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: scaledHeight },
-            { height: size.height },
-          ]}
-          disabled={!(isValid && isInScope)}
-          onPress={chooseDay}
-        >
-          {lunarDate && showLunar && !!date && (
-            <RNText
-              allowFontScaling={false}
-              style={{
-                position: 'absolute',
-                top: scaledSpacing,
-                right: scaledSpacing,
-                color: lunarTextColor,
-                fontSize: scaledFontSize,
-                lineHeight: scaledLineHeight,
-              }}
-            >
-              {lunarDate.lunarDay === 1
-                ? `${lunarDate.lunarDay}/${lunarDate.lunarMonth}`
-                : lunarDate.lunarDay}
-            </RNText>
-          )}
-          <Text typography="body_default_regular" color={textColor}>
-            {date ? date.date() : ''}
-          </Text>
-          {!!price && (
-            <Text typography="description_xs_regular" color={priceColor}>
-              {price}
-            </Text>
-          )}
-        </TouchableOpacity>
-      </View>
-    </View>
-  );
-};
-
-export default Day;

package/src/libs/Calendar/HeaderControl.tsx

@@ -1,55 +0,0 @@
-import React, {
-  forwardRef,
-  ForwardRefRenderFunction,
-  useContext,
-  useImperativeHandle,
-  useState,
-} from 'react';
-import {TouchableOpacity, View} from 'react-native';
-import moment from 'moment';
-import Moment from 'moment';
-import {ApplicationContext, Icon, Text} from '@momo-kits/foundation';
-
-import Util from './Util';
-import {HeaderControlProps, HeaderControlRef} from './types';
-import styles from './styles';
-
-const HeaderControl: ForwardRefRenderFunction<
-  HeaderControlRef,
-  HeaderControlProps
-> = ({onPressBackArrow, onPressNextArrow, selectedDate}, ref) => {
-  const {translate} = useContext(ApplicationContext);
-  const [info, setInfo] = useState<{date: Moment.Moment}>({
-    date: moment(selectedDate || new Date()),
-  });
-
-  useImperativeHandle(ref, () => ({
-    onUpdateInfo,
-  }));
-
-  const onUpdateInfo = (date: React.SetStateAction<{date: moment.Moment}>) => {
-    setInfo(date);
-  };
-
-  if (info && info.date) {
-    const headerFormat = `${translate?.(
-      Util.mapMonth(info.date.month() + 1) || ''
-    )}/${info.date.year()}`;
-    return (
-      <View style={styles.headerControlContainer}>
-        <TouchableOpacity onPress={onPressBackArrow}>
-          <Icon source="24_arrow_chevron_left_small" />
-        </TouchableOpacity>
-        <Text typography={'header_s_semibold'} style={styles.txtHeader}>
-          {headerFormat}
-        </Text>
-        <TouchableOpacity onPress={onPressNextArrow}>
-          <Icon source="24_arrow_chevron_right_small" />
-        </TouchableOpacity>
-      </View>
-    );
-  }
-  return <View />;
-};
-
-export default forwardRef(HeaderControl);