react-native-windows 0.74.12 → 0.75.0-preview.2

package/Libraries/LogBox/UI/LogBoxInspector.js

@@ -9,40 +9,37 @@
  */
 
 import Keyboard from '../../Components/Keyboard/Keyboard';
-import ScrollView from '../../Components/ScrollView/ScrollView';
 import View from '../../Components/View/View';
 import StyleSheet from '../../StyleSheet/StyleSheet';
 import * as LogBoxData from '../Data/LogBoxData';
 import LogBoxLog, {type LogLevel} from '../Data/LogBoxLog';
-import LogBoxInspectorCodeFrame from './LogBoxInspectorCodeFrame';
+import LogBoxInspectorBody from './LogBoxInspectorBody';
 import LogBoxInspectorFooter from './LogBoxInspectorFooter';
 import LogBoxInspectorHeader from './LogBoxInspectorHeader';
-import LogBoxInspectorMessageHeader from './LogBoxInspectorMessageHeader';
-import LogBoxInspectorReactFrames from './LogBoxInspectorReactFrames';
-import LogBoxInspectorStackFrames from './LogBoxInspectorStackFrames';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
+import {useEffect} from 'react';
 
-type Props = $ReadOnly<{|
+type Props = $ReadOnly<{
   onDismiss: () => void,
   onChangeSelectedIndex: (index: number) => void,
   onMinimize: () => void,
   logs: $ReadOnlyArray<LogBoxLog>,
   selectedIndex: number,
   fatalType?: ?LogLevel,
-|}>;
+}>;
 
-function LogBoxInspector(props: Props): React.Node {
+export default function LogBoxInspector(props: Props): React.Node {
   const {logs, selectedIndex} = props;
   let log = logs[selectedIndex];
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (log) {
       LogBoxData.symbolicateLogNow(log);
     }
   }, [log]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     // Optimistically symbolicate the last and next logs.
     if (logs.length > 1) {
       const selected = selectedIndex;
@@ -54,7 +51,7 @@ function LogBoxInspector(props: Props): React.Node {
     }
   }, [logs, selectedIndex]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     Keyboard.dismiss();
   }, []);
 
@@ -84,68 +81,9 @@ function LogBoxInspector(props: Props): React.Node {
   );
 }
 
-const headerTitleMap = {
-  warn: 'Console Warning',
-  error: 'Console Error',
-  fatal: 'Uncaught Error',
-  syntax: 'Syntax Error',
-  component: 'Render Error',
-};
-
-function LogBoxInspectorBody(props: {log: LogBoxLog, onRetry: () => void}) {
-  const [collapsed, setCollapsed] = React.useState(true);
-
-  React.useEffect(() => {
-    setCollapsed(true);
-  }, [props.log]);
-
-  const headerTitle =
-    props.log.type ??
-    headerTitleMap[props.log.isComponentError ? 'component' : props.log.level];
-
-  if (collapsed) {
-    return (
-      <>
-        <LogBoxInspectorMessageHeader
-          collapsed={collapsed}
-          onPress={() => setCollapsed(!collapsed)}
-          message={props.log.message}
-          level={props.log.level}
-          title={headerTitle}
-        />
-        <ScrollView style={styles.scrollBody}>
-          <LogBoxInspectorCodeFrame codeFrame={props.log.codeFrame} />
-          <LogBoxInspectorReactFrames log={props.log} />
-          <LogBoxInspectorStackFrames log={props.log} onRetry={props.onRetry} />
-        </ScrollView>
-      </>
-    );
-  }
-  return (
-    <ScrollView style={styles.scrollBody}>
-      <LogBoxInspectorMessageHeader
-        collapsed={collapsed}
-        onPress={() => setCollapsed(!collapsed)}
-        message={props.log.message}
-        level={props.log.level}
-        title={headerTitle}
-      />
-      <LogBoxInspectorCodeFrame codeFrame={props.log.codeFrame} />
-      <LogBoxInspectorReactFrames log={props.log} />
-      <LogBoxInspectorStackFrames log={props.log} onRetry={props.onRetry} />
-    </ScrollView>
-  );
-}
-
 const styles = StyleSheet.create({
   root: {
     flex: 1,
     backgroundColor: LogBoxStyle.getTextColor(),
   },
-  scrollBody: {
-    backgroundColor: LogBoxStyle.getBackgroundColor(0.9),
-    flex: 1,
-  },
 });
