From e06abf73fb5bd80c9990ad0334d6cd57d6ace5b8 Mon Sep 17 00:00:00 2001 From: Stefanus Christian Date: Tue, 5 Sep 2023 15:12:01 +0700 Subject: [PATCH] chore(exoflex): Upgrade package `@react-native-community/datetimepicker` & `react-native-modal-datetime-picker` (#716) * release(exoflex): 4.0.0 * Update `@react-native-community/datetimepicker` & `react-native-modal-datetime-picker` version * Adjust `headerTextIOS` into `customHeaderIOS` * Mimic the custom header style just like the iOS default * Improvement on `CustomHeaderComponent` --- packages/exoflex/package.json | 6 ++-- .../DateTimePicker/DateTimePicker.tsx | 30 +++++++++++++++++-- .../src/components/TimePicker/TimePicker.tsx | 30 +++++++++++++++++-- packages/exoflex/yarn.lock | 16 +++++----- 4 files changed, 65 insertions(+), 17 deletions(-) diff --git a/packages/exoflex/package.json b/packages/exoflex/package.json index 86090fe32..641c34670 100644 --- a/packages/exoflex/package.json +++ b/packages/exoflex/package.json @@ -1,6 +1,6 @@ { "name": "exoflex", - "version": "3.4.4", + "version": "4.0.0", "description": "", "main": "lib/commonjs/index.js", "module": "lib/module/index.js", @@ -30,7 +30,7 @@ "react-native-svg": ">=9.3.3" }, "dependencies": { - "@react-native-community/datetimepicker": "3.0.8", + "@react-native-community/datetimepicker": "6.7.5", "color": "^3.1.2", "lodash.clamp": "4.0.3", "lodash.mergewith": "4.6.2", @@ -39,7 +39,7 @@ "react-native-animation-hooks": "^1.0.1", "react-native-calendars": "^1.1293.0", "react-native-collapsible": "^1.6.0", - "react-native-modal-datetime-picker": "9.1.0", + "react-native-modal-datetime-picker": "17.1.0", "react-native-multi-slider": "npm:@ptomasroos/react-native-multi-slider", "react-native-paper": "^5.1.4", "react-native-safe-area-context": "^4.5.0" diff --git a/packages/exoflex/src/components/DateTimePicker/DateTimePicker.tsx b/packages/exoflex/src/components/DateTimePicker/DateTimePicker.tsx index 860897234..780298f63 100644 --- a/packages/exoflex/src/components/DateTimePicker/DateTimePicker.tsx +++ b/packages/exoflex/src/components/DateTimePicker/DateTimePicker.tsx @@ -1,9 +1,10 @@ -import React from 'react'; +import React, { useCallback } from 'react'; import RNDateTimePicker from 'react-native-modal-datetime-picker'; -import { StyleSheet } from 'react-native'; +import { StyleSheet, View } from 'react-native'; import { DateTimePickerProps, DateTimePickerMode } from './types'; import useTheme from '../../helpers/useTheme'; +import Text from '../Text'; export default function DateTimePicker(props: DateTimePickerProps) { let { @@ -21,6 +22,14 @@ export default function DateTimePicker(props: DateTimePickerProps) { const { style: themeStyle } = useTheme(); + const CustomHeaderComponent = useCallback(() => { + return ( + + {title} + + ); + }, [title]); + return ( onCancel()} onConfirm={(newDate) => onConfirm(newDate.toISOString())} - headerTextIOS={title} + customHeaderIOS={title ? CustomHeaderComponent : undefined} modalStyleIOS={StyleSheet.flatten([ themeStyle?.dateTimePicker?.modalStyleIOS, modalStyleIOS, @@ -44,3 +53,18 @@ export default function DateTimePicker(props: DateTimePickerProps) { /> ); } + +const styles = StyleSheet.create({ + headerContainer: { + alignItems: 'center', + justifyContent: 'center', + borderBottomWidth: 1, + borderBottomColor: 'rgba(158, 150, 150, .1)', + padding: 14, + }, + headerTextStyle: { + fontSize: 20, + color: '#8f8f8f', + letterSpacing: -0.5, + }, +}); diff --git a/packages/exoflex/src/components/TimePicker/TimePicker.tsx b/packages/exoflex/src/components/TimePicker/TimePicker.tsx index 7ab17eafc..bb2a5609e 100644 --- a/packages/exoflex/src/components/TimePicker/TimePicker.tsx +++ b/packages/exoflex/src/components/TimePicker/TimePicker.tsx @@ -1,5 +1,5 @@ -import React, { useState, useMemo } from 'react'; -import { TouchableOpacity } from 'react-native'; +import React, { useState, useMemo, useCallback } from 'react'; +import { StyleSheet, TouchableOpacity, View } from 'react-native'; import DateTimePicker from 'react-native-modal-datetime-picker'; import TextInput from '../TextInput/TextInput'; @@ -7,6 +7,7 @@ import { HourFormat } from '../../helpers/timeChecker'; import useTheme from '../../helpers/useTheme'; import { createTimeForDisplay } from '../../helpers/displayTime'; import { TimePickerProps } from './types'; +import Text from '../Text'; export default function TimePicker(props: TimePickerProps) { let { @@ -35,6 +36,14 @@ export default function TimePicker(props: TimePickerProps) { format, ]); + const CustomHeaderComponent = useCallback(() => { + return ( + + {title} + + ); + }, [title]); + return ( <> @@ -58,7 +67,7 @@ export default function TimePicker(props: TimePickerProps) { ); } + +const styles = StyleSheet.create({ + headerContainer: { + alignItems: 'center', + justifyContent: 'center', + borderBottomWidth: 1, + borderBottomColor: 'rgba(158, 150, 150, .1)', + padding: 14, + }, + headerTextStyle: { + fontSize: 20, + color: '#8f8f8f', + letterSpacing: -0.5, + }, +}); diff --git a/packages/exoflex/yarn.lock b/packages/exoflex/yarn.lock index e2cef4dee..e0ff53b41 100644 --- a/packages/exoflex/yarn.lock +++ b/packages/exoflex/yarn.lock @@ -1427,10 +1427,10 @@ prompts "^2.4.0" semver "^6.3.0" -"@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== +"@react-native-community/datetimepicker@6.7.5": + version "6.7.5" + resolved "https://registry.yarnpkg.com/@react-native-community/datetimepicker/-/datetimepicker-6.7.5.tgz#214796f2d131b6af9cb9d4dea69d4a1981fa2236" + integrity sha512-E2Zh6mwvZ6CFEMKP++rdxxjJiB45fYPpdZhJwdZ2vUVwqovqu1cQRDLZmz4XrcHSyuacgR4WUnkYFf0F2nnNIg== dependencies: invariant "^2.2.4" @@ -7669,10 +7669,10 @@ react-native-gradle-plugin@^0.70.3: resolved "https://registry.yarnpkg.com/react-native-gradle-plugin/-/react-native-gradle-plugin-0.70.3.tgz#cbcf0619cbfbddaa9128701aa2d7b4145f9c4fc8" integrity sha512-oOanj84fJEXUg9FoEAQomA8ISG+DVIrTZ3qF7m69VQUJyOGYyDZmPqKcjvRku4KXlEH6hWO9i4ACLzNBh8gC0A== -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== +react-native-modal-datetime-picker@17.1.0: + version "17.1.0" + resolved "https://registry.yarnpkg.com/react-native-modal-datetime-picker/-/react-native-modal-datetime-picker-17.1.0.tgz#74291bf92b830be285752f437841f52885c90e0b" + integrity sha512-jfTwfaCLtBffYbQ+pOGFLM+J5HmUh3vb9rT0JrrQPjxzecdc8pNYreB1c96+mVuq8bDCvaCdIeuEsslTqLJL0Q== dependencies: prop-types "^15.7.2"