@react-native-oh/react-native-harmony 0.72.82 → 0.77.18-1

package/Libraries/LogBox/UI/LogBoxInspectorStackFrames.js

@@ -0,0 +1,221 @@
+/**
+ * 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 {StackFrame} from '../../Core/NativeExceptionsManager';
+import type LogBoxLog from '../Data/LogBoxLog';
+import type {Stack} from '../Data/LogBoxSymbolication';
+
+import View from '../../Components/View/View';
+import openFileInEditor from '../../Core/Devtools/openFileInEditor';
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import Text from '../../Text/Text';
+import LogBoxButton from './LogBoxButton';
+import LogBoxInspectorSection from './LogBoxInspectorSection';
+import LogBoxInspectorSourceMapStatus from './LogBoxInspectorSourceMapStatus';
+import LogBoxInspectorStackFrame from './LogBoxInspectorStackFrame';
+import * as LogBoxStyle from './LogBoxStyle';
+import * as React from 'react';
+
+type Props = $ReadOnly<{|
+  log: LogBoxLog,
+  onRetry: () => void,
+|}>;
+
+export function getCollapseMessage(
+  stackFrames: Stack,
+  collapsed: boolean,
+): string {
+  if (stackFrames.length === 0) {
+    return 'No frames to show';
+  }
+
+  const collapsedCount = stackFrames.reduce((count, {collapse}) => {
+    if (collapse === true) {
+      return count + 1;
+    }
+
+    return count;
+  }, 0);
+
+  if (collapsedCount === 0) {
+    return 'Showing all frames';
+  }
+
+  const framePlural = `frame${collapsedCount > 1 ? 's' : ''}`;
+  if (collapsedCount === stackFrames.length) {
+    return collapsed
+      ? `See${
+          collapsedCount > 1 ? ' all ' : ' '
+        }${collapsedCount} collapsed ${framePlural}`
+      : `Collapse${
+          collapsedCount > 1 ? ' all ' : ' '
+        }${collapsedCount} ${framePlural}`;
+  } else {
+    return collapsed
+      ? `See ${collapsedCount} more ${framePlural}`
+      : `Collapse ${collapsedCount} ${framePlural}`;
+  }
+}
+
+function LogBoxInspectorStackFrames(props: Props): React.Node {
+  const [collapsed, setCollapsed] = React.useState(() => {
+    // Only collapse frames initially if some frames are not collapsed.
+    return props.log.getAvailableStack().some(({collapse}) => !collapse);
+  });
+
+  function getStackList() {
+    if (collapsed === true) {
+      return props.log.getAvailableStack().filter(({collapse}) => !collapse);
+    } else {
+      return props.log.getAvailableStack();
+    }
+  }
+
+  if (props.log.getAvailableStack().length === 0) {
+    return null;
+  }
+
+  return (
+    <LogBoxInspectorSection
+      heading="Call Stack"
+      action={
+        <LogBoxInspectorSourceMapStatus
+          onPress={
+            props.log.symbolicated.status === 'FAILED' ? props.onRetry : null
+          }
+          status={props.log.symbolicated.status}
+        />
+      }>
+      {props.log.symbolicated.status !== 'COMPLETE' && (
+        <View style={stackStyles.hintBox}>
+          <Text style={stackStyles.hintText}>
+            This call stack is not symbolicated. Some features are unavailable
+            such as viewing the function name or tapping to open files.
+          </Text>
+        </View>
+      )}
+      <StackFrameList
+        list={getStackList()}
+        status={props.log.symbolicated.status}
+      />
+      <StackFrameFooter
+        onPress={() => setCollapsed(!collapsed)}
+        message={getCollapseMessage(props.log.getAvailableStack(), collapsed)}
+      />
+    </LogBoxInspectorSection>
+  );
+}
+
+function StackFrameList(props: {
+  list: Stack | Array<StackFrame>,
+  status: string | 'COMPLETE' | 'FAILED' | 'NONE' | 'PENDING',
+}) {
+  return (
+    <>
+      {props.list.map((frame, index) => {
+        const {file, lineNumber} = frame;
+        return (
+          <LogBoxInspectorStackFrame
+            key={index}
+            frame={frame}
+            onPress={
+              props.status === 'COMPLETE' && file != null && lineNumber != null
+                ? () => openFileInEditor(file, lineNumber)
+                : null
+            }
+          />
+        );
+      })}
+    </>
+  );
+}
+
+function StackFrameFooter(
+  props: $ReadOnly<{message: string, onPress: () => void}>,
+) {
+  return (
+    <View style={stackStyles.collapseContainer}>
+      <LogBoxButton
+        backgroundColor={{
+          default: 'transparent',
+          pressed: LogBoxStyle.getBackgroundColor(1),
+        }}
+        onPress={props.onPress}
+        style={stackStyles.collapseButton}>
+        <Text style={stackStyles.collapse}>{props.message}</Text>
+      </LogBoxButton>
+    </View>
+  );
+}
+
+const stackStyles = StyleSheet.create({
+  section: {
+    marginTop: 15,
+  },
+  heading: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    paddingHorizontal: 12,
+    marginBottom: 10,
+  },
+  headingText: {
+    color: LogBoxStyle.getTextColor(1),
+    flex: 1,
+    fontSize: 20,
+    fontWeight: '600',
+    includeFontPadding: false,
+    lineHeight: 20,
+  },
+  body: {
+    paddingBottom: 10,
+  },
+  bodyText: {
+    color: LogBoxStyle.getTextColor(1),
+    fontSize: 14,
+    includeFontPadding: false,
+    lineHeight: 18,
+    fontWeight: '500',
+    paddingHorizontal: 27,
+  },
+  hintText: {
+    color: LogBoxStyle.getTextColor(0.7),
+    fontSize: 13,
+    includeFontPadding: false,
+    lineHeight: 18,
+    fontWeight: '400',
+    marginHorizontal: 10,
+  },
+  hintBox: {
+    backgroundColor: LogBoxStyle.getBackgroundColor(),
+    marginHorizontal: 10,
+    paddingHorizontal: 5,
+    paddingVertical: 10,
+    borderRadius: 5,
+    marginBottom: 5,
+  },
+  collapseContainer: {
+    marginLeft: 15,
+    flexDirection: 'row',
+  },
+  collapseButton: {
+    borderRadius: 5,
+  },
+  collapse: {
+    color: LogBoxStyle.getTextColor(0.7),
+    fontSize: 12,
+    fontWeight: '300',
+    lineHeight: 20,
+    marginTop: 0,
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+  },
+});
+
+export default LogBoxInspectorStackFrames;

package/Libraries/LogBox/UI/LogBoxMessage.js

@@ -0,0 +1,169 @@
+/**
+ * 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 {TextStyleProp} from '../../StyleSheet/StyleSheet';
+import type {Message} from '../Data/parseLogBoxLog';
+
+import Linking from '../../Linking/Linking';
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import Text from '../../Text/Text';
+import * as React from 'react';
+
+type Props = {
+  message: Message,
+  style: TextStyleProp,
+  plaintext?: ?boolean,
+  maxLength?: ?number,
+  ...
+};
+
+type Range = {
+  lowerBound: number,
+  upperBound: number,
+};
+
+function getLinkRanges(string: string): $ReadOnlyArray<Range> {
+  const regex = /https?:\/\/[^\s$.?#].[^\s]*/gi;
+  const matches = [];
+
+  let regexResult: RegExp$matchResult | null;
+  while ((regexResult = regex.exec(string)) !== null) {
+    if (regexResult != null) {
+      matches.push({
+        lowerBound: regexResult.index,
+        upperBound: regex.lastIndex,
+      });
+    }
+  }
+
+  return matches;
+}
+
+function TappableLinks(props: {
+  content: string,
+  style: void | TextStyleProp,
+}): React.Node {
+  const matches = getLinkRanges(props.content);
+
+  if (matches.length === 0) {
+    // No URLs detected. Just return the content.
+    return <Text style={props.style}>{props.content}</Text>;
+  }
+
+  // URLs were detected. Construct array of Text nodes.
+
+  const fragments: Array<React.Node> = [];
+  let indexCounter = 0;
+  let startIndex = 0;
+
+  for (const linkRange of matches) {
+    if (startIndex < linkRange.lowerBound) {
+      const text = props.content.substring(startIndex, linkRange.lowerBound);
+      fragments.push(<Text key={++indexCounter}>{text}</Text>);
+    }
+
+    const link = props.content.substring(
+      linkRange.lowerBound,
+      linkRange.upperBound,
+    );
+    fragments.push(
+      <Text
+        onPress={() => {
+          // $FlowFixMe[unused-promise]
+          Linking.openURL(link);
+        }}
+        key={++indexCounter}
+        style={styles.linkText}>
+        {link}
+      </Text>,
+    );
+
+    startIndex = linkRange.upperBound;
+  }
+
+  if (startIndex < props.content.length) {
+    const text = props.content.substring(startIndex);
+    fragments.push(
+      <Text key={++indexCounter} style={props.style}>
+        {text}
+      </Text>,
+    );
+  }
+
+  return <Text style={props.style}>{fragments}</Text>;
+}
+
+const cleanContent = (content: string) =>
+  content.replace(/^(TransformError |Warning: (Warning: )?|Error: )/g, '');
+
+function LogBoxMessage(props: Props): React.Node {
+  const {content, substitutions}: Message = props.message;
+
+  if (props.plaintext === true) {
+    return <Text>{cleanContent(content)}</Text>;
+  }
+
+  const maxLength = props.maxLength != null ? props.maxLength : Infinity;
+  const substitutionStyle: TextStyleProp = props.style;
+  const elements = [];
+  let length = 0;
+  const createUnderLength = (
+    key: string,
+    message: string,
+    style: void | TextStyleProp,
+  ) => {
+    let cleanMessage = cleanContent(message);
+
+    if (props.maxLength != null) {
+      cleanMessage = cleanMessage.slice(0, props.maxLength - length);
+    }
+
+    if (length < maxLength) {
+      elements.push(
+        <TappableLinks content={cleanMessage} key={key} style={style} />,
+      );
+    }
+
+    length += cleanMessage.length;
+  };
+
+  const lastOffset = substitutions.reduce((prevOffset, substitution, index) => {
+    const key = String(index);
+
+    if (substitution.offset > prevOffset) {
+      const prevPart = content.slice(prevOffset, substitution.offset);
+
+      createUnderLength(key, prevPart);
+    }
+
+    const substitutionPart = content.slice(
+      substitution.offset,
+      substitution.offset + substitution.length,
+    );
+
+    createUnderLength(key + '.5', substitutionPart, substitutionStyle);
+    return substitution.offset + substitution.length;
+  }, 0);
+
+  if (lastOffset < content.length) {
+    const lastPart = content.slice(lastOffset);
+    createUnderLength('-1', lastPart);
+  }
+
+  return <>{elements}</>;
+}
+
+const styles = StyleSheet.create({
+  linkText: {
+    textDecorationLine: 'underline',
+  },
+});
+
+export default LogBoxMessage;

