@office-iss/react-native-win32 0.0.0-canary.29 → 0.0.0-canary.291

package/Libraries/LogBox/UI/LogBoxInspector.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * 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.
@@ -8,43 +8,38 @@
  * @format
  */
 
-'use strict';
-
-import LogBoxInspectorCodeFrame from './LogBoxInspectorCodeFrame';
-import * as React from 'react';
-import ScrollView from '../../Components/ScrollView/ScrollView';
-import StyleSheet from '../../StyleSheet/StyleSheet';
+import Keyboard from '../../Components/Keyboard/Keyboard';
 import View from '../../Components/View/View';
+import StyleSheet from '../../StyleSheet/StyleSheet';
 import * as LogBoxData from '../Data/LogBoxData';
-import Keyboard from '../../Components/Keyboard/Keyboard';
+import LogBoxLog, {type LogLevel} from '../Data/LogBoxLog';
+import LogBoxInspectorBody from './LogBoxInspectorBody';
 import LogBoxInspectorFooter from './LogBoxInspectorFooter';
-import LogBoxInspectorMessageHeader from './LogBoxInspectorMessageHeader';
-import LogBoxInspectorReactFrames from './LogBoxInspectorReactFrames';
-import LogBoxInspectorStackFrames from './LogBoxInspectorStackFrames';
 import LogBoxInspectorHeader from './LogBoxInspectorHeader';
 import * as LogBoxStyle from './LogBoxStyle';
-import LogBoxLog, {type LogLevel} from '../Data/LogBoxLog';
+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;
@@ -56,7 +51,7 @@ function LogBoxInspector(props: Props): React.Node {
     }
   }, [logs, selectedIndex]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     Keyboard.dismiss();
   }, []);
 
@@ -69,7 +64,7 @@ function LogBoxInspector(props: Props): React.Node {
   }
 
   return (
-    <View style={styles.root}>
+    <View id="logbox_inspector" style={styles.root}>
       <LogBoxInspectorHeader
         onSelectIndex={props.onChangeSelectedIndex}
         selectedIndex={selectedIndex}
@@ -86,68 +81,9 @@ function LogBoxInspector(props: Props): React.Node {
   );
 }
 
