DatePickerIOS ES6 Class

Reviewed By: sahrens

Differential Revision: D8219657

fbshipit-source-id: cef48cf3ad24ad442f07df0edad55ab97d96c6f2

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<Props> {
+  static DefaultProps = {
+    mode: 'datetime',
+  };
 
-  mixins: [NativeMethodsMixin],
+  // $FlowFixMe How to type a native component to be able to call setNativeProps
+  _picker: ?React.ElementRef<typeof RCTDatePickerIOS> = 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({
         />
       </View>
     );
-  },
-}): any): React.ComponentType<Props>);
+  }
+}
 
 const styles = StyleSheet.create({
   datePickerIOS: {