web-ridge / react-native-paper-dates

Smooth and fast cross platform Material Design date and time picker for React Native Paper
https://www.reactnativepaperdates.com
MIT License
638 stars 162 forks source link

modal start visualization #300

Closed Zephyr-84 closed 11 months ago

Zephyr-84 commented 1 year ago

Hi! πŸ‘‹

Firstly, thanks for your work on this project! πŸ™‚

Today I used patch-package to patch react-native-paper-dates@0.9.2 for the project I'm working on.

Added startVis parameter to set the start visualization on modal open, picker or keyboard. I hope it can be useful. Bye ;)

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-paper-dates/lib/module/Time/TimePickerModal.js b/node_modules/react-native-paper-dates/lib/module/Time/TimePickerModal.js
index e6a5725..ef5cbc1 100644
--- a/node_modules/react-native-paper-dates/lib/module/Time/TimePickerModal.js
+++ b/node_modules/react-native-paper-dates/lib/module/Time/TimePickerModal.js
@@ -18,10 +18,11 @@ export function TimePickerModal(_ref) {
     animationType = 'none',
     locale,
     keyboardIcon = 'keyboard-outline',
-    clockIcon = 'clock-outline'
+    clockIcon = 'clock-outline',
+    startVis = 'picker'
   } = _ref;
   const theme = useTheme();
-  const [inputType, setInputType] = React.useState(inputTypes.picker);
+  const [inputType, setInputType] = React.useState(startVis === 'picker' ? inputTypes.picker : inputTypes.keyboard);
   const [focused, setFocused] = React.useState(clockTypes.hours);
   const [localHours, setLocalHours] = React.useState(getHours(hours));
   const [localMinutes, setLocalMinutes] = React.useState(getMinutes(minutes));
diff --git a/node_modules/react-native-paper-dates/lib/typescript/Time/TimePickerModal.d.ts b/node_modules/react-native-paper-dates/lib/typescript/Time/TimePickerModal.d.ts
index 5b3af23..4372e9c 100644
--- a/node_modules/react-native-paper-dates/lib/typescript/Time/TimePickerModal.d.ts
+++ b/node_modules/react-native-paper-dates/lib/typescript/Time/TimePickerModal.d.ts
@@ -16,6 +16,7 @@ export declare function TimePickerModal({ visible, onDismiss, onConfirm, hours,
     animationType?: 'slide' | 'fade' | 'none';
     keyboardIcon?: string;
     clockIcon?: string;
+    startVis: 'picker' | 'keyboard';
 }): JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof TimePickerModal>;
 export default _default;
diff --git a/node_modules/react-native-paper-dates/src/Time/TimePickerModal.tsx b/node_modules/react-native-paper-dates/src/Time/TimePickerModal.tsx
index 2870eea..6f2ab4a 100644
--- a/node_modules/react-native-paper-dates/src/Time/TimePickerModal.tsx
+++ b/node_modules/react-native-paper-dates/src/Time/TimePickerModal.tsx
@@ -42,6 +42,7 @@ export function TimePickerModal({
   locale,
   keyboardIcon = 'keyboard-outline',
   clockIcon = 'clock-outline',
+  startVis = 'picker'
 }: {
   locale?: undefined | string
   label?: string
@@ -56,11 +57,12 @@ export function TimePickerModal({
   animationType?: 'slide' | 'fade' | 'none'
   keyboardIcon?: string
   clockIcon?: string
+  startVis: 'picker' | 'keyboard'
 }) {
   const theme = useTheme()

   const [inputType, setInputType] = React.useState<PossibleInputTypes>(
-    inputTypes.picker
+    startVis === 'picker' ? inputTypes.picker : inputTypes.keyboard
   )
   const [focused, setFocused] = React.useState<PossibleClockTypes>(
     clockTypes.hours

This issue body was partially generated by patch-package.

iM-GeeKy commented 1 year ago

Hi @Zephyr-84 thanks for sharing this. If you think it could benefit other RNPD users, feel free to open a pull request. Otherwise, I think it's safe we can close this and it will be archived for others.

github-actions[bot] commented 1 year ago

Hey! Thanks for opening the issue. Can you provide more information about the issue? Please fill the issue template when opening the issue without deleting any section. We need all the information we can, to be able to help. Make sure to at least provide - Current behaviour, Expected behaviour, A way to reproduce the issue with minimal code (link to snack.expo.dev) or a repo on GitHub, and the information about your environment (such as the platform of the device, versions of all the packages etc.).