@momo-kits/calendar 0.167.1-duo.8 → 0.167.1-rc.2

package/TabHeader.tsx

@@ -1,91 +1,65 @@
-import React from 'react';
-import {TouchableWithoutFeedback, View} from 'react-native';
+import React, {
+  forwardRef,
+  useContext,
+  useImperativeHandle,
+  useState,
+} 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';
+import styles from './styles';
+import { ApplicationContext, Text } from '@momo-kits/foundation';
+import { TabHeaderProps, TabHeaderRef } 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;
+const TabHeader = forwardRef<TabHeaderRef, TabHeaderProps>((props, ref) => {
+  const { label, disabled, id, onChangeTab } = props;
+  const { theme, translate } = useContext(ApplicationContext);
+  const [active, setActive] = useState<boolean | undefined>(props.activeTab);
+  const [date, setDate] = useState<Moment.Moment | undefined>(
+    props.date ? Moment(props.date) : undefined,
+  );
 
-  constructor(props: TabHeaderProps) {
-    super(props);
-    this.state = {
-      active: props.activeTab,
-    };
-    this.label = props.label;
-    this.defaultDate = props.date ? Moment(props.date) : null;
-  }
+  useImperativeHandle(ref, () => ({
+    updateView: (nextDate, activeTab) => {
+      setDate(nextDate ? Moment(nextDate) : undefined);
+      setActive(activeTab);
+    },
+    setActiveTab: setActive,
+  }));
 
-  onChangeTab = () => {
-    const {onChangeTab, id} = this.props;
-    onChangeTab?.(id);
-  };
+  const weekday = (day: Moment.Moment) =>
+    translate?.(Util.WEEKDAYSFROMMOMENT[day.day()]);
+  const isHighlighted = active && !disabled;
 
-  updateView = (date?: Moment.Moment | Date | null, activeTab?: boolean) => {
-    this.setState({
-      date: date ? Moment(date) : undefined,
-      active: activeTab,
-    });
-  };
+  const formattedDate = date ? date.format('DD/MM/YYYY') : '';
+  const dayOfWeek = date ? `${weekday(date)}, ` : '';
 
-  setActiveTab = (active: boolean) => {
-    this.setState({active});
-  };
+  return (
+    <TouchableWithoutFeedback
+      disabled={disabled}
+      onPress={() => onChangeTab?.(id)}
+    >
+      <View
+        style={[
+          styles.tabHeader,
+          isHighlighted && {
+            backgroundColor: theme.colors.background.surface,
+          },
+        ]}
+      >
+        <Text
+          typography={'description_default_regular'}
+          color={theme.colors.text.hint}
+        >
+          {translate?.(label)}
+        </Text>
+        <Text typography={'header_s_semibold'}>
+          {`${dayOfWeek || '--'} `}
+          {formattedDate || '--/--/----'}
+        </Text>
+      </View>
+    </TouchableWithoutFeedback>
+  );
+});
 
-  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>
-    );
-  }
-}
+export default TabHeader;

package/Util.ts

