status-im
/
react-native
mirror of https://github.com/status-im/react-native.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

DatePickerIOS ES6 Class 

Reviewed By: sahrens

Differential Revision: D8219657

fbshipit-source-id: cef48cf3ad24ad442f07df0edad55ab97d96c6f2
This commit is contained in:
Eli White 2018-06-01 10:11:35 -07:00 committed by Facebook Github Bot
parent 3b53091869
commit f8c8231706
1 changed files with 74 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

171
Libraries/Components/DatePicker/DatePickerIOS.ios.js
View File

@ -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),
mixins: [NativeMethodsMixin],
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 {
class DatePickerIOS extends React.Component<Props> {
static DefaultProps = {
mode: 'datetime',
};
},
componentDidUpdate: function() {
// $FlowFixMe How to type a native component to be able to call setNativeProps
_picker: ?React.ElementRef<typeof RCTDatePickerIOS> = null;
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: {