@office-iss/react-native-win32 0.0.0-canary.31 → 0.0.0-canary.310

package/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.android.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * 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.
@@ -8,122 +8,29 @@
  * @format
  */
 
-'use strict';
-
-const Platform = require('../../Utilities/Platform');
-const React = require('react');
-const StatusBar = require('../StatusBar/StatusBar');
-const StyleSheet = require('../../StyleSheet/StyleSheet');
-const View = require('../View/View');
-
-const dismissKeyboard = require('../../Utilities/dismissKeyboard');
-const nullthrows = require('nullthrows');
-
-import AndroidDrawerLayoutNativeComponent, {
-  Commands,
-} from './AndroidDrawerLayoutNativeComponent';
-
-const DRAWER_STATES = ['Idle', 'Dragging', 'Settling'];
-
-import type {ViewStyleProp} from '../../StyleSheet/StyleSheet';
-import type {ColorValue} from '../../StyleSheet/StyleSheetTypes';
-import type {DirectEventHandler} from '../../Types/CodegenTypes';
 import type {
-  MeasureOnSuccessCallback,
   MeasureInWindowOnSuccessCallback,
   MeasureLayoutOnSuccessCallback,
-} from '../../Renderer/shims/ReactNativeTypes';
-
-type DrawerStates = 'Idle' | 'Dragging' | 'Settling';
-
-type DrawerSlideEvent = $ReadOnly<{|
-  offset: number,
-|}>;
-
-type Props = $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: ?('left' | 'right'),
-
-  /**
-   * 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?: ?DirectEventHandler<DrawerSlideEvent>,
-
-  /**
-   * 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: DrawerStates) => 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,
-|}>;
+  MeasureOnSuccessCallback,
+} from '../../../src/private/types/HostInstance';
+import type {
+  DrawerLayoutAndroidMethods,
+  DrawerLayoutAndroidProps,
+  DrawerLayoutAndroidState,
+} from './DrawerLayoutAndroidTypes';
+
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import dismissKeyboard from '../../Utilities/dismissKeyboard';
+import StatusBar from '../StatusBar/StatusBar';
+import View from '../View/View';
+import AndroidDrawerLayoutNativeComponent, {
+  Commands,
+} from './AndroidDrawerLayoutNativeComponent';
+import nullthrows from 'nullthrows';
+import * as React from 'react';
+import {createRef} from 'react';
 
-type State = {|
-  statusBarBackgroundColor: ColorValue,
-|};
+const DRAWER_STATES = ['Idle', 'Dragging', 'Settling'] as const;
 
 /**
  * React component that wraps the platform `DrawerLayout` (Android only). The
@@ -156,45 +63,46 @@ type State = {|
  * },
  * ```
  */
