@office-iss/react-native-win32 0.64.7 → 0.64.11

package/Libraries/Types/CoreEventTypes.win32.js

@@ -0,0 +1,193 @@
+/**
+ * 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.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+'use strict';
+
+import * as React from 'react';
+import type {HostComponent} from '../Renderer/shims/ReactNativeTypes';
+
+export type SyntheticEvent<T> = $ReadOnly<{|
+  bubbles: ?boolean,
+  cancelable: ?boolean,
+  currentTarget: number | React.ElementRef<HostComponent<mixed>>,
+  defaultPrevented: ?boolean,
+  dispatchConfig: $ReadOnly<{|
+    registrationName: string,
+  |}>,
+  eventPhase: ?number,
+  preventDefault: () => void,
+  isDefaultPrevented: () => boolean,
+  stopPropagation: () => void,
+  isPropagationStopped: () => boolean,
+  isTrusted: ?boolean,
+  nativeEvent: T,
+  persist: () => void,
+  target: ?number | React.ElementRef<HostComponent<mixed>>,
+  timeStamp: number,
+  type: ?string,
+|}>;
+
+export type ResponderSyntheticEvent<T> = $ReadOnly<{|
+  ...SyntheticEvent<T>,
+  touchHistory: $ReadOnly<{|
+    indexOfSingleActiveTouch: number,
+    mostRecentTimeStamp: number,
+    numberActiveTouches: number,
+    touchBank: $ReadOnlyArray<
+      $ReadOnly<{|
+        touchActive: boolean,
+        startPageX: number,
+        startPageY: number,
+        startTimeStamp: number,
+        currentPageX: number,
+        currentPageY: number,
+        currentTimeStamp: number,
+        previousPageX: number,
+        previousPageY: number,
+        previousTimeStamp: number,
+      |}>,
+    >,
+  |}>,
+|}>;
+
+export type Layout = $ReadOnly<{|
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+|}>;
+
+export type TextLayout = $ReadOnly<{|
+  ...Layout,
+  ascender: number,
+  capHeight: number,
+  descender: number,
+  text: string,
+  xHeight: number,
+|}>;
+
+export type LayoutEvent = SyntheticEvent<
+  $ReadOnly<{|
+    layout: Layout,
+  |}>,
+>;
+
+export type TextLayoutEvent = SyntheticEvent<
+  $ReadOnly<{|
+    lines: Array<TextLayout>,
+  |}>,
+>;
+
+export type PressEvent = ResponderSyntheticEvent<
+  $ReadOnly<{|
+    altKey: ?boolean, // TODO(macOS)
+    button: ?number, // TODO(macOS)
+    changedTouches: $ReadOnlyArray<$PropertyType<PressEvent, 'nativeEvent'>>,
+    ctrlKey: ?boolean, // TODO(macOS)
+    force?: number,
+    identifier: number,
+    locationX: number,
+    locationY: number,
+    metaKey: ?boolean, // TODO(macOS)
+    pageX: number,
+    pageY: number,
+    shiftKey: ?boolean, // TODO(macOS)
+    target: ?number,
+    timestamp: number,
+    touches: $ReadOnlyArray<$PropertyType<PressEvent, 'nativeEvent'>>,
+  |}>,
+>;
+
+export type ScrollEvent = SyntheticEvent<
+  $ReadOnly<{|
+    contentInset: $ReadOnly<{|
+      bottom: number,
+      left: number,
+      right: number,
+      top: number,
+    |}>,
+    contentOffset: $ReadOnly<{|
+      y: number,
+      x: number,
+    |}>,
+    contentSize: $ReadOnly<{|
+      height: number,
+      width: number,
+    |}>,
+    layoutMeasurement: $ReadOnly<{|
+      height: number,
+      width: number,
+    |}>,
+    targetContentOffset?: $ReadOnly<{|
+      y: number,
+      x: number,
+    |}>,
+    velocity?: $ReadOnly<{|
+      y: number,
+      x: number,
+    |}>,
+    zoomScale?: number,
+    responderIgnoreScroll?: boolean,
+    key?: string, // TODO(macOS)
+  |}>,
+>;
+
+export type BlurEvent = SyntheticEvent<
+  $ReadOnly<{|
+    target: number,
+  |}>,
+>;
+
+export type FocusEvent = SyntheticEvent<
+  $ReadOnly<{|
+    target: number,
+  |}>,
+>;
+
+// [Windows Mouse events on Windows don't match up with the version in core
+// introduced for react-native-web. Replace typings with our values to catch
+// anything dependent on react-native-web specific values
+export type MouseEvent = SyntheticEvent<
+  $ReadOnly<{|
+    target: number,
+    identifier: number,
+    pageX: number,
+    pageY: number,
+    locationX: number,
+    locationY: number,
+    timestamp: number,
+    pointerType: string,
+    force: number,
+    isLeftButton: boolean,
+    isRightButton: boolean,
+    isMiddleButton: boolean,
+    isBarrelButtonPressed: boolean,
+    isHorizontalScrollWheel: boolean,
+    isEraser: boolean,
+    shiftKey: boolean,
+    ctrlKey: boolean,
+    altKey: boolean,
+  |}>,
+>;
+// Windows]
+
+// [Windows
+export type KeyEvent = SyntheticEvent<
+  $ReadOnly<{|
+    altKey: boolean,
+    ctrlKey: boolean,
+    metaKey: boolean,
+    shiftKey: boolean,
+    key: string,
+    code: string,
+    eventPhase: number,
+  |}>,
+>;
+// Windows]

package/overrides.json

@@ -3,10 +3,10 @@
     ".flowconfig",
     "src/**"
   ],
-  "baseVersion": "0.64.0",
   "excludePatterns": [
     "src/Libraries/Lists/__tests__/**"
   ],
+  "baseVersion": "0.64.0",
   "overrides": [
     {
       "type": "derived",
@@ -33,12 +33,6 @@
       "baseHash": "85eea8e9510b516c12e19fcfedc4553b990feb11",
       "issue": 5807
     },
-    {
-      "type": "patch",
-      "file": "src/Libraries/ReactNative/PaperUIManager.win32.js",
-      "baseFile": "Libraries/ReactNative/PaperUIManager.js",
-      "baseHash": "a72811cd104bb575d0ab2659343dc2ea11c6b674"
-    },
     {
       "type": "derived",
       "file": "src/Libraries/Components/AccessibilityInfo/AccessibilityInfo.win32.js",
@@ -109,6 +103,13 @@
       "baseHash": "0c6bf0751e053672123cbad30d67851ba0007af6",
       "issue": 4378
     },
+    {
+      "type": "patch",
+      "file": "src/Libraries/Components/Pressable/Pressable.win32.js",
+      "baseFile": "Libraries/Components/Pressable/Pressable.js",
+      "baseHash": "53bc7996e0fa83128b846a04d0bcec972a406133",
+      "issue": 6240
+    },
     {
       "type": "copy",
       "file": "src/Libraries/Components/ProgressBarAndroid/ProgressBarAndroid.js",
@@ -221,6 +222,13 @@
       "baseHash": "147459dc889f04f2405db051445833f791726895",
       "issue": 5843
     },
+    {
+      "type": "patch",
+      "file": "src/Libraries/Components/View/ViewPropTypes.win32.js",
+      "baseFile": "Libraries/Components/View/ViewPropTypes.js",
+      "baseHash": "2b12228aa1ab0e12844996a99ff5d38fbff689a1",
+      "issue": 6240
+    },
     {
       "type": "platform",
       "file": "src/Libraries/Components/View/ViewWin32.Props.ts"
@@ -342,6 +350,20 @@
       "type": "platform",
       "file": "src/Libraries/PersonaCoin/PersonaCoinTypes.ts"
     },
+    {
+      "type": "patch",
+      "file": "src/Libraries/Pressability/HoverState.win32.js",
+      "baseFile": "Libraries/Pressability/HoverState.js",
+      "baseHash": "c78372cfc9f0b66109848beb20895e199c5431b8",
+      "issue": 6240
+    },
+    {
+      "type": "patch",
+      "file": "src/Libraries/Pressability/Pressability.win32.js",
+      "baseFile": "Libraries/Pressability/Pressability.js",
+      "baseHash": "e1418d31343ca11ce165a87f82224ccc8d801052",
+      "issue": 6240
+    },
     {
       "type": "platform",
       "file": "src/Libraries/QuirkSettings/CachingNativeQuirkSettings.js"
@@ -358,6 +380,12 @@
       "type": "platform",
       "file": "src/Libraries/QuirkSettings/QuirkSettings.js"
     },
+    {
+      "type": "patch",
+      "file": "src/Libraries/ReactNative/PaperUIManager.win32.js",
+      "baseFile": "Libraries/ReactNative/PaperUIManager.js",
+      "baseHash": "a72811cd104bb575d0ab2659343dc2ea11c6b674"
+    },
     {
       "type": "derived",
       "file": "src/Libraries/Settings/Settings.win32.js",
@@ -389,6 +417,13 @@
       "baseHash": "d316f87ebc8899c3b99802f684b6a333970d737c",
       "issue": 7080
     },
+    {
+      "type": "patch",
+      "file": "src/Libraries/Types/CoreEventTypes.win32.js",
+      "baseFile": "Libraries/Types/CoreEventTypes.js",
+      "baseHash": "e8f8ce02645228b423fdda317e5d1d9e69b54e6d",
+      "issue": 6240
+    },
     {
       "type": "copy",
       "file": "src/Libraries/Utilities/BackHandler.win32.js",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@office-iss/react-native-win32",
-  "version": "0.64.7",
+  "version": "0.64.11",
   "description": "Implementation of react native on top of Office's Win32 platform.",
   "license": "MIT",
   "main": "./index.win32.js",

package/src/Libraries/Components/View/Tests/ViewWin32Test.tsx

@@ -54,6 +54,7 @@ class FocusMoverTestComponent extends React.Component<{}, IFocusableComponentSta
           style={this.state.hasFocus ? { backgroundColor: '#aee8fcff' } : { backgroundColor: '#00000000' }}
           onFocus={this._onFocus}
           onBlur={this._onBlur}
+          enableFocusRing={false}
         >
           <Text>{this.state.hasFocus ? 'Focus: Yes' : 'Focus: No'}</Text>
         </ViewWin32>
@@ -118,6 +119,7 @@ class KeyboardTestComponent extends React.Component<{}, IFocusableComponentState
           onKeyDown={this._onKeyDown}
           onFocus={this._onFocus}
           onBlur={this._onBlur}
+          enableFocusRing={false}
         >
           <ViewWin32 style={styles.keyEnterVisualizer}>
             <Text>OnKeyDown</Text>
@@ -244,6 +246,61 @@ const CursorExample: React.FunctionComponent = () => {
     </ViewWin32>
   );
 }
+class EnableFocusRingExample extends React.Component<{}, IFocusableComponentState> {
+  public constructor(props) {
+    super(props);
+    this.state = {
+      hasFocus: false,
+    };
+  }
+  
+  public render() {
+    return (
+      <ViewWin32 style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-around', marginVertical: 5 }}>
+        <ViewWin32
+          style={{
+            backgroundColor: 'pink',
+            height: 100,
+            width: 100,
+          }}
+          enableFocusRing={true}
+          focusable
+        >
+          <Text>enableFocusRing set to true</Text>
+        </ViewWin32>
+        <ViewWin32
+          style={{
+            backgroundColor: 'pink',
+            height: 100,
+            width: 100,
+          }}
+          enableFocusRing={false}
+          focusable
+          onFocus={this._onFocus}
+          onBlur={this._onBlur}
+        >
+          <>
+            <Text>enableFocusRing set to false</Text>
+            <Text>{this.state.hasFocus ? 'Focus: Yes' : 'Focus: No'}</Text>
+          </>
+        </ViewWin32>
+      </ViewWin32>
+    );
+  }
+
+  private readonly _onFocus = () => {
+    this.setState({
+      hasFocus: true,
+    });
+  };
+
+  private readonly _onBlur = () => {
+    this.setState({
+      hasFocus: false,
+    });
+  };
+}
+
 
 export const title = 'ViewWin32';
 export const displayName = 'ViewWin32 Example';
@@ -290,4 +347,11 @@ export const examples = [
       return <CursorExample />;
     },
   },
+  {
+    title: 'EnableFocusRing example',
+    description: 'Displays focus visuals that are driven by native',
+    render(): JSX.Element {
+      return <EnableFocusRingExample />;
+    },
+  },
 ];

package/src/Libraries/Components/View/ViewWin32.Props.ts

@@ -217,6 +217,7 @@ export interface IViewWin32Props extends Omit<RN.ViewProps, ViewWin32OmitTypes>,
   accessibilitySetSize?: number;
   animationClass?: string;
   focusable?: boolean;
+  enableFocusRing?: boolean;
 
   /**
    * The onBlur event occurs when an element loses focus.  The opposite of onBlur is onFocus.  Note that in React