@momo-kits/calendar 0.0.48-rc.2 → 0.0.48

package/holidayData.ts

@@ -0,0 +1,125 @@
+const holidayData = {
+  solar: {
+    1: [
+      {
+        day: 1,
+        month: 1,
+        label: 'newYear',
+      },
+    ],
+    2: [
+      {
+        day: 14,
+        month: 2,
+        label: 'valentine',
+      },
+    ],
+    3: [
+      {
+        day: 8,
+        month: 3,
+        label: 'womenDay',
+      },
+    ],
+    4: [
+      {
+        day: 30,
+        month: 4,
+        label: 'liberationDay',
+      },
+    ],
+    5: [
+      {
+        day: 1,
+        month: 5,
+        label: 'laborDay',
+      },
+    ],
+    6: [
+      {
+        day: 1,
+        month: 6,
+        label: 'childrenDay',
+      },
+    ],
+    9: [
+      {
+        day: 2,
+        month: 9,
+        label: 'nationalDay',
+      },
+    ],
+    10: [
+      {
+        day: 20,
+        month: 10,
+        label: 'womenDayVN',
+      },
+    ],
+    11: [
+      {
+        day: 20,
+        month: 11,
+        label: 'teacherDay',
+      },
+    ],
+    12: [
+      {
+        day: 24,
+        month: 12,
+        label: 'christmasEve',
+      },
+      {
+        day: 25,
+        month: 12,
+        label: 'christmas',
+      },
+    ],
+  },
+  lunar: [
+    {
+      lunarDay: 30,
+      lunarMonth: 12,
+      lunar: true,
+      label: 'lunarNewYear',
+      highlight: '(30/12)',
+    },
+    {
+      lunarDay: 1,
+      lunarMonth: 1,
+      lunar: true,
+      label: 'lunarNewYear',
+      highlight: '(1/1)',
+    },
+    {
+      lunarDay: 2,
+      lunarMonth: 1,
+      lunar: true,
+      label: 'lunarNewYear',
+      highlight: '(2/1)',
+    },
+    {
+      lunarDay: 3,
+      lunarMonth: 1,
+      lunar: true,
+      label: 'lunarNewYear',
+      highlight: '(3/1)',
+    },
+    {
+      lunarDay: 4,
+      lunarMonth: 1,
+      lunar: true,
+      label: 'lunarNewYear',
+      highlight: '(4/1)',
+    },
+    {
+      lunarDay: 10,
+      lunarMonth: 3,
+      lunar: true,
+      label: 'hungKingDay',
+      highlight: '(10/3)',
+    },
+  ],
+};
+
+export default holidayData;

package/index.tsx

