@momo-kits/calendar 0.73.3-beta.5 → 0.74.2-react-native.2

package/TabHeader.tsx

@@ -0,0 +1,90 @@
+import React 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';
+
+export default class TabHeader extends React.Component<
+  TabHeaderProps,
+  TabHeaderState
+> {
+  label;
+  defaultDate: Moment.Moment;
+
+  static contextType = ApplicationContext;
+  constructor(props: TabHeaderProps) {
+    super(props);
+    this.state = {
+      active: props.activeTab,
+    };
+    this.label = props.label;
+    this.defaultDate = props.date ? Moment(props.date) : Moment();
+  }
+
+  onChangeTab = () => {
+    const {onChangeTab, id} = this.props;
+    onChangeTab?.(id);
+  };
+
+  updateView = (date?: Moment.Moment | Date | null, activeTab?: boolean) => {
+    this.setState({
+      date: date ? Moment(date) : Moment(),
+      active: activeTab,
+    });
+  };
+
+  setActiveTab = (active: boolean) => {
+    this.setState({active});
+  };
+
+  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>
+    );
+  }
+}

package/{src/Util.js → Util.ts}

@@ -1,6 +1,4 @@
 import moment from 'moment';
-
-import {SwitchLanguage} from '@momo-kits/core';
 import LunarDateConverter from './LunarDateConverter';
 import holiday from './holidayData';
 
@@ -49,20 +47,20 @@ const I18N_MAP = {
   },
 };
 