-
-export default LogBoxInspector;

package/Libraries/LogBox/UI/LogBoxInspectorBody.js

@@ -0,0 +1,87 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import ScrollView from '../../Components/ScrollView/ScrollView';
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import LogBoxLog from '../Data/LogBoxLog';
+import LogBoxInspectorCodeFrame from './LogBoxInspectorCodeFrame';
+import LogBoxInspectorMessageHeader from './LogBoxInspectorMessageHeader';
+import LogBoxInspectorReactFrames from './LogBoxInspectorReactFrames';
+import LogBoxInspectorStackFrames from './LogBoxInspectorStackFrames';
+import * as LogBoxStyle from './LogBoxStyle';
+import * as React from 'react';
+import {useEffect, useState} from 'react';
+
+const headerTitleMap = {
+  warn: 'Console Warning',
+  error: 'Console Error',
+  fatal: 'Uncaught Error',
+  syntax: 'Syntax Error',
+  component: 'Render Error',
+};
+
+export default function LogBoxInspectorBody(props: {
+  log: LogBoxLog,
+  onRetry: () => void,
+}): React.Node {
+  const [collapsed, setCollapsed] = useState(true);
+
+  useEffect(() => {
+    setCollapsed(true);
+  }, [props.log]);
+
+  const headerTitle =
+    props.log.type ??
+    headerTitleMap[props.log.isComponentError ? 'component' : props.log.level];
+
+  if (collapsed) {
+    return (
+      <>
+        <LogBoxInspectorMessageHeader
+          collapsed={collapsed}
+          onPress={() => setCollapsed(!collapsed)}
+          message={props.log.message}
+          level={props.log.level}
+          title={headerTitle}
+        />
+        <ScrollView style={styles.scrollBody}>
+          <LogBoxInspectorCodeFrame codeFrame={props.log.codeFrame} />
+          <LogBoxInspectorReactFrames log={props.log} />
+          <LogBoxInspectorStackFrames log={props.log} onRetry={props.onRetry} />
+        </ScrollView>
+      </>
+    );
+  }
+  return (
+    <ScrollView style={styles.scrollBody}>
+      <LogBoxInspectorMessageHeader
+        collapsed={collapsed}
+        onPress={() => setCollapsed(!collapsed)}
+        message={props.log.message}
+        level={props.log.level}
+        title={headerTitle}
+      />
+      <LogBoxInspectorCodeFrame codeFrame={props.log.codeFrame} />
+      <LogBoxInspectorReactFrames log={props.log} />
+      <LogBoxInspectorStackFrames log={props.log} onRetry={props.onRetry} />
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    backgroundColor: LogBoxStyle.getTextColor(),
+  },
+  scrollBody: {
+    backgroundColor: LogBoxStyle.getBackgroundColor(0.9),
+    flex: 1,
+  },
+});

package/Libraries/LogBox/UI/LogBoxInspectorFooter.js

@@ -10,21 +10,20 @@
 
 import type {LogLevel} from '../Data/LogBoxLog';
 
-import SafeAreaView from '../../Components/SafeAreaView/SafeAreaView';
 import View from '../../Components/View/View';
 import StyleSheet from '../../StyleSheet/StyleSheet';
 import Text from '../../Text/Text';
-import LogBoxButton from './LogBoxButton';
+import LogBoxInspectorFooterButton from './LogBoxInspectorFooterButton';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
 
-type Props = $ReadOnly<{|
+type Props = $ReadOnly<{
   onDismiss: () => void,
   onMinimize: () => void,
   level?: ?LogLevel,
-|}>;
+}>;
 
