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

package/src/libs/Calendar/index.tsx

@@ -1,383 +0,0 @@
-/* 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

@@ -1,18 +0,0 @@
-{
-    "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

@@ -1,18 +0,0 @@
-#!/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

@@ -1,122 +0,0 @@
-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',
-  },
-});