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<any>,` 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
This commit is contained in:
parent
b864b6cf3e
commit
a828db6911
|
@ -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 (
|
||||||
|
* <DrawerLayoutAndroid drawerBackgroundColor="rgba(0,0,0,0.5)">
|
||||||
|
* </DrawerLayoutAndroid>
|
||||||
|
* );
|
||||||
|
* ```
|
||||||
|
*/
|
||||||
|
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<any>,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 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<NativeComponent<NativeProps>>;
|
||||||
|
|
||||||
|
module.exports = ((requireNativeComponent(
|
||||||
|
'AndroidDrawerLayout',
|
||||||
|
): any): AndroidDrawerLayoutNativeType);
|
|
@ -23,7 +23,7 @@ const DrawerConsts = UIManager.getViewManagerConfig('AndroidDrawerLayout')
|
||||||
.Constants;
|
.Constants;
|
||||||
|
|
||||||
const dismissKeyboard = require('dismissKeyboard');
|
const dismissKeyboard = require('dismissKeyboard');
|
||||||
const requireNativeComponent = require('requireNativeComponent');
|
const AndroidDrawerLayoutNativeComponent = require('AndroidDrawerLayoutNativeComponent');
|
||||||
|
|
||||||
const DRAWER_STATES = ['Idle', 'Dragging', 'Settling'];
|
const DRAWER_STATES = ['Idle', 'Dragging', 'Settling'];
|
||||||
|
|
||||||
|
@ -131,23 +131,10 @@ type Props = $ReadOnly<{|
|
||||||
style?: ?ViewStyleProp,
|
style?: ?ViewStyleProp,
|
||||||
|}>;
|
|}>;
|
||||||
|
|
||||||
type NativeProps = $ReadOnly<{|
|
|
||||||
...$Diff<
|
|
||||||
Props,
|
|
||||||
$ReadOnly<{onDrawerStateChanged?: ?(state: DrawerStates) => mixed}>,
|
|
||||||
>,
|
|
||||||
onDrawerStateChanged?: ?(state: DrawerStateEvent) => mixed,
|
|
||||||
|}>;
|
|
||||||
|
|
||||||
type State = {|
|
type State = {|
|
||||||
statusBarBackgroundColor: ColorValue,
|
statusBarBackgroundColor: ColorValue,
|
||||||
|};
|
|};
|
||||||
|
|
||||||
// The View that contains both the actual drawer and the main view
|
|
||||||
const AndroidDrawerLayout = ((requireNativeComponent(
|
|
||||||
'AndroidDrawerLayout',
|
|
||||||
): any): Class<ReactNative.NativeComponent<NativeProps>>);
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* React component that wraps the platform `DrawerLayout` (Android only). The
|
* React component that wraps the platform `DrawerLayout` (Android only). The
|
||||||
* Drawer (typically used for navigation) is rendered with `renderNavigationView`
|
* Drawer (typically used for navigation) is rendered with `renderNavigationView`
|
||||||
|
@ -185,9 +172,7 @@ class DrawerLayoutAndroid extends React.Component<Props, State> {
|
||||||
drawerBackgroundColor: 'white',
|
drawerBackgroundColor: 'white',
|
||||||
};
|
};
|
||||||
|
|
||||||
_nativeRef = React.createRef<
|
_nativeRef = React.createRef<Class<ReactNative.NativeComponent<Props>>>();
|
||||||
Class<ReactNative.NativeComponent<NativeProps>>,
|
|
||||||
>();
|
|
||||||
|
|
||||||
state = {statusBarBackgroundColor: null};
|
state = {statusBarBackgroundColor: null};
|
||||||
|
|
||||||
|
@ -229,7 +214,7 @@ class DrawerLayoutAndroid extends React.Component<Props, State> {
|
||||||
</View>
|
</View>
|
||||||
);
|
);
|
||||||
return (
|
return (
|
||||||
<AndroidDrawerLayout
|
<AndroidDrawerLayoutNativeComponent
|
||||||
{...props}
|
{...props}
|
||||||
/* $FlowFixMe(>=0.87.0 site=react_native_android_fb) This comment
|
/* $FlowFixMe(>=0.87.0 site=react_native_android_fb) This comment
|
||||||
* suppresses an error found when Flow v0.87 was deployed. To see the
|
* suppresses an error found when Flow v0.87 was deployed. To see the
|
||||||
|
@ -245,7 +230,7 @@ class DrawerLayoutAndroid extends React.Component<Props, State> {
|
||||||
onDrawerStateChanged={this._onDrawerStateChanged}>
|
onDrawerStateChanged={this._onDrawerStateChanged}>
|
||||||
{childrenWrapper}
|
{childrenWrapper}
|
||||||
{drawerViewWrapper}
|
{drawerViewWrapper}
|
||||||
</AndroidDrawerLayout>
|
</AndroidDrawerLayoutNativeComponent>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue