@office-iss/react-native-win32 0.71.4 → 0.72.0-preview.1

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

@@ -0,0 +1,168 @@
+/**
+ * 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<{|
+  codeFrame: ?CodeFrame,
+|}>;
+
+function LogBoxInspectorCodeFrame(props: Props): React.Node {
+  const codeFrame = props.codeFrame;
+  if (codeFrame == null) {
+    return null;
+  }
+
+  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 (
+    <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>
+    </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,
+  },
+  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/LogBoxInspectorHeader.win32.js

@@ -152,6 +152,9 @@ const styles = StyleSheet.create({
     height: Platform.select({
       android: 48,
       ios: 44,
+      // [Win32
+      win32: 48,
+      // Win32]
     }),
   },
   title: {

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

@@ -0,0 +1,193 @@
+/**
+ * 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 LogBoxLog from '../Data/LogBoxLog';
+
+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 LogBoxButton from './LogBoxButton';
+import LogBoxInspectorSection from './LogBoxInspectorSection';
+import * as LogBoxStyle from './LogBoxStyle';
+import * as React 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
+function getPrettyFileName(path: string) {
+  let fileName = path.replace(BEFORE_SLASH_RE, '');
+
+  // In DEV, include code for a common special case:
+  // prefer "folder/index.js" instead of just "index.js".
+  if (/^index\./.test(fileName)) {
+    const match = path.match(BEFORE_SLASH_RE);
+    if (match) {
+      const pathBeforeSlash = match[1];
+      if (pathBeforeSlash) {
+        const folderName = pathBeforeSlash.replace(BEFORE_SLASH_RE, '');
+        // Note the below string contains a zero width space after the "/" character.
+        // This is to prevent browsers like Chrome from formatting the file name as a link.
+        // (Since this is a source link, it would not work to open the source file anyway.)
+        fileName = folderName + '/​' + fileName;
+      }
+    }
+  }
+
+  return fileName;
+}
+function LogBoxInspectorReactFrames(props: Props): React.Node {
+  const [collapsed, setCollapsed] = React.useState(true);
+  if (props.log.componentStack == null || props.log.componentStack.length < 1) {
+    return null;
+  }
+
+  function getStackList() {
+    if (collapsed) {
+      return props.log.componentStack.slice(0, 3);
+    } else {
+      return props.log.componentStack;
+    }
+  }
+
+  function getCollapseMessage() {
+    if (props.log.componentStack.length <= 3) {
+      return;
+    }
+
+    const count = props.log.componentStack.length - 3;
+    if (collapsed) {
+      return `See ${count} more components`;
+    } else {
+      return `Collapse ${count} components`;
+    }
+  }
+
+  return (
+    <LogBoxInspectorSection heading="Component Stack">
+      {getStackList().map((frame, index) => (
+        <View
+          // Unfortunately we don't have a unique identifier for stack traces.
+          key={index}
+          style={componentStyles.frameContainer}>
+          <LogBoxButton
+            backgroundColor={{
+              default: 'transparent',
+              pressed: LogBoxStyle.getBackgroundColor(1),
+            }}
+            onPress={
+              // Older versions of DevTools do not provide full path.
+              // This will not work on Windows, remove check once the
+              // DevTools return the full file path.
+              frame.fileName.startsWith('/')
+                ? () =>
+                    openFileInEditor(frame.fileName, frame.location?.row ?? 1)
+                : null
+            }
+            style={componentStyles.frame}>
+            <View style={componentStyles.component}>
+              <Text style={componentStyles.frameName}>
+                <Text style={componentStyles.bracket}>{'<'}</Text>
+                {frame.content}
+                <Text style={componentStyles.bracket}>{' />'}</Text>
+              </Text>
+            </View>
+            <Text style={componentStyles.frameLocation}>
+              {getPrettyFileName(frame.fileName)}
+              {frame.location ? `:${frame.location.row}` : ''}
+            </Text>
+          </LogBoxButton>
+        </View>
+      ))}
+      <View style={componentStyles.collapseContainer}>
+        <LogBoxButton
+          backgroundColor={{
+            default: 'transparent',
+            pressed: LogBoxStyle.getBackgroundColor(1),
+          }}
+          onPress={() => setCollapsed(!collapsed)}
+          style={componentStyles.collapseButton}>
+          <Text style={componentStyles.collapse}>{getCollapseMessage()}</Text>
+        </LogBoxButton>
+      </View>
+    </LogBoxInspectorSection>
+  );
+}
+
+const componentStyles = StyleSheet.create({
+  collapseContainer: {
+    marginLeft: 15,
+    flexDirection: 'row',
+  },
+  collapseButton: {
+    borderRadius: 5,
+  },
+  collapse: {
+    color: LogBoxStyle.getTextColor(0.7),
+    fontSize: 12,
+    fontWeight: '300',
+    lineHeight: 20,
+    marginTop: 0,
+    paddingVertical: 5,
+    paddingHorizontal: 10,
+  },
+  frameContainer: {
+    flexDirection: 'row',
+    paddingHorizontal: 15,
+  },
+  frame: {
+    flex: 1,
+    paddingVertical: 4,
+    paddingHorizontal: 10,
+    borderRadius: 5,
+  },
+  component: {
+    flexDirection: 'row',
+    paddingRight: 10,
+  },
+  frameName: {
+    fontFamily: Platform.select({
+      android: 'monospace',
+      ios: 'Menlo',
+      win32: 'Consolas', // Win32
+    }),
+    color: LogBoxStyle.getTextColor(1),
+    fontSize: 14,
+    includeFontPadding: false,
+    lineHeight: 18,
+  },
+  bracket: {
+    fontFamily: Platform.select({
+      android: 'monospace',
+      ios: 'Menlo',
+      win32: 'Consolas', // Win32
+    }),
+    color: LogBoxStyle.getTextColor(0.4),
+    fontSize: 14,
+    fontWeight: '500',
+    includeFontPadding: false,
+    lineHeight: 18,
+  },
+  frameLocation: {
+    color: LogBoxStyle.getTextColor(0.7),
+    fontSize: 12,
+    fontWeight: '300',
+    includeFontPadding: false,
+    lineHeight: 16,
+    paddingLeft: 10,
+  },
+});
+
+export default LogBoxInspectorReactFrames;

package/Libraries/LogBox/UI/LogBoxInspectorSourceMapStatus.js

@@ -41,6 +41,7 @@ function LogBoxInspectorSourceMapStatus(props: Props): React.Node {
             useNativeDriver: true,
           }),
         );
+        // $FlowFixMe[incompatible-call]
         setState({
           animation,
           rotate: animated.interpolate({

package/Libraries/LogBox/UI/LogBoxInspectorStackFrame.js

@@ -19,10 +19,10 @@ import LogBoxButton from './LogBoxButton';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
 
-type Props = $ReadOnly<{|
+type Props = $ReadOnly<{
   frame: StackFrame,
   onPress?: ?(event: PressEvent) => void,
-|}>;
+}>;
 
 function LogBoxInspectorStackFrame(props: Props): React.Node {
   const {frame, onPress} = props;

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

@@ -19,10 +19,10 @@ import LogBoxButton from './LogBoxButton';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
 
-type Props = $ReadOnly<{|
+type Props = $ReadOnly<{
   frame: StackFrame,
   onPress?: ?(event: PressEvent) => void,
-|}>;
+}>;
 
 function LogBoxInspectorStackFrame(props: Props): React.Node {
   const {frame, onPress} = props;
@@ -88,7 +88,11 @@ const styles = StyleSheet.create({
     includeFontPadding: false,
     lineHeight: 18,
     fontWeight: '400',
-    fontFamily: Platform.select({android: 'monospace', ios: 'Menlo'}),
+    fontFamily: Platform.select({
+      android: 'monospace',
+      ios: 'Menlo',
+      win32: 'Consolas',
+    }),
   },
   location: {
     color: LogBoxStyle.getTextColor(0.8),

package/Libraries/LogBox/UI/LogBoxMessage.js

@@ -11,6 +11,8 @@
 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';
 
@@ -22,6 +24,82 @@ type Props = {
   ...
 };
 
+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.
+
+  let 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, '');
 
@@ -49,9 +127,7 @@ function LogBoxMessage(props: Props): React.Node {
 
     if (length < maxLength) {
       elements.push(
-        <Text key={key} style={style}>
-          {cleanMessage}
-        </Text>,
+        <TappableLinks content={cleanMessage} key={key} style={style} />,
       );
     }
 
@@ -70,12 +146,12 @@ function LogBoxMessage(props: Props): React.Node {
       createUnderLength(key, prevPart);
     }
 
-    const substititionPart = content.substr(
+    const substitutionPart = content.substr(
       substitution.offset,
       substitution.length,
     );
 
-    createUnderLength(key + '.5', substititionPart, substitutionStyle);
+    createUnderLength(key + '.5', substitutionPart, substitutionStyle);
     return substitution.offset + substitution.length;
   }, 0);
 
@@ -87,4 +163,10 @@ function LogBoxMessage(props: Props): React.Node {
   return <>{elements}</>;
 }
 
+const styles = StyleSheet.create({
+  linkText: {
+    textDecorationLine: 'underline',
+  },
+});
+
 export default LogBoxMessage;

package/Libraries/LogBox/UI/LogBoxNotification.js

@@ -21,13 +21,13 @@ import LogBoxMessage from './LogBoxMessage';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
 
-type Props = $ReadOnly<{|
+type Props = $ReadOnly<{
   log: LogBoxLog,
   totalLogCount: number,
   level: 'warn' | 'error',
   onPressOpen: () => void,
   onPressDismiss: () => void,
-|}>;
+}>;
 
 function LogBoxLogNotification(props: Props): React.Node {
   const {totalLogCount, level, log} = props;
@@ -56,9 +56,7 @@ function LogBoxLogNotification(props: Props): React.Node {
   );
 }
 
-function CountBadge(
-  props: $TEMPORARY$object<{count: number, level: 'error' | 'warn'}>,
-) {
+function CountBadge(props: {count: number, level: 'error' | 'warn'}) {
   return (
     <View style={countStyles.outside}>
       {/* $FlowFixMe[incompatible-type] (>=0.114.0) This suppression was added
@@ -73,7 +71,7 @@ function CountBadge(
   );
 }
 
-function Message(props: $TEMPORARY$object<{message: MessageType}>) {
+function Message(props: {message: MessageType}) {
   return (
     <View style={messageStyles.container}>
       <Text numberOfLines={1} style={messageStyles.text}>
@@ -89,7 +87,7 @@ function Message(props: $TEMPORARY$object<{message: MessageType}>) {
   );
 }
 
-function DismissButton(props: $TEMPORARY$object<{onPress: () => void}>) {
+function DismissButton(props: {onPress: () => void}) {
   return (
     <View style={dismissStyles.container}>
       <LogBoxButton

package/Libraries/Modal/Modal.js

@@ -13,11 +13,11 @@ import type {RootTag} from '../ReactNative/RootTag';
 import type {DirectEventHandler} from '../Types/CodegenTypes';
 
 import NativeEventEmitter from '../EventEmitter/NativeEventEmitter';
-import {VirtualizedListContextResetter} from '../Lists/VirtualizedListContext.js';
 import {type EventSubscription} from '../vendor/emitter/EventEmitter';
 import ModalInjection from './ModalInjection';
 import NativeModalManager from './NativeModalManager';
 import RCTModalHostView from './RCTModalHostViewNativeComponent';
+import {VirtualizedListContextResetter} from '@react-native/virtualized-lists';
 
 const ScrollView = require('../Components/ScrollView/ScrollView');
 const View = require('../Components/View/View');
@@ -91,7 +91,7 @@ export type Props = $ReadOnly<{|
    * The `statusBarTranslucent` prop determines whether your modal should go under
    * the system statusbar.
    *
-   * See https://reactnative.dev/docs/modal#transparent
+   * See https://reactnative.dev/docs/modal.html#statusbartranslucent-android
    */
   statusBarTranslucent?: ?boolean,
 

