diff --git a/DatePickerAndroid.js b/DatePickerAndroid.js index b4b373d..ba02754 100644 --- a/DatePickerAndroid.js +++ b/DatePickerAndroid.js @@ -1,16 +1,19 @@ -import React from 'react'; -import { DatePickerIOS, requireNativeComponent, StyleSheet } from 'react-native'; +import React from 'react' +import { DatePickerIOS, requireNativeComponent, StyleSheet } from 'react-native' import moment from 'moment' -import { throwIfInvalidProps } from "./propChecker" +import { throwIfInvalidProps } from './propChecker' -const NativeDatePicker = requireNativeComponent(`DatePickerManager`, DatePickerAndroid, { nativeOnly: { onChange: true } }); +const NativeDatePicker = requireNativeComponent( + `DatePickerManager`, + DatePickerAndroid, + { nativeOnly: { onChange: true } } +) class DatePickerAndroid extends React.PureComponent { - static defaultProps = { mode: 'datetime', minuteInterval: 1, - }; + } render() { if (__DEV__) throwIfInvalidProps(this.props) @@ -32,35 +35,42 @@ class DatePickerAndroid extends React.PureComponent { this.props.onDateChange(jsDate) } - _maximumDate = () => this.props.maximumDate && this._toIsoWithTimeZoneOffset(this.props.maximumDate); + _maximumDate = () => + this.props.maximumDate && + this._toIsoWithTimeZoneOffset(this.props.maximumDate) - _minimumDate = () => this.props.minimumDate && this._toIsoWithTimeZoneOffset(this.props.minimumDate); + _minimumDate = () => + this.props.minimumDate && + this._toIsoWithTimeZoneOffset(this.props.minimumDate) - _date = () => this._toIsoWithTimeZoneOffset(this.props.date); + _date = () => this._toIsoWithTimeZoneOffset(this.props.date) _fromIsoWithTimeZoneOffset = date => { - if (this.props.timeZoneOffsetInMinutes === undefined) - return moment(date) + if (this.props.timeZoneOffsetInMinutes === undefined) return moment(date) - return moment.utc(date).subtract(this.props.timeZoneOffsetInMinutes, 'minutes') + return moment + .utc(date) + .subtract(this.props.timeZoneOffsetInMinutes, 'minutes') } _toIsoWithTimeZoneOffset = date => { if (this.props.timeZoneOffsetInMinutes === undefined) return moment(date).toISOString() - return moment.utc(date).add(this.props.timeZoneOffsetInMinutes, 'minutes').toISOString() + return moment + .utc(date) + .add(this.props.timeZoneOffsetInMinutes, 'minutes') + .toISOString() } - } const styles = StyleSheet.create({ picker: { width: 310, height: 180, - } + }, }) -DatePickerAndroid.propTypes = DatePickerIOS.propTypes; +DatePickerAndroid.propTypes = DatePickerIOS.propTypes -export default DatePickerAndroid; +export default DatePickerAndroid diff --git a/DatePickerIOS.js b/DatePickerIOS.js index 24cf5f9..9e65cd1 100644 --- a/DatePickerIOS.js +++ b/DatePickerIOS.js @@ -7,97 +7,16 @@ * * This is a controlled component version of RCTDatePickerIOS * - * @format - * @flow */ -'use strict'; +'use strict' -import React from 'react'; -import { StyleSheet, View, requireNativeComponent } from 'react-native'; -import { throwIfInvalidProps } from "./propChecker" -const invariant = require('fbjs/lib/invariant'); +import React from 'react' +import { StyleSheet, View, requireNativeComponent } from 'react-native' +import { throwIfInvalidProps } from './propChecker' +const invariant = require('fbjs/lib/invariant') -import type { ViewProps } from 'ViewPropTypes'; - -const RCTDatePickerIOS = requireNativeComponent('RNDatePicker'); - -type Event = Object; - -type Props = $ReadOnly<{| - ...ViewProps, - - /** - * The currently selected date. - */ - date ?: ? Date, - - /** - * Provides an initial value that will change when the user starts selecting - * a date. It is useful for simple use-cases where you do not want to deal - * with listening to events and updating the date prop to keep the - * controlled state in sync. The controlled state has known bugs which - * causes it to go out of sync with native. The initialDate prop is intended - * to allow you to have native be source of truth. - */ - initialDate ?: ? Date, - - /** - * The date picker locale. - */ - locale ?: ? string, - - /** - * Maximum date. - * - * Restricts the range of possible date/time values. - */ - maximumDate ?: ? Date, - - /** - * Minimum date. - * - * Restricts the range of possible date/time values. - */ - minimumDate ?: ? Date, - - /** - * The interval at which minutes can be selected. - */ - minuteInterval ?: ? (1 | 2 | 3 | 4 | 5 | 6 | 10 | 12 | 15 | 20 | 30), - - /** - * The date picker mode. - */ - mode ?: ? ('date' | 'time' | 'datetime'), - - /** - * Date change handler. - * - * This is called when the user changes the date or time in the UI. - * The first and only argument is an Event. For getting the date the picker - * was changed to, use onDateChange instead. - */ - onChange ?: ? (event: Event) => void, - - /** - * Date change handler. - * - * This is called when the user changes the date or time in the UI. - * The first and only argument is a Date object representing the new - * date and time. - */ - onDateChange: (date: Date) => void, - - /** - * Timezone offset in minutes. - * - * By default, the date picker will use the device's timezone. With this - * parameter, it is possible to force a certain timezone offset. For - * instance, to show times in Pacific Standard Time, pass -7 * 60. - */ - timeZoneOffsetInMinutes ?: ? number, -|}>; +const RCTDatePickerIOS = requireNativeComponent('RNDatePicker') /** * Use `DatePickerIOS` to render a date/time picker (selector) on iOS. This is @@ -106,52 +25,48 @@ type Props = $ReadOnly<{| * the user's change will be reverted immediately to reflect `props.date` as the * source of truth. */ -export default class DatePickerIOS extends React.Component { +export default class DatePickerIOS extends React.Component { static DefaultProps = { mode: 'datetime', - }; + } // $FlowFixMe How to type a native component to be able to call setNativeProps - _picker: ?React.ElementRef = null; + _picker = null componentDidUpdate() { if (this.props.date) { - const propsTimeStamp = this.props.date.getTime(); + const propsTimeStamp = this.props.date.getTime() if (this._picker) { this._picker.setNativeProps({ date: propsTimeStamp, - }); + }) } } } - _onChange = (event: Event) => { - const nativeTimeStamp = event.nativeEvent.timestamp; + _onChange = event => { + const nativeTimeStamp = event.nativeEvent.timestamp this.props.onDateChange && - this.props.onDateChange(new Date(nativeTimeStamp)); - this.props.onChange && this.props.onChange(event); - }; + this.props.onDateChange(new Date(nativeTimeStamp)) + this.props.onChange && this.props.onChange(event) + } render() { - const props = this.props; + const props = this.props if (__DEV__) throwIfInvalidProps(props) - invariant( - props.date || props.initialDate, - 'A selected date or initial date should be specified.', - ); return ( { - this._picker = picker; + this._picker = picker }} style={[styles.datePickerIOS, props.style]} date={ props.date ? props.date.getTime() : props.initialDate - ? props.initialDate.getTime() - : undefined + ? props.initialDate.getTime() + : undefined } locale={props.locale ? props.locale : undefined} maximumDate={ @@ -168,7 +83,7 @@ export default class DatePickerIOS extends React.Component { onResponderTerminationRequest={() => false} textColor={props.textColor} /> - ); + ) } } @@ -177,4 +92,4 @@ const styles = StyleSheet.create({ height: 216, width: 310, }, -}); +}) diff --git a/examples/advanced/.eslintrc.js b/examples/advanced/.eslintrc.js index 40c6dcd..0dffdb0 100644 --- a/examples/advanced/.eslintrc.js +++ b/examples/advanced/.eslintrc.js @@ -1,4 +1,4 @@ module.exports = { root: true, extends: '@react-native-community', -}; +} diff --git a/examples/advanced/.watchmanconfig b/examples/advanced/.watchmanconfig index 9e26dfe..0967ef4 100644 --- a/examples/advanced/.watchmanconfig +++ b/examples/advanced/.watchmanconfig @@ -1 +1 @@ -{} \ No newline at end of file +{} diff --git a/examples/advanced/__tests__/App-test.js b/examples/advanced/__tests__/App-test.js index 1784766..351e770 100644 --- a/examples/advanced/__tests__/App-test.js +++ b/examples/advanced/__tests__/App-test.js @@ -2,13 +2,13 @@ * @format */ -import 'react-native'; -import React from 'react'; -import App from '../App'; +import 'react-native' +import React from 'react' +import App from '../App' // Note: test renderer must be required after react-native. -import renderer from 'react-test-renderer'; +import renderer from 'react-test-renderer' it('renders correctly', () => { - renderer.create(); -}); + renderer.create() +}) diff --git a/examples/advanced/app.json b/examples/advanced/app.json index e61febf..d491706 100644 --- a/examples/advanced/app.json +++ b/examples/advanced/app.json @@ -1,4 +1,4 @@ { - "name": "rn602", - "displayName": "DatePicker" + "name": "rn602", + "displayName": "DatePicker" } diff --git a/examples/advanced/babel.config.js b/examples/advanced/babel.config.js index f842b77..cf1f9fb 100644 --- a/examples/advanced/babel.config.js +++ b/examples/advanced/babel.config.js @@ -1,3 +1,3 @@ module.exports = { presets: ['module:metro-react-native-babel-preset'], -}; +} diff --git a/examples/advanced/index.js b/examples/advanced/index.js index 69303b3..5c5c0c5 100644 --- a/examples/advanced/index.js +++ b/examples/advanced/index.js @@ -1,9 +1,5 @@ -/** - * @format - */ +import { AppRegistry } from 'react-native' +import App from './src/App' +import { name as appName } from './app.json' -import {AppRegistry} from 'react-native'; -import App from './src/App'; -import {name as appName} from './app.json'; - -AppRegistry.registerComponent(appName, () => App); +AppRegistry.registerComponent(appName, () => App) diff --git a/examples/advanced/metro.config.js b/examples/advanced/metro.config.js index 13a9642..f3c85f0 100644 --- a/examples/advanced/metro.config.js +++ b/examples/advanced/metro.config.js @@ -14,4 +14,4 @@ module.exports = { }, }), }, -}; +} diff --git a/examples/advanced/package.json b/examples/advanced/package.json index 7609512..a08439d 100644 --- a/examples/advanced/package.json +++ b/examples/advanced/package.json @@ -1,28 +1,28 @@ { - "name": "rn602", - "version": "0.0.1", - "private": true, - "scripts": { - "start": "react-native start", - "test": "jest", - "lint": "eslint ." - }, - "dependencies": { - "react": "16.8.6", - "react-native": "0.60.3", - "react-native-date-picker": "^2.5.0" - }, - "devDependencies": { - "@babel/core": "^7.5.4", - "@babel/runtime": "^7.5.4", - "@react-native-community/eslint-config": "^0.0.5", - "babel-jest": "^24.8.0", - "eslint": "^6.0.1", - "jest": "^24.8.0", - "metro-react-native-babel-preset": "^0.55.0", - "react-test-renderer": "16.8.6" - }, - "jest": { - "preset": "react-native" - } + "name": "rn602", + "version": "0.0.1", + "private": true, + "scripts": { + "start": "react-native start", + "test": "jest", + "lint": "eslint ." + }, + "dependencies": { + "react": "16.8.6", + "react-native": "0.60.3", + "react-native-date-picker": "^2.6.1" + }, + "devDependencies": { + "@babel/core": "^7.5.4", + "@babel/runtime": "^7.5.4", + "@react-native-community/eslint-config": "^0.0.5", + "babel-jest": "^24.8.0", + "eslint": "^6.0.1", + "jest": "^24.8.0", + "metro-react-native-babel-preset": "^0.55.0", + "react-test-renderer": "16.8.6" + }, + "jest": { + "preset": "react-native" + } } diff --git a/examples/advanced/src/App.js b/examples/advanced/src/App.js index 92c9b80..b55e91e 100644 --- a/examples/advanced/src/App.js +++ b/examples/advanced/src/App.js @@ -1,32 +1,40 @@ -import React, { Component } from 'react'; -import { ScrollView, StyleSheet, Text, TouchableOpacity } from 'react-native'; -import examples from './examples'; +import React, { Component } from 'react' +import { ScrollView, StyleSheet, Text, TouchableOpacity } from 'react-native' +import examples from './examples' export default class App extends Component { - state = { picker: undefined, - backgroundColor: "#ffffff", + backgroundColor: '#ffffff', } render() { return ( + style={[ + styles.container, + { backgroundColor: this.state.backgroundColor }, + ]} + contentContainerStyle={styles.content} + > {!this.state.picker && 'Examples'} {!this.state.picker && this.renderButtons()} {!!this.state.picker && this.renderBackButton()} {!!this.state.picker && this.renderPicker()} - ); + ) } setBackgroundColor = backgroundColor => this.setState({ backgroundColor }) renderPicker = () => { - const Picker = examples[this.state.picker].component; - return + const Picker = examples[this.state.picker].component + return ( + + ) } renderButtons = () => @@ -34,7 +42,7 @@ export default class App extends Component { .filter(key => key !== this.state.picker) .map(this.renderButton) - renderButton = (key) => ( + renderButton = key => ( this.setState({ picker: key })} @@ -44,21 +52,20 @@ export default class App extends Component { ) - renderBackButton = (key) => ( + renderBackButton = key => ( this.setState({ picker: undefined })} - style={{ margin: 10, position: 'absolute', top: 0, left: 10, }} + style={{ margin: 10, position: 'absolute', top: 0, left: 10 }} > Back ) - } const styles = StyleSheet.create({ container: { paddingTop: 15, - borderWidth:1, + borderWidth: 1, }, content: { alignItems: 'center', @@ -71,5 +78,5 @@ const styles = StyleSheet.create({ color: 'black', fontSize: 22, margin: 20, - } + }, }) diff --git a/examples/advanced/src/PropButton.js b/examples/advanced/src/PropButton.js index 67bf92c..2822ed8 100644 --- a/examples/advanced/src/PropButton.js +++ b/examples/advanced/src/PropButton.js @@ -1,4 +1,6 @@ -import React, { Component } from 'react'; -import { Button } from 'react-native'; +import React, { Component } from 'react' +import { Button } from 'react-native' -export const PropButton = ({ title, value, onChange }) =>