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

package/src/libs/Calendar/index.tsx

@@ -0,0 +1,383 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import React, {
+  useState,
+  useRef,
+  useEffect,
+  useContext,
+  createContext,
+} from 'react';
+import { Dimensions, LayoutChangeEvent, View } from 'react-native';
+import moment from 'moment';
+import {
+  ApplicationContext,
+  Radius,
+  useScaleSize,
+  Spacing,
+  Switch,
+  Text,
+} from '@momo-kits/foundation';
+import CalendarPro from './CalendarPro';
+import TabHeader from './TabHeader';
+import { CalendarProps, CalendarProRef } from './types';
+import styles from './styles';
+
+const DOUBLE = 'doubleDate';
+
+export const ContainerContext = createContext({ width: 0, height: 0 });
+
+const Calendar: React.FC<CalendarProps> = props => {
+  const { translate, theme } = useContext(ApplicationContext);
+  const scaledHeight48 = useScaleSize(48);
+  const scaledHeight34 = useScaleSize(34);
+
+  // derive defaults for date bounds
+  const currentDate = new Date();
+  const minDateDefault = new Date(currentDate);
+  const maxDateDefault = new Date(currentDate);
+  minDateDefault.setFullYear(minDateDefault.getFullYear() - 1);
+  maxDateDefault.setFullYear(maxDateDefault.getFullYear() + 1);
+
+  // destructure all Calendar props
+  const {
+    mode,
+    id,
+    doubleDate: initDoubleDate,
+    selectedDate: initialSelectedDate,
+    onChangeTab: onChangeTabProp,
+    onCallbackCalendar,
+    isOffLunar,
+    isHideHoliday,
+    isShowLunar,
+    priceList,
+    labelFrom,
+    labelTo,
+    isHideLabel,
+    minDate = minDateDefault,
+    maxDate = maxDateDefault,
+    style,
+    disabledDays = [],
+    hideHeaderTab = false,
+    bestPriceColor,
+  } = props;
+
+  const [containerWidth, setContainerWidth] = useState<number>(
+    Dimensions.get('window').width,
+  );
+  const [isDoubleDateMode, setIsDoubleDateMode] = useState<boolean>(
+    mode === DOUBLE,
+  );
+  const [selectedDate, setSelectedDate] = useState<moment.Moment>(
+    initialSelectedDate
+      ? moment(initialSelectedDate)
+      : mode === DOUBLE && initDoubleDate && initDoubleDate.first
+      ? moment(initDoubleDate.first)
+      : moment(),
+  );
+
+  const doubleDate = useRef<{
+    first: moment.Moment | null;
+    second: moment.Moment | null;
+  }>(
+    initDoubleDate
+      ? {
+          first: initDoubleDate.first ? moment(initDoubleDate.first) : null,
+          second: initDoubleDate.second ? moment(initDoubleDate.second) : null,
+        }
+      : { first: null, second: null },
+  );
+  const tabSelected = useRef<number>(id || 0);
+
+  const calendarPicker = useRef<CalendarProRef>(null);
+  // hold refs to TabHeader instances
+  const cellHeader1 = useRef<TabHeader>(null);
+  const cellHeader2 = useRef<TabHeader>(null);
+  const cellHeaderSingle = useRef<TabHeader>(null);
+
+  // Initialize view on mount
+  useEffect(() => {
+    tabSelected.current = id || 0;
+    if (mode === DOUBLE) {
+      if (
+        cellHeader1.current &&
+        cellHeader2.current &&
+        calendarPicker.current
+      ) {
+        const start = doubleDate.current.first;
+        const end = doubleDate.current.second;
+        cellHeader1.current.updateView(start, tabSelected.current === 0);
+        cellHeader2.current.updateView(end, tabSelected.current === 1);
+        calendarPicker.current.setDoubleDateAndTabIndex(
+          doubleDate.current.first,
+          doubleDate.current.second,
+          tabSelected.current,
+        );
+      }
+    } else {
+      calendarPicker.current?.setDoubleDateAndTabIndex(selectedDate);
+    }
+  }, []);
+
+  const onLayout = (e: LayoutChangeEvent) =>
+    setContainerWidth(e.nativeEvent.layout.width);
+
+  const onChangeTab = (id: number) => {
+    onChangeTabProp?.(id);
+    tabSelected.current = id;
+    cellHeader1.current?.setActiveTab(id === 0);
+    cellHeader2.current?.setActiveTab(id === 1);
+    calendarPicker.current?.setDoubleDateAndTabIndex(
+      doubleDate.current.first,
+      doubleDate.current.second,
+      tabSelected.current,
+    );
+  };
+
+  const processDateFirst = () => {
+    const { onDateChange, onCTAStateChange } = props;
+    if (!cellHeader1.current || !cellHeader2.current || !calendarPicker.current)
+      return;
+    // set first date and reset second
+    doubleDate.current.first = selectedDate;
+    doubleDate.current.second = null;
+    tabSelected.current = 1;
+    // update headers
+    cellHeader1.current.updateView(selectedDate, false);
+    cellHeader2.current.updateView(null, true);
+    // update calendar
+    calendarPicker.current.setDoubleDateAndTabIndex(
+      doubleDate.current.first,
+      doubleDate.current.second,
+      tabSelected.current,
+    );
+    // notify parent
+    onDateChange?.({ first: doubleDate.current.first!, second: null });
+    onCTAStateChange?.(false);
+  };
+
+  const processDateSecond = () => {
+    const { onDateChange, onCTAStateChange } = props;
+    if (!cellHeader1.current || !cellHeader2.current || !calendarPicker.current)
+      return;
+    // if selectedDate is before first, treat as new first date
+    if (selectedDate.isBefore(doubleDate.current.first!, 'day')) {
+      doubleDate.current.first = selectedDate;
+      doubleDate.current.second = null;
+      tabSelected.current = 1;
+      cellHeader1.current.updateView(selectedDate, false);
+      cellHeader2.current.updateView(null, false);
+      calendarPicker.current.setDoubleDateAndTabIndex(
+        doubleDate.current.first,
+        doubleDate.current.second,
+        tabSelected.current,
+      );
+      onDateChange?.({ first: doubleDate.current.first!, second: null });
+      onCTAStateChange?.(false);
+    } else {
+      // valid second date
+      doubleDate.current.second = selectedDate;
+      tabSelected.current = 0;
+      cellHeader2.current.updateView(selectedDate, false);
+      cellHeader1.current.setActiveTab(true);
+      calendarPicker.current.setDoubleDateAndTabIndex(
+        doubleDate.current.first,
+        doubleDate.current.second,
+        tabSelected.current,
+      );
+      onDateChange?.({
+        first: doubleDate.current.first!,
+        second: doubleDate.current.second!,
+      });
+      onCTAStateChange?.(true);
+    }
+  };
+
+  const processDoubleDate = () => {
+    tabSelected.current === 0 ? processDateFirst() : processDateSecond();
+  };
+
+  const updateView = () => {
+    const { onDateChange } = props;
+    if (isDoubleDateMode) {
+      processDoubleDate();
+    } else {
+      cellHeaderSingle.current?.updateView(selectedDate, true);
+      onDateChange?.(selectedDate.toDate());
+    }
+  };
+
+  // skip running updateView on initial mount to preserve initial doubleDate props
+  const didMount = useRef(false);
+
+  useEffect(() => {
+    if (didMount.current) {
+      updateView();
+    } else {
+      didMount.current = true;
+    }
+  }, [selectedDate]);
+
+  const onDateChangeHandler = (date: moment.Moment) => setSelectedDate(date);
+
+  const updateHeaderView = () => {
+    const { onDateChange, onCTAStateChange } = props;
+    if (isDoubleDateMode) {
+      cellHeader1.current?.updateView(selectedDate, true);
+      cellHeader2.current?.updateView(null, false);
+      calendarPicker.current?.setDoubleDateAndTabIndex(
+        selectedDate,
+        null,
+        tabSelected.current,
+      );
+      doubleDate.current.first = moment(selectedDate);
+      doubleDate.current.second = null;
+      tabSelected.current = 1;
+      cellHeader2.current?.setActiveTab(true);
+      cellHeader1.current?.setActiveTab(false);
+      calendarPicker.current?.setDoubleDateAndTabIndex(
+        doubleDate.current.first,
+        doubleDate.current.second,
+        tabSelected.current,
+      );
+      onCTAStateChange?.(false);
+      onDateChange?.({ first: doubleDate.current.first!, second: null });
+    } else {
+      // Reset second date when switching to single mode
+      doubleDate.current.second = null;
+      props.onCTAStateChange?.(true);
+      if (doubleDate.current.first) {
+        cellHeaderSingle.current?.updateView(doubleDate.current.first, true);
+        setSelectedDate(doubleDate.current.first);
+      } else {
+        cellHeaderSingle.current?.updateView(selectedDate, true);
+      }
+      props.onDateChange?.(selectedDate.toDate());
+    }
+  };
+
+  const toggleSelectionDateMode = () => {
+    setIsDoubleDateMode(prev => {
+      const next = !prev;
+      props.onCallbackCalendar?.('switch', next);
+      return next;
+    });
+  };
+
+  const didMountMode = useRef(false);
+  useEffect(() => {
+    if (didMountMode.current) {
+      updateHeaderView();
+    } else {
+      didMountMode.current = true;
+    }
+  }, [isDoubleDateMode]);
+
+  const renderSwitchReturnSelection = () => {
+    if (props.hideSwitchReturnSelection) return null;
+    return (
+      <View style={styles.headerContainer}>
+        <View
+          style={[
+            styles.viewSwitch,
+            { backgroundColor: theme.colors.background.surface },
+          ]}
+        >
+          <Text typography="label_default_medium">
+            {props.titleHeader || translate?.('chooseRoundtrip')}
+          </Text>
+          <Switch value={isDoubleDateMode} onChange={toggleSelectionDateMode} />
+        </View>
+      </View>
+    );
+  };
+
+  const renderHeaderPanel = () =>
+    isDoubleDateMode ? (
+      <View
+        style={[
+          styles.viewPanel,
+          { backgroundColor: theme.colors.background.default },
+        ]}
+      >
+        <TabHeader
+          id={0}
+          ref={cellHeader1}
+          onChangeTab={onChangeTab}
+          label={props.headerFrom || 'depart'}
+          activeTab
+          date={doubleDate.current.first}
+        />
+        <View style={{ width: 4, height: '100%' }} />
+        <TabHeader
+          id={1}
+          ref={cellHeader2}
+          onChangeTab={onChangeTab}
+          label={props.headerTo || 'return'}
+          activeTab={false}
+          date={doubleDate.current.second}
+        />
+      </View>
+    ) : (
+      <View
+        style={[
+          styles.viewPanel,
+          { backgroundColor: theme.colors.background.default },
+        ]}
+      >
+        <TabHeader
+          id={0}
+          disabled
+          ref={cellHeaderSingle}
+          label={props.headerFrom || 'depart'}
+          activeTab
+          date={selectedDate}
+        />
+      </View>
+    );
+
+  return (
+    <ContainerContext.Provider
+      value={{
+        width: containerWidth,
+        height: priceList ? scaledHeight48 : scaledHeight34,
+      }}
+    >
+      <View onLayout={onLayout} style={[style, styles.scrollView]}>
+        <View
+          style={[
+            {
+              backgroundColor: theme.colors.background.surface,
+              borderRadius: Radius.XS,
+              marginBottom: Spacing.S,
+            },
+            hideHeaderTab && styles.invisible,
+          ]}
+        >
+          {renderSwitchReturnSelection()}
+          {renderHeaderPanel()}
+        </View>
+        <CalendarPro
+          priceList={priceList}
+          ref={calendarPicker}
+          startDate={doubleDate.current.first!}
+          endDate={doubleDate.current.second!}
+          onDateChange={onDateChangeHandler}
+          isDoubleDateMode={isDoubleDateMode}
+          selectedDate={selectedDate}
+          isShowLunar={isShowLunar}
+          onCallbackCalendar={onCallbackCalendar}
+          labelFrom={labelFrom}
+          labelTo={labelTo}
+          isHideLabel={isHideLabel}
+          minDate={minDate}
+          maxDate={maxDate}
+          isHideHoliday={isHideHoliday}
+          isOffLunar={isOffLunar}
+          disabledDays={disabledDays}
+          bestPriceColor={bestPriceColor}
+        />
+      </View>
+    </ContainerContext.Provider>
+  );
+};
+
+export { Calendar };