@@ -0,0 +1,479 @@
+import React, {Component, createContext, RefObject} from 'react';
+import {Dimensions, LayoutChangeEvent, View} from 'react-native';
+import moment from 'moment';
+import {
+  ApplicationContext,
+  Radius,
+  scaleSize,
+  Spacing,
+  Switch,
+  Text,
+} from '@momo-kits/foundation';
+import CalendarPro from './CalendarPro';
+import TabHeader from './TabHeader';
+import {CalendarProps, CalendarState} from './types';
+import styles from './styles';
+
+const DOUBLE = 'doubleDate';
+
+export const ContainerContext = createContext({width: 0, height: 0});
+
+class Calendar extends Component<CalendarProps, CalendarState> {
+  static contextType = ApplicationContext;
+  doubleDate: any;
+  tabSelected;
+  selectedDate: moment.Moment;
+  calendarPicker: RefObject<CalendarPro>;
+  cellHeader1: RefObject<TabHeader>;
+  cellHeader2: RefObject<TabHeader>;
+  cellHeaderSingle: RefObject<TabHeader>;
+
+  constructor(props: CalendarProps) {
+    super(props);
+    this.doubleDate = props.doubleDate
+      ? {
+          first: props.doubleDate.first ? moment(props.doubleDate.first) : null,
+          second: props.doubleDate.second
+            ? moment(props.doubleDate.second)
+            : null,
+        }
+      : {};
+    this.tabSelected = 0;
+
+    this.selectedDate = props.selectedDate
+      ? moment(props.selectedDate)
+      : moment();
+
+    this.state = {
+      isDoubleDateMode: props.mode === DOUBLE,
+      containerWidth: Dimensions.get('window').width,
+    };
+    this.calendarPicker = React.createRef<CalendarPro>();
+    this.cellHeader1 = React.createRef<TabHeader>();
+    this.cellHeader2 = React.createRef<TabHeader>();
+    this.cellHeaderSingle = React.createRef<TabHeader>();
+  }
+
+  componentDidMount() {
+    const {id} = this.props;
+    this.tabSelected = id || 0;
+    this.viewInit();
+  }
+
+  viewInit() {
+    const {mode} = this.props;
+    if (mode === DOUBLE) {
+      if (
+        this.cellHeader1.current &&
+        this.cellHeader2.current &&
+        this.calendarPicker.current
+      ) {
+        const start = this.doubleDate.first ? this.doubleDate.first : null;
+        const end = this.doubleDate.second ? this.doubleDate.second : null;
+        this.cellHeader1.current.updateView(start, this.tabSelected === 0);
+        this.cellHeader2.current.updateView(end, this.tabSelected === 1);
+        this.calendarPicker.current.setDoubleDateAndTabIndex(
+          this.doubleDate.first,
+          this.doubleDate.second,
+          this.tabSelected
+        );
+      }
+    } else if (this.calendarPicker.current) {
+      this.calendarPicker.current.setDoubleDateAndTabIndex(this.selectedDate);
+    }
+  }
+
+  onChangeTab = (idTab: number) => {
+    this.props.onChangeTab?.(idTab);
+    this.tabSelected = idTab;
+
+    if (this.cellHeader1.current && this.cellHeader2.current) {
+      this.cellHeader1.current.setActiveTab(idTab === 0);
+      this.cellHeader2.current.setActiveTab(idTab === 1);
+    }
+    this.updateViewFlowPicker();
+  };
+
+  updateViewFlowPicker() {
+    if (this.calendarPicker.current) {
+      this.calendarPicker.current.setDoubleDateAndTabIndex(
+        this.doubleDate.first,
+        this.doubleDate.second,
+        this.tabSelected
+      );
+    }
+  }
+
+  processDateFirst() {
+    const {onDateChange, onCTAStateChange} = this.props;
+    if (
+      this.cellHeader1.current &&
+      this.cellHeader2.current &&
+      this.calendarPicker.current
+    ) {
+      if (
+        this.doubleDate.first &&
+        this.doubleDate.second &&
+        this.selectedDate <= this.doubleDate.first
+      ) {
+        this.doubleDate.first = this.selectedDate;
+        this.doubleDate.second = null;
+        this.tabSelected = 1;
+        this.cellHeader1.current.updateView(
+          this.selectedDate,
+          this.tabSelected === 0
+        );
+        this.cellHeader2.current.updateView(
+          this.doubleDate.second,
+          this.tabSelected === 1
+        );
+        this.cellHeader2.current.setActiveTab(this.tabSelected === 1);
+        this.calendarPicker.current.setDoubleDateAndTabIndex(
+          this.doubleDate.first,
+          this.doubleDate.second,
+          this.tabSelected
+        );
+        if (onDateChange) {
+          onDateChange({
+            first: this.doubleDate.first
+              ? this.doubleDate.first.toDate()
+              : null,
+            second: this.doubleDate.second
+              ? this.doubleDate.second.toDate()
+              : null,
+          });
+        }
+      } else {
+        this.doubleDate.first = this.selectedDate;
+        this.doubleDate.second = null;
+        this.cellHeader1.current.updateView(this.selectedDate, false);
+        this.cellHeader2.current.updateView(null, true);
+        this.tabSelected = 1;
+        this.calendarPicker.current.setDoubleDateAndTabIndex(
+          this.doubleDate.first,
+          this.doubleDate.second,
+          this.tabSelected
+        );
+        if (onDateChange) {
+          onDateChange({
+            first: this.doubleDate.first
+              ? this.doubleDate.first.toDate()
+              : null,
+            second: this.doubleDate.second
+              ? this.doubleDate.second.toDate()
+              : null,
+          });
+        }
+      }
+    }
+    if (onCTAStateChange) {
+      onCTAStateChange(!!this.doubleDate.second);
+    }
+  }
+
+  processDateSecond() {
+    const {onDateChange, onCTAStateChange} = this.props;
+    if (
+      this.cellHeader2.current &&
+      this.selectedDate >= this.doubleDate.first
+    ) {
+      this.doubleDate.second = this.selectedDate;
+      this.cellHeader2.current.updateView(this.selectedDate, false);
+      this.cellHeader1?.current?.setActiveTab(true);
+      this.tabSelected = 0;
+      this.calendarPicker?.current?.setDoubleDateAndTabIndex(
+        this.doubleDate.first,
+        this.doubleDate.second,
+        this.tabSelected
+      );
+      if (onCTAStateChange) {
+        onCTAStateChange(!!this.doubleDate.second);
+      }
+      if (onDateChange) {
+        onDateChange({
+          first: this.doubleDate.first ? this.doubleDate.first.toDate() : null,
+          second: this.doubleDate.second
+            ? this.doubleDate.second.toDate()
+            : null,
+        });
+      }
+    } else {
+      this.doubleDate.first = this.selectedDate;
+      this.doubleDate.second = null;
+
+      this.cellHeader1?.current?.updateView(this.selectedDate, false);
+      this.cellHeader2?.current?.updateView(null, false);
+    }
+  }
+
+  processDoubleDate() {
+    if (this.tabSelected === 0) {
+      this.processDateFirst();
+    } else {
+      this.processDateSecond();
+    }
+  }
+
+  updateView() {
+    const {onDateChange} = this.props;
+    const {isDoubleDateMode} = this.state;
+
+    if (isDoubleDateMode) {
+      this.processDoubleDate();
+    } else {
+      if (this.cellHeaderSingle.current) {
+        this.cellHeaderSingle.current.updateView(this.selectedDate, true);
+      }
+      if (onDateChange) {
+        const date = new Date(this.selectedDate.toDate());
+        onDateChange(date);
+      }
+    }
+  }
+
+  onDateChange = (date: moment.Moment) => {
+    this.selectedDate = date;
+    this.updateView();
+  };
+
+  updateHeaderView = () => {
+    const {onDateChange, onCTAStateChange} = this.props;
+    const {isDoubleDateMode} = this.state;
+    if (isDoubleDateMode) {
+      if (this.cellHeader1.current && this.cellHeader2.current) {
+        this.cellHeader1.current.updateView(this.selectedDate, true);
+        this.cellHeader2.current.updateView(null, false);
+        this.calendarPicker.current?.setDoubleDateAndTabIndex(
+          this.selectedDate,
+          null,
+          this.tabSelected
+        );
+        this.doubleDate.first = moment(this.selectedDate);
+        this.doubleDate.second = null;
+
+        this.tabSelected = 1;
+        this.cellHeader2.current?.setActiveTab(true);
+        this.cellHeader1.current?.setActiveTab(false);
+        this.calendarPicker?.current?.setDoubleDateAndTabIndex(
+          this.doubleDate.first,
+          this.doubleDate.second,
+          this.tabSelected
+        );
+
+        if (onCTAStateChange) {
+          onCTAStateChange(false);
+        }
+        if (onDateChange) {
+          onDateChange({
+            first: this.doubleDate.first
+              ? this.doubleDate.first.toDate()
+              : null,
+            second: this.doubleDate.second
+              ? this.doubleDate.second.toDate()
+              : null,
+          });
+        }
+      }
+    } else {
+      if (onCTAStateChange) {
+        onCTAStateChange(true);
+      }
+      if (this.cellHeaderSingle.current) {
+        if (this.doubleDate.first) {
+          this.cellHeaderSingle.current.updateView(this.doubleDate.first, true);
+          this.selectedDate = this.doubleDate.first;
+        } else {
+          this.cellHeaderSingle.current.updateView(this.selectedDate, true);
+        }
+        if (onDateChange) {
+          onDateChange(this.selectedDate.toDate());
+        }
+      }
+    }
+  };
+
+  toggleSelectionDateMode = () => {
+    const {onCallbackCalendar} = this.props;
+    this.setState(
+      preState => ({isDoubleDateMode: !preState.isDoubleDateMode}),
+      () => {
+        const {isDoubleDateMode} = this.state;
+        this.updateHeaderView();
+        if (onCallbackCalendar && typeof onCallbackCalendar === 'function') {
+          onCallbackCalendar('switch', isDoubleDateMode);
+        }
+      }
+    );
+  };
+
+  renderSwitchReturnSelection = () => {
+    const {isDoubleDateMode} = this.state;
+    const {translate, theme} = this.context;
+    return (
+      <View style={styles.headerContainer}>
+        <View
+          style={[
+            styles.viewSwitch,
+            {backgroundColor: theme.colors.background.surface},
+          ]}>
+          <Text typography={'label_default_medium'}>
+            {translate('chooseRoundtrip')}
+          </Text>
+          <Switch
+            value={isDoubleDateMode}
+            onChange={this.toggleSelectionDateMode}
+          />
+        </View>
+      </View>
+    );
+  };
+
+  renderHeaderPanel = (theme: {colors: {background: {default: string}}}) => {
+    const {isDoubleDateMode} = this.state;
+    const {headerFrom, headerTo} = this.props;
+    return isDoubleDateMode ? (
+      <View
+        style={[
+          styles.viewPanel,
+          {backgroundColor: theme.colors.background.default},
+        ]}>
+        <TabHeader
+          id={0}
+          ref={this.cellHeader1}
+          onChangeTab={this.onChangeTab}
+          label={headerFrom || 'depart'}
+          activeTab
+          date={this.doubleDate.first}
+        />
+        <View style={{width: 4, height: '100%'}} />
+        <TabHeader
+          id={1}
+          ref={this.cellHeader2}
+          onChangeTab={this.onChangeTab}
+          label={headerTo || 'return'}
+          activeTab={false}
+          date=""
+        />
+      </View>
+    ) : (
+      <View
+        style={[
+          styles.viewPanel,
+          {backgroundColor: theme.colors.background.default},
+        ]}>
+        <TabHeader
+          id={0}
+          disabled
+          ref={this.cellHeaderSingle}
+          label={headerFrom || 'depart'}
+          activeTab
+          date={this.selectedDate}
+        />
+      </View>
+    );
+  };
+
+  setDateRange = (
+    dateRange: {
+      startDate: moment.Moment | undefined;
+      endDate: moment.Moment | undefined;
+    },
+    isScrollToStartDate: any
+  ) => {
+    const {mode, doubleDate = {}} = this.props;
+    if (mode === 'doubleDate') {
+      this.cellHeader1?.current?.updateView(
+        dateRange.startDate,
+        this.tabSelected === 0
+      );
+      this.cellHeader2?.current?.updateView(
+        dateRange.endDate,
+        this.tabSelected === 1
+      );
+      this.calendarPicker?.current?.setDateRange(
+        dateRange,
+        isScrollToStartDate
+      );
+      this.doubleDate = doubleDate
+        ? {
+            first: dateRange.startDate ? moment(dateRange.startDate) : null,
+            second: dateRange.endDate ? moment(dateRange.endDate) : null,
+          }
+        : {};
+    }
+  };
+
+  onLayout = (e: LayoutChangeEvent) => {
+    this.setState({containerWidth: e.nativeEvent.layout.width});
+  };
+
+  render() {
+    const currentDate = new Date();
+    const minDateDefault = new Date(currentDate);
+    const maxDateDefault = new Date(currentDate);
+    minDateDefault.setFullYear(minDateDefault.getFullYear() - 1);
+    maxDateDefault.setFullYear(maxDateDefault.getFullYear() + 1);
+
+    const {
+      isOffLunar,
+      isHideHoliday,
+      isShowLunar,
+      onCallbackCalendar,
+      priceList,
+      labelFrom,
+      labelTo,
+      isHideLabel,
+      minDate = minDateDefault,
+      maxDate = maxDateDefault,
+      doubleDate,
+      style,
+      disabledDays = [],
+      hideHeaderTab = false,
+    } = this.props;
+    const {isDoubleDateMode, containerWidth} = this.state;
+    const {theme} = this.context;
+    return (
+      <ContainerContext.Provider
+        value={{
+          width: containerWidth,
+          height: priceList ? scaleSize(48) : scaleSize(34),
+        }}>
+        <View onLayout={this.onLayout} style={[style, styles.scrollView]}>
+          <View
+            style={[
+              {
+                backgroundColor: theme.colors.background.surface,
+                borderRadius: Radius.XS,
+                marginBottom: Spacing.S,
+              },
+              hideHeaderTab && styles.invisible,
+            ]}>
+            {this.renderSwitchReturnSelection()}
+            {this.renderHeaderPanel(theme)}
+          </View>
+          <CalendarPro
+            priceList={priceList}
+            ref={this.calendarPicker}
+            startDate={doubleDate?.first}
+            endDate={doubleDate?.second}
+            onDateChange={this.onDateChange}
+            isDoubleDateMode={isDoubleDateMode}
+            selectedDate={this.selectedDate}
+            isShowLunar={isShowLunar}
+            onCallbackCalendar={onCallbackCalendar}
+            labelFrom={labelFrom}
+            labelTo={labelTo}
+            isHideLabel={isHideLabel}
+            minDate={minDate}
+            maxDate={maxDate}
+            isHideHoliday={isHideHoliday}
+            isOffLunar={isOffLunar}
+            disabledDays={disabledDays}
+          />
+        </View>
+      </ContainerContext.Provider>
+    );
+  }
+}
+
+export {Calendar};