-const headerTitleMap = {
-  warn: 'Warning',
-  error: 'Error',
-  fatal: 'Exception',
-  syntax: 'Syntax Error',
-  component: 'Component Exception',
-};
-
-function LogBoxInspectorBody(props) {
-  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,93 @@
+/**
+ * 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}
+            componentCodeFrame={props.log.componentCodeFrame}
+          />
+          <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}
+        componentCodeFrame={props.log.componentCodeFrame}
+      />
+      <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/LogBoxInspectorCodeFrame.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * 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.
@@ -8,41 +8,40 @@
  * @format
  */
 
-'use strict';
+import type {CodeFrame} from '../Data/parseLogBoxLog';
 
-import * as React from 'react';
-import Platform from '../../Utilities/Platform';
 import ScrollView from '../../Components/ScrollView/ScrollView';
-import StyleSheet from '../../StyleSheet/StyleSheet';
-import Text from '../../Text/Text';
 import View from '../../Components/View/View';
-import * as LogBoxStyle from './LogBoxStyle';
-import type {CodeFrame} from '../Data/parseLogBoxLog';
-import LogBoxButton from './LogBoxButton';
 import openFileInEditor from '../../Core/Devtools/openFileInEditor';
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import Text from '../../Text/Text';
+import Platform from '../../Utilities/Platform';
+import * as LogBoxData from '../Data/LogBoxData';
 import AnsiHighlight from './AnsiHighlight';
+import LogBoxButton from './LogBoxButton';
 import LogBoxInspectorSection from './LogBoxInspectorSection';
-import * as LogBoxData from '../Data/LogBoxData';
-type Props = $ReadOnly<{|
-  codeFrame: ?CodeFrame,
-|}>;
+import * as LogBoxStyle from './LogBoxStyle';
+import * as React from 'react';
 
-function LogBoxInspectorCodeFrame(props: Props): React.Node {
-  const codeFrame = props.codeFrame;
-  if (codeFrame == null) {
-    return null;
-  }
+type Props = $ReadOnly<{
+  componentCodeFrame: ?CodeFrame,
+  codeFrame: ?CodeFrame,
+}>;
 
+function CodeFrameDisplay({codeFrame}: {codeFrame: CodeFrame}): React.Node {
   function getFileName() {
+    // $FlowFixMe[incompatible-use]
     const matches = /[^/]*$/.exec(codeFrame.fileName);
     if (matches && matches.length > 0) {
       return matches[0];
     }
 
+    // $FlowFixMe[incompatible-use]
     return codeFrame.fileName;
   }
 
   function getLocation() {
+    // $FlowFixMe[incompatible-use]
     const location = codeFrame.location;
     if (location != null) {
       return ` (${location.row}:${
@@ -54,28 +53,52 @@ function LogBoxInspectorCodeFrame(props: Props): React.Node {
   }
 
   return (
-    <LogBoxInspectorSection heading="Source" action={<AppInfo />}>
-      <View style={styles.box}>
-        <View style={styles.frame}>
-          <ScrollView horizontal>
-            <AnsiHighlight style={styles.content} text={codeFrame.content} />
-          </ScrollView>
-        </View>
-        <LogBoxButton
-          backgroundColor={{
-            default: 'transparent',
-            pressed: LogBoxStyle.getBackgroundDarkColor(1),
-          }}
-          style={styles.button}
-          onPress={() => {
-            openFileInEditor(codeFrame.fileName, codeFrame.location?.row ?? 0);
-          }}>
-          <Text style={styles.fileText}>
-            {getFileName()}
-            {getLocation()}
-          </Text>
-        </LogBoxButton>
+    <View style={styles.box}>
+      <View style={styles.frame}>
+        <ScrollView horizontal contentContainerStyle={styles.contentContainer}>
+          <AnsiHighlight style={styles.content} text={codeFrame.content} />
+        </ScrollView>
       </View>
+      <LogBoxButton
+        backgroundColor={{
+          default: 'transparent',
+          pressed: LogBoxStyle.getBackgroundDarkColor(1),
+        }}
+        style={styles.button}
+        onPress={() => {
+          openFileInEditor(codeFrame.fileName, codeFrame.location?.row ?? 0);
+        }}>
+        <Text style={styles.fileText}>
+          {getFileName()}
+          {getLocation()}
+        </Text>
+      </LogBoxButton>
+    </View>
+  );
+}
+
+function LogBoxInspectorCodeFrame(props: Props): React.Node {
+  const {codeFrame, componentCodeFrame} = props;
+  let sources = [];
+  if (codeFrame != null) {
+    sources.push(codeFrame);
+  }
+  if (
+    componentCodeFrame != null &&
+    componentCodeFrame?.content !== codeFrame?.content
+  ) {
+    sources.push(componentCodeFrame);
+  }
+  if (sources.length === 0) {
+    return null;
+  }
+  return (
+    <LogBoxInspectorSection
+      heading={sources.length > 1 ? 'Sources' : 'Source'}
+      action={<AppInfo />}>
+      {sources.map((frame, index) => (
+        <CodeFrameDisplay key={index} codeFrame={frame} />
+      ))}
     </LogBoxInspectorSection>
   );
 }
@@ -136,6 +159,9 @@ const styles = StyleSheet.create({
     paddingTop: 10,
     paddingBottom: 10,
   },
+  contentContainer: {
+    minWidth: '100%',
+  },
   content: {
     color: LogBoxStyle.getTextColor(1),
     fontSize: 12,

package/Libraries/LogBox/UI/LogBoxInspectorCodeFrame.win32.js

@@ -0,0 +1,192 @@
+/**
+ * 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 {CodeFrame} from '../Data/parseLogBoxLog';
+
+import ScrollView from '../../Components/ScrollView/ScrollView';
+import View from '../../Components/View/View';
+import openFileInEditor from '../../Core/Devtools/openFileInEditor';
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import Text from '../../Text/Text';
+import Platform from '../../Utilities/Platform';
+import * as LogBoxData from '../Data/LogBoxData';
+import AnsiHighlight from './AnsiHighlight';
+import LogBoxButton from './LogBoxButton';
+import LogBoxInspectorSection from './LogBoxInspectorSection';
+import * as LogBoxStyle from './LogBoxStyle';
+import * as React from 'react';
+
+type Props = $ReadOnly<{
+  componentCodeFrame: ?CodeFrame,
+  codeFrame: ?CodeFrame,
+}>;
+
+function CodeFrameDisplay({codeFrame}: {codeFrame: CodeFrame}): React.Node {
+  function getFileName() {
+    // $FlowFixMe[incompatible-use]
+    const matches = /[^/]*$/.exec(codeFrame.fileName);
+    if (matches && matches.length > 0) {
+      return matches[0];
+    }
+
+    // $FlowFixMe[incompatible-use]
+    return codeFrame.fileName;
+  }
+
+  function getLocation() {
+    // $FlowFixMe[incompatible-use]
+    const location = codeFrame.location;
+    if (location != null) {
+      return ` (${location.row}:${
+        location.column + 1 /* Code frame columns are zero indexed */
+      })`;
+    }
+
+    return null;
+  }
+
+  return (
+    <View style={styles.box}>
+      <View style={styles.frame}>
+        <ScrollView horizontal contentContainerStyle={styles.contentContainer}>
+          <AnsiHighlight style={styles.content} text={codeFrame.content} />
+        </ScrollView>
+      </View>
+      <LogBoxButton
+        backgroundColor={{
+          default: 'transparent',
+          pressed: LogBoxStyle.getBackgroundDarkColor(1),
+        }}
+        style={styles.button}
+        onPress={() => {
+          openFileInEditor(codeFrame.fileName, codeFrame.location?.row ?? 0);
+        }}>
+        <Text style={styles.fileText}>
+          {getFileName()}
+          {getLocation()}
+        </Text>
+      </LogBoxButton>
+    </View>
+  );
+}
+
+function LogBoxInspectorCodeFrame(props: Props): React.Node {
+  const {codeFrame, componentCodeFrame} = props;
+  let sources = [];
+  if (codeFrame != null) {
+    sources.push(codeFrame);
+  }
+  if (
+    componentCodeFrame != null &&
+    componentCodeFrame?.content !== codeFrame?.content
+  ) {
+    sources.push(componentCodeFrame);
+  }
+  if (sources.length === 0) {
+    return null;
+  }
+  return (
+    <LogBoxInspectorSection
+      heading={sources.length > 1 ? 'Sources' : 'Source'}
+      action={<AppInfo />}>
+      {sources.map((frame, index) => (
+        <CodeFrameDisplay key={index} codeFrame={frame} />
+      ))}
+    </LogBoxInspectorSection>
+  );
+}
+
+function AppInfo() {
+  const appInfo = LogBoxData.getAppInfo();
+  if (appInfo == null) {
+    return null;
+  }
+
+  return (
+    <LogBoxButton
+      backgroundColor={{
+        default: 'transparent',
+        pressed: appInfo.onPress
+          ? LogBoxStyle.getBackgroundColor(1)
+          : 'transparent',
+      }}
+      style={appInfoStyles.buildButton}
+      onPress={appInfo.onPress}>
+      <Text style={appInfoStyles.text}>
+        {appInfo.appVersion} ({appInfo.engine})
+      </Text>
+    </LogBoxButton>
+  );
+}
+
+const appInfoStyles = StyleSheet.create({
+  text: {
+    color: LogBoxStyle.getTextColor(0.4),
+    fontSize: 12,
+    lineHeight: 12,
+  },
+  buildButton: {
+    flex: 0,
+    flexGrow: 0,
+    paddingVertical: 4,
+    paddingHorizontal: 5,
+    borderRadius: 5,
+    marginRight: -8,
+  },
+});
+
+const styles = StyleSheet.create({
+  box: {
+    backgroundColor: LogBoxStyle.getBackgroundColor(),
+    marginLeft: 10,
+    marginRight: 10,
+    marginTop: 5,
+    borderRadius: 3,
+  },
+  frame: {
+    padding: 10,
+    borderBottomColor: LogBoxStyle.getTextColor(0.1),
+    borderBottomWidth: 1,
+  },
+  button: {
+    paddingTop: 10,
+    paddingBottom: 10,
+  },
+  contentContainer: {
+    minWidth: '100%',
+  },
+  content: {
+    color: LogBoxStyle.getTextColor(1),
+    fontSize: 12,
+    includeFontPadding: false,
+    lineHeight: 20,
+    // $FlowFixMe[underconstrained-implicit-instantiation]
+    fontFamily: Platform.select({
+      android: 'monospace',
+      ios: 'Menlo',
+      win32: 'Consolas',
+    }),
+  },
+  fileText: {
+    color: LogBoxStyle.getTextColor(0.5),
+    textAlign: 'center',
+    flex: 1,
+    fontSize: 12,
+    includeFontPadding: false,
+    lineHeight: 16,
+    fontFamily: Platform.select({
+      android: 'monospace',
+      ios: 'Menlo',
+      win32: 'Consolas', // Win32
+    }),
+  },
+});
+
+export default LogBoxInspectorCodeFrame;

package/Libraries/LogBox/UI/LogBoxInspectorFooter.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * 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.
@@ -8,30 +8,27 @@
  * @format
  */
 
-'use strict';
-
 import type {LogLevel} from '../Data/LogBoxLog';
 
-import * as React from 'react';
-import DeviceInfo from '../../Utilities/DeviceInfo';
+import View from '../../Components/View/View';
 import StyleSheet from '../../StyleSheet/StyleSheet';
 import Text from '../../Text/Text';
-import View from '../../Components/View/View';
-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}>
         <View style={styles.button}>
-          <Text style={styles.syntaxErrorText}>
+          <Text id="logbox_dismissable_text" style={styles.syntaxErrorText}>
             This error cannot be dismissed.
           </Text>
         </View>
@@ -41,51 +38,20 @@ function LogBoxInspectorFooter(props: Props): React.Node {
 
   return (
     <View style={styles.root}>
-      <FooterButton text="Dismiss" onPress={props.onDismiss} />
-      <FooterButton text="Minimize" onPress={props.onMinimize} />
+      <LogBoxInspectorFooterButton
+        id="logbox_footer_button_dismiss"
+        text="Dismiss"
+        onPress={props.onDismiss}
+      />
+      <LogBoxInspectorFooterButton
+        id="logbox_footer_button_minimize"
+        text="Minimize"
+        onPress={props.onMinimize}
+      />
     </View>
   );
 }
 
-type ButtonProps = $ReadOnly<{|
-  onPress: () => void,
-  text: string,
-|}>;
-
-function FooterButton(props: ButtonProps): React.Node {
-  return (
-    <LogBoxButton
-      backgroundColor={{
-        default: 'transparent',
-        pressed: LogBoxStyle.getBackgroundDarkColor(),
-      }}
-      onPress={props.onPress}
-      style={buttonStyles.safeArea}>
-      <View style={buttonStyles.content}>
-        <Text style={buttonStyles.label}>{props.text}</Text>
-      </View>
-    </LogBoxButton>
-  );
-}
-
-const buttonStyles = StyleSheet.create({
-  safeArea: {
-    flex: 1,
-    paddingBottom: DeviceInfo.getConstants().isIPhoneX_deprecated ? 30 : 0,
-  },
-  content: {
-    alignItems: 'center',
-    height: 48,
-    justifyContent: 'center',
-  },
-  label: {
-    color: LogBoxStyle.getTextColor(1),
-    fontSize: 14,
-    includeFontPadding: false,
-    lineHeight: 20,
-  },
-});
-
 const styles = StyleSheet.create({
   root: {
     backgroundColor: LogBoxStyle.getBackgroundColor(1),
@@ -110,5 +76,3 @@ const styles = StyleSheet.create({
     color: LogBoxStyle.getTextColor(0.6),
   },
 });
-
-export default LogBoxInspectorFooter;