package/src/libs/Calendar/package.json

@@ -0,0 +1,18 @@
+{
+    "name": "@momo-kits/calendar",
+    "version": "0.157.1-beta.4",
+    "private": false,
+    "main": "index.tsx",
+    "peerDependencies": {
+        "@momo-kits/foundation": "latest",
+        "react": "*",
+        "react-native": "*"
+    },
+    "license": "MoMo",
+    "publishConfig": {
+        "registry": "https://registry.npmjs.org/"
+    },
+    "dependencies": {
+        "moment": "^2.24.0"
+    }
+}

package/src/libs/Calendar/publish.sh

@@ -0,0 +1,18 @@
+#!/bin/bash
+
+
+if [ "$1" == "stable" ]; then
+  npm version $(npm view @momo-kits/foundation@stable version)
+  npm version patch
+  npm publish --tag stable --access=public
+elif [ "$1" == "latest" ]; then
+  npm publish --tag latest --access=public
+elif [ "$1" == "beta" ]; then
+  npm publish --tag beta --access=public
+else
+  npm publish --tag alpha --access=public
+fi
+
+PACKAGE_NAME=$(npm pkg get name)
+NEW_PACKAGE_VERSION=$(npm pkg get version)
+

package/src/libs/Calendar/styles.ts

@@ -0,0 +1,122 @@
+import {StyleSheet} from 'react-native';
+import {Colors, Radius, Spacing} from '@momo-kits/foundation';
+
+export default StyleSheet.create({
+  //calendar
+  viewPanel: {
+    flexDirection: 'row',
+    marginHorizontal: Spacing.M,
+    marginVertical: Spacing.S,
+    borderRadius: Radius.S,
+    padding: Spacing.XXS,
+  },
+  viewSwitch: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: Spacing.XS,
+  },
+  headerContainer: {
+    paddingHorizontal: Spacing.M,
+    marginTop: Spacing.S,
+  },
+  scrollView: {
+    backgroundColor: 'transparent',
+    alignSelf: 'center',
+    width: '100%',
+  },
+
+  //calendar pro
+  row: {flexDirection: 'row'},
+  txtMonthLunar: {
+    marginRight: Spacing.S,
+  },
+  subTextLunar: {
+    marginRight: Spacing.XS,
+  },
+  contentScroll: {
+    paddingHorizontal: Spacing.M,
+    paddingTop: Spacing.S,
+    paddingBottom: Spacing.M,
+  },
+  viewLunar: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginHorizontal: Spacing.M,
+    borderTopWidth: 1,
+    paddingVertical: Spacing.S,
+  },
+  textDay: {
+    textAlign: 'center',
+  },
+  viewDay: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingHorizontal: Spacing.S,
+    paddingVertical: Spacing.S,
+    marginTop: Spacing.S,
+  },
+  container: {
+    backgroundColor: 'white',
+    borderRadius: Radius.XS,
+  },
+  blueSeperator: {
+    height: 1,
+    width: '100%',
+    backgroundColor: Colors.blue_05,
+  },
+
+  //headerControl
+  txtHeader: {
+    textAlign: 'center',
+  },
+  btnRight: {
+    width: 36,
+    height: 36,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  btnLeft: {
+    width: 36,
+    height: 36,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  headerControlContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    backgroundColor: Colors.blue_10,
+    alignItems: 'center',
+    borderRadius: Radius.XS,
+    padding: Spacing.S,
+  },
+
+  //day
+  dayContainer: {
+    borderRadius: Radius.XS,
+    alignItems: 'center',
+  },
+  day: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: Radius.XS,
+  },
+  dayText: {
+    textAlign: 'center',
+  },
+  dayStartContainer: {
+    borderTopLeftRadius: Radius.XS,
+    borderBottomLeftRadius: Radius.XS,
+  },
+  dayEndContainer: {
+    borderTopRightRadius: Radius.XS,
+    borderBottomRightRadius: Radius.XS,
+  },
+  invisible: {
+    height: 0,
+    width: 0,
+    padding: 0,
+    marginBottom: 0,
+    overflow: 'hidden',
+  },
+});