From 56bf6bf71ba6bb0006670321a5be465133be56ed Mon Sep 17 00:00:00 2001 From: Henning Hall Date: Tue, 19 Jun 2018 23:49:42 +0200 Subject: [PATCH] Improved examples. --- example/App.js | 24 ++++++------------- example/exampleKeys.js | 5 ++++ example/examples.js | 20 ++++++++++++++++ .../Advanced.js} | 12 ++++------ .../Minimal.js} | 2 +- example/examples/TimeMode.js | 15 ++++++++++++ example/index.js | 7 +++--- example/package.json | 4 ++-- 8 files changed, 57 insertions(+), 32 deletions(-) create mode 100644 example/exampleKeys.js create mode 100644 example/examples.js rename example/{ExtendedExample.js => examples/Advanced.js} (93%) rename example/{MinimalExample.js => examples/Minimal.js} (82%) create mode 100644 example/examples/TimeMode.js diff --git a/example/App.js b/example/App.js index 1565c0f..845c404 100644 --- a/example/App.js +++ b/example/App.js @@ -4,22 +4,7 @@ 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'; -import MinimalExample from './MinimalExample'; -import ExtendedExample from './ExtendedExample'; - -const MINIMAL_EXAMPLE = 'MINIMAL_EXAMPLE'; -const EXTENDED_EXAMPLE = 'EXTENDED_EXAMPLE'; - -const examples = { - [MINIMAL_EXAMPLE]: { - buttonTitle: 'Show minimal example', - component: - }, - [EXTENDED_EXAMPLE]: { - buttonTitle: 'Show extended example', - component: - } -} +import examples from './examples'; export default class App extends Component { @@ -28,6 +13,7 @@ export default class App extends Component { render() { return ( + Examples {!this.state.picker && this.renderButtons()} {!!this.state.picker && this.renderBackButton()} {!!this.state.picker && this.renderPicker()} @@ -67,12 +53,16 @@ const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', - // justifyContent: 'center', backgroundColor: 'white', marginTop: 15, }, text: { color: 'dodgerblue', fontSize: 16, + }, + header: { + color: 'black', + fontSize: 22, + margin: 20, } }) diff --git a/example/exampleKeys.js b/example/exampleKeys.js new file mode 100644 index 0000000..86580e6 --- /dev/null +++ b/example/exampleKeys.js @@ -0,0 +1,5 @@ +export const EXAMPLE_KEYS = { + MINIMAL : 'MINIMAL', + ADVANCED : 'ADVANCED', + TIME_MODE : 'TIME_MODE', +} \ No newline at end of file diff --git a/example/examples.js b/example/examples.js new file mode 100644 index 0000000..4efa8be --- /dev/null +++ b/example/examples.js @@ -0,0 +1,20 @@ +import React, { Component } from 'react' +import Minimal from './examples/Minimal' +import Advanced from './examples/Advanced' +import TimeMode from './examples/TimeMode' +import { EXAMPLE_KEYS } from './exampleKeys' + +export default { + [EXAMPLE_KEYS.MINIMAL]: { + buttonTitle: 'Minimal', + component: + }, + [EXAMPLE_KEYS.ADVANCED]: { + buttonTitle: 'Advanced', + component: + }, + [EXAMPLE_KEYS.TIME_MODE]: { + buttonTitle: 'Time mode', + component: + } +} diff --git a/example/ExtendedExample.js b/example/examples/Advanced.js similarity index 93% rename from example/ExtendedExample.js rename to example/examples/Advanced.js index 892e5bf..e3b1d4d 100644 --- a/example/ExtendedExample.js +++ b/example/examples/Advanced.js @@ -3,7 +3,7 @@ import { Button, View, StyleSheet, ScrollView, Text, TouchableOpacity } from 're 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'; +import locales from '../locales'; Date.prototype.addHours = function(h) { this.setTime(this.getTime() + (h*60*60*1000)); @@ -12,18 +12,12 @@ Date.prototype.addHours = function(h) { export default class App extends Component { - searchUpdated(term) { - this.setState({ searchTerm: term }) - } - state = { chosenDate: new Date(), searchTerm: '', locale: DeviceInfo.getDeviceLocale(), } - setDate = (newDate) => this.setState({ chosenDate: newDate }) - render() { const result = locales.filter(createFilter(this.state.searchTerm)).slice(0, 5); @@ -48,7 +42,7 @@ export default class App extends Component { })} /> { this.searchUpdated(term) }} + onChangeText={this.searchUpdated} style={styles.searchInput} placeholder="Change locale" /> @@ -64,6 +58,8 @@ export default class App extends Component { ); } + setDate = (newDate) => this.setState({ chosenDate: newDate }) + searchUpdated = (term) => this.setState({ searchTerm: term }) } diff --git a/example/MinimalExample.js b/example/examples/Minimal.js similarity index 82% rename from example/MinimalExample.js rename to example/examples/Minimal.js index 873f412..fd93bbb 100644 --- a/example/MinimalExample.js +++ b/example/examples/Minimal.js @@ -8,7 +8,7 @@ export default class MinimalExample extends Component { render = () => this.setState({ date })} + onDateChange={date => this.setState({ date })} /> } diff --git a/example/examples/TimeMode.js b/example/examples/TimeMode.js new file mode 100644 index 0000000..c07315d --- /dev/null +++ b/example/examples/TimeMode.js @@ -0,0 +1,15 @@ +import React, { Component } from 'react'; +import DatePicker from 'react-native-date-picker-x'; + +export default class TimeMode extends Component { + + state = { date: new Date() } + + render = () => + this.setState({ date })} + mode={'time'} + /> + +} diff --git a/example/index.js b/example/index.js index d390dbb..bd7c799 100644 --- a/example/index.js +++ b/example/index.js @@ -1,5 +1,4 @@ -import { AppRegistry } from 'react-native'; -import App from './App'; -import MinimalExample from './MinimalExample'; +import { AppRegistry } from 'react-native' +import App from './App' -AppRegistry.registerComponent('DatePickerExample', () => App); +AppRegistry.registerComponent('DatePickerExample', () => App) diff --git a/example/package.json b/example/package.json index d00475b..a4036f4 100644 --- a/example/package.json +++ b/example/package.json @@ -10,10 +10,10 @@ "moment": "^2.22.1", "react": "16.3.1", "react-native": "0.55.2", - "react-native-date-picker-x": "^1.0.6", + "react-native-date-picker-x": "^1.3.0", "react-native-device-info": "^0.21.5", "react-native-search-filter": "^0.1.3" - }, + }, "devDependencies": { "babel-jest": "22.4.3", "babel-preset-react-native": "4.0.0",