react-native/Examples/UIExplorer/TimePickerAndroidExample.js

113 lines
3.5 KiB
JavaScript
Raw Normal View History

/**
* The examples provided by Facebook are for non-commercial testing and
* evaluation purposes only.
*
* Facebook reserves all rights not expressly granted.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
* OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
* FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
* AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
'use strict';
var React = require('react-native');
var {
TimePickerAndroid,
StyleSheet,
Text,
TouchableWithoutFeedback,
} = React;
var UIExplorerBlock = require('./UIExplorerBlock');
var UIExplorerPage = require('./UIExplorerPage');
var TimePickerAndroidExample = React.createClass({
statics: {
title: 'TimePickerAndroid',
description: 'Standard Android time picker dialog',
},
getInitialState() {
// *Text, *Hour and *Minute are set by successCallback -- this updates the text with the time
// picked by the user and makes it so the next time they open it the hour and minute they picked
// before is displayed.
return {
isoFormatText: 'pick a time (24-hour format)',
presetHour: 4,
presetMinute: 4,
presetText: 'pick a time, default: 4:04AM',
simpleText: 'pick a time',
};
},
async showPicker(stateKey, options) {
try {
const {action, minute, hour} = await TimePickerAndroid.open(options);
var newState = {};
if (action === TimePickerAndroid.timeSetAction) {
newState[stateKey + 'Text'] = _formatTime(hour, minute);
newState[stateKey + 'Hour'] = hour;
newState[stateKey + 'Minute'] = minute;
} else if (action === TimePickerAndroid.dismissedAction) {
newState[stateKey + 'Text'] = 'dismissed';
}
this.setState(newState);
} catch ({code, message}) {
console.warn(`Error in example '${stateKey}': `, message);
}
},
render() {
return (
<UIExplorerPage title="TimePickerAndroid">
<UIExplorerBlock title="Simple time picker">
<TouchableWithoutFeedback
onPress={this.showPicker.bind(this, 'simple')}>
<Text style={styles.text}>{this.state.simpleText}</Text>
</TouchableWithoutFeedback>
</UIExplorerBlock>
<UIExplorerBlock title="Time picker with pre-set time">
<TouchableWithoutFeedback
onPress={this.showPicker.bind(this, 'preset', {
hour: this.state.presetHour,
minute: this.state.presetMinute,
})}>
<Text style={styles.text}>{this.state.presetText}</Text>
</TouchableWithoutFeedback>
</UIExplorerBlock>
<UIExplorerBlock title="Time picker with 24-hour time format">
<TouchableWithoutFeedback
onPress={this.showPicker.bind(this, 'isoFormat', {
hour: this.state.isoFormatHour,
minute: this.state.isoFormatMinute,
is24Hour: true,
})}>
<Text style={styles.text}>{this.state.isoFormatText}</Text>
</TouchableWithoutFeedback>
</UIExplorerBlock>
</UIExplorerPage>
);
},
});
/**
* Returns e.g. '3:05'.
*/
function _formatTime(hour, minute) {
return hour + ':' + (minute < 10 ? '0' + minute : minute);
}
var styles = StyleSheet.create({
text: {
color: 'black',
},
});
module.exports = TimePickerAndroidExample;