@office-iss/react-native-win32 0.64.9 → 0.64.10

package/.flowconfig

@@ -12,6 +12,7 @@
 <PROJECT_ROOT>/Libraries/Alert/Alert.js
 <PROJECT_ROOT>/Libraries/Components/AccessibilityInfo/NativeAccessibilityInfo.js
 <PROJECT_ROOT>/Libraries/Components/Picker/Picker.js
+<PROJECT_ROOT>/Libraries/Components/Pressable/Pressable.js
 <PROJECT_ROOT>/Libraries/Components/SafeAreaView/SafeAreaView.js
 <PROJECT_ROOT>/Libraries/Components/TextInput/TextInput.js
 <PROJECT_ROOT>/Libraries/Components/TextInput/TextInputState.js
@@ -19,11 +20,15 @@
 <PROJECT_ROOT>/Libraries/Components/View/ReactNativeViewAttributes.js
 <PROJECT_ROOT>/Libraries/Components/View/ReactNativeViewViewConfig.js
 <PROJECT_ROOT>/Libraries/Components/View/View.js
+<PROJECT_ROOT>/Libraries/Components/View/ViewPropTypes.js
 <PROJECT_ROOT>/Libraries/Image/Image.js
 <PROJECT_ROOT>/Libraries/Inspector/Inspector.js
 <PROJECT_ROOT>/Libraries/Inspector/InspectorOverlay.js
 <PROJECT_ROOT>/Libraries/Network/RCTNetworking.js
+<PROJECT_ROOT>/Libraries/Pressability/Pressability.js
+<PROJECT_ROOT>/Libraries/Pressability/HoverState.js
 <PROJECT_ROOT>/Libraries/StyleSheet/StyleSheet.js
+<PROJECT_ROOT>/Libraries/Types/CoreEventTypes.js
 <PROJECT_ROOT>/Libraries/Utilities/DeviceInfo.js
 <PROJECT_ROOT>/Libraries/Utilities/Dimensions.js
 

package/CHANGELOG.json