package/package.json

@@ -1,18 +1,19 @@
 {
-  "name": "@momo-kits/calendar",
-  "version": "0.0.48-rc.2",
-  "private": false,
-  "main": "index.js",
-  "dependencies": {
-    "@momo-kits/date-picker": "latest",
-    "moment": "^2.24.0"
-  },
-  "peerDependencies": {
-    "react": "16.9.0",
-    "react-native": ">=0.55",
-    "prop-types": "^15.7.2",
-    "@momo-kits/core": ">=0.0.5-beta"
-  },
-  "devDependencies": {},
-  "license": "MoMo"
-}
+    "name": "@momo-kits/calendar",
+    "version": "0.0.48",
+    "private": false,
+    "main": "index.tsx",
+    "peerDependencies": {
+        "@momo-kits/foundation": "latest",
+        "react": "16.9.0",
+        "react-native": ">=0.55",
+        "prop-types": "^15.7.2"
+    },
+    "devDependencies": {
+        "@momo-platform/versions": "4.1.11"
+    },
+    "license": "MoMo",
+    "dependencies": {
+        "moment": "^2.24.0"
+    }
+}

package/publish.sh

@@ -1,29 +1,23 @@
 #!/bin/bash
+
+# Prepare dist files
 rm -rf dist
 mkdir dist
