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

package/src/libs/Calendar/CalendarPro.tsx

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

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

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