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.
113 lines
3.2 KiB
113 lines
3.2 KiB
import React, { Component } from 'react';
|
|
import { StyleSheet, Text, View } from 'react-native';
|
|
import DatePicker from 'react-native-date-picker-x';
|
|
import DeviceInfo from 'react-native-device-info';
|
|
import DateChange from '../propPickers/DateChange';
|
|
import FadeToColor from '../propPickers/FadeToColor';
|
|
import LocalePicker from '../propPickers/LocalePicker';
|
|
import ModePicker from '../propPickers/ModePicker';
|
|
import TextColor from '../propPickers/TextColor';
|
|
import PropSlider from '../PropSlider';
|
|
|
|
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: '',
|
|
textColor: '#000000',
|
|
selectedProp: 'mode',
|
|
locale: DeviceInfo.getDeviceLocale(),
|
|
mode: 'datetime',
|
|
}
|
|
|
|
render() {
|
|
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}
|
|
textColor={this.state.textColor}
|
|
mode={this.state.mode}
|
|
/>
|
|
<Text>Picker date: {this.state.chosenDate.toISOString()}</Text>
|
|
<Text />
|
|
<Text>Change prop: </Text>
|
|
<Text />
|
|
<PropSlider
|
|
selectedProp={this.state.selectedProp}
|
|
onSelect={this.onSelect}
|
|
data={this.propertyList()}
|
|
/>
|
|
<Text>Prop value:</Text>
|
|
{this.selectedPropData().component}
|
|
</View>
|
|
)
|
|
}
|
|
|
|
propertyList = () => [
|
|
{
|
|
name: 'mode', component:
|
|
<ModePicker selected={this.state.mode} onChange={mode => this.setState({ mode })} />
|
|
},
|
|
{
|
|
name: 'locale', component:
|
|
<LocalePicker locale={this.state.locale} onChange={locale => this.setState({ locale })} />
|
|
},
|
|
{
|
|
name: 'date', component:
|
|
<DateChange value={this.state.chosenDate} onChange={chosenDate => this.setState({ chosenDate })} />
|
|
},
|
|
{ name: 'minuteInterval' },
|
|
{ name: 'minDate' },
|
|
{ name: 'maxDate' },
|
|
{
|
|
name: 'fadeToColor', component:
|
|
<FadeToColor onChange={() => this.props.setBackground(randomColor())} />
|
|
},
|
|
{
|
|
name: 'textColor', component:
|
|
<TextColor onChange={() => this.setState({ textColor: randomColor() })} />
|
|
},
|
|
]
|
|
|
|
selectedPropData = () => this.propertyList().find(p => p.name === this.state.selectedProp)
|
|
onSelect = selectedProp => this.setState({ selectedProp })
|
|
setDate = newDate => this.setState({ chosenDate: newDate })
|
|
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
marginTop: 15,
|
|
backgroundColor: 'transparent',
|
|
flex: 1,
|
|
},
|
|
item: {
|
|
borderWidth: 1,
|
|
marginTop: -1,
|
|
borderColor: 'rgba(0,0,0,1)',
|
|
padding: 3,
|
|
width: 100,
|
|
alignItems: 'center',
|
|
},
|
|
})
|
|
|
|
const randomColor = () => '#' + pad(Math.floor(Math.random() * 16777215).toString(16), 6);
|
|
|
|
function pad(n, width) {
|
|
n = n + '';
|
|
return n.length >= width ? n : new Array(width - n.length + 1).join('0') + n;
|
|
}
|