From a828db69113e880d2075f4b45db5d2be1954e9ce Mon Sep 17 00:00:00 2001 From: Heinrich Tremblay Date: Fri, 18 Jan 2019 03:45:30 -0800 Subject: [PATCH] AndroidDrawerLayout (#23036) Summary: Changelog: ---------- [Android] [Changed] - As mentioned in #22990, I have moved native components required by DrawerLayoutAndroid.android.js into separate files and added Flow Typing. Question ---------- I have two questions. It is not included in the files mentioned by #22990 [comment](https://github.com/facebook/react-native/issues/22990#issue-399165354). Perhaps we should be adding knowledge of that type to the codegen since it is quite complicated, what do you think TheSavior? The `Props` type include `renderNavigationView: () => React.Element,` and `children?: React.Node,`. Therefore I added `const React = require('React');` to the file, is it ok? Pull Request resolved: https://github.com/facebook/react-native/pull/23036 Differential Revision: D13710035 Pulled By: cpojer fbshipit-source-id: 671423b76c3b443d85e4b63d05d6253dbd33b29c --- .../AndroidDrawerLayoutNativeComponent.js | 121 ++++++++++++++++++ .../DrawerLayoutAndroid.android.js | 23 +--- 2 files changed, 125 insertions(+), 19 deletions(-) create mode 100644 Libraries/Components/DrawerAndroid/AndroidDrawerLayoutNativeComponent.js diff --git a/Libraries/Components/DrawerAndroid/AndroidDrawerLayoutNativeComponent.js b/Libraries/Components/DrawerAndroid/AndroidDrawerLayoutNativeComponent.js new file mode 100644 index 000000000..ba5ec7698 --- /dev/null +++ b/Libraries/Components/DrawerAndroid/AndroidDrawerLayoutNativeComponent.js @@ -0,0 +1,121 @@ +/** + * Copyright (c) Facebook, Inc. and its 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 + */ + +'use strict'; + +const requireNativeComponent = require('requireNativeComponent'); + +import type {NativeComponent} from 'ReactNative'; +import type {SyntheticEvent} from 'CoreEventTypes'; +import type {ViewStyleProp} from 'StyleSheet'; +import type React from 'React'; + +type ColorValue = null | string; + +type DrawerStates = 'Idle' | 'Dragging' | 'Settling'; + +type DrawerStateEvent = SyntheticEvent< + $ReadOnly<{| + drawerState: number, + |}>, +>; + +type DrawerSlideEvent = SyntheticEvent< + $ReadOnly<{| + offset: number, + |}>, +>; + +type NativeProps = $ReadOnly<{| + /** + * Determines whether the keyboard gets dismissed in response to a drag. + * - 'none' (the default), drags do not dismiss the keyboard. + * - 'on-drag', the keyboard is dismissed when a drag begins. + */ + keyboardDismissMode?: ?('none' | 'on-drag'), + + /** + * Specifies the background color of the drawer. The default value is white. + * If you want to set the opacity of the drawer, use rgba. Example: + * + * ``` + * return ( + * + * + * ); + * ``` + */ + drawerBackgroundColor: ColorValue, + + /** + * Specifies the side of the screen from which the drawer will slide in. + */ + drawerPosition: ?number, + + /** + * Specifies the width of the drawer, more precisely the width of the view that be pulled in + * from the edge of the window. + */ + drawerWidth?: ?number, + + /** + * Specifies the lock mode of the drawer. The drawer can be locked in 3 states: + * - unlocked (default), meaning that the drawer will respond (open/close) to touch gestures. + * - locked-closed, meaning that the drawer will stay closed and not respond to gestures. + * - locked-open, meaning that the drawer will stay opened and not respond to gestures. + * The drawer may still be opened and closed programmatically (`openDrawer`/`closeDrawer`). + */ + drawerLockMode?: ?('unlocked' | 'locked-closed' | 'locked-open'), + + /** + * Function called whenever there is an interaction with the navigation view. + */ + onDrawerSlide?: ?(event: DrawerSlideEvent) => mixed, + + /** + * Function called when the drawer state has changed. The drawer can be in 3 states: + * - Idle, meaning there is no interaction with the navigation view happening at the time + * - Dragging, meaning there is currently an interaction with the navigation view + * - Settling, meaning that there was an interaction with the navigation view, and the + * navigation view is now finishing its closing or opening animation + */ + onDrawerStateChanged?: ?(state: DrawerStateEvent) => mixed, + + /** + * Function called whenever the navigation view has been opened. + */ + onDrawerOpen?: ?() => mixed, + + /** + * Function called whenever the navigation view has been closed. + */ + onDrawerClose?: ?() => mixed, + + /** + * The navigation view that will be rendered to the side of the screen and can be pulled in. + */ + renderNavigationView: () => React.Element, + + /** + * Make the drawer take the entire screen and draw the background of the + * status bar to allow it to open over the status bar. It will only have an + * effect on API 21+. + */ + statusBarBackgroundColor?: ?ColorValue, + + children?: React.Node, + style?: ?ViewStyleProp, +|}>; + +type AndroidDrawerLayoutNativeType = Class>; + +module.exports = ((requireNativeComponent( + 'AndroidDrawerLayout', +): any): AndroidDrawerLayoutNativeType); diff --git a/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.android.js b/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.android.js index c6a94f594..2c1e970ca 100644 --- a/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.android.js +++ b/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.android.js @@ -23,7 +23,7 @@ const DrawerConsts = UIManager.getViewManagerConfig('AndroidDrawerLayout') .Constants; const dismissKeyboard = require('dismissKeyboard'); -const requireNativeComponent = require('requireNativeComponent'); +const AndroidDrawerLayoutNativeComponent = require('AndroidDrawerLayoutNativeComponent'); const DRAWER_STATES = ['Idle', 'Dragging', 'Settling']; @@ -131,23 +131,10 @@ type Props = $ReadOnly<{| style?: ?ViewStyleProp, |}>; -type NativeProps = $ReadOnly<{| - ...$Diff< - Props, - $ReadOnly<{onDrawerStateChanged?: ?(state: DrawerStates) => mixed}>, - >, - onDrawerStateChanged?: ?(state: DrawerStateEvent) => mixed, -|}>; - type State = {| statusBarBackgroundColor: ColorValue, |}; -// The View that contains both the actual drawer and the main view -const AndroidDrawerLayout = ((requireNativeComponent( - 'AndroidDrawerLayout', -): any): Class>); - /** * React component that wraps the platform `DrawerLayout` (Android only). The * Drawer (typically used for navigation) is rendered with `renderNavigationView` @@ -185,9 +172,7 @@ class DrawerLayoutAndroid extends React.Component { drawerBackgroundColor: 'white', }; - _nativeRef = React.createRef< - Class>, - >(); + _nativeRef = React.createRef>>(); state = {statusBarBackgroundColor: null}; @@ -229,7 +214,7 @@ class DrawerLayoutAndroid extends React.Component { ); return ( - =0.87.0 site=react_native_android_fb) This comment * suppresses an error found when Flow v0.87 was deployed. To see the @@ -245,7 +230,7 @@ class DrawerLayoutAndroid extends React.Component { onDrawerStateChanged={this._onDrawerStateChanged}> {childrenWrapper} {drawerViewWrapper} - + ); }