From 1f1efe5f18b89d1434db42b3a8f21a993ef40375 Mon Sep 17 00:00:00 2001 From: Henning Hall Date: Fri, 3 Sep 2021 20:12:04 +0200 Subject: [PATCH] feat: modal (#376) --- README.md | 133 +- android/build.gradle | 4 +- .../date_picker/DatePickerManager.java | 22 +- .../date_picker/DatePickerModule.java | 111 + .../date_picker/DatePickerPackage.java | 16 +- .../henninghall/date_picker/DerivedData.java | 9 + .../com/henninghall/date_picker/Emitter.java | 40 + .../henninghall/date_picker/PickerView.java | 18 +- .../com/henninghall/date_picker/State.java | 30 +- .../com/henninghall/date_picker/Utils.java | 12 +- .../date_picker/ui/Accessibility.java | 5 +- .../henninghall/date_picker/ui/UIManager.java | 4 + .../ui/WheelChangeListenerImpl.java | 20 +- ...native-date-time-picker-android-inline.gif | Bin 0 -> 357369 bytes ...act-native-date-time-picker-ios-inline.gif | Bin 0 -> 2746445 bytes ...t-native-datetime-picker-modal-android.gif | Bin 0 -> 936541 bytes ...react-native-datetime-picker-modal-ios.gif | Bin 0 -> 1127135 bytes .../app/src/main/res/values/styles.xml | 7 +- examples/detox/e2e/init.js | 8 +- examples/detox/e2e/tests/modal.spec.js | 20 + examples/detox/src/App.js | 19 +- examples/detox/src/examples.js | 6 +- examples/detox/src/examples/Modal.js | 31 + index.d.ts | 21 + ios/RNDatePicker/RNDatePickerManager.m | 97 + npmREADME.md | 32 +- package.json | 4 +- src/DatePickerAndroid.js | 65 +- src/DatePickerIOS.js | 57 +- src/defaultProps.js | 6 - src/index.js | 33 +- src/propChecker.js | 29 +- src/propTypes.js | 15 +- yarn.lock | 9315 ++++++++++------- 34 files changed, 6155 insertions(+), 4034 deletions(-) create mode 100644 android/src/main/java/com/henninghall/date_picker/DatePickerModule.java create mode 100644 android/src/main/java/com/henninghall/date_picker/Emitter.java create mode 100644 docs/react-native-date-time-picker-android-inline.gif create mode 100644 docs/react-native-date-time-picker-ios-inline.gif create mode 100644 docs/react-native-datetime-picker-modal-android.gif create mode 100644 docs/react-native-datetime-picker-modal-ios.gif create mode 100644 examples/detox/e2e/tests/modal.spec.js create mode 100644 examples/detox/src/examples/Modal.js delete mode 100644 src/defaultProps.js diff --git a/README.md b/README.md index 7943ae5..f3e6d83 100644 --- a/README.md +++ b/README.md @@ -2,37 +2,52 @@ This is a React Native Date Picker with following main features: -📱 Supporting iOS and Android
-🕑 3 different modes: Time, Date, DateTime
-🌍 Multiple languages
-🎨 Customizable
+📱  Supporting iOS and Android
+🕑  3 different modes: Time, Date, DateTime
+🌍  Various languages
+🎨  Customizable
+🖼  Modal or stand-alone (inline)
+ +## Update 4.0.0 + +- ✅  No breaking changes + +- New feature: Modal mode + +## Modal + +The first option is to use the built-in modal. See code. - - - - + - - - + + +
iOS
React Native Date Picker + React Native DateTime Picker Modal iOSReact Native DateTime Picker Modal Android
Android
Choose from 2 different variants
iOSAndroid
+ +## Stand-alone + +The second option is to use the picker stand-alone. Inlined in a view or a custom made modal. See code. + + - + - - +
React Native Date Picker Android + React Native DateTime PickerReact Native Date Time Picker React Native Datepicker -
androidVariant="iosClone"androidVariant="nativeAndroid"iOSAndroid
## Requirements - Xcode >= 11.6 +- React Native >= 0.57. - If using React Native 0.64, 0.64.2 or later must be used. - If using Expo, SDK 42 or later must be used. @@ -92,7 +107,38 @@ eas build -p all --profile development If you're having troubles, read the pinned comment here. -## Minimal Example +## Example 1: Modal + +```jsx +import React, { useState } from 'react' +import { Button } from 'react-native' +import DatePicker from 'react-native-date-picker' + +export default () => { + const [date, setDate] = useState(new Date()) + const [open, setOpen] = useState(false) + + return ( + <> +