fix: use moment instead of dayjs

howljs · Jan 13, 2023 · 3100c56 · 3100c56
1 parent 1b273a8
commit 3100c56
Show file tree

Hide file tree

Showing 17 changed files with 75 additions and 229 deletions.
diff --git a/package.json b/package.json
@@ -162,7 +162,7 @@
     ]
   },
   "dependencies": {
-    "dayjs": "^1.11.6",
+    "moment-timezone": "^0.5.40",
     "lodash": "^4.17.21"
   }
 }
diff --git a/src/TimelineCalendar.tsx b/src/TimelineCalendar.tsx
@@ -1,14 +1,8 @@
-import dayjs from 'dayjs';
-import customParseFormat from 'dayjs/plugin/customParseFormat';
-import weekDay from 'dayjs/plugin/weekday';
 import React, { forwardRef } from 'react';
 import { Timeline } from './components';
 import TimelineProvider from './context/TimelineProvider';
 import type { TimelineCalendarHandle, TimelineCalendarProps } from './types';
 
-dayjs.extend(weekDay);
-dayjs.extend(customParseFormat);
-
 const TimelineCalendar: React.ForwardRefRenderFunction<
   TimelineCalendarHandle,
   TimelineCalendarProps

diff --git a/src/__tests__/utils.spec.ts b/src/__tests__/utils.spec.ts
@@ -1,10 +1,5 @@
-import dayjs from 'dayjs';
-import isoWeek from 'dayjs/plugin/isoWeek';
-import weekday from 'dayjs/plugin/weekday';
 import { calculateDates, calculateHours, groupEventsByDate } from '../utils';
 import { expectHourData, sampleData } from '../__mocks__/data';
