Improved examples.

example/examples/Advanced.js

@@ -1,108 +0,0 @@
-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(),
-    textColor: '#000000',
-  }
-
-  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}
-          textColor={this.state.textColor}
-        />
-
-        <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.changeColors} />
-      </View>
-    );
-  }
-
-  changeColors = () => {
-    this.props.setBackground(randomColor());
-    this.setState({ textColor: randomColor() })
-  }
-
-  setDate = (newDate) => this.setState({ chosenDate: newDate })
-  searchUpdated = (term) => this.setState({ searchTerm: term })
-
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginTop: 15,
-    backgroundColor: 'transparent',
-  },
-  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,
-  }
-})
-
-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;
-}

example/index.js

@@ -1,4 +1,4 @@
 import { AppRegistry } from 'react-native'
-import App from './App'
+import App from './src/App'
 
 AppRegistry.registerComponent('DatePickerExample', () => App)

example/App.js → example/src/App.js

@@ -5,6 +5,7 @@ import DeviceInfo from 'react-native-device-info';
 import DatePicker from 'react-native-date-picker-x';
 import locales from './locales';
 import examples from './examples';
+import Advanced from './examples/Advanced';
 
 export default class App extends Component {
 
@@ -18,7 +19,7 @@ export default class App extends Component {
       <ScrollView
         style={[styles.container, { backgroundColor: this.state.backgroundColor }]}
         contentContainerStyle={styles.content}>
-        <Text style={styles.header}>Examples</Text>
+        <Text style={styles.header}>{!this.state.picker && 'Examples'}</Text>
         {!this.state.picker && this.renderButtons()}
         {!!this.state.picker && this.renderBackButton()}
         {!!this.state.picker && this.renderPicker()}
@@ -51,7 +52,7 @@ export default class App extends Component {
   renderBackButton = (key) => (
     <TouchableOpacity
       onPress={() => this.setState({ picker: undefined })}
-      style={{ margin: 10 }}
+      style={{ margin: 10, position: 'absolute', top: 0, left: 10, }}
     >
       <Text style={styles.text}>Back</Text>
     </TouchableOpacity>
@@ -61,12 +62,11 @@ export default class App extends Component {
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
     paddingTop: 15,
   },
   content: {
     alignItems: 'center',
-    flex: 1,
+    // flex: 1,
   },
   text: {
     color: 'dodgerblue',

example/src/PropSlider.js

@@ -0,0 +1,60 @@
+import React, { Component } from 'react';
+import { FlatList, Dimensions, 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 Carousel from 'react-native-snap-carousel';
+
+const { width, height } = Dimensions.get('screen')
+
+export default class PropSlider extends Component {
+
+    render() {
+        return (
+            <FlatList
+                horizontal
+                style={styles.list}
+                data={this.data()}
+                renderItem={this.renderItem}
+                contentContainerStyle={styles.content}
+                keyExtractor={item => item.name}
+            />
+        )
+    }
+
+    data = () => this.props.data.map(prop => (prop.selected = this.props.selectedProp === prop.name, prop))
+
+    onPress = index => () => this.props.onSelect(this.props.data[index].name)
+
+    renderItem = ({ item, index }) => (
+        <TouchableOpacity
+            key={item.name}
+            style={[styles.item, this.getStyle(item)]}
+            onPress={this.onPress(index)}
+        >
+            <Text key={item.name}>{item.name}</Text>
+        </TouchableOpacity>
+    )
+
+    getStyle = (item) => ({
+        backgroundColor: item.selected ? '#82e584' : '#abcdef',
+        width: this.props.width ? this.props.width : 100,
+        height: 30,
+    })
+
+}
+
+const styles = StyleSheet.create({
+    list: {
+        width,
+    },
+    content: {
+        padding: 20,
+    },
+    item: {
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginHorizontal: 5,
+        borderRadius: 10,
+    },
+})

example/src/examples/Advanced.js

@@ -0,0 +1,115 @@
+import React, { Component } from 'react';
+import { Dimensions, Button, View, StyleSheet, ScrollView, Text, TouchableOpacity } from 'react-native';
+import SearchInput, { createFilter } from 'react-native-search-filter';
+import DatePicker from 'react-native-date-picker-x';
+import Carousel from 'react-native-snap-carousel';
+import PropSlider from '../PropSlider';
+import LocalePicker from '../propPickers/LocalePicker';
+import ModePicker from '../propPickers/ModePicker';
+import DateChange from '../propPickers/DateChange';
+import FadeToColor from '../propPickers/FadeToColor';
+import TextColor from '../propPickers/TextColor';
+import DeviceInfo from 'react-native-device-info';
+
+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;
+}

example/src/propPickers/DateChange.js

@@ -0,0 +1,26 @@
+import React, { Component } from 'react';
+import { Dimensions, Button, View, StyleSheet, ScrollView, Text, TouchableOpacity } from 'react-native';
+
+export default class extends Component {
+
+    render() {
+        return (
+            <React.Fragment>
+                <Button title='Add 1 min'
+                    onPress={() => this.props.onChange(
+                        new Date(this.props.value.getTime() + 60 * 1000)
+                    )} />
+                <Text />
+                <Button title='Add 1 hour'
+                    onPress={() => this.props.onChange(
+                        new Date(this.props.value.getTime() + 60 * 60 * 1000)
+                    )} />
+                <Text />
+                <Button title='Add 24 hours'
+                    onPress={() => this.props.onChange(
+                        new Date(this.props.value.getTime() + 60 * 60 * 24 * 1000)
+                    )} />
+            </React.Fragment>
+        );
+    }
+}

example/src/propPickers/FadeToColor.js

@@ -0,0 +1,15 @@
+import React, { Component } from 'react';
+import { Dimensions, Button, View, StyleSheet, ScrollView, Text, TouchableOpacity } from 'react-native';
+import SearchInput, { createFilter } from 'react-native-search-filter';
+import locales from '../locales';
+import PropSlider from '../PropSlider';
+
+export default class extends Component {
+
+    render() {
+        return (
+            <Button title={'Change color'} onPress={this.props.onChange} />
+        );
+    }
+
+}

example/src/propPickers/LocalePicker.js

@@ -0,0 +1,42 @@
+import React, { Component } from 'react';
+import { Dimensions, Button, View, StyleSheet, ScrollView, Text, TouchableOpacity } from 'react-native';
+import SearchInput, { createFilter } from 'react-native-search-filter';
+import locales from '../locales';
+import PropSlider from '../PropSlider';
+
+const data = locales.map(key => ({ name: key }));
+
+const split1 = Math.floor(data.length / 3);
+const split2 = Math.floor(2 * data.length / 3);
+
+const data1 = data.slice(0, split1);
+const data2 = data.slice(split1, split2);
+const data3 = data.slice(split2);
+
+export default class LocalPicker extends Component {
+
+    render() {
+        return (
+            <React.Fragment>
+                <PropSlider
+                    selectedProp={this.props.locale}
+                    onSelect={this.props.onChange}
+                    data={data1}
+                    width={50}
+                />
+                 <PropSlider
+                    selectedProp={this.props.locale}
+                    onSelect={this.props.onChange}
+                    data={data2}
+                    width={50}
+                />
+                <PropSlider
+                    selectedProp={this.props.locale}
+                    onSelect={this.props.onChange}
+                    data={data3}
+                    width={50}
+                />
+            </React.Fragment>
+        );
+    }
+}

example/src/propPickers/ModePicker.js

@@ -0,0 +1,25 @@
+import React, { Component } from 'react';
+import { Dimensions, Button, View, StyleSheet, ScrollView, Text, TouchableOpacity } from 'react-native';
+import SearchInput, { createFilter } from 'react-native-search-filter';
+import locales from '../locales';
+import PropSlider from '../PropSlider';
+
+const data = [
+    { name: 'datetime' },
+    { name: 'date' },
+    { name: 'time' },
+]
+
+export default class extends Component {
+
+    render() {
+        return (
+            <PropSlider
+                selectedProp={this.props.selected}
+                onSelect={this.props.onChange}
+                data={data}
+                width={100}
+            />
+        );
+    }
+}

example/src/propPickers/TextColor.js

@@ -0,0 +1,15 @@
+import React, { Component } from 'react';
+import { Dimensions, Button, View, StyleSheet, ScrollView, Text, TouchableOpacity } from 'react-native';
+import SearchInput, { createFilter } from 'react-native-search-filter';
+import locales from '../locales';
+import PropSlider from '../PropSlider';
+
+export default class extends Component {
+
+    render() {
+        return (
+            <Button title={'Change color'} onPress={this.props.onChange} />
+        );
+    }
+
+}