chore(exoflex): upgrade datetimepicker package to latest version (#585)

* chore(exoflex): upgrade datetimepicker package to latest version * chore: update datetimepicker package in example
kodefox · Dec 15, 2020 · 6bb0246 · 6bb0246
1 parent ba0463a
commit 6bb0246
Show file tree

Hide file tree

Showing 8 changed files with 41 additions and 46 deletions.
diff --git a/packages/exoflex/example/package.json b/packages/exoflex/example/package.json
@@ -29,7 +29,7 @@
     "@babel/plugin-proposal-object-rest-spread": "7.10.0",
     "@babel/preset-typescript": "7.9.0",
     "@expo/webpack-config": "0.12.45",
-    "@react-native-community/datetimepicker": "3.0.4",
+    "@react-native-community/datetimepicker": "3.0.8",
     "@types/react": "16.9.35",
     "@types/react-native": "0.63.2",
     "babel-plugin-module-resolver": "4.0.0",
@@ -40,7 +40,7 @@
     "react-native-animation-hooks": "1.0.1",
     "react-native-calendars": "https://github.com/oshimayoan/react-native-calendars/archive/oshimayoan-0.0.3.tar.gz",
     "react-native-collapsible": "1.5.3",
-    "react-native-modal-datetime-picker": "8.1.1",
+    "react-native-modal-datetime-picker": "9.1.0",
     "react-native-paper": "3.11.0",
     "typescript": "4.0.5"
   },

diff --git a/packages/exoflex/example/src/examples/DateTimePickerExample.tsx b/packages/exoflex/example/src/examples/DateTimePickerExample.tsx
@@ -144,8 +144,8 @@ function DateTimePickerExample() {
         {textDateTimeWithDifferentTitles}
       </Button>
       <DateTimePicker
-        dateTitle="Select date"
-        timeTitle="Select start time"
+        dateTitleWeb="Select date"
+        timeTitleWeb="Select start time"
         isVisible={isDateTimePickerWithDifferentTitlesVisible}
         date={dateTimeWithDifferentTitles}
         mode="datetime"

diff --git a/packages/exoflex/example/yarn.lock b/packages/exoflex/example/yarn.lock
@@ -2998,10 +2998,10 @@
     sudo-prompt "^9.0.0"
     wcwidth "^1.0.1"
 
-"@react-native-community/[email protected].4":
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/@react-native-community/datetimepicker/-/datetimepicker-3.0.4.tgz#ad3efa90fab78fc3c0710abf3cb06d2976603140"
-  integrity sha512-IsBkemz1XYubH5twfQPC/xleZdILA5SEUaLJ2C86IbnIOctb6suk8tB6uT9VxQkCsw4zjkrlqt9p9LGx9DJ97w==
+"@react-native-community/[email protected].8":
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/@react-native-community/datetimepicker/-/datetimepicker-3.0.8.tgz#3960b39dfeea4a0f11425e24e0852764ed9133ca"
+  integrity sha512-85pOIjRnhrUmyWFH52qGGya1MDwE7vU4fDqt21yY6EyT7TolwQvZknwId8TAmREawsMoCMchke6VFo1IqRaUOA==
   dependencies:
     invariant "^2.2.4"
 
@@ -9830,10 +9830,10 @@ [email protected]:
     invariant "^2.2.4"
     prop-types "^15.7.2"
 
-react-native-modal-datetime-picker@8.1.1:
-  version "8.1.1"
-  resolved "https://registry.yarnpkg.com/react-native-modal-datetime-picker/-/react-native-modal-datetime-picker-8.1.1.tgz#63609aff50c44cf939ab3024f185a13822b46f76"
-  integrity sha512-tZUl/GjuMGSxRNcF84nt7uKoLiyDJztdtTQ9e0dVbDFC0UduZ5bTA5DIzXiCLZCbghZuD6tPLmw5ULPXGiO7Lw==
+react-native-modal-datetime-picker@9.1.0:
+  version "9.1.0"
+  resolved "https://registry.yarnpkg.com/react-native-modal-datetime-picker/-/react-native-modal-datetime-picker-9.1.0.tgz#a1286efa6d9c456e931805fd0687cf9e916af6ed"
+  integrity sha512-KwZEduMvfxp1BMQ2nMOckJCpR5Wiw+GIBazqtWm6zptNTL+iQyeYQeyjIubsMGWh4MkMueActSRWMvHut98h/Q==
   dependencies:
     prop-types "^15.7.2"
 

diff --git a/packages/exoflex/package.json b/packages/exoflex/package.json
@@ -29,15 +29,15 @@
     "react-native-svg": ">=9.3.3"
   },
   "dependencies": {
-    "@react-native-community/datetimepicker": "2.1.0",
+    "@react-native-community/datetimepicker": "3.0.8",
     "color": "^3.1.2",
     "lodash.clamp": "4.0.3",
     "lodash.mergewith": "4.6.2",
     "lodash.tonumber": "4.0.3",
     "react-native-animation-hooks": "^1.0.1",
     "react-native-calendars": "https://github.com/oshimayoan/react-native-calendars/archive/oshimayoan-0.0.3.tar.gz",
     "react-native-collapsible": "^1.5.1",
-    "react-native-modal-datetime-picker": "8.1.1",
+    "react-native-modal-datetime-picker": "9.1.0",
     "react-native-multi-slider": "npm:@ptomasroos/react-native-multi-slider",
     "react-native-paper": "^3.4.0"
   },

