kylefang/react-native
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native.git synced 2026-04-23 20:01:01 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add TimePicker modes

Browse Source 
Summary:
In the spirit of #10932, I added the `mode` option to the `TimePicker` Android API.
There is only one mode available for **Android < 5**, the `spinner` one.
If we are on **Android >= 5** we can choose between `spinner` or `clock`. If we specify `default` it will use the default of the current Android version.

On **Android < 5**, whatever we choose it will be this:
![screen shot 2017-02-14 at 17 05 44](https://cloud.githubusercontent.com/assets/5436545/22937805/024ec67e-f2da-11e6-8b32-a680d9bc2247.png)

On **Android >= 5**, with the `spinner` mode:
![screen shot 2017-02-14 at 16 51 17](https://cloud.githubusercontent.com/assets/5436545/22937803/024e0bbc-f2da-11e6-9f4b-26102ff2eeac.png)

And with the `clock` mode, the default:
![screen shot 2017-02-14 at 16 51 02](https://cloud.githubusercontent.com/assets/5436545/22937804/024e64e0-f2da-11e6-9911-4135049f4726.png)
Closes https://github.com/facebook/react-native/pull/12384

Differential Revision: D6006689

Pulled By: hramos

fbshipit-source-id: fcd37c867c4061b9982b1687f2c10211e54df7cf
This commit is contained in:
Yann Pringault
2017-10-08 12:28:10 -07:00
committed by Facebook Github Bot
parent f9be64aea0
commit 1c24440644
6 changed files with 112 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
RNTester/js/TimePickerAndroidExample.js
View File

@@ -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 {
<Text style={styles.text}>{this.state.simpleText}</Text>
</TouchableWithoutFeedback>
</RNTesterBlock>
<RNTesterBlock title="Simple clock time picker">
<TouchableWithoutFeedback
onPress={this.showPicker.bind(this, 'clock', {mode: 'clock'})}>
<Text style={styles.text}>{this.state.clockText}</Text>
</TouchableWithoutFeedback>
</RNTesterBlock>
<RNTesterBlock title="Simple spinner time picker">
<TouchableWithoutFeedback
onPress={this.showPicker.bind(this, 'spinner', {mode: 'spinner'})}>
<Text style={styles.text}>{this.state.spinnerText}</Text>
</TouchableWithoutFeedback>
</RNTesterBlock>
<RNTesterBlock title="Simple default time picker">
<TouchableWithoutFeedback
onPress={this.showPicker.bind(this, 'default', {mode: 'default'})}>
<Text style={styles.text}>{this.state.defaultText}</Text>
</TouchableWithoutFeedback>
</RNTesterBlock>
<RNTesterBlock title="Time picker with pre-set time">
<TouchableWithoutFeedback
onPress={this.showPicker.bind(this, 'preset', {
@@ -69,7 +90,6 @@ class TimePickerAndroidExample extends React.Component {
<Text style={styles.text}>{this.state.presetText}</Text>
</TouchableWithoutFeedback>
</RNTesterBlock>
<RNTesterBlock title="Time picker with 24-hour time format">
<TouchableWithoutFeedback
onPress={this.showPicker.bind(this, 'isoFormat', {