-
-cp . ./dist
-
-# GET VERSION from mck_package.json
-VERSIONSTRING=( v$(jq .version package.json) )
-VERSION=(${VERSIONSTRING//[\"]/})
-echo VERSION: $VERSION
-
-rsync -r --verbose --exclude '*.mdx' --exclude '*Demo.js'  --exclude 'props-type.js' --exclude 'prop-types.js' ./* dist
-
-# #babel component to dist
-#babel ./dist -d dist --copy-files
-
-#copy option
-#cp -r ./src/ dist
-
-
-#npm login
-#publish dist to npm
+rsync -r --exclude=/dist ./* dist
 cd dist
-npm publish --tag beta --access=public
+
+if [ "$1" == "beta" ]; then  # Publish beta
+  npm version $(npm view @momo-kits/calendar@beta version)
+  npm version prepatch --preid=beta
+  npm publish --tag beta --access=public
+else                        # Publish latest
+  npm version $(npm view @momo-kits/calendar version)
+  npm version patch
+  npm publish --tag latest --access=public
+fi
+PACKAGE_NAME=$(npm pkg get name)
+NEW_PACKAGE_VERSION=$(npm pkg get version)
+
+# Clean up
 cd ..
 rm -rf dist
-
-
-#curl -X POST -H 'Content-Type: application/json' 'https://chat.googleapis.com/v1/spaces/AAAAbP8987c/messages?key=AIzaSyDdI0hCZtE6vySjMm-WEfRq3CPzqKqqsHI&token=UGSFRvk_oYb9uGsAgs31bVvMm6jDkmD8zihGm3eyaQA%3D&threadKey=JoaXTEYaNNkl' -d '{"text": "@momo-kits/calendar new version release: '*"$VERSION"*' https://www.npmjs.com/package/@momo-kits/calendar"}'