package/Libraries/LogBox/UI/LogBoxNotification.js

@@ -0,0 +1,83 @@
+/**
+ * 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 View from '../../Components/View/View';
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import * as LogBoxData from '../Data/LogBoxData';
+import LogBoxLog from '../Data/LogBoxLog';
+import LogBoxButton from './LogBoxButton';
+import LogBoxNotificationCountBadge from './LogBoxNotificationCountBadge';
+import LogBoxNotificationDismissButton from './LogBoxNotificationDismissButton';
+import LogBoxNotificationMessage from './LogBoxNotificationMessage';
+import * as LogBoxStyle from './LogBoxStyle';
+import * as React from 'react';
+import {useEffect} from 'react';
+
+type Props = $ReadOnly<{
+  log: LogBoxLog,
+  totalLogCount: number,
+  level: 'warn' | 'error',
+  onPressOpen: () => void,
+  onPressDismiss: () => void,
+}>;
+
+export default function LogBoxNotification(props: Props): React.Node {
+  const {totalLogCount, level, log} = props;
+
+  // Eagerly symbolicate so the stack is available when pressing to inspect.
+  useEffect(() => {
+    LogBoxData.symbolicateLogLazy(log);
+  }, [log]);
+
+  return (
+    <View style={styles.container}>
+      <LogBoxButton
+        onPress={props.onPressOpen}
+        style={styles.press}
+        backgroundColor={{
+          default: LogBoxStyle.getBackgroundColor(1),
+          pressed: LogBoxStyle.getBackgroundColor(0.9),
+        }}>
+        <View style={styles.content}>
+          <LogBoxNotificationCountBadge count={totalLogCount} level={level} />
+          <LogBoxNotificationMessage message={log.message} />
+          <LogBoxNotificationDismissButton onPress={props.onPressDismiss} />
+        </View>
+      </LogBoxButton>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    height: 48,
+    position: 'relative',
+    width: '100%',
+    justifyContent: 'center',
+    marginTop: 0.5,
+    backgroundColor: LogBoxStyle.getTextColor(1),
+  },
+  press: {
+    height: 48,
+    position: 'relative',
+    width: '100%',
+    justifyContent: 'center',
+    marginTop: 0.5,
+    paddingHorizontal: 12,
+  },
+  content: {
+    alignItems: 'flex-start',
+    flexDirection: 'row',
+    borderRadius: 8,
+    flexGrow: 0,
+    flexShrink: 0,
+    flexBasis: 'auto',
+  },
+});

package/Libraries/LogBox/UI/LogBoxNotificationCountBadge.js

@@ -0,0 +1,63 @@
+/**
+ * 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 View from '../../Components/View/View';
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import Text from '../../Text/Text';
+import * as LogBoxStyle from './LogBoxStyle';
+import * as React from 'react';
+
+export default function LogBoxNotificationCountBadge(props: {
+  count: number,
+  level: 'error' | 'warn',
+}): React.Node {
+  return (
+    <View style={styles.outside}>
+      {/* $FlowFixMe[incompatible-type] (>=0.114.0) This suppression was added
+       * when fixing the type of `StyleSheet.create`. Remove this comment to
+       * see the error. */}
+      <View style={[styles.inside, styles[props.level]]}>
+        <Text style={styles.text}>{props.count <= 1 ? '!' : props.count}</Text>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  warn: {
+    backgroundColor: LogBoxStyle.getWarningColor(1),
+  },
+  error: {
+    backgroundColor: LogBoxStyle.getErrorColor(1),
+  },
+  outside: {
+    padding: 2,
+    borderRadius: 25,
+    backgroundColor: '#fff',
+    marginRight: 8,
+  },
+  inside: {
+    minWidth: 18,
+    paddingLeft: 4,
+    paddingRight: 4,
+    borderRadius: 25,
+    fontWeight: '600',
+  },
+  text: {
+    color: LogBoxStyle.getTextColor(1),
+    fontSize: 14,
+    lineHeight: 18,
+    textAlign: 'center',
+    fontWeight: '600',
+    textShadowColor: LogBoxStyle.getBackgroundColor(0.4),
+    textShadowOffset: {width: 0, height: 0},
+    textShadowRadius: 3,
+  },
+});

