Replace $FlowFixMe in BoxInspector (#48594)

Summary: Changelog: [General][Changed] - Improve types in BoxInspector Differential Revision: D68015261
facebook · Jan 10, 2025 · 9c3308b · 9c3308b
1 parent ddaecc1
commit 9c3308b
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 10 deletions.
diff --git a/packages/react-native/Libraries/Inspector/BoxInspector.js b/packages/react-native/Libraries/Inspector/BoxInspector.js
@@ -10,11 +10,15 @@
 
 'use strict';
 
+import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
+import type {InspectedElementFrame} from './Inspector';
+
+import React from 'react';
+
 const View = require('../Components/View/View');
 const StyleSheet = require('../StyleSheet/StyleSheet');
 const Text = require('../Text/Text');
 const resolveBoxStyle = require('./resolveBoxStyle');
-const React = require('react');
 
 const blank = {
   top: 0,
@@ -23,7 +27,12 @@ const blank = {
   bottom: 0,
 };
 
-class BoxInspector extends React.Component<$FlowFixMeProps> {
+type BoxInspectorProps = $ReadOnly<{
+  style: ViewStyleProp,
+  frame?: ?InspectedElementFrame,
+}>;
+
+class BoxInspector extends React.Component<BoxInspectorProps> {
   render(): React.Node {
     const frame = this.props.frame;
     const style = this.props.style;
@@ -34,11 +43,11 @@ class BoxInspector extends React.Component<$FlowFixMeProps> {
         <BoxContainer title="padding" box={padding}>
           <View>
             <Text style={styles.innerText}>
-              ({(frame.left || 0).toFixed(1)}, {(frame.top || 0).toFixed(1)})
+              ({(frame?.left || 0).toFixed(1)}, {(frame?.top || 0).toFixed(1)})
             </Text>
             <Text style={styles.innerText}>
-              {(frame.width || 0).toFixed(1)} &times;{' '}
-              {(frame.height || 0).toFixed(1)}
+              {(frame?.width || 0).toFixed(1)} &times;{' '}
+              {(frame?.height || 0).toFixed(1)}
             </Text>
           </View>
         </BoxContainer>
@@ -47,7 +56,19 @@ class BoxInspector extends React.Component<$FlowFixMeProps> {
   }
 }
 
-class BoxContainer extends React.Component<$FlowFixMeProps> {
+type BoxContainerProps = $ReadOnly<{
+  title: string,
+  box: $ReadOnly<{
+    top: number,
+    right: number,
+    bottom: number,
+    left: number,
+  }>,
+  titleStyle?: ViewStyleProp,
+  children: React.Node,
+}>;
+
+class BoxContainer extends React.Component<BoxContainerProps> {
   render(): React.Node {
     const box = this.props.box;
     return (

diff --git a/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap b/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap
@@ -5169,17 +5169,23 @@ declare module.exports: BorderBox;
 `;
 
 exports[`public API should not change unintentionally Libraries/Inspector/BoxInspector.js 1`] = `
-"declare const React: $FlowFixMe;
-declare class BoxInspector extends React.Component<$FlowFixMeProps> {
+"type BoxInspectorProps = $ReadOnly<{
+  style: ViewStyleProp,
+  frame?: ?InspectedElementFrame,
+}>;
+declare class BoxInspector extends React.Component<BoxInspectorProps> {
   render(): React.Node;
 }
 declare module.exports: BoxInspector;
 "
 `;
 
 exports[`public API should not change unintentionally Libraries/Inspector/ElementBox.js 1`] = `
-"declare const React: $FlowFixMe;
-declare class ElementBox extends React.Component<$FlowFixMeProps> {
+"type Props = $ReadOnly<{
+  style?: ViewStyleProp,
+  frame: InspectedElementFrame,
+}>;
+declare class ElementBox extends React.Component<Props> {
   render(): React.Node;
 }
 declare module.exports: ElementBox;