From 355568e848fdde4fc8c474d86b000366c19597c9 Mon Sep 17 00:00:00 2001 From: Luna Wei Date: Thu, 25 Aug 2022 07:35:09 -0700 Subject: [PATCH] DatePickerIOS Summary: Changelog: [Internal] Add flow definition for DatePickerIOS Reviewed By: yungsters Differential Revision: D38871304 fbshipit-source-id: 3c40be45e3117253b490e85cf96ab250fd579f98 --- .../DatePicker/DatePickerIOS.android.js | 3 +- .../DatePicker/DatePickerIOS.flow.android.js | 14 +++ .../DatePicker/DatePickerIOS.flow.ios.js | 112 ++++++++++++++++++ .../DatePicker/DatePickerIOS.ios.js | 3 +- 4 files changed, 130 insertions(+), 2 deletions(-) create mode 100644 Libraries/Components/DatePicker/DatePickerIOS.flow.android.js create mode 100644 Libraries/Components/DatePicker/DatePickerIOS.flow.ios.js diff --git a/Libraries/Components/DatePicker/DatePickerIOS.android.js b/Libraries/Components/DatePicker/DatePickerIOS.android.js index e97edf657c2..738d08c51f3 100644 --- a/Libraries/Components/DatePicker/DatePickerIOS.android.js +++ b/Libraries/Components/DatePicker/DatePickerIOS.android.js @@ -12,6 +12,7 @@ import * as React from 'react'; import StyleSheet from '../../StyleSheet/StyleSheet'; import Text from '../../Text/Text'; import View from '../View/View'; +import type {DatePickerIOSType} from './DatePickerIOS.flow'; class DummyDatePickerIOS extends React.Component { render() { @@ -42,4 +43,4 @@ const styles = StyleSheet.create({ }, }); -module.exports = DummyDatePickerIOS; +module.exports = (DummyDatePickerIOS: DatePickerIOSType); diff --git a/Libraries/Components/DatePicker/DatePickerIOS.flow.android.js b/Libraries/Components/DatePicker/DatePickerIOS.flow.android.js new file mode 100644 index 00000000000..5cf823e79c2 --- /dev/null +++ b/Libraries/Components/DatePicker/DatePickerIOS.flow.android.js @@ -0,0 +1,14 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @flow strict + * @format + */ + +'use strict'; +import * as React from 'react'; + +export type DatePickerIOSType = React.ComponentType<>; diff --git a/Libraries/Components/DatePicker/DatePickerIOS.flow.ios.js b/Libraries/Components/DatePicker/DatePickerIOS.flow.ios.js new file mode 100644 index 00000000000..85e953a027d --- /dev/null +++ b/Libraries/Components/DatePicker/DatePickerIOS.flow.ios.js @@ -0,0 +1,112 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @format + * @flow strict-local + */ + +// This is a controlled component version of RCTDatePickerIOS. + +import * as React from 'react'; +import type {SyntheticEvent} from '../../Types/CoreEventTypes'; +import type {ViewProps} from '../View/ViewPropTypes'; + +type Event = SyntheticEvent< + $ReadOnly<{| + timestamp: number, + |}>, +>; + +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, + + /** + * The date picker style + * This is only available on devices with iOS 14.0 and later. + * 'spinner' is the default style if this prop isn't set. + */ + pickerStyle?: ?('compact' | 'spinner' | 'inline'), +|}>; + +/** + * Use `DatePickerIOS` to render a date/time picker (selector) on iOS. This is + * a controlled component, so you must hook in to the `onDateChange` callback + * and update the `date` prop in order for the component to update, otherwise + * the user's change will be reverted immediately to reflect `props.date` as the + * source of truth. + */ +export type DatePickerIOSType = React.ComponentType; diff --git a/Libraries/Components/DatePicker/DatePickerIOS.ios.js b/Libraries/Components/DatePicker/DatePickerIOS.ios.js index 91d5d0d6f53..566d5756bf6 100644 --- a/Libraries/Components/DatePicker/DatePickerIOS.ios.js +++ b/Libraries/Components/DatePicker/DatePickerIOS.ios.js @@ -20,6 +20,7 @@ import invariant from 'invariant'; import type {SyntheticEvent} from '../../Types/CoreEventTypes'; import type {ViewProps} from '../View/ViewPropTypes'; +import type {DatePickerIOSType} from './DatePickerIOS.flow'; type Event = SyntheticEvent< $ReadOnly<{| @@ -238,4 +239,4 @@ function getHeight( return styles.datePickerIOS; } -module.exports = DatePickerIOS; +module.exports = (DatePickerIOS: DatePickerIOSType);