diff --git a/packages/exoflex/src/components/DateTimePicker/DateTimePicker.tsx b/packages/exoflex/src/components/DateTimePicker/DateTimePicker.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import RNDateTimePicker from 'react-native-modal-datetime-picker';
+import { StyleSheet } from 'react-native';
 
 import { DateTimePickerProps, DateTimePickerMode } from './types';
 import useTheme from '../../helpers/useTheme';
-import { StyleSheet } from 'react-native';
 
 export default function DateTimePicker(props: DateTimePickerProps) {
   let {
@@ -14,10 +14,8 @@ export default function DateTimePicker(props: DateTimePickerProps) {
     use24Hour = false,
     locale,
     title,
-    cancelButtonContainerStyleIOS,
-    contentContainerStyleIOS,
-    datePickerContainerStyleIOS,
-    titleStyle,
+    modalStyleIOS,
+    pickerContainerStyleIOS,
     ...otherProps
   } = props;
 
@@ -33,22 +31,15 @@ export default function DateTimePicker(props: DateTimePickerProps) {
       onCancel={() => onCancel()}
       onConfirm={(newDate) => onConfirm(newDate.toISOString())}
       headerTextIOS={title}
-      cancelButtonContainerStyleIOS={StyleSheet.flatten([
-        themeStyle?.dateTimePicker?.cancelButtonContainerStyleIOS,
-        cancelButtonContainerStyleIOS,
-      ])}
-      contentContainerStyleIOS={StyleSheet.flatten([
-        themeStyle?.dateTimePicker?.contentContainerStyleIOS,
-        contentContainerStyleIOS,
-      ])}
-      datePickerContainerStyleIOS={StyleSheet.flatten([
-        themeStyle?.dateTimePicker?.datePickerContainerStyleIOS,
-        datePickerContainerStyleIOS,
+      modalStyleIOS={StyleSheet.flatten([
+        themeStyle?.dateTimePicker?.modalStyleIOS,
+        modalStyleIOS,
       ])}
-      titleStyle={StyleSheet.flatten([
-        themeStyle?.dateTimePicker?.titleStyle,
-        titleStyle,
+      pickerContainerStyleIOS={StyleSheet.flatten([
+        themeStyle?.dateTimePicker?.pickerContainerStyleIOS,
+        pickerContainerStyleIOS,
       ])}
+      display="spinner"
       {...otherProps}
     />
   );

diff --git a/packages/exoflex/src/components/DateTimePicker/types.ts b/packages/exoflex/src/components/DateTimePicker/types.ts
@@ -1,11 +1,12 @@
 import { DateTimePickerProps as RNDateTimePickerProps } from 'react-native-modal-datetime-picker';
+import { IOSNativeProps } from '@react-native-community/datetimepicker';
 
 export type DateTimePickerMode = 'date' | 'time' | 'datetime';
 
 export type DateTimePickerProps = Readonly<
   Omit<
     RNDateTimePickerProps,
-    'onCancel' | 'onConfirm' | 'date' | 'mode' | 'is24Hour'
+    'onCancel' | 'onConfirm' | 'date' | 'mode' | 'is24Hour' | 'minuteInterval'
   > & {
     title?: string;
     dateTitleWeb?: string;
@@ -17,5 +18,11 @@ export type DateTimePickerProps = Readonly<
     use24Hour?: boolean;
     onCancel: () => void;
     onConfirm: (date: string) => void;
+    /**
+     * Upstream issues: mismatched typing for minuteInterval
+     * Props from `@react-native-community/datetimepicker` accept enum
+     * while `react-native-modal-datetime-picker` use plain number.
+     */
+    minuteInterval?: IOSNativeProps['minuteInterval'];
   }
 >;
diff --git a/packages/exoflex/src/types.ts b/packages/exoflex/src/types.ts
@@ -77,10 +77,7 @@ export type Theme = {
     >;
     dateTimePicker?: Pick<
       DateTimePickerProps,
-      | 'cancelButtonContainerStyleIOS'
-      | 'contentContainerStyleIOS'
-      | 'datePickerContainerStyleIOS'
-      | 'titleStyle'
+      'pickerContainerStyleIOS' | 'modalStyleIOS'
     >;
     divider?: Pick<DividerProps, 'style'>;
     drawerItem?: Pick<DrawerItemProps, 'labelStyle' | 'style'>;

diff --git a/packages/exoflex/yarn.lock b/packages/exoflex/yarn.lock
@@ -1545,10 +1545,10 @@
     wcwidth "^1.0.1"
     ws "^1.1.0"
 
-"@react-native-community/datetimepicker@2.1.0":
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/@react-native-community/datetimepicker/-/datetimepicker-2.1.0.tgz#4e3413462cbbe5c48fab6cebd422835031cdf7b9"
-  integrity sha512-InktUrx0/4JTy1YsgswljgID7oB3L8wkFobRhnLGWPExSsNHeecGW2/nBP31ZaOPHcjVWhpOQMZt0zDpKfGE/Q==
+"@react-native-community/datetimepicker@3.0.8":
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/@react-native-community/datetimepicker/-/datetimepicker-3.0.8.tgz#3960b39dfeea4a0f11425e24e0852764ed9133ca"
+  integrity sha512-85pOIjRnhrUmyWFH52qGGya1MDwE7vU4fDqt21yY6EyT7TolwQvZknwId8TAmREawsMoCMchke6VFo1IqRaUOA==
   dependencies:
     invariant "^2.2.4"
 
@@ -7548,10 +7548,10 @@ react-native-collapsible@^1.5.1:
   dependencies:
     prop-types "^15.6.2"
 
-react-native-modal-datetime-picker@8.1.1:
-  version "8.1.1"
-  resolved "https://registry.yarnpkg.com/react-native-modal-datetime-picker/-/react-native-modal-datetime-picker-8.1.1.tgz#63609aff50c44cf939ab3024f185a13822b46f76"
-  integrity sha512-tZUl/GjuMGSxRNcF84nt7uKoLiyDJztdtTQ9e0dVbDFC0UduZ5bTA5DIzXiCLZCbghZuD6tPLmw5ULPXGiO7Lw==
+react-native-modal-datetime-picker@9.1.0:
+  version "9.1.0"
+  resolved "https://registry.yarnpkg.com/react-native-modal-datetime-picker/-/react-native-modal-datetime-picker-9.1.0.tgz#a1286efa6d9c456e931805fd0687cf9e916af6ed"
+  integrity sha512-KwZEduMvfxp1BMQ2nMOckJCpR5Wiw+GIBazqtWm6zptNTL+iQyeYQeyjIubsMGWh4MkMueActSRWMvHut98h/Q==
   dependencies:
     prop-types "^15.7.2"