diff --git a/Libraries/Components/TimePickerAndroid/TimePickerAndroid.android.js b/Libraries/Components/TimePickerAndroid/TimePickerAndroid.android.js index e1e3f7550d4823..e837075ded13b4 100644 --- a/Libraries/Components/TimePickerAndroid/TimePickerAndroid.android.js +++ b/Libraries/Components/TimePickerAndroid/TimePickerAndroid.android.js @@ -44,6 +44,10 @@ class TimePickerAndroid { * * `is24Hour` (boolean) - If `true`, the picker uses the 24-hour format. If `false`, * the picker shows an AM/PM chooser. If undefined, the default for the current locale * is used. + * * `mode` (`enum('clock', 'spinner', 'default')`) - set the time picker mode + * - 'clock': Show a time picker in clock mode. + * - 'spinner': Show a time picker in spinner mode. + * - 'default': Show a default time picker based on Android versions. * * Returns a Promise which will be invoked an object containing `action`, `hour` (0-23), * `minute` (0-59) if the user picked a time. If the user dismissed the dialog, the Promise will diff --git a/RNTester/js/TimePickerAndroidExample.js b/RNTester/js/TimePickerAndroidExample.js index a5b243b5ea249a..b16a8d16c7b3e1 100644 --- a/RNTester/js/TimePickerAndroidExample.js +++ b/RNTester/js/TimePickerAndroidExample.js @@ -32,6 +32,9 @@ class TimePickerAndroidExample extends React.Component { presetMinute: 4, presetText: 'pick a time, default: 4:04AM', simpleText: 'pick a time', + clockText: 'pick a time', + spinnerText: 'pick a time', + defaultText: 'pick a time', }; showPicker = async (stateKey, options) => { @@ -60,6 +63,24 @@ class TimePickerAndroidExample extends React.Component { {this.state.simpleText} + + + {this.state.clockText} + + + + + {this.state.spinnerText} + + + + + {this.state.defaultText} + + {this.state.presetText} - = Build.VERSION_CODES.LOLLIPOP) { + if (mode == TimePickerMode.CLOCK) { + dialog = new DismissableTimePickerDialog( + activityContext, + activityContext.getResources().getIdentifier( + "ClockTimePickerDialog", + "style", + activityContext.getPackageName() + ), + onTimeSetListener, + hour, + minute, + is24hour + ); + } else if (mode == TimePickerMode.SPINNER) { + dialog = new DismissableTimePickerDialog( + activityContext, + activityContext.getResources().getIdentifier( + "SpinnerTimePickerDialog", + "style", + activityContext.getPackageName() + ), + onTimeSetListener, + hour, + minute, + is24hour + ); + } + } + return dialog; } @Override diff --git a/ReactAndroid/src/main/java/com/facebook/react/modules/timepicker/TimePickerDialogModule.java b/ReactAndroid/src/main/java/com/facebook/react/modules/timepicker/TimePickerDialogModule.java index 6150cf24fa45ee..178d50fd843ee5 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/modules/timepicker/TimePickerDialogModule.java +++ b/ReactAndroid/src/main/java/com/facebook/react/modules/timepicker/TimePickerDialogModule.java @@ -9,8 +9,6 @@ package com.facebook.react.modules.timepicker; -import javax.annotation.Nullable; - import android.app.Activity; import android.app.DialogFragment; import android.app.FragmentManager; @@ -31,6 +29,8 @@ import com.facebook.react.common.annotations.VisibleForTesting; import com.facebook.react.module.annotations.ReactModule; +import javax.annotation.Nullable; + /** * {@link NativeModule} that allows JS to show a native time picker dialog and get called back when * the user selects a time. @@ -46,6 +46,7 @@ public class TimePickerDialogModule extends ReactContextBaseJavaModule { /* package */ static final String ARG_HOUR = "hour"; /* package */ static final String ARG_MINUTE = "minute"; /* package */ static final String ARG_IS24HOUR = "is24Hour"; + /* package */ static final String ARG_MODE = "mode"; /* package */ static final String ACTION_TIME_SET = "timeSetAction"; /* package */ static final String ACTION_DISMISSED = "dismissedAction"; @@ -148,6 +149,9 @@ private Bundle createFragmentArguments(ReadableMap options) { if (options.hasKey(ARG_IS24HOUR) && !options.isNull(ARG_IS24HOUR)) { args.putBoolean(ARG_IS24HOUR, options.getBoolean(ARG_IS24HOUR)); } + if (options.hasKey(ARG_MODE) && !options.isNull(ARG_MODE)) { + args.putString(ARG_MODE, options.getString(ARG_MODE)); + } return args; } } diff --git a/ReactAndroid/src/main/java/com/facebook/react/modules/timepicker/TimePickerMode.java b/ReactAndroid/src/main/java/com/facebook/react/modules/timepicker/TimePickerMode.java new file mode 100644 index 00000000000000..1dd547f7069f6d --- /dev/null +++ b/ReactAndroid/src/main/java/com/facebook/react/modules/timepicker/TimePickerMode.java @@ -0,0 +1,17 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + */ + +package com.facebook.react.modules.timepicker; + + +public enum TimePickerMode { + CLOCK, + SPINNER, + DEFAULT +} diff --git a/ReactAndroid/src/main/res/shell/values/styles.xml b/ReactAndroid/src/main/res/shell/values/styles.xml index 75a4c2c5e1e8b1..b53a21ea4f4d34 100644 --- a/ReactAndroid/src/main/res/shell/values/styles.xml +++ b/ReactAndroid/src/main/res/shell/values/styles.xml @@ -19,7 +19,6 @@ spinner - @@ -28,4 +27,21 @@ calendar + + + + + + + + +