package/Libraries/LogBox/UI/LogBoxNotificationDismissButton.js

@@ -0,0 +1,67 @@
+/**
+ * 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 View from '../../Components/View/View';
+import Image from '../../Image/Image';
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import LogBoxButton from './LogBoxButton';
+import * as LogBoxStyle from './LogBoxStyle';
+import * as React from 'react';
+
+export default function LogBoxNotificationDismissButton(props: {
+  onPress: () => void,
+}): React.Node {
+  return (
+    <View style={styles.container}>
+      <LogBoxButton
+        backgroundColor={{
+          default: LogBoxStyle.getTextColor(0.3),
+          pressed: LogBoxStyle.getTextColor(0.5),
+        }}
+        hitSlop={{
+          top: 12,
+          right: 10,
+          bottom: 12,
+          left: 10,
+        }}
+        onPress={props.onPress}
+        style={styles.press}>
+        <Image
+          source={require('./LogBoxImages/close.png')}
+          style={styles.image}
+        />
+      </LogBoxButton>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignSelf: 'center',
+    flexDirection: 'row',
+    flexGrow: 0,
+    flexShrink: 0,
+    flexBasis: 'auto',
+    marginLeft: 5,
+  },
+  press: {
+    height: 20,
+    width: 20,
+    borderRadius: 25,
+    alignSelf: 'flex-end',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  image: {
+    height: 8,
+    width: 8,
+    tintColor: LogBoxStyle.getBackgroundColor(1),
+  },
+});

package/Libraries/LogBox/UI/LogBoxNotificationMessage.js

@@ -0,0 +1,57 @@
+/**
+ * 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 {Message as MessageType} from '../Data/parseLogBoxLog';
+
+import View from '../../Components/View/View';
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import Text from '../../Text/Text';
+import LogBoxMessage from './LogBoxMessage';
+import * as LogBoxStyle from './LogBoxStyle';
+import * as React from 'react';
+
+export default function LogBoxNotificationMessage(props: {
+  message: MessageType,
+}): React.Node {
+  return (
+    <View style={styles.container}>
+      <Text numberOfLines={1} style={styles.text}>
+        {props.message && (
+          <LogBoxMessage
+            plaintext
+            message={props.message}
+            style={styles.substitutionText}
+          />
+        )}
+      </Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignSelf: 'stretch',
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: 'auto',
+    borderLeftColor: LogBoxStyle.getTextColor(0.2),
+    borderLeftWidth: 1,
+    paddingLeft: 8,
+  },
+  text: {
+    color: LogBoxStyle.getTextColor(1),
+    flex: 1,
+    fontSize: 14,
+    lineHeight: 22,
+  },
+  substitutionText: {
+    color: LogBoxStyle.getTextColor(0.6),
+  },
+});