diff --git a/packages/react-native/Libraries/LogBox/UI/LogBoxButton.js b/packages/react-native/Libraries/LogBox/UI/LogBoxButton.js index 6e4da80afbf7..e897e13d0b93 100644 --- a/packages/react-native/Libraries/LogBox/UI/LogBoxButton.js +++ b/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,14 +29,12 @@ 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), }; @@ -44,25 +42,25 @@ function LogBoxButton(props: Props): React.Node { const content = ( - {props.children} + {children} ); - return props.onPress == null ? ( + return onPress == null ? ( content ) : ( setPressed(true)} onPressOut={() => setPressed(false)}> {content} diff --git a/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorSourceMapStatus.js b/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorSourceMapStatus.js index 96e93c500e22..5351316fc12e 100644 --- a/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorSourceMapStatus.js +++ b/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}> 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) +