chore(exoflex): Upgrade package `@react-native-community/datetimepick…

…er` & `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`
kodefox · Sep 5, 2023 · e06abf7 · e06abf7
1 parent 019d7dc
commit e06abf7
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 17 deletions.
diff --git 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
@@ -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 (
+      <View style={styles.headerContainer}>
+        <Text style={styles.headerTextStyle}>{title}</Text>
+      </View>
+    );
+  }, [title]);
+
   return (
     <RNDateTimePicker
       mode={mode}
@@ -30,7 +39,7 @@ export default function DateTimePicker(props: DateTimePickerProps) {
       locale={locale || use24Hour ? 'en-GB' : 'en-US'}
       onCancel={() => 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
@@ -1,12 +1,13 @@
-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';
 
 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 (
+      <View style={styles.headerContainer}>
+        <Text style={styles.headerTextStyle}>{title}</Text>
+      </View>
+    );
+  }, [title]);
+
   return (
     <>
       <TouchableOpacity activeOpacity={0.7} onPress={toggleModal}>
@@ -58,7 +67,7 @@ export default function TimePicker(props: TimePickerProps) {
       </TouchableOpacity>
       <DateTimePicker
         date={new Date(date)}
-        headerTextIOS={title}
+        customHeaderIOS={title ? CustomHeaderComponent : undefined}
         // NOTE: Android only
         is24Hour={use24Hour}
         // NOTE: If locale is not provided, use `en-GB` for 12h format
@@ -71,3 +80,18 @@ 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
@@ -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"