package/Libraries/NativeComponent/BaseViewConfig.android.js

@@ -160,11 +160,11 @@ const directEventTypes = {
 
 const validAttributesForNonEventProps = {
   // @ReactProps from BaseViewManager
-  backgroundColor: {process: require('../StyleSheet/processColor')},
+  backgroundColor: {process: require('../StyleSheet/processColor').default},
   transform: true,
   opacity: true,
   elevation: true,
-  shadowColor: {process: require('../StyleSheet/processColor')},
+  shadowColor: {process: require('../StyleSheet/processColor').default},
   zIndex: true,
   renderToHardwareTextureAndroid: true,
   testID: true,
@@ -212,24 +212,36 @@ const validAttributesForNonEventProps = {
   display: true,
 
   margin: true,
-  marginVertical: true,
-  marginHorizontal: true,
-  marginStart: true,
-  marginEnd: true,
-  marginTop: true,
+  marginBlock: true,
+  marginBlockEnd: true,
+  marginBlockStart: true,
   marginBottom: true,
+  marginEnd: true,
+  marginHorizontal: true,
+  marginInline: true,
+  marginInlineEnd: true,
+  marginInlineStart: true,
   marginLeft: true,
   marginRight: true,
+  marginStart: true,
+  marginTop: true,
+  marginVertical: true,
 
   padding: true,
-  paddingVertical: true,
-  paddingHorizontal: true,
-  paddingStart: true,
-  paddingEnd: true,
-  paddingTop: true,
+  paddingBlock: true,
+  paddingBlockEnd: true,
+  paddingBlockStart: true,
   paddingBottom: true,
+  paddingEnd: true,
+  paddingHorizontal: true,
+  paddingInline: true,
+  paddingInlineEnd: true,
+  paddingInlineStart: true,
   paddingLeft: true,
   paddingRight: true,
+  paddingStart: true,
+  paddingTop: true,
+  paddingVertical: true,
 
   borderWidth: true,
   borderStartWidth: true,
@@ -246,6 +258,14 @@ const validAttributesForNonEventProps = {
   top: true,
   bottom: true,
 
+  inset: true,
+  insetBlock: true,
+  insetBlockEnd: true,
+  insetBlockStart: true,
+  insetInline: true,
+  insetInlineEnd: true,
+  insetInlineStart: true,
+
   position: true,
 
   style: ReactNativeStyleAttributes,