@@ -3,50 +3,8 @@ 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',
-  },
-};
+// @ts-ignore
+const converter = new LunarDateConverter();
 
 const Solar = (momentDate: moment.Moment) => ({
   solarDay: momentDate.date(),
@@ -68,9 +26,7 @@ const groupHolidaysByDate = (
     holidays.forEach(item => {
       const {day, month, lunar, label} = item;
       const key = formatDDMM(day, month);
-      let holidaysObj = groupedHolidays[key]
-        ? {...groupedHolidays[key]}
-        : {...item};
+      let holidaysObj = { ...(groupedHolidays[key] || item) };
       if (groupedHolidays[key]) {
         if (holidaysObj.lunar && !lunar) {
           holidaysObj = {
@@ -108,39 +64,8 @@ const sortByDate = (arr: Holidays[]): Holidays[] => {
 };
 
 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];
@@ -164,45 +89,19 @@ const Utils = {
     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;
+      const minYear = minLunarDate.lunarYear;
+      const maxYear = maxLunarDate.lunarYear;
+      const currentYear = minYear !== maxYear ? [minYear, maxYear] : minYear;
 
       // Handle Solar holidays
       // @ts-ignore
@@ -282,7 +181,6 @@ const Utils = {
     }
     return [];
   },
-  I18N_MAP,
 };
 
 export default Utils;

package/index.tsx

@@ -1,11 +1,5 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import React, {
-  useState,
-  useRef,
-  useEffect,
-  useContext,
-  createContext,
-} from 'react';
+import React, { useState, useRef, useEffect, useContext } from 'react';
 import { Dimensions, LayoutChangeEvent, View } from 'react-native';
 import moment from 'moment';
 import {
@@ -13,20 +7,17 @@ import {
   Radius,
   useScaleSize,
   Spacing,
-  Switch,
-  Text,
 } from '@momo-kits/foundation';
 import CalendarPro from './CalendarPro';
-import TabHeader from './TabHeader';
-import { CalendarProps, CalendarProRef } from './types';
+import { HeaderPanel, SwitchReturnSelection } from './CalendarHeader';
+import { CalendarProps, CalendarProRef, TabHeaderRef } from './types';
+import { ContainerContext } from './ContainerContext';
 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 { theme } = useContext(ApplicationContext);
   const scaledHeight48 = useScaleSize(48);
   const scaledHeight34 = useScaleSize(34);
 
@@ -49,9 +40,6 @@ const Calendar: React.FC<CalendarProps> = props => {
     isHideHoliday,
     isShowLunar,
     priceList,
-    labelFrom,
-    labelTo,
-    isHideLabel,
     minDate = minDateDefault,
     maxDate = maxDateDefault,
     style,
@@ -66,32 +54,28 @@ const Calendar: React.FC<CalendarProps> = props => {
   const [isDoubleDateMode, setIsDoubleDateMode] = useState<boolean>(
     mode === DOUBLE,
   );
+  let initialDate = initialSelectedDate;
+  if (!initialDate && mode === DOUBLE) {
+    initialDate = initDoubleDate?.first;
+  }
   const [selectedDate, setSelectedDate] = useState<moment.Moment>(
-    initialSelectedDate
-      ? moment(initialSelectedDate)
-      : mode === DOUBLE && initDoubleDate && initDoubleDate.first
-      ? moment(initDoubleDate.first)
-      : moment(),
+    initialDate ? moment(initialDate) : 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 },
-  );
+  }>({
+    first: initDoubleDate?.first ? moment(initDoubleDate.first) : null,
+    second: initDoubleDate?.second ? moment(initDoubleDate.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);
+  const cellHeader1 = useRef<TabHeaderRef>(null);
+  const cellHeader2 = useRef<TabHeaderRef>(null);
+  const cellHeaderSingle = useRef<TabHeaderRef>(null);
 
   // Initialize view on mount
   useEffect(() => {
@@ -120,11 +104,11 @@ const Calendar: React.FC<CalendarProps> = props => {
   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);
+  const onChangeTab = (tabId: number) => {
+    onChangeTabProp?.(tabId);
+    tabSelected.current = tabId;
+    cellHeader1.current?.setActiveTab(tabId === 0);
+    cellHeader2.current?.setActiveTab(tabId === 1);
     calendarPicker.current?.setDoubleDateAndTabIndex(
       doubleDate.current.first,
       doubleDate.current.second,
@@ -221,18 +205,11 @@ const Calendar: React.FC<CalendarProps> = props => {
   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);
+      cellHeader1.current?.updateView(selectedDate, false);
+      cellHeader2.current?.updateView(null, true);
       calendarPicker.current?.setDoubleDateAndTabIndex(
         doubleDate.current.first,
         doubleDate.current.second,
@@ -241,16 +218,17 @@ const Calendar: React.FC<CalendarProps> = props => {
       onCTAStateChange?.(false);
       onDateChange?.({ first: doubleDate.current.first!, second: null });
     } else {
-      // Reset second date when switching to single mode
+      const date = doubleDate.current.first ?? selectedDate;
       doubleDate.current.second = null;
-      props.onCTAStateChange?.(true);
-      if (doubleDate.current.first) {
-        cellHeaderSingle.current?.updateView(doubleDate.current.first, true);
-        setSelectedDate(doubleDate.current.first);
+      tabSelected.current = 0;
+      calendarPicker.current?.setDoubleDateAndTabIndex(date, null, 0);
+      onCTAStateChange?.(true);
+      if (date.isSame(selectedDate, 'day')) {
+        cellHeaderSingle.current?.updateView(date, true);
+        onDateChange?.(date.toDate());
       } else {
-        cellHeaderSingle.current?.updateView(selectedDate, true);
+        setSelectedDate(date);
       }
-      props.onDateChange?.(selectedDate.toDate());
     }
   };
 
@@ -271,69 +249,6 @@ const Calendar: React.FC<CalendarProps> = props => {
     }
   }, [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={{
@@ -352,8 +267,24 @@ const Calendar: React.FC<CalendarProps> = props => {
             hideHeaderTab && styles.invisible,
           ]}
         >
-          {renderSwitchReturnSelection()}
-          {renderHeaderPanel()}
+          <SwitchReturnSelection
+            hidden={props.hideSwitchReturnSelection}
+            title={props.titleHeader}
+            value={isDoubleDateMode}
+            onChange={toggleSelectionDateMode}
+          />
+          <HeaderPanel
+            isDoubleDateMode={isDoubleDateMode}
+            cellHeader1={cellHeader1}
+            cellHeader2={cellHeader2}
+            cellHeaderSingle={cellHeaderSingle}
+            onChangeTab={onChangeTab}
+            headerFrom={props.headerFrom}
+            headerTo={props.headerTo}
+            firstDate={doubleDate.current.first}
+            secondDate={doubleDate.current.second}
+            selectedDate={selectedDate}
+          />
         </View>
         <CalendarPro
           priceList={priceList}
@@ -365,9 +296,6 @@ const Calendar: React.FC<CalendarProps> = props => {
           selectedDate={selectedDate}
           isShowLunar={isShowLunar}
           onCallbackCalendar={onCallbackCalendar}
-          labelFrom={labelFrom}
-          labelTo={labelTo}
-          isHideLabel={isHideLabel}
           minDate={minDate}
           maxDate={maxDate}
           isHideHoliday={isHideHoliday}
@@ -380,4 +308,4 @@ const Calendar: React.FC<CalendarProps> = props => {
   );
 };
 
-export { Calendar };
+export { Calendar, ContainerContext };

package/package.json

@@ -1,18 +1,18 @@
 {
-    "name": "@momo-kits/calendar",
-    "version": "0.167.1-duo.8",
-    "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"
-    }
-}
+  "name": "@momo-kits/calendar",
+  "version": "0.167.1-rc.2",
+  "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/styles.ts

@@ -16,6 +16,10 @@ export default StyleSheet.create({
     alignItems: 'center',
     marginBottom: Spacing.XS,
   },
+  tabGap: {
+    width: Spacing.XS,
+    height: '100%',
+  },
   headerContainer: {
     paddingHorizontal: Spacing.M,
     marginTop: Spacing.S,
@@ -57,7 +61,6 @@ export default StyleSheet.create({
     marginTop: Spacing.S,
   },
   container: {
-    backgroundColor: 'white',
     borderRadius: Radius.XS,
   },
   blueSeperator: {
@@ -70,18 +73,6 @@ export default StyleSheet.create({
   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',
@@ -101,9 +92,6 @@ export default StyleSheet.create({
     alignItems: 'center',
     borderRadius: Radius.XS,
   },
-  dayText: {
-    textAlign: 'center',
-  },
   dayStartContainer: {
     borderTopLeftRadius: Radius.XS,
     borderBottomLeftRadius: Radius.XS,
@@ -119,4 +107,22 @@ export default StyleSheet.create({
     marginBottom: 0,
     overflow: 'hidden',
   },
+  lunarText: {
+    position: 'absolute',
+  },
+  monthRows: {
+    paddingHorizontal: Spacing.S,
+    width: '100%',
+    alignItems: 'center',
+  },
+  monthRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: Spacing.XS,
+  },
+  tabHeader: {
+    flex: 1,
+    padding: Spacing.S,
+    borderRadius: Radius.S,
+  },
 });