From b322af3c35671c4dce03f1631ebbf9e2f881d52f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dawid=20Ma=C5=82ecki?= <maleckidawid@meta.com>
Date: Fri, 10 Jan 2025 06:19:14 -0800
Subject: [PATCH] Replace $FlowFixMeProps in ElementBox and refactor

Summary:
Changelog:
[General][Changed] - Improved types in ElementBox and refactored a code

Differential Revision: D68018112
---
 .../Libraries/Inspector/ElementBox.js         | 103 ++++++++++--------
 .../__snapshots__/public-api-test.js.snap     |   9 +-
 2 files changed, 60 insertions(+), 52 deletions(-)

diff --git a/packages/react-native/Libraries/Inspector/ElementBox.js b/packages/react-native/Libraries/Inspector/ElementBox.js
index a41671791ee2a6..35d0c697db2ec4 100644
--- a/packages/react-native/Libraries/Inspector/ElementBox.js
+++ b/packages/react-native/Libraries/Inspector/ElementBox.js
@@ -10,65 +10,72 @@
 
 'use strict';
 
+import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
+import type {InspectedElementFrame} from './Inspector';
+
+import React from 'react';
+
 const View = require('../Components/View/View');
 const flattenStyle = require('../StyleSheet/flattenStyle');
 const StyleSheet = require('../StyleSheet/StyleSheet');
 const Dimensions = require('../Utilities/Dimensions').default;
 const BorderBox = require('./BorderBox');
 const resolveBoxStyle = require('./resolveBoxStyle');
-const React = require('react');
-
-class ElementBox extends React.Component<$FlowFixMeProps> {
-  render(): React.Node {
-    const style = flattenStyle(this.props.style) || {};
-    let margin: ?$ReadOnly<Style> = resolveBoxStyle('margin', style);
-    let padding: ?$ReadOnly<Style> = resolveBoxStyle('padding', style);
-
-    const frameStyle = {...this.props.frame};
-    const contentStyle: {width: number, height: number} = {
-      width: this.props.frame.width,
-      height: this.props.frame.height,
-    };
-
-    if (margin != null) {
-      margin = resolveRelativeSizes(margin);
-
-      frameStyle.top -= margin.top;
-      frameStyle.left -= margin.left;
-      frameStyle.height += margin.top + margin.bottom;
-      frameStyle.width += margin.left + margin.right;
-
-      if (margin.top < 0) {
-        contentStyle.height += margin.top;
-      }
-      if (margin.bottom < 0) {
-        contentStyle.height += margin.bottom;
-      }
-      if (margin.left < 0) {
-        contentStyle.width += margin.left;
-      }
-      if (margin.right < 0) {
-        contentStyle.width += margin.right;
-      }
-    }
 
-    if (padding != null) {
-      padding = resolveRelativeSizes(padding);
+type Props = $ReadOnly<{
+  frame: InspectedElementFrame,
+  style?: ?ViewStyleProp,
+}>;
+
+function ElementBox({frame, style}: Props): React.Node {
+  const flattenedStyle = flattenStyle(style) || {};
+  let margin: ?$ReadOnly<Style> = resolveBoxStyle('margin', flattenedStyle);
+  let padding: ?$ReadOnly<Style> = resolveBoxStyle('padding', flattenedStyle);
 
-      contentStyle.width -= padding.left + padding.right;
-      contentStyle.height -= padding.top + padding.bottom;
+  const frameStyle = {...frame};
+  const contentStyle: {width: number, height: number} = {
+    width: frame.width,
+    height: frame.height,
+  };
+
+  if (margin != null) {
+    margin = resolveRelativeSizes(margin);
+
+    frameStyle.top -= margin.top;
+    frameStyle.left -= margin.left;
+    frameStyle.height += margin.top + margin.bottom;
+    frameStyle.width += margin.left + margin.right;
+
+    if (margin.top < 0) {
+      contentStyle.height += margin.top;
+    }
+    if (margin.bottom < 0) {
+      contentStyle.height += margin.bottom;
     }
+    if (margin.left < 0) {
+      contentStyle.width += margin.left;
+    }
+    if (margin.right < 0) {
+      contentStyle.width += margin.right;
+    }
+  }
 
-    return (
-      <View style={[styles.frame, frameStyle]} pointerEvents="none">
-        <BorderBox box={margin} style={styles.margin}>
-          <BorderBox box={padding} style={styles.padding}>
-            <View style={[styles.content, contentStyle]} />
-          </BorderBox>
-        </BorderBox>
-      </View>
-    );
+  if (padding != null) {
+    padding = resolveRelativeSizes(padding);
+
+    contentStyle.width -= padding.left + padding.right;
+    contentStyle.height -= padding.top + padding.bottom;
   }
+
+  return (
+    <View style={[styles.frame, frameStyle]} pointerEvents="none">
+      <BorderBox box={margin} style={styles.margin}>
+        <BorderBox box={padding} style={styles.padding}>
+          <View style={[styles.content, contentStyle]} />
+        </BorderBox>
+      </BorderBox>
+    </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
index ee3d98fe77041d..6b3bc19d2d44b3 100644
--- a/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap
+++ b/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap
@@ -5168,10 +5168,11 @@ 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> {
-  render(): React.Node;
-}
+"type Props = $ReadOnly<{
+  frame: InspectedElementFrame,
+  style?: ?ViewStyleProp,
+}>;
+declare function ElementBox(Props): React.Node;
 declare module.exports: ElementBox;
 "
 `;