Migrate LogBoxInspectorReactFrames to Flow component syntax

packages/react-native/Libraries/LogBox/UI/LogBoxButton.js

@@ -19,7 +19,7 @@ import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
 import {useState} from 'react';
 
-type Props = Readonly<{
+component LogBoxButton(
   id?: string,
   backgroundColor: Readonly<{
     default: string,
@@ -29,40 +29,38 @@ type Props = Readonly<{
   hitSlop?: ?EdgeInsetsProp,
   onPress?: ?(event: GestureResponderEvent) => void,
   style?: ViewStyleProp,
-}>;
-
-function LogBoxButton(props: Props): React.Node {
+) {
   const [pressed, setPressed] = useState(false);
 
-  let backgroundColor = props.backgroundColor;
-  if (!backgroundColor) {
-    backgroundColor = {
+  let resolvedBackgroundColor = backgroundColor;
+  if (!resolvedBackgroundColor) {
+    resolvedBackgroundColor = {
       default: LogBoxStyle.getBackgroundColor(0.95),
       pressed: LogBoxStyle.getBackgroundColor(0.6),
     };
   }
 
   const content = (
     <View
-      id={props.id}
+      id={id}
       style={StyleSheet.compose(
         {
           backgroundColor: pressed
-            ? backgroundColor.pressed
-            : backgroundColor.default,
+            ? resolvedBackgroundColor.pressed
+            : resolvedBackgroundColor.default,
         },
-        props.style,
+        style,
       )}>
-      {props.children}
+      {children}
     </View>
   );
 
-  return props.onPress == null ? (
+  return onPress == null ? (
     content
   ) : (
     <TouchableWithoutFeedback
-      hitSlop={props.hitSlop}
-      onPress={props.onPress}
+      hitSlop={hitSlop}
+      onPress={onPress}
       onPressIn={() => setPressed(true)}
       onPressOut={() => setPressed(false)}>
       {content}

packages/react-native/Libraries/LogBox/UI/LogBoxInspectorMessageHeader.js

@@ -18,26 +18,21 @@ import LogBoxMessage from './LogBoxMessage';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
 
-type Props = Readonly<{
+const SHOW_MORE_MESSAGE_LENGTH = 300;
+
+component LogBoxInspectorMessageHeader(
   collapsed: boolean,
   message: Message,
   level: LogLevel,
   title: string,
   onPress: () => void,
-}>;
-
-const SHOW_MORE_MESSAGE_LENGTH = 300;
-
-function LogBoxInspectorMessageHeader(props: Props): React.Node {
+) {
   function renderShowMore() {
-    if (
-      props.message.content.length < SHOW_MORE_MESSAGE_LENGTH ||
-      !props.collapsed
-    ) {
+    if (message.content.length < SHOW_MORE_MESSAGE_LENGTH || !collapsed) {
       return null;
     }
     return (
-      <Text style={messageStyles.collapse} onPress={() => props.onPress()}>
+      <Text style={messageStyles.collapse} onPress={() => onPress()}>
         ... See More
       </Text>
     );
@@ -47,15 +42,15 @@ function LogBoxInspectorMessageHeader(props: Props): React.Node {
     <View style={messageStyles.body}>
       <View style={messageStyles.heading}>
         <Text
-          style={[messageStyles.headingText, messageStyles[props.level]]}
+          style={[messageStyles.headingText, messageStyles[level]]}
           id="logbox_message_title_text">
-          {props.title}
+          {title}
         </Text>
       </View>
       <Text style={messageStyles.bodyText} id="logbox_message_contents_text">
         <LogBoxMessage
-          maxLength={props.collapsed ? SHOW_MORE_MESSAGE_LENGTH : Infinity}
-          message={props.message}
+          maxLength={collapsed ? SHOW_MORE_MESSAGE_LENGTH : Infinity}
+          message={message}
           style={messageStyles.messageText}
         />
         {renderShowMore()}

packages/react-native/Libraries/LogBox/UI/LogBoxInspectorReactFrames.js

@@ -21,10 +21,6 @@ import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
 import {useState} from 'react';
 
-type Props = Readonly<{
-  log: LogBoxLog,
-}>;
-
 const BEFORE_SLASH_RE = /^(.*)[\\/]/;
 
 // Taken from React https://github.com/facebook/react/blob/206d61f72214e8ae5b935f0bf8628491cb7f0797/packages/react-devtools-shared/src/backend/describeComponentFrame.js#L27-L41
@@ -49,29 +45,30 @@ function getPrettyFileName(path: string) {
 
   return fileName;
 }
-function LogBoxInspectorReactFrames(props: Props): React.Node {
+
+component LogBoxInspectorReactFrames(log: LogBoxLog) {
   const [collapsed, setCollapsed] = useState(true);
   if (
-    props.log.getAvailableComponentStack() == null ||
-    props.log.getAvailableComponentStack().length < 1
+    log.getAvailableComponentStack() == null ||
+    log.getAvailableComponentStack().length < 1
   ) {
     return null;
   }
 
   function getStackList() {
     if (collapsed) {
-      return props.log.getAvailableComponentStack().slice(0, 3);
+      return log.getAvailableComponentStack().slice(0, 3);
     } else {
-      return props.log.getAvailableComponentStack();
+      return log.getAvailableComponentStack();
     }
   }
 
   function getCollapseMessage() {
-    if (props.log.getAvailableComponentStack().length <= 3) {
+    if (log.getAvailableComponentStack().length <= 3) {
       return;
     }
 
-    const count = props.log.getAvailableComponentStack().length - 3;
+    const count = log.getAvailableComponentStack().length - 3;
     if (collapsed) {
       return `See ${count} more components`;
     } else {

packages/react-native/Libraries/LogBox/UI/LogBoxInspectorSourceMapStatus.js

@@ -19,19 +19,17 @@ import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
 import {useEffect, useState} from 'react';
 
-type Props = Readonly<{
+component LogBoxInspectorSourceMapStatus(
   onPress?: ?(event: GestureResponderEvent) => void,
   status: 'COMPLETE' | 'FAILED' | 'NONE' | 'PENDING',
-}>;
-
-function LogBoxInspectorSourceMapStatus(props: Props): React.Node {
+) {
   const [state, setState] = useState({
     animation: null,
     rotate: null,
   });
 
   useEffect(() => {
-    if (props.status === 'PENDING') {
+    if (status === 'PENDING') {
       if (state.animation == null) {
         const animated = new Animated.Value(0);
         const animation = Animated.loop(
@@ -67,11 +65,11 @@ function LogBoxInspectorSourceMapStatus(props: Props): React.Node {
         state.animation.stop();
       }
     };
-  }, [props.status, state.animation]);
+  }, [status, state.animation]);
 
   let image;
   let color;
-  switch (props.status) {
+  switch (status) {
     case 'FAILED':
       image = require('./LogBoxImages/alert-triangle.png');
       color = LogBoxStyle.getErrorColor(1);
@@ -82,7 +80,7 @@ function LogBoxInspectorSourceMapStatus(props: Props): React.Node {
       break;
   }
 
-  if (props.status === 'COMPLETE' || image == null) {
+  if (status === 'COMPLETE' || image == null) {
     return null;
   }
 
@@ -93,14 +91,14 @@ function LogBoxInspectorSourceMapStatus(props: Props): React.Node {
         pressed: LogBoxStyle.getBackgroundColor(1),
       }}
       hitSlop={{bottom: 8, left: 8, right: 8, top: 8}}
-      onPress={props.onPress}
+      onPress={onPress}
       style={styles.root}>
       <Animated.Image
         source={image}
         style={[
           styles.image,
           {tintColor: color},
-          state.rotate == null || props.status !== 'PENDING'
+          state.rotate == null || status !== 'PENDING'
             ? null
             : {transform: [{rotate: state.rotate}]},
         ]}

packages/react-native/Libraries/LogBox/UI/LogBoxInspectorStackFrame.js

@@ -19,13 +19,10 @@ import LogBoxButton from './LogBoxButton';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
 
-type Props = Readonly<{
+component LogBoxInspectorStackFrame(
   frame: StackFrame,
   onPress?: ?(event: GestureResponderEvent) => void,
-}>;
-
-function LogBoxInspectorStackFrame(props: Props): React.Node {
-  const {frame, onPress} = props;
+) {
   const column = frame.column != null && parseInt(frame.column, 10);
   const location =
     getFileName(frame.file) +