diff --git a/packages/exoflex/example/package.json b/packages/exoflex/example/package.json index 3b7ef294e..625c3df15 100644 --- 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 index cc8daa460..00f017ce1 100644 --- a/packages/exoflex/example/src/examples/DateTimePickerExample.tsx +++ b/packages/exoflex/example/src/examples/DateTimePickerExample.tsx @@ -144,8 +144,8 @@ function DateTimePickerExample() { {textDateTimeWithDifferentTitles} =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", @@ -37,7 +37,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.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 index b685251af..860897234 100644 --- 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 index 128a4d1b3..09b7ff42c 100644 --- 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 index b035c9342..4421701bf 100644 --- 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; drawerItem?: Pick; diff --git a/packages/exoflex/yarn.lock b/packages/exoflex/yarn.lock index ab07692d3..fdfc2cb97 100644 --- 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"