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.
141 lines
4.5 KiB
141 lines
4.5 KiB
import React, { Component } from 'react';
|
|
import { StyleSheet, Text, View } from 'react-native';
|
|
import DatePicker from 'react-native-date-picker';
|
|
import DeviceInfo from 'react-native-device-info';
|
|
import DateChange from '../propPickers/DateChange';
|
|
import FadeToColor from '../propPickers/FadeToColor';
|
|
import LocalePicker from '../propPickers/LocalePicker';
|
|
import MinMaxDateChange from '../propPickers/MinMaxDateChange';
|
|
import ModePicker from '../propPickers/ModePicker';
|
|
import TextColor from '../propPickers/TextColor';
|
|
import TimeZoneOffsetInMinutes from '../propPickers/TimeZoneOffsetInMinutes';
|
|
import PropSlider from '../PropSlider';
|
|
import MinuteInterval from '../propPickers/MinuteInterval';
|
|
|
|
Date.prototype.addHours = function (h) {
|
|
this.setTime(this.getTime() + (h * 60 * 60 * 1000));
|
|
return this;
|
|
}
|
|
|
|
export const defaultMinDate = new Date().addHours(-24 * 5);
|
|
export const defaultMaxDate = new Date().addHours(24 * 5);
|
|
|
|
export const readableDate = date => date ? date.toISOString().substr(0, 19).replace('T', ' ') : 'undefined'
|
|
|
|
export default class Advanced extends Component {
|
|
|
|
state = {
|
|
chosenDate: new Date(),
|
|
searchTerm: '',
|
|
textColor: '#000000',
|
|
selectedProp: 'mode',
|
|
locale: DeviceInfo.getDeviceLocale(),
|
|
mode: 'datetime',
|
|
minDate: defaultMinDate,
|
|
maxDate: defaultMaxDate,
|
|
timeZoneOffsetInMinutes: undefined,
|
|
minuteInterval: 1,
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<View style={styles.container}>
|
|
<DatePicker
|
|
date={this.state.chosenDate}
|
|
onDateChange={this.setDate}
|
|
locale={this.state.locale}
|
|
minuteInterval={this.state.minuteInterval}
|
|
minimumDate={this.state.minDate}
|
|
maximumDate={this.state.maxDate}
|
|
fadeToColor={this.props.backgroundColor}
|
|
textColor={this.state.textColor}
|
|
mode={this.state.mode}
|
|
timeZoneOffsetInMinutes={this.state.timeZoneOffsetInMinutes}
|
|
/>
|
|
<Text>Picker date: {readableDate(this.state.chosenDate)}</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: 'timeZoneOffset', component:
|
|
<TimeZoneOffsetInMinutes onChange={timeZoneOffsetInMinutes => this.setState({ timeZoneOffsetInMinutes })} />
|
|
},
|
|
{
|
|
name: 'date', component:
|
|
<DateChange value={this.state.chosenDate} onChange={chosenDate => this.setState({ chosenDate })} />
|
|
},
|
|
{
|
|
name: 'minuteInterval', component:
|
|
<MinuteInterval value={this.state.minuteInterval} onChange={minuteInterval => this.setState({ minuteInterval })} />
|
|
},
|
|
{
|
|
name: 'minDate', component:
|
|
<MinMaxDateChange value={this.state.minDate} onChange={minDate => this.setState({ minDate })}
|
|
defaultDate={defaultMinDate}
|
|
/>
|
|
},
|
|
{
|
|
name: 'maxDate', component:
|
|
<MinMaxDateChange value={this.state.maxDate} onChange={maxDate => this.setState({ maxDate })}
|
|
defaultDate={defaultMaxDate} />
|
|
},
|
|
{
|
|
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;
|
|
}
|