113 lines
3.5 KiB
JavaScript
113 lines
3.5 KiB
JavaScript
/**
|
|
* 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;
|
|
|