@@ -2,7 +2,22 @@
   "name": "@office-iss/react-native-win32",
   "entries": [
     {
-      "date": "Mon, 15 Nov 2021 16:08:58 GMT",
+      "date": "Mon, 17 Jan 2022 16:09:50 GMT",
+      "tag": "@office-iss/react-native-win32_v0.64.10",
+      "version": "0.64.10",
+      "comments": {
+        "patch": [
+          {
+            "comment": "Port windows pressable with extra desktop support to win32",
+            "author": "saadnajmi2@gmail.com",
+            "commit": "acfb47a7924f4d4e34e020838423bbbab026d670",
+            "package": "@office-iss/react-native-win32"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 15 Nov 2021 16:09:20 GMT",
       "tag": "@office-iss/react-native-win32_v0.64.9",
       "version": "0.64.9",
       "comments": {

package/CHANGELOG.md

@@ -1,17 +1,25 @@
 # Change Log - @office-iss/react-native-win32
 
-This log was last generated on Mon, 15 Nov 2021 16:08:58 GMT and should not be manually modified.
+This log was last generated on Mon, 17 Jan 2022 16:09:50 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## 0.64.9
+## 0.64.10
 
-Mon, 15 Nov 2021 16:08:58 GMT
+Mon, 17 Jan 2022 16:09:50 GMT
 
 ### Patches
 
-- Add enableFocusRing prop for View and test (ruaraki@microsoft.com)
+- Port windows pressable with extra desktop support to win32 (saadnajmi2@gmail.com)
 
+## 0.64.9
+
+Mon, 15 Nov 2021 16:09:20 GMT
+
+### Patches
+
+- Add enableFocusRing prop for View and test (ruaraki@microsoft.com)
+
 ## 0.64.8
 
 Mon, 25 Oct 2021 15:07:12 GMT

package/Libraries/Components/Pressable/Pressable.win32.js

@@ -0,0 +1,333 @@
+/**
+ * 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 {useMemo, useState, useRef, useImperativeHandle} from 'react';
+import useAndroidRippleForView, {
+  type RippleConfig,
+} from './useAndroidRippleForView';
+import type {
+  AccessibilityActionEvent,
+  AccessibilityActionInfo,
+  AccessibilityRole,
+  AccessibilityState,
+  AccessibilityValue,
+} from '../View/ViewAccessibility';
+import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
+import usePressability from '../../Pressability/usePressability';
+import {normalizeRect, type RectOrSize} from '../../StyleSheet/Rect';
+import type {
+  LayoutEvent,
+  PressEvent,
+  // [Windows
+  MouseEvent,
+  BlurEvent,
+  FocusEvent, // Windows]
+} from '../../Types/CoreEventTypes';
+import View from '../View/View';
+import TextInputState from '../TextInput/TextInputState';
+
+type ViewStyleProp = $ElementType<React.ElementConfig<typeof View>, 'style'>;
+
+export type StateCallbackType = $ReadOnly<{|
+  pressed: boolean,
+|}>;
+
+type Props = $ReadOnly<{|
+  /**
+   * Accessibility.
+   */
+  accessibilityActions?: ?$ReadOnlyArray<AccessibilityActionInfo>,
+  accessibilityElementsHidden?: ?boolean,
+  accessibilityHint?: ?Stringish,
+  accessibilityIgnoresInvertColors?: ?boolean,
+  accessibilityLabel?: ?Stringish,
+  accessibilityLiveRegion?: ?('none' | 'polite' | 'assertive'),
+  accessibilityRole?: ?AccessibilityRole,
+  accessibilityState?: ?AccessibilityState,
+  accessibilityValue?: ?AccessibilityValue,
+  accessibilityViewIsModal?: ?boolean,
+  accessible?: ?boolean,
+  focusable?: ?boolean,
+  importantForAccessibility?: ?('auto' | 'yes' | 'no' | 'no-hide-descendants'),
+  onAccessibilityAction?: ?(event: AccessibilityActionEvent) => mixed,
+
+  /**
+   * Either children or a render prop that receives a boolean reflecting whether
+   * the component is currently pressed.
+   */
+  children: React.Node | ((state: StateCallbackType) => React.Node),
+
+  /**
+   * Duration to wait after hover in before calling `onHoverIn`.
+   */
+  delayHoverIn?: ?number,
+
+  /**
+   * Duration to wait after hover out before calling `onHoverOut`.
+   */
+  delayHoverOut?: ?number,
+
+  /**
+   * Duration (in milliseconds) from `onPressIn` before `onLongPress` is called.
+   */
+  delayLongPress?: ?number,
+
+  /**
+   * Whether the press behavior is disabled.
+   */
+  disabled?: ?boolean,
+
+  /**
+   * Additional distance outside of this view in which a press is detected.
+   */
+  hitSlop?: ?RectOrSize,
+
+  /**
+   * Additional distance outside of this view in which a touch is considered a
+   * press before `onPressOut` is triggered.
+   */
+  pressRetentionOffset?: ?RectOrSize,
+
+  /**
+   * Called when this view's layout changes.
+   */
+  onLayout?: ?(event: LayoutEvent) => void,
+
+  /**
+   * Called when the hover is activated to provide visual feedback.
+   */
+  onHoverIn?: ?(event: MouseEvent) => mixed,
+
+  /**
+   * Called when the hover is deactivated to undo visual feedback.
+   */
+  onHoverOut?: ?(event: MouseEvent) => mixed,
+
+  /**
+   * Called when a long-tap gesture is detected.
+   */
+  onLongPress?: ?(event: PressEvent) => void,
+
+  /**
+   * Called when a single tap gesture is detected.
+   */
+  onPress?: ?(event: PressEvent) => void,
+
+  /**
+   * Called when a touch is engaged before `onPress`.
+   */
+  onPressIn?: ?(event: PressEvent) => void,
+
+  /**
+   * Called when a touch is released before `onPress`.
+   */
+  onPressOut?: ?(event: PressEvent) => void,
+
+  /**
+   * Called after the element loses focus.
+   */
+  onBlur?: ?(event: BlurEvent) => mixed,
+
+  /**
+   * Called after the element is focused.
+   */
+  onFocus?: ?(event: FocusEvent) => mixed,
+
+  /**
+   * Either view styles or a function that receives a boolean reflecting whether
+   * the component is currently pressed and returns view styles.
+   */
+  style?: ViewStyleProp | ((state: StateCallbackType) => ViewStyleProp),
+
+  /**
+   * Identifier used to find this view in tests.
+   */
+  testID?: ?string,
+
+  /**
+   * If true, doesn't play system sound on touch.
+   */
+  android_disableSound?: ?boolean,
+
+  /**
+   * Enables the Android ripple effect and configures its color.
+   */
+  android_ripple?: ?RippleConfig,
+
+  /**
+   * Used only for documentation or testing (e.g. snapshot testing).
+   */
+  testOnly_pressed?: ?boolean,
+
+  /**
+   * Duration to wait after press down before calling `onPressIn`.
+   */
+  unstable_pressDelay?: ?number,
+|}>;
+
+/**
+ * Component used to build display components that should respond to whether the
+ * component is currently pressed or not.
+ */
+function Pressable(props: Props, forwardedRef): React.Node {
+  const {
+    accessible,
+    android_disableSound,
+    android_ripple,
+    children,
+    delayHoverIn,
+    delayHoverOut,
+    delayLongPress,
+    disabled,
+    focusable,
+    onHoverIn,
+    onHoverOut,
+    onLongPress,
+    onPress,
+    onPressIn,
+    onPressOut,
+    // [Windows
+    onBlur,
+    onFocus,
+    // Windows]
+    pressRetentionOffset,
+    style,
+    testOnly_pressed,
+    unstable_pressDelay,
+    ...restProps
+  } = props;
+
+  const viewRef = useRef<React.ElementRef<typeof View> | null>(null);
+  useImperativeHandle(forwardedRef, () => viewRef.current);
+
+  // [Windows
+  const _onBlur = (event: BlurEvent) => {
+    TextInputState.blurInput(viewRef.current);
+    if (props.onBlur) {
+      props.onBlur(event);
+    }
+  };
+
+  const _onFocus = (event: FocusEvent) => {
+    TextInputState.focusInput(viewRef.current);
+    if (props.onFocus) {
+      props.onFocus(event);
+    }
+  };
+  // Windows]
+
+  const android_rippleConfig = useAndroidRippleForView(android_ripple, viewRef);
+
+  const [pressed, setPressed] = usePressState(testOnly_pressed === true);
+
+  const hitSlop = normalizeRect(props.hitSlop);
+
+  const restPropsWithDefaults: React.ElementConfig<typeof View> = {
+    ...restProps,
+    ...android_rippleConfig?.viewProps,
+    accessible: accessible !== false,
+    focusable: focusable !== false,
+    hitSlop,
+  };
+
+  const config = useMemo(
+    () => ({
+      disabled,
+      hitSlop,
+      pressRectOffset: pressRetentionOffset,
+      android_disableSound,
+      delayHoverIn,
+      delayHoverOut,
+      delayLongPress,
+      delayPressIn: unstable_pressDelay,
+      onHoverIn,
+      onHoverOut,
+      onLongPress,
+      onPress,
+      onPressIn(event: PressEvent): void {
+        if (android_rippleConfig != null) {
+          android_rippleConfig.onPressIn(event);
+        }
+        setPressed(true);
+        if (onPressIn != null) {
+          onPressIn(event);
+        }
+      },
+      onPressMove: android_rippleConfig?.onPressMove,
+      onPressOut(event: PressEvent): void {
+        if (android_rippleConfig != null) {
+          android_rippleConfig.onPressOut(event);
+        }
+        setPressed(false);
+        if (onPressOut != null) {
+          onPressOut(event);
+        }
+      },
+      // [Windows
+      onBlur,
+      onFocus,
+      // Windows]
+    }),
+    [
+      android_disableSound,
+      android_rippleConfig,
+      delayHoverIn,
+      delayHoverOut,
+      delayLongPress,
+      disabled,
+      hitSlop,
+      onHoverIn,
+      onHoverOut,
+      onLongPress,
+      onPress,
+      onPressIn,
+      onPressOut,
+      // [Windows
+      onBlur,
+      onFocus,
+      // Windows]
+      pressRetentionOffset,
+      setPressed,
+      unstable_pressDelay,
+    ],
+  );
+  const eventHandlers = usePressability(config);
+
+  return (
+    <View
+      {...restPropsWithDefaults}
+      {...eventHandlers}
+      // [Windows
+      onBlur={_onBlur}
+      onFocus={_onFocus}
+      // Windows]
+      ref={viewRef}
+      style={typeof style === 'function' ? style({pressed}) : style}>
+      {typeof children === 'function' ? children({pressed}) : children}
+      {__DEV__ ? <PressabilityDebugView color="red" hitSlop={hitSlop} /> : null}
+    </View>
+  );
+}
+
+function usePressState(forcePressed: boolean): [boolean, (boolean) => void] {
+  const [pressed, setPressed] = useState(false);
+  return [pressed || forcePressed, setPressed];
+}
+
+const MemoedPressable = React.memo(React.forwardRef(Pressable));
+MemoedPressable.displayName = 'Pressable';
+
+export default (MemoedPressable: React.AbstractComponent<
+  Props,
+  React.ElementRef<typeof View>,
+>);

package/Libraries/Components/View/View.win32.js

@@ -15,7 +15,6 @@ import type {ViewProps} from './ViewPropTypes';
 const React = require('react');
 import ViewNativeComponent from './ViewNativeComponent';
 const TextAncestor = require('../../Text/TextAncestor');
-import warnOnce from '../../Utilities/warnOnce'; // [Windows]
 import invariant from 'invariant'; // [Windows]
 
 export type Props = ViewProps;
@@ -31,16 +30,14 @@ const View: React.AbstractComponent<
   ViewProps,
   React.ElementRef<typeof ViewNativeComponent>,
 > = React.forwardRef((props: ViewProps, forwardedRef) => {
-  // [Win32 Intercept props to warn about them going away
+  // [Windows
+  invariant(
+    // $FlowFixMe Wanting to catch untyped usages
+    !props || props.acceptsKeyboardFocus === undefined,
+    'Support for the "acceptsKeyboardFocus" property has been removed in favor of "focusable"',
+  );
+  // Windows]
 
-  // $FlowFixMe react-native-win32 doesn't have forked types in Flow yet
-  if (props.acceptsKeyboardFocus !== undefined) {
-    warnOnce(
-      'deprecated-acceptsKeyboardFocus',
-      '"acceptsKeyboardFocus" has been deprecated in favor of "focusable" and will be removed soon',
-    );
-  }
-  // Win32]
   return (
     // [Windows
     // In core this is a TextAncestor.Provider value={false} See
@@ -52,10 +49,10 @@ const View: React.AbstractComponent<
           !hasTextAncestor,
           'Nesting of <View> within <Text> is not currently supported.',
         );
-
         return <ViewNativeComponent {...props} ref={forwardedRef} />;
       }}
     </TextAncestor.Consumer>
+    // Windows]
   );
 });