From 538a90dc6fd84d38acb6114274bb845f55599848 Mon Sep 17 00:00:00 2001 From: Frederick Widjaja Date: Sat, 27 Aug 2022 17:04:01 +0700 Subject: [PATCH 1/2] Make moment an optional dependency --- package.json | 2 +- src/components/dateTimePicker/index.tsx | 35 +++++++++++++++-------- src/optionalDependencies/MomentPackage.ts | 6 ++++ src/optionalDependencies/index.ts | 1 + 4 files changed, 31 insertions(+), 13 deletions(-) create mode 100644 src/optionalDependencies/MomentPackage.ts diff --git a/package.json b/package.json index 267f63b51c..cace8bdc24 100644 --- a/package.json +++ b/package.json @@ -42,7 +42,6 @@ "hoist-non-react-statics": "^3.0.0", "lodash": "^4.17.21", "memoize-one": "^5.0.5", - "moment": "^2.24.0", "prop-types": "^15.5.10", "react-freeze": "^1.0.0", "react-native-color": "0.0.10", @@ -95,6 +94,7 @@ "jest": "^26.6.3", "metro-react-native-babel-preset": "^0.67.0", "mocha": "^5.0.0", + "moment": "^2.24.0", "object-hash": "^3.0.0", "prettier-eslint": "12.0.0", "react": "17.0.2", diff --git a/src/components/dateTimePicker/index.tsx b/src/components/dateTimePicker/index.tsx index a4ce1ce049..8a11a568bb 100644 --- a/src/components/dateTimePicker/index.tsx +++ b/src/components/dateTimePicker/index.tsx @@ -1,7 +1,6 @@ -import moment from 'moment'; import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'; import {StyleProp, StyleSheet, ViewStyle} from 'react-native'; -import {DateTimePickerPackage as RNDateTimePicker} from '../../optionalDependencies'; +import {DateTimePickerPackage as RNDateTimePicker, MomentPackage as moment} from '../../optionalDependencies'; import {useDidUpdate} from 'hooks'; import {Colors} from '../../style'; import Assets from '../../assets'; @@ -173,17 +172,29 @@ function DateTimePicker(props: DateTimePickerPropsInternal) { if (value) { switch (mode) { case MODES.DATE: - return dateFormatter - ? dateFormatter(value) - : dateFormat - ? moment(value).format(dateFormat) - : value.toLocaleDateString(); + if (dateFormatter) { + return dateFormatter(value); + } + if (!dateFormat) { + return value.toLocaleDateString(); + } + if (!moment) { + console.error(`RNUILib DateTimePicker component with dateFormat requires installing "moment" dependency`); + return value.toLocaleDateString(); + } + return moment(value).format(dateFormat); case MODES.TIME: - return timeFormatter - ? timeFormatter(value) - : timeFormat - ? moment(value).format(timeFormat) - : value.toLocaleTimeString(); + if (timeFormatter) { + return timeFormatter(value); + } + if (!timeFormat) { + return value.toLocaleTimeString(); + } + if (!moment) { + console.error(`RNUILib DateTimePicker component with timeFormat requires installing "moment" dependency`); + return value.toLocaleTimeString(); + } + return moment(value).format(timeFormat); } } }; diff --git a/src/optionalDependencies/MomentPackage.ts b/src/optionalDependencies/MomentPackage.ts new file mode 100644 index 0000000000..de9c05d077 --- /dev/null +++ b/src/optionalDependencies/MomentPackage.ts @@ -0,0 +1,6 @@ +let MomentPackage: typeof import('moment') | undefined; +try { + MomentPackage = require('moment'); +} catch (error) {} + +export default MomentPackage; diff --git a/src/optionalDependencies/index.ts b/src/optionalDependencies/index.ts index 93bc82b37d..2fc69d7145 100644 --- a/src/optionalDependencies/index.ts +++ b/src/optionalDependencies/index.ts @@ -6,3 +6,4 @@ export {PickerPackage, CommunityPickerPackage} from './PickerPackage'; export {default as SvgPackage} from './SvgPackage'; export {createShimmerPlaceholder} from './ShimmerPackage'; export {default as LinearGradientPackage} from './LinearGradientPackage'; +export {default as MomentPackage} from './MomentPackage'; From fb4cb3dd90a39178b2de4cf1b37ef15aa2ceca2f Mon Sep 17 00:00:00 2001 From: Frederick Widjaja Date: Sun, 4 Sep 2022 16:43:06 +0700 Subject: [PATCH 2/2] Move console error to useEffect --- src/components/dateTimePicker/index.tsx | 38 +++++++++++-------------- 1 file changed, 16 insertions(+), 22 deletions(-) diff --git a/src/components/dateTimePicker/index.tsx b/src/components/dateTimePicker/index.tsx index 8a11a568bb..a3e330bca3 100644 --- a/src/components/dateTimePicker/index.tsx +++ b/src/components/dateTimePicker/index.tsx @@ -146,6 +146,12 @@ function DateTimePicker(props: DateTimePickerPropsInternal) { } }, []); + useEffect(() => { + if (!moment && (dateFormat || timeFormat)) { + console.error(`RNUILib DateTimePicker component with date/time format requires installing "moment" dependency`); + } + }, [dateFormat, timeFormat]); + useDidUpdate(() => { setValue(propsValue); }, [propsValue]); @@ -172,29 +178,17 @@ function DateTimePicker(props: DateTimePickerPropsInternal) { if (value) { switch (mode) { case MODES.DATE: - if (dateFormatter) { - return dateFormatter(value); - } - if (!dateFormat) { - return value.toLocaleDateString(); - } - if (!moment) { - console.error(`RNUILib DateTimePicker component with dateFormat requires installing "moment" dependency`); - return value.toLocaleDateString(); - } - return moment(value).format(dateFormat); + return dateFormatter + ? dateFormatter(value) + : dateFormat && moment + ? moment(value).format(dateFormat) + : value.toLocaleDateString(); case MODES.TIME: - if (timeFormatter) { - return timeFormatter(value); - } - if (!timeFormat) { - return value.toLocaleTimeString(); - } - if (!moment) { - console.error(`RNUILib DateTimePicker component with timeFormat requires installing "moment" dependency`); - return value.toLocaleTimeString(); - } - return moment(value).format(timeFormat); + return timeFormatter + ? timeFormatter(value) + : timeFormat && moment + ? moment(value).format(timeFormat) + : value.toLocaleTimeString(); } } };