You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
94 lines
2.6 KiB
94 lines
2.6 KiB
import React, { Component } from 'react';
|
|
import { Button, View, StyleSheet, ScrollView, Text, TouchableOpacity } from 'react-native';
|
|
import SearchInput, { createFilter } from 'react-native-search-filter';
|
|
import DeviceInfo from 'react-native-device-info';
|
|
import DatePicker from 'react-native-date-picker-x';
|
|
import locales from '../locales';
|
|
|
|
Date.prototype.addHours = function (h) {
|
|
this.setTime(this.getTime() + (h * 60 * 60 * 1000));
|
|
return this;
|
|
}
|
|
|
|
export default class Advanced extends Component {
|
|
|
|
state = {
|
|
chosenDate: new Date(),
|
|
searchTerm: '',
|
|
locale: DeviceInfo.getDeviceLocale(),
|
|
}
|
|
|
|
render() {
|
|
const result = locales.filter(createFilter(this.state.searchTerm)).slice(0, 5);
|
|
return (
|
|
<View style={styles.container}>
|
|
<DatePicker
|
|
date={this.state.chosenDate}
|
|
onDateChange={this.setDate}
|
|
locale={this.state.locale}
|
|
minuteInterval={1}
|
|
minimumDate={new Date()}
|
|
maximumDate={(new Date()).addHours(24 * 5)}
|
|
fadeToColor={this.props.backgroundColor}
|
|
/>
|
|
|
|
<Text>Current locale: {this.state.locale}</Text>
|
|
<Text>Current date: {this.state.chosenDate.toISOString()}</Text>
|
|
<Text />
|
|
|
|
<Button title='Change date'
|
|
onPress={() => this.setState({
|
|
chosenDate: new Date(this.state.chosenDate.getTime() + 86400000)
|
|
})} />
|
|
|
|
<SearchInput
|
|
onChangeText={this.searchUpdated}
|
|
style={styles.searchInput}
|
|
placeholder="Change locale"
|
|
/>
|
|
<ScrollView>
|
|
{result.map(locale => (
|
|
<TouchableOpacity onPress={() => this.setState({ locale })} key={locale} style={styles.item}>
|
|
<Text>{locale}</Text>
|
|
</TouchableOpacity>
|
|
))
|
|
}
|
|
</ScrollView>
|
|
<Text />
|
|
|
|
<Button title={'Change background color'} onPress={() => this.props.setBackground(randomColor())} />
|
|
</View>
|
|
);
|
|
}
|
|
setDate = (newDate) => this.setState({ chosenDate: newDate })
|
|
searchUpdated = (term) => this.setState({ searchTerm: term })
|
|
|
|
}
|
|
|
|
const randomColor = () => '#' + Math.floor(Math.random() * 16777215).toString(16);
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
marginTop: 15,
|
|
},
|
|
item: {
|
|
borderWidth: 1,
|
|
marginTop: -1,
|
|
borderColor: 'rgba(0,0,0,1)',
|
|
padding: 3,
|
|
width: 100,
|
|
alignItems: 'center',
|
|
},
|
|
emailSubject: {
|
|
color: 'rgba(0,0,0,0.5)'
|
|
},
|
|
searchInput: {
|
|
padding: 5,
|
|
borderColor: '#CCC',
|
|
borderWidth: 1,
|
|
width: 100,
|
|
}
|
|
})
|