@office-iss/react-native-win32 0.73.1 → 0.74.0-preview.1

package/Libraries/Inspector/Inspector.win32.js

@@ -10,12 +10,14 @@
 
 'use strict';
 
-import type {TouchedViewDataAtPoint} from '../Renderer/shims/ReactNativeTypes';
-import type {HostRef} from './getInspectorDataForViewAtPoint';
+import type {InspectedViewRef} from '../ReactNative/AppContainer-dev';
+import type {
+  InspectorData,
+  TouchedViewDataAtPoint,
+} from '../Renderer/shims/ReactNativeTypes';
+import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
+import type {ReactDevToolsAgent} from '../Types/ReactDevToolsTypes';
 
-// import Dimensions from '../Utilities/Dimensions'; [win32]
-
-const ReactNativeStyleAttributes = require('../Components/View/ReactNativeStyleAttributes');
 const PressabilityDebug = require('../Pressability/PressabilityDebug');
 const ReactNative = require('../Renderer/shims/ReactNative');
 const {findNodeHandle} = require('../ReactNative/RendererProxy');
@@ -27,116 +29,70 @@ const InspectorOverlay = require('./InspectorOverlay');
 const InspectorPanel = require('./InspectorPanel');
 const React = require('react');
 
-const hook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
-
-// Required for React DevTools to view/edit React Native styles in Flipper.
-// Flipper doesn't inject these values when initializing DevTools.
-hook.resolveRNStyle = require('../StyleSheet/flattenStyle');
-hook.nativeStyleEditorValidAttributes = Object.keys(ReactNativeStyleAttributes);
-
-const UIManager = require('../ReactNative/UIManager'); // [Win32]
-
-class Inspector extends React.Component<
-  {
-    inspectedView: ?HostRef,
-    onRequestRerenderApp: (callback: (instance: ?HostRef) => void) => void,
-    ...
-  },
-  {
-    devtoolsAgent: ?Object,
-    hierarchy: any,
-    panelPos: string,
-    inspecting: boolean,
-    selection: ?number,
-    perfing: boolean,
-    inspected: any,
-    inspectedView: ?HostRef,
-    networking: boolean,
-    ...
-  },
-> {
-  _hideTimeoutID: TimeoutID | null = null;
-  _subs: ?Array<() => void>;
-  _setTouchedViewData: ?(TouchedViewDataAtPoint) => void;
-
-  constructor(props: Object) {
-    super(props);
-
-    this.state = {
-      devtoolsAgent: null,
-      hierarchy: null,
-      panelPos: 'bottom',
-      inspecting: true,
-      perfing: false,
-      inspected: null,
-      selection: null,
-      inspectedView: this.props.inspectedView,
-      networking: false,
-    };
-  }
+const {useState} = React;
 
-  componentDidMount() {
-    hook.on('react-devtools', this._attachToDevtools);
-    // if devtools is already started
-    if (hook.reactDevtoolsAgent) {
-      this._attachToDevtools(hook.reactDevtoolsAgent);
-    }
-  }
+type PanelPosition = 'top' | 'bottom';
+type SelectedTab =
+  | 'elements-inspector'
+  | 'network-profiling'
+  | 'performance-profiling';
 
-  componentWillUnmount() {
-    if (this._subs) {
-      this._subs.map(fn => fn());
-    }
-    hook.off('react-devtools', this._attachToDevtools);
-    this._setTouchedViewData = null;
-  }
+export type InspectedElementFrame = TouchedViewDataAtPoint['frame'];
+export type InspectedElement = $ReadOnly<{
+  frame: InspectedElementFrame,
+  style?: ViewStyleProp,
+}>;
+export type ElementsHierarchy = InspectorData['hierarchy'];
 
-  UNSAFE_componentWillReceiveProps(newProps: Object) {
-    this.setState({inspectedView: newProps.inspectedView});
-  }
+type Props = {
+  inspectedViewRef: InspectedViewRef,
+  onRequestRerenderApp: () => void,
+  reactDevToolsAgent?: ReactDevToolsAgent,
+};
 
-  _attachToDevtools = (agent: Object) => {
-    agent.addListener('shutdown', this._onAgentShutdown);
-
-    this.setState({
-      devtoolsAgent: agent,
-    });
-  };
-
-  _onAgentShutdown = () => {
-    const agent = this.state.devtoolsAgent;
-    if (agent != null) {
-      agent.removeListener('shutdown', this._onAgentShutdown);
+const UIManager = require('../ReactNative/UIManager'); // [Win32]
 
-      this.setState({devtoolsAgent: null});
+function Inspector({
+  inspectedViewRef,
+  onRequestRerenderApp,
+  reactDevToolsAgent,
+}: Props): React.Node {
+  const [selectedTab, setSelectedTab] =
+    useState<?SelectedTab>('elements-inspector');
+
+  const [panelPosition, setPanelPosition] = useState<PanelPosition>('bottom');
+  const [inspectedElement, setInspectedElement] =
+    useState<?InspectedElement>(null);
+  const [selectionIndex, setSelectionIndex] = useState<?number>(null);
+  const [elementsHierarchy, setElementsHierarchy] =
+    useState<?ElementsHierarchy>(null);
+
+  const setSelection = (i: number) => {
+    const hierarchyItem = elementsHierarchy?.[i];
+    if (hierarchyItem == null) {
+      return;
     }
-  };
 
-  setSelection(i: number) {
-    const hierarchyItem = this.state.hierarchy[i];
-    // we pass in findNodeHandle as the method is injected
-    const {measure, props, source} =
-      hierarchyItem.getInspectorData(findNodeHandle);
+    // We pass in findNodeHandle as the method is injected
+    const {measure, props} = hierarchyItem.getInspectorData(findNodeHandle);
 
     measure((x, y, width, height, left, top) => {
-      this.setState({
-        inspected: {
-          frame: {left, top, width, height},
-          style: props.style,
-          source,
-        },
-        selection: i,
+      // $FlowFixMe[incompatible-call] `props` from InspectorData are defined as <string, string> dictionary, which is incompatible with ViewStyleProp
+      setInspectedElement({
+        frame: {left, top, width, height},
+        style: props.style,
       });
+
+      setSelectionIndex(i);
     });
-  }
+  };
 
-  onTouchPoint(locationX: number, locationY: number) {
-    this._setTouchedViewData = viewData => {
+  const onTouchPoint = (locationX: number, locationY: number) => {
+    const setTouchedViewData = (viewData: TouchedViewDataAtPoint) => {
       const {
         hierarchy,
         props,
         selectedIndex,
-        source,
         frame,
         pointerY,
         touchedViewTag,
@@ -146,116 +102,93 @@ class Inspector extends React.Component<
       // Sync the touched view with React DevTools.
       // Note: This is Paper only. To support Fabric,
       // DevTools needs to be updated to not rely on view tags.
-      const agent = this.state.devtoolsAgent;
-      if (agent) {
-        agent.selectNode(findNodeHandle(touchedViewTag));
+      if (reactDevToolsAgent) {
+        reactDevToolsAgent.selectNode(findNodeHandle(touchedViewTag));
         if (closestInstance != null) {
-          agent.selectNode(closestInstance);
+          reactDevToolsAgent.selectNode(closestInstance);
         }
       }
 
       // [Win32 Avoid Dimensions call
-      const node = ReactNative.findNodeHandle(this);
+      const node = ReactNative.findNodeHandle(inspectedViewRef);
+      // $FlowFixMe[incompatible-call]
       UIManager.measure(node, (x, y, width, height, left, top) => {
-        this.setState({
-          panelPos: pointerY > height / 2 ? 'top' : 'bottom',
-          selection: selectedIndex,
-          hierarchy,
-          inspected: {
-            style: props.style,
-            frame,
-            source,
-          },
+        setPanelPosition(pointerY > height / 2 ? 'top' : 'bottom');
+        setSelectionIndex(selectedIndex);
+        setElementsHierarchy(hierarchy);
+        // $FlowFixMe[incompatible-call] `props` from InspectorData are defined as <string, string> dictionary, which is incompatible with ViewStyleProp
+        setInspectedElement({
+          frame,
+          style: props.style,
         });
       });
     };
 
     // ]Win32
     getInspectorDataForViewAtPoint(
-      this.state.inspectedView,
+      inspectedViewRef.current,
       locationX,
       locationY,
       viewData => {
-        if (this._setTouchedViewData != null) {
-          this._setTouchedViewData(viewData);
-          this._setTouchedViewData = null;
-        }
+        setTouchedViewData(viewData);
         return false;
       },
     );
-  }
+  };
 
-  setPerfing(val: boolean) {
-    this.setState({
-      perfing: val,
-      inspecting: false,
-      inspected: null,
-      networking: false,
-    });
-  }
+  const setInspecting = (enabled: boolean) => {
+    setSelectedTab(enabled ? 'elements-inspector' : null);
+    setInspectedElement(null);
+  };
 
-  setInspecting(val: boolean) {
-    this.setState({
-      inspecting: val,
-      inspected: null,
-    });
-  }
+  const setPerfing = (enabled: boolean) => {
+    setSelectedTab(enabled ? 'performance-profiling' : null);
+    setInspectedElement(null);
+  };
 
-  setTouchTargeting(val: boolean) {
-    PressabilityDebug.setEnabled(val);
-    this.props.onRequestRerenderApp(inspectedView => {
-      this.setState({inspectedView});
-    });
-  }
+  const setNetworking = (enabled: boolean) => {
+    setSelectedTab(enabled ? 'network-profiling' : null);
+    setInspectedElement(null);
+  };
 
-  setNetworking(val: boolean) {
-    this.setState({
-      networking: val,
-      perfing: false,
-      inspecting: false,
-      inspected: null,
-    });
-  }
+  const setTouchTargeting = (val: boolean) => {
+    PressabilityDebug.setEnabled(val);
+    onRequestRerenderApp();
+  };
 
-  render(): React.Node {
-    const panelContainerStyle =
-      this.state.panelPos === 'bottom'
-        ? {bottom: 0}
-        : {top: Platform.OS === 'ios' ? 20 : 0};
-    return (
-      <View style={styles.container} pointerEvents="box-none">
-        {this.state.inspecting && (
-          <InspectorOverlay
-            inspected={this.state.inspected}
-            // $FlowFixMe[method-unbinding] added when improving typing for this parameters
-            onTouchPoint={this.onTouchPoint.bind(this)}
-          />
-        )}
-        <View style={[styles.panelContainer, panelContainerStyle]}>
-          <InspectorPanel
-            devtoolsIsOpen={!!this.state.devtoolsAgent}
-            inspecting={this.state.inspecting}
-            perfing={this.state.perfing}
-            // $FlowFixMe[method-unbinding] added when improving typing for this parameters
-            setPerfing={this.setPerfing.bind(this)}
-            // $FlowFixMe[method-unbinding] added when improving typing for this parameters
-            setInspecting={this.setInspecting.bind(this)}
-            inspected={this.state.inspected}
-            hierarchy={this.state.hierarchy}
-            selection={this.state.selection}
-            // $FlowFixMe[method-unbinding] added when improving typing for this parameters
-            setSelection={this.setSelection.bind(this)}
-            touchTargeting={PressabilityDebug.isEnabled()}
-            // $FlowFixMe[method-unbinding] added when improving typing for this parameters
-            setTouchTargeting={this.setTouchTargeting.bind(this)}
-            networking={this.state.networking}
-            // $FlowFixMe[method-unbinding] added when improving typing for this parameters
-            setNetworking={this.setNetworking.bind(this)}
-          />
-        </View>
+  const panelContainerStyle =
+    panelPosition === 'bottom'
+      ? {bottom: 0}
+      : Platform.select({ios: {top: 0}, default: {top: 0}});
+
+  return (
+    <View style={styles.container} pointerEvents="box-none">
+      {selectedTab === 'elements-inspector' && (
+        <InspectorOverlay
+          inspected={inspectedElement}
+          onTouchPoint={onTouchPoint}
+        />
+      )}
+
+      <View style={[styles.panelContainer, panelContainerStyle]}>
+        <InspectorPanel
+          devtoolsIsOpen={!!reactDevToolsAgent}
+          inspecting={selectedTab === 'elements-inspector'}
+          perfing={selectedTab === 'performance-profiling'}
+          setPerfing={setPerfing}
+          setInspecting={setInspecting}
+          inspected={inspectedElement}
+          hierarchy={elementsHierarchy}
+          selection={selectionIndex}
+          setSelection={setSelection}
+          touchTargeting={PressabilityDebug.isEnabled()}
+          setTouchTargeting={setTouchTargeting}
+          networking={selectedTab === 'network-profiling'}
+          setNetworking={setNetworking}
+        />
       </View>
-    );
-  }
+    </View>
+  );
 }
 
 const styles = StyleSheet.create({

package/Libraries/Inspector/InspectorOverlay.js

@@ -10,58 +10,45 @@
 
 'use strict';
 
-import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
 import type {PressEvent} from '../Types/CoreEventTypes';
+import type {InspectedElement} from './Inspector';
 
 const View = require('../Components/View/View');
 const StyleSheet = require('../StyleSheet/StyleSheet');
-const Dimensions = require('../Utilities/Dimensions').default;
 const ElementBox = require('./ElementBox');
 const React = require('react');
 
-type Inspected = $ReadOnly<{|
-  frame?: Object,
-  style?: ViewStyleProp,
-|}>;
-
 type Props = $ReadOnly<{|
-  inspected?: Inspected,
+  inspected?: ?InspectedElement,
   onTouchPoint: (locationX: number, locationY: number) => void,
 |}>;
 
-class InspectorOverlay extends React.Component<Props> {
-  findViewForTouchEvent: (e: PressEvent) => void = (e: PressEvent) => {
+function InspectorOverlay({inspected, onTouchPoint}: Props): React.Node {
+  const findViewForTouchEvent = (e: PressEvent) => {
     const {locationX, locationY} = e.nativeEvent.touches[0];
 
-    this.props.onTouchPoint(locationX, locationY);
+    onTouchPoint(locationX, locationY);
   };
 
-  shouldSetResponder: (e: PressEvent) => boolean = (e: PressEvent): boolean => {
-    this.findViewForTouchEvent(e);
+  const handleStartShouldSetResponder = (e: PressEvent): boolean => {
+    findViewForTouchEvent(e);
     return true;
   };
 
-  render(): React.Node {
-    let content = null;
-    if (this.props.inspected) {
-      content = (
-        <ElementBox
-          frame={this.props.inspected.frame}
-          style={this.props.inspected.style}
-        />
-      );
-    }
-
-    return (
-      <View
-        onStartShouldSetResponder={this.shouldSetResponder}
-        onResponderMove={this.findViewForTouchEvent}
-        nativeID="inspectorOverlay" /* TODO: T68258846. */
-        style={[styles.inspector, {height: Dimensions.get('window').height}]}>
-        {content}
-      </View>
-    );
+  let content = null;
+  if (inspected) {
+    content = <ElementBox frame={inspected.frame} style={inspected.style} />;
   }
+
+  return (
+    <View
+      onStartShouldSetResponder={handleStartShouldSetResponder}
+      onResponderMove={findViewForTouchEvent}
+      nativeID="inspectorOverlay" /* TODO: T68258846. */
+      style={styles.inspector}>
+      {content}
+    </View>
+  );
 }
 
 const styles = StyleSheet.create({
@@ -71,6 +58,7 @@ const styles = StyleSheet.create({
     left: 0,
     top: 0,
     right: 0,
+    bottom: 0,
   },
 });
 

package/Libraries/Inspector/InspectorOverlay.win32.js

@@ -10,8 +10,8 @@
 
 'use strict';
 
-import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
 import type {PressEvent} from '../Types/CoreEventTypes';
+import type {InspectedElement} from './Inspector';
 
 // import Dimensions from '../Utilities/Dimensions'; [Win32]
 
@@ -20,50 +20,38 @@ const StyleSheet = require('../StyleSheet/StyleSheet');
 const ElementBox = require('./ElementBox');
 const React = require('react');
 
-type Inspected = $ReadOnly<{|
-  frame?: Object,
-  style?: ViewStyleProp,
-|}>;
-
 type Props = $ReadOnly<{|
-  inspected?: Inspected,
+  inspected?: ?InspectedElement,
   onTouchPoint: (locationX: number, locationY: number) => void,
 |}>;
 
-class InspectorOverlay extends React.Component<Props> {
-  findViewForTouchEvent: (e: PressEvent) => void = (e: PressEvent) => {
+function InspectorOverlay({inspected, onTouchPoint}: Props): React.Node {
+  const findViewForTouchEvent = (e: PressEvent) => {
     const {locationX, locationY} = e.nativeEvent.touches[0];
 
-    this.props.onTouchPoint(locationX, locationY);
+    onTouchPoint(locationX, locationY);
   };
 
-  shouldSetResponser: (e: PressEvent) => boolean = (e: PressEvent): boolean => {
-    this.findViewForTouchEvent(e);
+  const handleStartShouldSetResponder = (e: PressEvent): boolean => {
+    findViewForTouchEvent(e);
     return true;
   };
 
-  render(): React.Node {
-    let content = null;
-    if (this.props.inspected) {
-      content = (
-        <ElementBox
-          frame={this.props.inspected.frame}
-          style={this.props.inspected.style}
-        />
-      );
-    }
-
-    // [Win32, height replaced with 100% to avoid Dimensions call]
-    return (
-      <View
-        onStartShouldSetResponder={this.shouldSetResponser}
-        onResponderMove={this.findViewForTouchEvent}
-        nativeID="inspectorOverlay" /* TODO: T68258846. */
-        style={[styles.inspector, {height: '100%'}]}>
-        {content}
-      </View>
-    );
+  let content = null;
+  if (inspected) {
+    content = <ElementBox frame={inspected.frame} style={inspected.style} />;
   }
+
+  // [Win32, height replaced with 100% to avoid Dimensions call]
+  return (
+    <View
+      onStartShouldSetResponder={handleStartShouldSetResponder}
+      onResponderMove={findViewForTouchEvent}
+      nativeID="inspectorOverlay" /* TODO: T68258846. */
+      style={[styles.inspector, {height: '100%'}]}>
+      {content}
+    </View>
+  );
 }
 
 const styles = StyleSheet.create({
@@ -73,6 +61,7 @@ const styles = StyleSheet.create({
     left: 0,
     top: 0,
     right: 0,
+    bottom: 0,
   },
 });
 

package/Libraries/Inspector/InspectorPanel.js

@@ -10,7 +10,7 @@
 
 'use strict';
 
-import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
+import type {ElementsHierarchy, InspectedElement} from './Inspector';
 
 import SafeAreaView from '../Components/SafeAreaView/SafeAreaView';
 
@@ -34,22 +34,10 @@ type Props = $ReadOnly<{|
   setTouchTargeting: (val: boolean) => void,
   networking: boolean,
   setNetworking: (val: boolean) => void,
-  hierarchy?: ?Array<{|name: string|}>,
+  hierarchy?: ?ElementsHierarchy,
   selection?: ?number,
   setSelection: number => mixed,
-  inspected?: ?$ReadOnly<{|
-    style?: ?ViewStyleProp,
-    frame?: ?$ReadOnly<{|
-      top?: ?number,
-      left?: ?number,
-      width?: ?number,
-      height: ?number,
-    |}>,
-    source?: ?{|
-      fileName?: string,
-      lineNumber?: number,
-    |},
-  |}>,
+  inspected?: ?InspectedElement,
 |}>;
 
 class InspectorPanel extends React.Component<Props> {
@@ -70,8 +58,6 @@ class InspectorPanel extends React.Component<Props> {
           <ElementProperties
             style={this.props.inspected.style}
             frame={this.props.inspected.frame}
-            source={this.props.inspected.source}
-            // $FlowFixMe[incompatible-type] : Hierarchy should be non-nullable
             hierarchy={this.props.hierarchy}
             selection={this.props.selection}
             setSelection={this.props.setSelection}