Replace $FlowFixMe in BoxInspector and refactor (#48601)

Summary: Pull Request resolved: #48601 Changelog: [General][Changed] - Improved types in BoxInspector and refactored a code Reviewed By: NickGerleman Differential Revision: D68017470 fbshipit-source-id: f55b958aeee44babb41cea996f944cbc551a7a7b
facebook · Jan 13, 2025 · f832c45 · f832c45
1 parent 49e5c58
commit f832c45
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 46 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 {TextStyleProp, 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,51 +27,65 @@ const blank = {
   bottom: 0,
 };
 
-class BoxInspector extends React.Component<$FlowFixMeProps> {
-  render(): React.Node {
-    const frame = this.props.frame;
-    const style = this.props.style;
-    const margin = (style && resolveBoxStyle('margin', style)) || blank;
-    const padding = (style && resolveBoxStyle('padding', style)) || blank;
-    return (
-      <BoxContainer title="margin" titleStyle={styles.marginLabel} box={margin}>
-        <BoxContainer title="padding" box={padding}>
-          <View>
-            <Text style={styles.innerText}>
-              ({(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)}
-            </Text>
-          </View>
-        </BoxContainer>
-      </BoxContainer>
-    );
-  }
-}
+type BoxInspectorProps = $ReadOnly<{
+  style: ViewStyleProp,
+  frame: ?InspectedElementFrame,
+}>;
+
+function BoxInspector({style, frame}: BoxInspectorProps): React.Node {
+  const margin = (style && resolveBoxStyle('margin', style)) || blank;
+  const padding = (style && resolveBoxStyle('padding', style)) || blank;
 
-class BoxContainer extends React.Component<$FlowFixMeProps> {
-  render(): React.Node {
-    const box = this.props.box;
-    return (
-      <View style={styles.box}>
-        <View style={styles.row}>
-          {}
-          <Text style={[this.props.titleStyle, styles.label]}>
-            {this.props.title}
+  return (
+    <BoxContainer title="margin" titleStyle={styles.marginLabel} box={margin}>
+      <BoxContainer title="padding" box={padding}>
+        <View>
+          <Text style={styles.innerText}>
+            ({(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)}
           </Text>
-          <Text style={styles.boxText}>{box.top}</Text>
-        </View>
-        <View style={styles.row}>
-          <Text style={styles.boxText}>{box.left}</Text>
-          {this.props.children}
-          <Text style={styles.boxText}>{box.right}</Text>
         </View>
-        <Text style={styles.boxText}>{box.bottom}</Text>
+      </BoxContainer>
+    </BoxContainer>
+  );
+}
+
+type BoxContainerProps = $ReadOnly<{
+  title: string,
+  titleStyle?: TextStyleProp,
+  box: $ReadOnly<{
+    top: number,
+    left: number,
+    right: number,
+    bottom: number,
+  }>,
+  children: React.Node,
+}>;
+
+function BoxContainer({
+  title,
+  titleStyle,
+  box,
+  children,
+}: BoxContainerProps): React.Node {
+  return (
+    <View style={styles.box}>
+      <View style={styles.row}>
+        {}
+        <Text style={[titleStyle, styles.label]}>{title}</Text>
+        <Text style={styles.boxText}>{box.top}</Text>
+      </View>
+      <View style={styles.row}>
+        <Text style={styles.boxText}>{box.left}</Text>
+        {children}
+        <Text style={styles.boxText}>{box.right}</Text>
       </View>
-    );
-  }
+      <Text style={styles.boxText}>{box.bottom}</Text>
+    </View>
+  );
 }
 
 const styles = StyleSheet.create({

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
@@ -5167,10 +5167,11 @@ 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> {
-  render(): React.Node;
-}
+"type BoxInspectorProps = $ReadOnly<{
+  style: ViewStyleProp,
+  frame: ?InspectedElementFrame,
+}>;
+declare function BoxInspector(BoxInspectorProps): React.Node;
 declare module.exports: BoxInspector;
 "
 `;