From f8c8231706492b588331354d45b833aa21434e13 Mon Sep 17 00:00:00 2001 From: Eli White Date: Fri, 1 Jun 2018 10:11:35 -0700 Subject: [PATCH] DatePickerIOS ES6 Class Reviewed By: sahrens Differential Revision: D8219657 fbshipit-source-id: cef48cf3ad24ad442f07df0edad55ab97d96c6f2 --- .../DatePicker/DatePickerIOS.ios.js | 173 ++++++++---------- 1 file changed, 74 insertions(+), 99 deletions(-) diff --git a/Libraries/Components/DatePicker/DatePickerIOS.ios.js b/Libraries/Components/DatePicker/DatePickerIOS.ios.js index 2010e8c1f..f76902d85 100644 --- a/Libraries/Components/DatePicker/DatePickerIOS.ios.js +++ b/Libraries/Components/DatePicker/DatePickerIOS.ios.js @@ -13,35 +13,89 @@ 'use strict'; -const NativeMethodsMixin = require('NativeMethodsMixin'); const React = require('React'); const invariant = require('fbjs/lib/invariant'); -const PropTypes = require('prop-types'); const StyleSheet = require('StyleSheet'); const View = require('View'); -const ViewPropTypes = require('ViewPropTypes'); -const createReactClass = require('create-react-class'); const requireNativeComponent = require('requireNativeComponent'); import type {ViewProps} from 'ViewPropTypes'; -type DefaultProps = { - mode: 'date' | 'time' | 'datetime', -}; 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, |}>; @@ -52,94 +106,15 @@ type Props = $ReadOnly<{| * the user's change will be reverted immediately to reflect `props.date` as the * source of truth. */ -const DatePickerIOS = ((createReactClass({ - displayName: 'DatePickerIOS', - // TOOD: Put a better type for _picker - _picker: (undefined: ?$FlowFixMe), +class DatePickerIOS extends React.Component { + static DefaultProps = { + mode: 'datetime', + }; - mixins: [NativeMethodsMixin], + // $FlowFixMe How to type a native component to be able to call setNativeProps + _picker: ?React.ElementRef = null; - propTypes: { - ...ViewPropTypes, - /** - * The currently selected date. - */ - date: PropTypes.instanceOf(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: PropTypes.instanceOf(Date), - - /** - * 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: PropTypes.func, - - /** - * 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: PropTypes.func.isRequired, - - /** - * Maximum date. - * - * Restricts the range of possible date/time values. - */ - maximumDate: PropTypes.instanceOf(Date), - - /** - * Minimum date. - * - * Restricts the range of possible date/time values. - */ - minimumDate: PropTypes.instanceOf(Date), - - /** - * The date picker mode. - */ - mode: PropTypes.oneOf(['date', 'time', 'datetime']), - - /** - * The date picker locale. - */ - locale: PropTypes.string, - - /** - * The interval at which minutes can be selected. - */ - minuteInterval: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30]), - - /** - * 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: PropTypes.number, - }, - - getDefaultProps: function(): DefaultProps { - return { - mode: 'datetime', - }; - }, - - componentDidUpdate: function() { + componentDidUpdate() { if (this.props.date) { const propsTimeStamp = this.props.date.getTime(); if (this._picker) { @@ -148,16 +123,16 @@ const DatePickerIOS = ((createReactClass({ }); } } - }, + } - _onChange: function(event: Event) { + _onChange = (event: Event) => { const nativeTimeStamp = event.nativeEvent.timestamp; this.props.onDateChange && this.props.onDateChange(new Date(nativeTimeStamp)); this.props.onChange && this.props.onChange(event); - }, + }; - render: function() { + render() { const props = this.props; invariant( props.date || props.initialDate, @@ -193,8 +168,8 @@ const DatePickerIOS = ((createReactClass({ /> ); - }, -}): any): React.ComponentType); + } +} const styles = StyleSheet.create({ datePickerIOS: {