From 58cd046bb455e285c2980d1cd82d23bea76ccbb8 Mon Sep 17 00:00:00 2001 From: Rick Hanlon Date: Sun, 23 Jun 2019 10:00:28 -0700 Subject: [PATCH] Add types for modal Summary: Adds codegen types and generated view config for Modal Reviewed By: TheSavior Differential Revision: D15905324 fbshipit-source-id: b430a782bf03f04b5b86757c58b39ddb28d6f06d --- Libraries/Modal/Modal.js | 2 +- Libraries/Modal/ModalSchema.js | 72 ++++++++++++------ .../Modal/RCTModalHostViewNativeComponent.js | 74 ++++++++++--------- Libraries/Types/CodegenTypes.js | 4 +- 4 files changed, 90 insertions(+), 62 deletions(-) diff --git a/Libraries/Modal/Modal.js b/Libraries/Modal/Modal.js index 314647a8436..be8fc84cde3 100644 --- a/Libraries/Modal/Modal.js +++ b/Libraries/Modal/Modal.js @@ -20,7 +20,7 @@ const PropTypes = require('prop-types'); const StyleSheet = require('../StyleSheet/StyleSheet'); const View = require('../Components/View/View'); -const RCTModalHostView = require('./RCTModalHostViewNativeComponent'); +import RCTModalHostView from './RCTModalHostViewNativeComponent'; const ModalEventEmitter = Platform.OS === 'ios' && NativeModalManager != null ? new NativeEventEmitter(NativeModalManager) diff --git a/Libraries/Modal/ModalSchema.js b/Libraries/Modal/ModalSchema.js index 7c0b3e92990..574eb57efa3 100644 --- a/Libraries/Modal/ModalSchema.js +++ b/Libraries/Modal/ModalSchema.js @@ -17,6 +17,7 @@ const ModalSchema: SchemaType = { components: { ModalHostView: { interfaceOnly: true, + paperComponentName: 'RCTModalHostView', extendsProps: [ { type: 'ReactNativeBuiltInType', @@ -39,7 +40,7 @@ const ModalSchema: SchemaType = { { name: 'onShow', optional: true, - bubblingType: 'bubble', + bubblingType: 'direct', typeAnnotation: { type: 'EventTypeAnnotation', argument: { @@ -63,12 +64,26 @@ const ModalSchema: SchemaType = { { name: 'onOrientationChange', optional: true, - bubblingType: 'bubble', + bubblingType: 'direct', typeAnnotation: { type: 'EventTypeAnnotation', argument: { type: 'ObjectTypeAnnotation', - properties: [], + properties: [ + { + type: 'StringEnumTypeAnnotation', + name: 'orientation', + optional: false, + options: [ + { + name: 'portrait', + }, + { + name: 'landscape', + }, + ], + }, + ], }, }, }, @@ -136,32 +151,43 @@ const ModalSchema: SchemaType = { optional: true, typeAnnotation: { type: 'BooleanTypeAnnotation', - default: true, + default: false, + }, + }, + { + name: 'animated', + optional: true, + typeAnnotation: { + type: 'BooleanTypeAnnotation', + default: false, }, }, { name: 'supportedOrientations', optional: true, typeAnnotation: { - type: 'StringEnumTypeAnnotation', - default: 'portrait', - options: [ - { - name: 'portrait', - }, - { - name: 'portrait-upside-down', - }, - { - name: 'landscape', - }, - { - name: 'landscape-left', - }, - { - name: 'landscape-right', - }, - ], + type: 'ArrayTypeAnnotation', + elementType: { + type: 'StringEnumTypeAnnotation', + default: 'portrait', + options: [ + { + name: 'portrait', + }, + { + name: 'portrait-upside-down', + }, + { + name: 'landscape', + }, + { + name: 'landscape-left', + }, + { + name: 'landscape-right', + }, + ], + }, }, }, { diff --git a/Libraries/Modal/RCTModalHostViewNativeComponent.js b/Libraries/Modal/RCTModalHostViewNativeComponent.js index a19c76b92ab..8842098a288 100644 --- a/Libraries/Modal/RCTModalHostViewNativeComponent.js +++ b/Libraries/Modal/RCTModalHostViewNativeComponent.js @@ -10,19 +10,21 @@ 'use strict'; -const requireNativeComponent = require('../ReactNative/requireNativeComponent'); +import codegenNativeComponent from '../Utilities/codegenNativeComponent'; +import type { + WithDefault, + BubblingEvent, + DirectEvent, + Int32, +} from '../Types/CodegenTypes'; import type {ViewProps} from '../Components/View/ViewPropTypes'; -import type {SyntheticEvent} from '../Types/CoreEventTypes'; -import type {NativeComponent} from '../Renderer/shims/ReactNative'; -type OrientationChangeEvent = SyntheticEvent< - $ReadOnly<{| - orientation: 'portrait' | 'landscape', - |}>, ->; +type OrientationChangeEvent = $ReadOnly<{| + orientation: 'portrait' | 'landscape', +|}>; -type ModalNativeProps = $ReadOnly<{| +type NativeProps = $ReadOnly<{| ...ViewProps, /** @@ -30,19 +32,17 @@ type ModalNativeProps = $ReadOnly<{| * * See https://facebook.github.io/react-native/docs/modal.html#animationtype */ - animationType?: ?('none' | 'slide' | 'fade'), + animationType?: ?WithDefault<'none' | 'slide' | 'fade', 'none'>, /** * The `presentationStyle` prop controls how the modal appears. * * See https://facebook.github.io/react-native/docs/modal.html#presentationstyle */ - presentationStyle?: ?( - | 'fullScreen' - | 'pageSheet' - | 'formSheet' - | 'overFullScreen' - ), + presentationStyle?: ?WithDefault< + 'fullScreen' | 'pageSheet' | 'formSheet' | 'overFullScreen', + 'fullScreen', + >, /** * The `transparent` prop determines whether your modal will fill the @@ -50,7 +50,7 @@ type ModalNativeProps = $ReadOnly<{| * * See https://facebook.github.io/react-native/docs/modal.html#transparent */ - transparent?: ?boolean, + transparent?: ?WithDefault, /** * The `hardwareAccelerated` prop controls whether to force hardware @@ -58,14 +58,14 @@ type ModalNativeProps = $ReadOnly<{| * * See https://facebook.github.io/react-native/docs/modal.html#hardwareaccelerated */ - hardwareAccelerated?: ?boolean, + hardwareAccelerated?: ?WithDefault, /** * The `visible` prop determines whether your modal is visible. * * See https://facebook.github.io/react-native/docs/modal.html#visible */ - visible?: ?boolean, + visible?: ?WithDefault, /** * The `onRequestClose` callback is called when the user taps the hardware @@ -75,7 +75,7 @@ type ModalNativeProps = $ReadOnly<{| * * See https://facebook.github.io/react-native/docs/modal.html#onrequestclose */ - onRequestClose?: ?(event?: SyntheticEvent) => mixed, + onRequestClose?: ?(event?: DirectEvent) => mixed, /** * The `onShow` prop allows passing a function that will be called once the @@ -83,7 +83,7 @@ type ModalNativeProps = $ReadOnly<{| * * See https://facebook.github.io/react-native/docs/modal.html#onshow */ - onShow?: ?(event?: SyntheticEvent) => mixed, + onShow?: ?(event?: DirectEvent) => mixed, /** * The `onDismiss` prop allows passing a function that will be called once @@ -91,24 +91,27 @@ type ModalNativeProps = $ReadOnly<{| * * See https://facebook.github.io/react-native/docs/modal.html#ondismiss */ - onDismiss?: ?() => mixed, + onDismiss?: ?(event?: BubblingEvent) => mixed, /** * Deprecated. Use the `animationType` prop instead. */ - animated?: ?boolean, + animated?: ?WithDefault, /** * The `supportedOrientations` prop allows the modal to be rotated to any of the specified orientations. * * See https://facebook.github.io/react-native/docs/modal.html#supportedorientations */ - supportedOrientations?: ?$ReadOnlyArray< - | 'portrait' - | 'portrait-upside-down' - | 'landscape' - | 'landscape-left' - | 'landscape-right', + supportedOrientations?: ?WithDefault< + $ReadOnlyArray< + | 'portrait' + | 'portrait-upside-down' + | 'landscape' + | 'landscape-left' + | 'landscape-right', + >, + 'portrait', >, /** @@ -116,16 +119,15 @@ type ModalNativeProps = $ReadOnly<{| * * See https://facebook.github.io/react-native/docs/modal.html#onorientationchange */ - onOrientationChange?: ?(event: OrientationChangeEvent) => mixed, + onOrientationChange?: ?(event: DirectEvent) => mixed, /** * The `identifier` is the unique number for identifying Modal components. */ - identifier?: ?number, + identifier?: ?WithDefault, |}>; -type RCTModalHostViewNativeType = Class>; - -module.exports = ((requireNativeComponent( - 'RCTModalHostView', -): any): RCTModalHostViewNativeType); +export default codegenNativeComponent('ModalHostView', { + interfaceOnly: true, + paperComponentName: 'RCTModalHostView', +}); diff --git a/Libraries/Types/CodegenTypes.js b/Libraries/Types/CodegenTypes.js index 3984820115a..a8279e6178d 100644 --- a/Libraries/Types/CodegenTypes.js +++ b/Libraries/Types/CodegenTypes.js @@ -10,7 +10,6 @@ 'use strict'; -import type {NativeComponent} from '../Renderer/shims/ReactNative'; import type {SyntheticEvent} from './CoreEventTypes'; // Event types @@ -21,6 +20,7 @@ export type DirectEvent = SyntheticEvent; export type Float = number; export type Int32 = number; +type DefaultTypes = number | boolean | string | $ReadOnlyArray; // Default handling, ignore the unused value // we're only using it for type checking // @@ -28,4 +28,4 @@ export type Int32 = number; // but that is currently not supported in the codegen since we require a default // // eslint-disable-next-line no-unused-vars -export type WithDefault = Type; +export type WithDefault = Type;