-const Solar = momentDate => ({
+const Solar = (momentDate: moment.Moment) => ({
   solarDay: momentDate.date(),
   solarMonth: momentDate.month() + 1,
   solarYear: momentDate.year(),
 });
 
-const formatYYYYMMDD = (dd, mm, yyyy) =>
+const formatYYYYMMDD = (dd: number, mm: number, yyyy: any) =>
   `${yyyy}-${mm < 10 ? `0${mm}` : mm}-${dd < 10 ? `0${dd}` : dd}`;
 
-const formatDDMM = (dd, mm) =>
+const formatDDMM = (dd: number, mm: number) =>
   `${dd < 10 ? `0${dd}` : dd}/${mm < 10 ? `0${mm}` : mm}`;
 
-const groupHolidaysByDate = holidays => {
-  const groupedHolidays = {};
+const groupHolidaysByDate = (holidays: any[]) => {
+  const groupedHolidays: {[key: string]: string[]} = {};
   if (holidays && holidays.length > 0) {
     holidays.forEach(item => {
       const {day, month, lunar, label} = item;
@@ -92,7 +90,7 @@ const groupHolidaysByDate = holidays => {
   return groupedHolidays;
 };
 
-const sortByDate = arr => {
+const sortByDate = (arr: any[]) => {
   if (arr && arr.length > 1) {
     arr.sort((a, b) => {
       if (a.month > b.month || (a.month === b.month && a.day > b.day)) {
@@ -105,18 +103,10 @@ const sortByDate = arr => {
   return groupHolidaysByDate(arr);
 };
 
-module.exports = {
+const Utils = {
   WEEKDAYS: ['T2', 'T3', 'T4', 'T5', 'T6', 'T7', 'CN'],
 
-  WEEKDAYSFROMMOMENT: [
-    SwitchLanguage.sun,
-    SwitchLanguage.mon,
-    SwitchLanguage.tue,
-    SwitchLanguage.wed,
-    SwitchLanguage.thu,
-    SwitchLanguage.fri,
-    SwitchLanguage.sat,
-  ],
+  WEEKDAYSFROMMOMENT: ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'],
 
   WEEKDAYSNAME: [
     'Thứ 2',
@@ -147,39 +137,30 @@ module.exports = {
 
   MAX_COLUMNS: 7,
 
-  mapWeeKDate(i) {
-    const date = [
-      '',
-      SwitchLanguage.mon,
-      SwitchLanguage.tue,
-      SwitchLanguage.wed,
-      SwitchLanguage.thu,
-      SwitchLanguage.fri,
-      SwitchLanguage.sat,
-      SwitchLanguage.sun,
-    ];
+  mapWeeKDate(i: number) {
+    const date = ['', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'];
     return date[i];
   },
 
-  mapMonth(i) {
+  mapMonth(i: number) {
     const month = new Map([
-      [1, SwitchLanguage.jan],
-      [2, SwitchLanguage.feb],
-      [3, SwitchLanguage.mar],
-      [4, SwitchLanguage.apr],
-      [5, SwitchLanguage.may],
-      [6, SwitchLanguage.jun],
-      [7, SwitchLanguage.jul],
-      [8, SwitchLanguage.aug],
-      [9, SwitchLanguage.sep],
-      [10, SwitchLanguage.oct],
-      [11, SwitchLanguage.nov],
-      [12, SwitchLanguage.dec],
+      [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);
   },
 
-  mapMonthShorten(i) {
+  mapMonthShorten(i: number) {
     const month = new Map([
       [1, 'Jan'],
       [2, 'Feb'],
@@ -197,40 +178,45 @@ module.exports = {
     return month.get(i);
   },
 
-  getDaysInMonth(month, year) {
+  getDaysInMonth(month: number, year: number) {
     const lastDayOfMonth = new Date(year, month + 1, 0);
     return lastDayOfMonth.getDate();
   },
 
-  getHolidaysInMonth(headerInfo) {
+  getHolidaysInMonth(headerInfo: moment.Moment) {
     if (headerInfo) {
       const today = moment();
+      // @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 = [];
+      const holidays: any[] = [];
       const currentYear =
         minLunarDate.lunarYear !== maxLunarDate.lunarYear
           ? [minLunarDate.lunarYear, maxLunarDate.lunarYear]
           : minLunarDate.lunarYear;
 
       // Handle Solar holidays
+      // @ts-ignore
       if (holiday.solar[headerInfo.month() + 1]) {
-        holiday.solar[headerInfo.month() + 1].forEach(date => {
-          const dateAsMoment = moment({
-            year: headerInfo.year(),
-            month: date.month - 1,
-            date: date.day,
-          });
-          if (dateAsMoment.isSameOrAfter(today, 'date')) {
-            holidays.push(date);
-          }
-        });
+        // @ts-ignore
+        holiday.solar[headerInfo.month() + 1].forEach(
+          (date: {month: number; day: any}) => {
+            const dateAsMoment = moment({
+              year: headerInfo.year(),
+              month: date.month - 1,
+              date: date.day,
+            });
+            if (dateAsMoment.isSameOrAfter(today, 'date')) {
+              holidays.push(date);
+            }
+          },
+        );
       }
 
-      holiday.lunar.forEach(item => {
+      holiday.lunar.forEach((item: {lunarDay: any; lunarMonth: any}) => {
         if (currentYear instanceof Array) {
           const solar1 = converter.LunarToSolar({
             lunarDay: item.lunarDay,
@@ -303,3 +289,5 @@ module.exports = {
   },
   I18N_MAP,
 };
+
+export default Utils;

package/{src/holidayData.js → holidayData.ts}

@@ -1,80 +1,78 @@
-import {SwitchLanguage} from '@momo-kits/core-v2';
-
-module.exports = {
+const holidayData = {
   solar: {
     1: [
       {
         day: 1,
         month: 1,
-        label: SwitchLanguage.newYear,
+        label: 'newYear',
       },
     ],
     2: [
       {
         day: 14,
         month: 2,
-        label: SwitchLanguage.valentine,
+        label: 'valentine',
       },
     ],
     3: [
       {
         day: 8,
         month: 3,
-        label: SwitchLanguage.womenDay,
+        label: 'womenDay',
       },
     ],
     4: [
       {
         day: 30,
         month: 4,
-        label: SwitchLanguage.liberationDay,
+        label: 'liberationDay',
       },
     ],
     5: [
       {
         day: 1,
         month: 5,
-        label: SwitchLanguage.laborDay,
+        label: 'laborDay',
       },
     ],
     6: [
       {
         day: 1,
         month: 6,
-        label: SwitchLanguage.childrenDay,
+        label: 'childrenDay',
       },
     ],
     9: [
       {
         day: 2,
         month: 9,
-        label: SwitchLanguage.nationalDay,
+        label: 'nationalDay',
       },
     ],
     10: [
       {
         day: 20,
         month: 10,
-        label: SwitchLanguage.womenDayVN,
+        label: 'womenDayVN',
       },
     ],
     11: [
       {
         day: 20,
         month: 11,
-        label: SwitchLanguage.teacherDay,
+        label: 'teacherDay',
       },
     ],
     12: [
       {
         day: 24,
         month: 12,
-        label: SwitchLanguage.christmasEve,
+        label: 'christmasEve',
       },
       {
         day: 25,
         month: 12,
-        label: SwitchLanguage.christmas,
+        label: 'christmas',
       },
     ],
   },
@@ -83,43 +81,45 @@ module.exports = {
       lunarDay: 30,
       lunarMonth: 12,
       lunar: true,
-      label: SwitchLanguage.lunarNewYear,
+      label: 'lunarNewYear',
       highlight: '(30/12)',
     },
     {
       lunarDay: 1,
       lunarMonth: 1,
       lunar: true,
-      label: SwitchLanguage.lunarNewYear,
+      label: 'lunarNewYear',
       highlight: '(1/1)',
     },
     {
       lunarDay: 2,
       lunarMonth: 1,
       lunar: true,
-      label: SwitchLanguage.lunarNewYear,
+      label: 'lunarNewYear',
       highlight: '(2/1)',
     },
     {
       lunarDay: 3,
       lunarMonth: 1,
       lunar: true,
-      label: SwitchLanguage.lunarNewYear,
+      label: 'lunarNewYear',
       highlight: '(3/1)',
     },
     {
       lunarDay: 4,
       lunarMonth: 1,
       lunar: true,
-      label: SwitchLanguage.lunarNewYear,
+      label: 'lunarNewYear',
       highlight: '(4/1)',
     },
     {
       lunarDay: 10,
       lunarMonth: 3,
       lunar: true,
-      label: SwitchLanguage.hungKingDay,
+      label: 'hungKingDay',
       highlight: '(10/3)',
     },
   ],
 };
+
+export default holidayData;