-dayjs.extend(weekday);
-dayjs.extend(isoWeek);
 
 describe('get date data', () => {
   it('2022-10-01 -> 2022-10-31', () => {

diff --git a/src/components/Timeline/DragCreateItem.tsx b/src/components/Timeline/DragCreateItem.tsx
@@ -1,4 +1,4 @@
-import dayjs from 'dayjs';
+import moment from 'moment-timezone';
 import React, { useState } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import Animated, {
@@ -87,7 +87,7 @@ const AnimatedHour = ({
   ) => {
     let newTime = `${hourStr}:${minutesStr}`;
     if (hourFormat) {
-      newTime = dayjs(
+      newTime = moment(
         `1970/1/1 ${hourStr}:${minutesStr}`,
         'YYYY/M/D HH:mm'
       ).format(hourFormat);

diff --git a/src/components/Timeline/DragEditItem.tsx b/src/components/Timeline/DragEditItem.tsx
@@ -1,4 +1,4 @@
-import dayjs from 'dayjs';
+import moment from 'moment-timezone';
 import React, { memo, useEffect, useRef, useState } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
@@ -164,10 +164,10 @@ const DragEditItem = ({
     const newLeftPosition = event.leftByIndex! + translateX.value;
     const dayIndex = Math.round(newLeftPosition / columnWidth);
     const startDate = pages[viewMode].data[currentIndex.value];
-    const currentDateMoment = dayjs(startDate)
+    const currentDateMoment = moment
+      .tz(startDate, tzOffset)
       .add(dayIndex, 'd')
-      .add(currentHour.value, 'h')
-      .tz(tzOffset);
+      .add(currentHour.value, 'h');
 
     const newEvent = {
       ...selectedEvent,
@@ -386,7 +386,7 @@ const AnimatedHour = ({
   ) => {
     let newTime = `${hourStr}:${minutesStr}`;
     if (hourFormat) {
-      newTime = dayjs(
+      newTime = moment(
         `1970/1/1 ${hourStr}:${minutesStr}`,
         'YYYY/M/D HH:mm'
       ).format(hourFormat);

diff --git a/src/components/Timeline/NowIndicator.tsx b/src/components/Timeline/NowIndicator.tsx
@@ -1,4 +1,4 @@
-import dayjs from 'dayjs';
+import moment from 'moment-timezone';
 import React, { memo, useCallback, useEffect, useRef } from 'react';
 import { StyleSheet, View } from 'react-native';
 import Animated, {
@@ -21,7 +21,7 @@ interface NowIndicatorProps {
 }
 
 const getCurrentMinutes = (tzOffset: string) => {
-  const now = dayjs().tz(tzOffset);
+  const now = moment.tz(tzOffset);
   const date = now.format('YYYY-MM-DD');
   const minutes = now.hour() * 60 + now.minute();
   return { date, minutes };

diff --git a/src/components/Timeline/TimelineBoard/index.tsx b/src/components/Timeline/TimelineBoard/index.tsx
@@ -1,5 +1,5 @@
-import dayjs from 'dayjs';
 import times from 'lodash/times';
+import moment from 'moment-timezone';
 import React, { memo, useMemo } from 'react';
 import {
   GestureResponderEvent,
@@ -62,9 +62,9 @@ const TimelineBoard = ({
     );
   };
 
-  const minDayUnix = useMemo(() => dayjs(minDate).unix(), [minDate]);
-  const maxDayUnix = useMemo(() => dayjs(maxDate).unix(), [maxDate]);
-  const startDayUnix = useMemo(() => dayjs(startDate).unix(), [startDate]);
+  const minDayUnix = useMemo(() => moment(minDate).unix(), [minDate]);
+  const maxDayUnix = useMemo(() => moment(maxDate).unix(), [maxDate]);
+  const startDayUnix = useMemo(() => moment(startDate).unix(), [startDate]);
 
   const _renderVerticalBlock = (dayIndex: number) => {
     if (!unavailableHours && !holidays) {
@@ -79,7 +79,7 @@ const TimelineBoard = ({
       if (Array.isArray(unavailableHours)) {
         unavailableHour = unavailableHours;
       } else {
-        const current = dayjs.unix(currentUnix);
+        const current = moment.unix(currentUnix);
         const currentDateStr = current.format('YYYY-MM-DD');
         const currentWeekDay = current.day();
         unavailableHour =
@@ -90,7 +90,7 @@ const TimelineBoard = ({
 
     let isDayDisabled = false;
     if (holidays?.length) {
-      const dateStr = dayjs.unix(currentUnix).format('YYYY-MM-DD');
+      const dateStr = moment.unix(currentUnix).format('YYYY-MM-DD');
       isDayDisabled = holidays.includes(dateStr);
     }
 

diff --git a/src/components/Timeline/TimelineHeader/MultipleDayBar.tsx b/src/components/Timeline/TimelineHeader/MultipleDayBar.tsx
@@ -1,5 +1,5 @@
-import dayjs from 'dayjs';
 import times from 'lodash/times';
+import moment from 'moment-timezone';
 import React from 'react';
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import { COLUMNS, DEFAULT_PROPS } from '../../../constants';
@@ -18,7 +18,7 @@ const MultipleDayBar = ({
   currentDate,
 }: DayBarItemProps) => {
   const _renderDay = (dayIndex: number) => {
-    const dateByIndex = dayjs(startDate).add(dayIndex, 'd');
+    const dateByIndex = moment(startDate).add(dayIndex, 'd');
     const dateStr = dateByIndex.format('YYYY-MM-DD');
     const [dayNameText, dayNum] = dateByIndex
       .locale(locale)

diff --git a/src/components/Timeline/TimelineHeader/SingleDayBar.tsx b/src/components/Timeline/TimelineHeader/SingleDayBar.tsx
@@ -1,4 +1,4 @@
-import dayjs from 'dayjs';
+import moment from 'moment-timezone';
 import React from 'react';
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import { DEFAULT_PROPS } from '../../../constants';
@@ -15,7 +15,7 @@ const SingleDayBar = ({
   currentDate,
 }: DayBarItemProps) => {
   const _renderDay = () => {
-    const dateByIndex = dayjs(startDate);
+    const dateByIndex = moment(startDate);
     const dateStr = dateByIndex.format('YYYY-MM-DD');
     const [dayNameText, dayNum] = dateByIndex
       .locale(locale)

diff --git a/src/components/Timeline/TimelinePage.tsx b/src/components/Timeline/TimelinePage.tsx
@@ -1,5 +1,5 @@
-import dayjs from 'dayjs';
 import times from 'lodash/times';
+import moment from 'moment-timezone';
 import React, { useMemo } from 'react';
 import {
   GestureResponderEvent,
@@ -159,7 +159,7 @@ const TimelinePage = ({
   };
 
   const _renderTimelineColumn = (dayIndex: number) => {
-    const dateByColumn = dayjs(startDate).add(dayIndex, 'd');
+    const dateByColumn = moment(startDate).add(dayIndex, 'd');
     const dateStr = dateByColumn.format('YYYY-MM-DD');
     const isToday = dateStr === currentDate;
 

diff --git a/src/components/Timeline/index.tsx b/src/components/Timeline/index.tsx
@@ -1,4 +1,4 @@
-import dayjs from 'dayjs';
+import moment from 'moment-timezone';
 import React, {
   forwardRef,
   useEffect,
@@ -22,7 +22,7 @@ import {
   withTiming,
 } from 'react-native-reanimated';
 import { timeZoneData } from '../../assets/timeZone';
-import { COLUMNS, DEFAULT_PROPS, LOCALES } from '../../constants';
+import { COLUMNS, DEFAULT_PROPS } from '../../constants';
 import { useTimelineCalendarContext } from '../../context/TimelineProvider';
 import useDragCreateGesture from '../../hooks/useDragCreateGesture';
 import useZoomGesture from '../../hooks/usePinchGesture';
@@ -90,8 +90,8 @@ const Timeline: React.ForwardRefRenderFunction<
       }) => {
         const numOfDays =
           viewMode === 'workWeek' ? COLUMNS.week : COLUMNS[viewMode];
-        const currentDay = dayjs(props?.date).tz(tzOffset);
-        const firstDateMoment = dayjs(firstDate.current[viewMode]);
+        const currentDay = moment(props?.date).tz(tzOffset);
+        const firstDateMoment = moment(firstDate.current[viewMode]);
         const diffDays = currentDay.startOf('D').diff(firstDateMoment, 'd');
         const pageIndex = Math.floor(diffDays / numOfDays);
         if (pageIndex < 0 || pageIndex > totalPages[viewMode] - 1) {
@@ -160,15 +160,12 @@ const Timeline: React.ForwardRefRenderFunction<
   );
 
   useEffect(() => {
-    const localeFn = LOCALES[locale];
-    if (localeFn) {
-      localeFn().then(() => dayjs.locale(locale));
-    }
+    moment.locale(locale);
   }, [locale]);
 
   useEffect(() => {
     requestAnimationFrame(() => {
-      const current = dayjs().tz(tzOffset);
+      const current = moment().tz(tzOffset);
       const isSameDate = current.format('YYYY-MM-DD') === initialDate.current;
       if (scrollToNow && isSameDate) {
         const minutes = current.hour() * 60 + current.minute();

diff --git a/src/constants.ts b/src/constants.ts
@@ -1,4 +1,4 @@
-import dayjs from 'dayjs';
+import moment from 'moment-timezone';
 import { Dimensions } from 'react-native';
 
 export const SCREEN_WIDTH = Dimensions.get('window').width;
@@ -7,9 +7,9 @@ export const SCREEN_HEIGHT = Dimensions.get('window').height;
 export const DEFAULT_PROPS = {
   VIEW_MODE: 'week' as const,
   FIRST_DAY: 1,
-  MIN_DATE: dayjs().subtract(1, 'y').format('YYYY-MM-DD'),
-  MAX_DATE: dayjs().add(1, 'y').format('YYYY-MM-DD'),
-  INITIAL_DATE: dayjs().format('YYYY-MM-DD'),
+  MIN_DATE: moment().subtract(1, 'y').format('YYYY-MM-DD'),
+  MAX_DATE: moment().add(1, 'y').format('YYYY-MM-DD'),
+  INITIAL_DATE: moment().format('YYYY-MM-DD'),
   START: 0,
   END: 24,
   TIME_INTERVAL: 60,
@@ -39,149 +39,3 @@ export const DEFAULT_PROPS = {
 export const COLUMNS = { week: 7, threeDays: 3, workWeek: 5, day: 1 };
 
 export const SECONDS_IN_DAY = 86400;
-
-export const LOCALES = {
-  'af': () => import('dayjs/locale/af'),
-  'am': () => import('dayjs/locale/am'),
-  'ar-dz': () => import('dayjs/locale/ar-dz'),
-  'ar-iq': () => import('dayjs/locale/ar-iq'),
-  'ar-kw': () => import('dayjs/locale/ar-kw'),
-  'ar-ly': () => import('dayjs/locale/ar-ly'),
-  'ar-ma': () => import('dayjs/locale/ar-ma'),
-  'ar-sa': () => import('dayjs/locale/ar-sa'),
-  'ar-tn': () => import('dayjs/locale/ar-tn'),
-  'ar': () => import('dayjs/locale/ar'),
-  'az': () => import('dayjs/locale/az'),
-  'be': () => import('dayjs/locale/be'),
-  'bg': () => import('dayjs/locale/bg'),
-  'bi': () => import('dayjs/locale/bi'),
-  'bm': () => import('dayjs/locale/bm'),
-  'bn-bd': () => import('dayjs/locale/bn-bd'),
-  'bn': () => import('dayjs/locale/bn'),
-  'bo': () => import('dayjs/locale/bo'),
-  'br': () => import('dayjs/locale/br'),
-  'bs': () => import('dayjs/locale/bs'),
-  'ca': () => import('dayjs/locale/ca'),
-  'cs': () => import('dayjs/locale/cs'),
-  'cv': () => import('dayjs/locale/cv'),
-  'cy': () => import('dayjs/locale/cy'),
-  'da': () => import('dayjs/locale/da'),
-  'de-at': () => import('dayjs/locale/de-at'),
-  'de-ch': () => import('dayjs/locale/de-ch'),
-  'de': () => import('dayjs/locale/de'),
-  'dv': () => import('dayjs/locale/dv'),
-  'el': () => import('dayjs/locale/el'),
-  'en-au': () => import('dayjs/locale/en-au'),
-  'en-ca': () => import('dayjs/locale/en-ca'),
-  'en-gb': () => import('dayjs/locale/en-gb'),
-  'en-ie': () => import('dayjs/locale/en-ie'),
-  'en-il': () => import('dayjs/locale/en-il'),
-  'en-in': () => import('dayjs/locale/en-in'),
-  'en-nz': () => import('dayjs/locale/en-nz'),
-  'en-sg': () => import('dayjs/locale/en-sg'),
-  'en-tt': () => import('dayjs/locale/en-tt'),
-  'en': () => import('dayjs/locale/en'),
-  'eo': () => import('dayjs/locale/eo'),
-  'es-do': () => import('dayjs/locale/es-do'),
-  'es-pr': () => import('dayjs/locale/es-pr'),
-  'es': () => import('dayjs/locale/es'),
-  'et': () => import('dayjs/locale/et'),
-  'eu': () => import('dayjs/locale/eu'),
-  'fa': () => import('dayjs/locale/fa'),
-  'fi': () => import('dayjs/locale/fi'),
-  'fo': () => import('dayjs/locale/fo'),
-  'fr-ca': () => import('dayjs/locale/fr-ca'),
-  'fr-ch': () => import('dayjs/locale/fr-ch'),
-  'fr': () => import('dayjs/locale/fr'),
-  'fy': () => import('dayjs/locale/fy'),
-  'ga': () => import('dayjs/locale/ga'),
-  'gd': () => import('dayjs/locale/gd'),
-  'gl': () => import('dayjs/locale/gl'),
-  'gom-latn': () => import('dayjs/locale/gom-latn'),
-  'gu': () => import('dayjs/locale/gu'),
-  'he': () => import('dayjs/locale/he'),
-  'hi': () => import('dayjs/locale/hi'),
-  'hr': () => import('dayjs/locale/hr'),
-  'ht': () => import('dayjs/locale/ht'),
-  'hu': () => import('dayjs/locale/hu'),
-  'hy-am': () => import('dayjs/locale/hy-am'),
-  'id': () => import('dayjs/locale/id'),
-  'it-ch': () => import('dayjs/locale/it-ch'),
-  'is': () => import('dayjs/locale/is'),
-  'it': () => import('dayjs/locale/it'),
-  'ja': () => import('dayjs/locale/ja'),
-  'jv': () => import('dayjs/locale/jv'),
-  'ka': () => import('dayjs/locale/ka'),
-  'kk': () => import('dayjs/locale/kk'),
-  'km': () => import('dayjs/locale/km'),
-  'kn': () => import('dayjs/locale/kn'),
-  'ko': () => import('dayjs/locale/ko'),
-  'ku': () => import('dayjs/locale/ku'),
-  'ky': () => import('dayjs/locale/ky'),
-  'lb': () => import('dayjs/locale/lb'),
-  'lo': () => import('dayjs/locale/lo'),
-  'lt': () => import('dayjs/locale/lt'),
-  'lv': () => import('dayjs/locale/lv'),
-  'mi': () => import('dayjs/locale/mi'),
-  'me': () => import('dayjs/locale/me'),
-  'mk': () => import('dayjs/locale/mk'),
-  'ml': () => import('dayjs/locale/ml'),
-  'mn': () => import('dayjs/locale/mn'),
-  'mr': () => import('dayjs/locale/mr'),
-  'ms-my': () => import('dayjs/locale/ms-my'),
-  'ms': () => import('dayjs/locale/ms'),
-  'mt': () => import('dayjs/locale/mt'),
-  'my': () => import('dayjs/locale/my'),
-  'nb': () => import('dayjs/locale/nb'),
-  'ne': () => import('dayjs/locale/ne'),
-  'nl-be': () => import('dayjs/locale/nl-be'),
-  'nl': () => import('dayjs/locale/nl'),
-  'nn': () => import('dayjs/locale/nn'),
-  'oc-lnc': () => import('dayjs/locale/oc-lnc'),
-  'pa-in': () => import('dayjs/locale/pa-in'),
-  'pl': () => import('dayjs/locale/pl'),
-  'pt-br': () => import('dayjs/locale/pt-br'),
-  'rn': () => import('dayjs/locale/rn'),
-  'pt': () => import('dayjs/locale/pt'),
-  'ro': () => import('dayjs/locale/ro'),
-  'ru': () => import('dayjs/locale/ru'),
-  'rw': () => import('dayjs/locale/rw'),
-  'sd': () => import('dayjs/locale/sd'),
-  'si': () => import('dayjs/locale/si'),
-  'sk': () => import('dayjs/locale/sk'),
-  'sl': () => import('dayjs/locale/sl'),
-  'sq': () => import('dayjs/locale/sq'),
-  'sr-cyrl': () => import('dayjs/locale/sr-cyrl'),
-  'sr': () => import('dayjs/locale/sr'),
-  'ss': () => import('dayjs/locale/ss'),
-  'sv-fi': () => import('dayjs/locale/sv-fi'),
-  'sv': () => import('dayjs/locale/sv'),
-  'sw': () => import('dayjs/locale/sw'),
-  'ta': () => import('dayjs/locale/ta'),
-  'te': () => import('dayjs/locale/te'),
-  'tet': () => import('dayjs/locale/tet'),
-  'tg': () => import('dayjs/locale/tg'),
-  'th': () => import('dayjs/locale/th'),
-  'tk': () => import('dayjs/locale/tk'),
-  'tl-ph': () => import('dayjs/locale/tl-ph'),
-  'tlh': () => import('dayjs/locale/tlh'),
-  'tr': () => import('dayjs/locale/tr'),
-  'tzl': () => import('dayjs/locale/tzl'),
-  'tzm-latn': () => import('dayjs/locale/tzm-latn'),
-  'tzm': () => import('dayjs/locale/tzm'),
-  'ug-cn': () => import('dayjs/locale/ug-cn'),
-  'uk': () => import('dayjs/locale/uk'),
-  'ur': () => import('dayjs/locale/ur'),
-  'uz-latn': () => import('dayjs/locale/uz-latn'),
-  'uz': () => import('dayjs/locale/uz'),
-  'vi': () => import('dayjs/locale/vi'),
-  'x-pseudo': () => import('dayjs/locale/x-pseudo'),
-  'yo': () => import('dayjs/locale/yo'),
-  'zh-cn': () => import('dayjs/locale/zh-cn'),
-  'zh-hk': () => import('dayjs/locale/zh-hk'),
-  'zh-tw': () => import('dayjs/locale/zh-tw'),
-  'zh': () => import('dayjs/locale/zh'),
-  'es-mx': () => import('dayjs/locale/es-mx'),
-  'es-us': () => import('dayjs/locale/es-us'),
-  'se': () => import('dayjs/locale/se'),
-};