-function LogBoxInspectorFooter(props: Props): React.Node {
+export default function LogBoxInspectorFooter(props: Props): React.Node {
   if (props.level === 'syntax') {
     return (
       <View style={styles.root}>
@@ -39,34 +38,12 @@ function LogBoxInspectorFooter(props: Props): React.Node {
 
   return (
     <View style={styles.root}>
-      <FooterButton text="Dismiss" onPress={props.onDismiss} />
-      <FooterButton text="Minimize" onPress={props.onMinimize} />
+      <LogBoxInspectorFooterButton text="Dismiss" onPress={props.onDismiss} />
+      <LogBoxInspectorFooterButton text="Minimize" onPress={props.onMinimize} />
     </View>
   );
 }
 
-type ButtonProps = $ReadOnly<{|
-  onPress: () => void,
-  text: string,
-|}>;
-
-function FooterButton(props: ButtonProps): React.Node {
-  return (
-    <SafeAreaView style={styles.button}>
-      <LogBoxButton
-        backgroundColor={{
-          default: 'transparent',
-          pressed: LogBoxStyle.getBackgroundDarkColor(),
-        }}
-        onPress={props.onPress}>
-        <View style={styles.buttonContent}>
-          <Text style={styles.buttonLabel}>{props.text}</Text>
-        </View>
-      </LogBoxButton>
-    </SafeAreaView>
-  );
-}
-
 const styles = StyleSheet.create({
   root: {
     backgroundColor: LogBoxStyle.getBackgroundColor(1),
@@ -79,17 +56,6 @@ const styles = StyleSheet.create({
   button: {
     flex: 1,
   },
-  buttonContent: {
-    alignItems: 'center',
-    height: 48,
-    justifyContent: 'center',
-  },
-  buttonLabel: {
-    color: LogBoxStyle.getTextColor(1),
-    fontSize: 14,
-    includeFontPadding: false,
-    lineHeight: 20,
-  },
   syntaxErrorText: {
     textAlign: 'center',
     width: '100%',
@@ -102,5 +68,3 @@ const styles = StyleSheet.create({
     color: LogBoxStyle.getTextColor(0.6),
   },
 });
-
-export default LogBoxInspectorFooter;

package/Libraries/LogBox/UI/LogBoxInspectorFooterButton.js

@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import SafeAreaView from '../../Components/SafeAreaView/SafeAreaView';
+import View from '../../Components/View/View';
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import Text from '../../Text/Text';
+import LogBoxButton from './LogBoxButton';
+import * as LogBoxStyle from './LogBoxStyle';
+import * as React from 'react';
+
+type ButtonProps = $ReadOnly<{
+  onPress: () => void,
+  text: string,
+}>;
+
+export default function LogBoxInspectorFooterButton(
+  props: ButtonProps,
+): React.Node {
+  return (
+    <SafeAreaView style={styles.button}>
+      <LogBoxButton
+        backgroundColor={{
+          default: 'transparent',
+          pressed: LogBoxStyle.getBackgroundDarkColor(),
+        }}
+        onPress={props.onPress}>
+        <View style={styles.buttonContent}>
+          <Text style={styles.buttonLabel}>{props.text}</Text>
+        </View>
+      </LogBoxButton>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  button: {
+    flex: 1,
+  },
+  buttonContent: {
+    alignItems: 'center',
+    height: 48,
+    justifyContent: 'center',
+  },
+  buttonLabel: {
+    color: LogBoxStyle.getTextColor(1),
+    fontSize: 14,
+    includeFontPadding: false,
+    lineHeight: 20,
+  },
+});

package/Libraries/LogBox/UI/LogBoxInspectorHeader.js

@@ -8,26 +8,25 @@
  * @format
  */
 
-import type {ImageSource} from '../../Image/ImageSource';
 import type {LogLevel} from '../Data/LogBoxLog';
 
 import StatusBar from '../../Components/StatusBar/StatusBar';
 import View from '../../Components/View/View';
-import Image from '../../Image/Image';
 import StyleSheet from '../../StyleSheet/StyleSheet';
 import Text from '../../Text/Text';
 import Platform from '../../Utilities/Platform';
-import LogBoxButton from './LogBoxButton';
+import LogBoxInspectorHeaderButton from './LogBoxInspectorHeaderButton';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
-type Props = $ReadOnly<{|
+
+type Props = $ReadOnly<{
   onSelectIndex: (selectedIndex: number) => void,
   selectedIndex: number,
   total: number,
   level: LogLevel,
-|}>;
+}>;
 
-function LogBoxInspectorHeader(props: Props): React.Node {
+export default function LogBoxInspectorHeader(props: Props): React.Node {
   if (props.level === 'syntax') {
     return (
       <View style={[styles.safeArea, styles[props.level]]}>
@@ -70,64 +69,6 @@ function LogBoxInspectorHeader(props: Props): React.Node {
   );
 }
 
-const backgroundForLevel = (level: LogLevel) =>
-  ({
-    warn: {
-      default: 'transparent',
-      pressed: LogBoxStyle.getWarningDarkColor(),
-    },
-    error: {
-      default: 'transparent',
-      pressed: LogBoxStyle.getErrorDarkColor(),
-    },
-    fatal: {
-      default: 'transparent',
-      pressed: LogBoxStyle.getFatalDarkColor(),
-    },
-    syntax: {
-      default: 'transparent',
-      pressed: LogBoxStyle.getFatalDarkColor(),
-    },
-  })[level];
-
-function LogBoxInspectorHeaderButton(
-  props: $ReadOnly<{|
-    disabled: boolean,
-    image: ImageSource,
-    level: LogLevel,
-    onPress?: ?() => void,
-  |}>,
-): React.Node {
-  return (
-    <LogBoxButton
-      backgroundColor={backgroundForLevel(props.level)}
-      onPress={props.disabled ? null : props.onPress}
-      style={headerStyles.button}>
-      {props.disabled ? null : (
-        <Image source={props.image} style={headerStyles.buttonImage} />
-      )}
-    </LogBoxButton>
-  );
-}
-
-const headerStyles = StyleSheet.create({
-  button: {
-    alignItems: 'center',
-    aspectRatio: 1,
-    justifyContent: 'center',
-    marginTop: 5,
-    marginRight: 6,
-    marginLeft: 6,
-    marginBottom: -8,
-    borderRadius: 3,
-  },
-  buttonImage: {
-    height: 14,
-    width: 8,
-    tintColor: LogBoxStyle.getTextColor(),
-  },
-});
-
 const styles = StyleSheet.create({
   syntax: {
     backgroundColor: LogBoxStyle.getFatalColor(),
@@ -164,5 +105,3 @@ const styles = StyleSheet.create({
     paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 40,
   },
 });
-
-export default LogBoxInspectorHeader;

package/Libraries/LogBox/UI/LogBoxInspectorHeader.windows.js

@@ -8,26 +8,25 @@
  * @format
  */
 
-import type {ImageSource} from '../../Image/ImageSource';
 import type {LogLevel} from '../Data/LogBoxLog';
 
 import StatusBar from '../../Components/StatusBar/StatusBar';
 import View from '../../Components/View/View';
-import Image from '../../Image/Image';
 import StyleSheet from '../../StyleSheet/StyleSheet';
 import Text from '../../Text/Text';
 import Platform from '../../Utilities/Platform';
-import LogBoxButton from './LogBoxButton';
+import LogBoxInspectorHeaderButton from './LogBoxInspectorHeaderButton';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
-type Props = $ReadOnly<{|
+
+type Props = $ReadOnly<{
   onSelectIndex: (selectedIndex: number) => void,
   selectedIndex: number,
   total: number,
   level: LogLevel,
-|}>;
+}>;
 
-function LogBoxInspectorHeader(props: Props): React.Node {
+export default function LogBoxInspectorHeader(props: Props): React.Node {
   if (props.level === 'syntax') {
     return (
       <View style={[styles.safeArea, styles[props.level]]}>
@@ -70,64 +69,6 @@ function LogBoxInspectorHeader(props: Props): React.Node {
   );
 }
 
-const backgroundForLevel = (level: LogLevel) =>
-  ({
-    warn: {
-      default: 'transparent',
-      pressed: LogBoxStyle.getWarningDarkColor(),
-    },
-    error: {
-      default: 'transparent',
-      pressed: LogBoxStyle.getErrorDarkColor(),
-    },
-    fatal: {
-      default: 'transparent',
-      pressed: LogBoxStyle.getFatalDarkColor(),
-    },
-    syntax: {
-      default: 'transparent',
-      pressed: LogBoxStyle.getFatalDarkColor(),
-    },
-  }[level]);
-
-function LogBoxInspectorHeaderButton(
-  props: $ReadOnly<{|
-    disabled: boolean,
-    image: ImageSource,
-    level: LogLevel,
-    onPress?: ?() => void,
-  |}>,
-): React.Node {
-  return (
-    <LogBoxButton
-      backgroundColor={backgroundForLevel(props.level)}
-      onPress={props.disabled ? null : props.onPress}
-      style={headerStyles.button}>
-      {props.disabled ? null : (
-        <Image source={props.image} style={headerStyles.buttonImage} />
-      )}
-    </LogBoxButton>
-  );
-}
-
-const headerStyles = StyleSheet.create({
-  button: {
-    alignItems: 'center',
-    aspectRatio: 1,
-    justifyContent: 'center',
-    marginTop: 5,
-    marginRight: 6,
-    marginLeft: 6,
-    marginBottom: -8,
-    borderRadius: 3,
-  },
-  buttonImage: {
-    height: 14,
-    width: 8,
-    tintColor: LogBoxStyle.getTextColor(),
-  },
-});
-
 const styles = StyleSheet.create({
   syntax: {
     backgroundColor: LogBoxStyle.getFatalColor(),
@@ -168,5 +109,3 @@ const styles = StyleSheet.create({
     paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 40,
   },
 });
-
-export default LogBoxInspectorHeader;

package/Libraries/LogBox/UI/LogBoxInspectorHeaderButton.js

@@ -0,0 +1,76 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import type {ImageSource} from '../../Image/ImageSource';
+import type {LogLevel} from '../Data/LogBoxLog';
+
+import Image from '../../Image/Image';
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import LogBoxButton from './LogBoxButton';
+import * as LogBoxStyle from './LogBoxStyle';
+import * as React from 'react';
+
+const backgroundForLevel = (level: LogLevel) =>
+  ({
+    warn: {
+      default: 'transparent',
+      pressed: LogBoxStyle.getWarningDarkColor(),
+    },
+    error: {
+      default: 'transparent',
+      pressed: LogBoxStyle.getErrorDarkColor(),
+    },
+    fatal: {
+      default: 'transparent',
+      pressed: LogBoxStyle.getFatalDarkColor(),
+    },
+    syntax: {
+      default: 'transparent',
+      pressed: LogBoxStyle.getFatalDarkColor(),
+    },
+  })[level];
+
+export default function LogBoxInspectorHeaderButton(
+  props: $ReadOnly<{
+    disabled: boolean,
+    image: ImageSource,
+    level: LogLevel,
+    onPress?: ?() => void,
+  }>,
+): React.Node {
+  return (
+    <LogBoxButton
+      backgroundColor={backgroundForLevel(props.level)}
+      onPress={props.disabled ? null : props.onPress}
+      style={styles.button}>
+      {props.disabled ? null : (
+        <Image source={props.image} style={styles.buttonImage} />
+      )}
+    </LogBoxButton>
+  );
+}
+
+const styles = StyleSheet.create({
+  button: {
+    alignItems: 'center',
+    aspectRatio: 1,
+    justifyContent: 'center',
+    marginTop: 5,
+    marginRight: 6,
+    marginLeft: 6,
+    marginBottom: -8,
+    borderRadius: 3,
+  },
+  buttonImage: {
+    height: 14,
+    width: 8,
+    tintColor: LogBoxStyle.getTextColor(),
+  },
+});

package/Libraries/LogBox/UI/LogBoxInspectorReactFrames.js

@@ -50,24 +50,27 @@ function getPrettyFileName(path: string) {
 }
 function LogBoxInspectorReactFrames(props: Props): React.Node {
   const [collapsed, setCollapsed] = React.useState(true);
-  if (props.log.componentStack == null || props.log.componentStack.length < 1) {
+  if (
+    props.log.getAvailableComponentStack() == null ||
+    props.log.getAvailableComponentStack().length < 1
+  ) {
     return null;
   }
 
   function getStackList() {
     if (collapsed) {
-      return props.log.componentStack.slice(0, 3);
+      return props.log.getAvailableComponentStack().slice(0, 3);
     } else {
-      return props.log.componentStack;
+      return props.log.getAvailableComponentStack();
     }
   }
 
   function getCollapseMessage() {
-    if (props.log.componentStack.length <= 3) {
+    if (props.log.getAvailableComponentStack().length <= 3) {
       return;
     }
 
-    const count = props.log.componentStack.length - 3;
+    const count = props.log.getAvailableComponentStack().length - 3;
     if (collapsed) {
       return `See ${count} more components`;
     } else {