-class DrawerLayoutAndroid extends React.Component<Props, State> {
-  static get positions(): mixed {
+class DrawerLayoutAndroid
+  extends React.Component<DrawerLayoutAndroidProps, DrawerLayoutAndroidState>
+  implements DrawerLayoutAndroidMethods
+{
+  static get positions(): unknown {
     console.warn(
       'Setting DrawerLayoutAndroid drawerPosition using `DrawerLayoutAndroid.positions` is deprecated. Instead pass the string value "left" or "right"',
     );
 
     return {Left: 'left', Right: 'right'};
   }
-  static defaultProps: {|
-    drawerBackgroundColor: 'white',
-  |} = {
-    drawerBackgroundColor: 'white',
-  };
 
-  _nativeRef = React.createRef<
-    React.ElementRef<typeof AndroidDrawerLayoutNativeComponent>,
-  >();
+  // $FlowFixMe[missing-local-annot]
+  _nativeRef =
+    createRef<React.ElementRef<typeof AndroidDrawerLayoutNativeComponent>>();
 
-  state: State = {statusBarBackgroundColor: null};
+  state: DrawerLayoutAndroidState = {
+    drawerOpened: false,
+  };
 
   render(): React.Node {
     const {
+      drawerBackgroundColor = 'white',
       onDrawerStateChanged,
       renderNavigationView,
       onDrawerOpen,
       onDrawerClose,
       ...props
     } = this.props;
-    const drawStatusBar =
-      Platform.Version >= 21 && this.props.statusBarBackgroundColor != null;
+    const drawStatusBar = this.props.statusBarBackgroundColor != null;
     const drawerViewWrapper = (
       <View
         style={[
           styles.drawerSubview,
           {
             width: this.props.drawerWidth,
-            backgroundColor: this.props.drawerBackgroundColor,
+            backgroundColor: drawerBackgroundColor,
           },
         ]}
+        pointerEvents={this.state.drawerOpened ? 'auto' : 'none'}
         collapsable={false}>
         {renderNavigationView()}
         {drawStatusBar && <View style={styles.drawerStatusBar} />}
@@ -223,6 +131,7 @@ class DrawerLayoutAndroid extends React.Component<Props, State> {
       <AndroidDrawerLayoutNativeComponent
         {...props}
         ref={this._nativeRef}
+        drawerBackgroundColor={drawerBackgroundColor}
         drawerWidth={this.props.drawerWidth}
         drawerPosition={this.props.drawerPosition}
         drawerLockMode={this.props.drawerLockMode}
@@ -237,8 +146,11 @@ class DrawerLayoutAndroid extends React.Component<Props, State> {
     );
   }
 
+  /* $FlowFixMe[missing-local-annot] The type annotation(s) required by Flow's
+   * LTI update could not be added via codemod */
   _onDrawerSlide = event => {
     if (this.props.onDrawerSlide) {
+      // $FlowFixMe[unused-promise]
       this.props.onDrawerSlide(event);
     }
     if (this.props.keyboardDismissMode === 'on-drag') {
@@ -247,17 +159,25 @@ class DrawerLayoutAndroid extends React.Component<Props, State> {
   };
 
   _onDrawerOpen = () => {
+    this.setState({
+      drawerOpened: true,
+    });
     if (this.props.onDrawerOpen) {
       this.props.onDrawerOpen();
     }
   };
 
   _onDrawerClose = () => {
+    this.setState({
+      drawerOpened: false,
+    });
     if (this.props.onDrawerClose) {
       this.props.onDrawerClose();
     }
   };
 
+  /* $FlowFixMe[missing-local-annot] The type annotation(s) required by Flow's
+   * LTI update could not be added via codemod */
   _onDrawerStateChanged = event => {
     if (this.props.onDrawerStateChanged) {
       this.props.onDrawerStateChanged(
@@ -382,4 +302,4 @@ const styles = StyleSheet.create({
   },
 });
 
-module.exports = DrawerLayoutAndroid;
+export default DrawerLayoutAndroid as $FlowFixMe;

package/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.d.ts

@@ -0,0 +1,141 @@
+/**
+ * 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
+ */
+
+import type * as React from 'react';
+import {Constructor} from '../../../types/private/Utilities';
+import {HostInstance} from '../../../types/public/ReactNativeTypes';
+import {ColorValue} from '../../StyleSheet/StyleSheet';
+import {
+  NativeSyntheticEvent,
+  NativeTouchEvent,
+} from '../../Types/CoreEventTypes';
+import {ViewProps} from '../View/ViewPropTypes';
+
+export interface DrawerSlideEvent
+  extends NativeSyntheticEvent<NativeTouchEvent> {}
+
+/**
+ * @see DrawerLayoutAndroid.android.js
+ */
+export interface DrawerLayoutAndroidProps extends ViewProps {
+  /**
+   * 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 | undefined;
+
+  /**
+   * 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' | undefined;
+
+  /**
+   * Specifies the side of the screen from which the drawer will slide in.
+   * - 'left' (the default)
+   * - 'right'
+   */
+  drawerPosition?: 'left' | 'right' | undefined;
+
+  /**
+   * 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 | undefined;
+
+  /**
+   * 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' | undefined;
+
+  /**
+   * Function called whenever the navigation view has been closed.
+   */
+  onDrawerClose?: (() => void) | undefined;
+
+  /**
+   * Function called whenever the navigation view has been opened.
+   */
+  onDrawerOpen?: (() => void) | undefined;
+
+  /**
+   * Function called whenever there is an interaction with the navigation view.
+   */
+  onDrawerSlide?: ((event: DrawerSlideEvent) => void) | undefined;
+
+  /**
+   * 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
+   *   it's closing or opening animation
+   */
+  onDrawerStateChanged?:
+    | ((event: 'Idle' | 'Dragging' | 'Settling') => void)
+    | undefined;
+
+  /**
+   * The navigation view that will be rendered to the side of the
+   * screen and can be pulled in.
+   */
+  renderNavigationView: () => React.JSX.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 | undefined;
+}
+
+interface DrawerPosition {
+  Left: number;
+  Right: number;
+}
+
+declare class DrawerLayoutAndroidComponent extends React.Component<DrawerLayoutAndroidProps> {}
+declare const DrawerLayoutAndroidBase: Constructor<HostInstance> &
+  typeof DrawerLayoutAndroidComponent;
+export class DrawerLayoutAndroid extends DrawerLayoutAndroidBase {
+  /**
+   * drawer's positions.
+   */
+  positions: DrawerPosition;
+
+  /**
+   * Opens the drawer.
+   */
+  openDrawer(): void;
+
+  /**
+   * Closes the drawer.
+   */
+  closeDrawer(): void;
+}

package/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.ios.js

@@ -1,12 +1,15 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * 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-local
  * @format
  */
 
 'use strict';
 
-module.exports = require('../UnimplementedViews/UnimplementedView');
+import DrawerLayoutAndroidFallback from './DrawerLayoutAndroidFallback';
+
+export default DrawerLayoutAndroidFallback;

package/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.js

@@ -1,12 +1,17 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * 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
  * @format
  */
 
-'use strict';
+// NOTE: This file supports backwards compatibility of subpath (deep) imports
+// from 'react-native' with platform-specific extensions. It can be deleted
+// once we remove the "./*" mapping from package.json "exports".
 
-module.exports = require('../UnimplementedViews/UnimplementedView');
+import DrawerLayoutAndroid from './DrawerLayoutAndroid';
+
+export default DrawerLayoutAndroid;

package/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.js.flow

@@ -0,0 +1,18 @@
+/**
+ * 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-local
+ * @format
+ */
+
+import DrawerLayoutAndroid from './DrawerLayoutAndroidFallback';
+
+export type {
+  DrawerLayoutAndroidProps,
+  DrawerSlideEvent,
+} from './DrawerLayoutAndroidTypes';
+
+export default DrawerLayoutAndroid;

package/Libraries/Components/DrawerAndroid/DrawerLayoutAndroidFallback.js

@@ -0,0 +1,71 @@
+/**
+ * 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-local
+ * @format
+ */
+
+'use strict';
+
+import type {
+  MeasureInWindowOnSuccessCallback,
+  MeasureLayoutOnSuccessCallback,
+  MeasureOnSuccessCallback,
+} from '../../../src/private/types/HostInstance';
+import type {
+  DrawerLayoutAndroidMethods,
+  DrawerLayoutAndroidProps,
+  DrawerLayoutAndroidState,
+} from './DrawerLayoutAndroidTypes';
+
+import UnimplementedView from '../UnimplementedViews/UnimplementedView';
+import * as React from 'react';
+
+export default class DrawerLayoutAndroid
+  extends React.Component<DrawerLayoutAndroidProps, DrawerLayoutAndroidState>
+  implements DrawerLayoutAndroidMethods
+{
+  render(): React.Node {
+    return <UnimplementedView {...this.props} />;
+  }
+
+  openDrawer(): void {
+    throw new Error('DrawerLayoutAndroid is only available on Android');
+  }
+
+  closeDrawer(): void {
+    throw new Error('DrawerLayoutAndroid is only available on Android');
+  }
+
+  blur(): void {
+    throw new Error('DrawerLayoutAndroid is only available on Android');
+  }
+
+  focus(): void {
+    throw new Error('DrawerLayoutAndroid is only available on Android');
+  }
+
+  measure(callback: MeasureOnSuccessCallback): void {
+    throw new Error('DrawerLayoutAndroid is only available on Android');
+  }
+
+  measureInWindow(callback: MeasureInWindowOnSuccessCallback): void {
+    throw new Error('DrawerLayoutAndroid is only available on Android');
+  }
+
+  measureLayout(
+    relativeToNativeNode: number,
+    onSuccess: MeasureLayoutOnSuccessCallback,
+    onFail?: () => void,
+  ): void {
+    throw new Error('DrawerLayoutAndroid is only available on Android');
+  }
+
+  // $FlowFixMe[unclear-type]
+  setNativeProps(nativeProps: Object): void {
+    throw new Error('DrawerLayoutAndroid is only available on Android');
+  }
+}

package/Libraries/Components/DrawerAndroid/DrawerLayoutAndroidTypes.js

@@ -0,0 +1,138 @@
+/**
+ * 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
+ * @format
+ */
+
+import type {
+  MeasureInWindowOnSuccessCallback,
+  MeasureLayoutOnSuccessCallback,
+  MeasureOnSuccessCallback,
+} from '../../../src/private/types/HostInstance';
+import type {ColorValue} from '../../StyleSheet/StyleSheet';
+import type {NativeSyntheticEvent} from '../../Types/CoreEventTypes';
+import type {ViewProps} from '../View/ViewPropTypes';
+
+import * as React from 'react';
+
+export type DrawerStates = 'Idle' | 'Dragging' | 'Settling';
+
+export type DrawerSlideEvent = NativeSyntheticEvent<
+  $ReadOnly<{
+    offset: number,
+  }>,
+>;
+
+export type DrawerLayoutAndroidProps = $ReadOnly<{
+  ...ViewProps,
+
+  /**
+   * 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: ?('left' | 'right'),
+
+  /**
+   * 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) => unknown,
+
+  /**
+   * 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: DrawerStates) => unknown,
+
+  /**
+   * Function called whenever the navigation view has been opened.
+   */
+  onDrawerOpen?: ?() => unknown,
+
+  /**
+   * Function called whenever the navigation view has been closed.
+   */
+  onDrawerClose?: ?() => unknown,
+
+  /**
+   * The navigation view that will be rendered to the side of the screen and can be pulled in.
+   */
+  renderNavigationView: () => React.MixedElement,
+
+  /**
+   * 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,
+}>;
+
+export type DrawerLayoutAndroidState = {
+  drawerOpened: boolean,
+};
+
+export interface DrawerLayoutAndroidMethods {
+  /**
+   * Opens the drawer.
+   */
+  openDrawer(): void;
+
+  /**
+   * Closes the drawer.
+   */
+  closeDrawer(): void;
+
+  /**
+   * Native methods
+   */
+  blur(): void;
+  focus(): void;
+  measure(callback: MeasureOnSuccessCallback): void;
+  measureInWindow(callback: MeasureInWindowOnSuccessCallback): void;
+  measureLayout(
+    relativeToNativeNode: number,
+    onSuccess: MeasureLayoutOnSuccessCallback,
+    onFail?: () => void,
+  ): void;
+  setNativeProps(nativeProps: Object): void;
+}

package/Libraries/Components/EnterString.win32.d.ts

@@ -1,12 +1,12 @@
-import * as React from 'react';
-export interface IEnterStringProps {
-    disabled?: boolean;
-    value?: string;
-    label?: string;
-    onChanged?: (newValue: string) => void;
-}
-export default class EnterString extends React.Component<IEnterStringProps, {}> {
-    static DefaultProps: IEnterStringProps;
-    render(): JSX.Element;
-    private _on_changed_native;
-}
+import React from 'react';
+export interface IEnterStringProps {
+    disabled?: boolean;
+    value?: string;
+    label?: string;
+    onChanged?: (newValue: string) => void;
+}
+export default class EnterString extends React.Component<IEnterStringProps, {}> {
+    static DefaultProps: IEnterStringProps;
+    render(): React.JSX.Element;
+    private _onChangedNative;
+}