@office-iss/react-native-win32 0.0.0-canary.256 → 0.0.0-canary.258

package/Libraries/LogBox/UI/LogBoxInspectorHeader.js

@@ -8,35 +8,49 @@
  * @format
  */
 
-import type {ImageSource} from '../../Image/ImageSource';
+import type {ViewProps} from '../../Components/View/ViewPropTypes';
 import type {LogLevel} from '../Data/LogBoxLog';
 
-import StatusBar from '../../Components/StatusBar/StatusBar';
+import SafeAreaView from '../../Components/SafeAreaView/SafeAreaView';
 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,
-|}>;
+}>;
+
+const LogBoxInspectorHeaderSafeArea: React.AbstractComponent<ViewProps> =
+  Platform.OS === 'android'
+    ? function LogBoxInspectorHeaderSafeArea(props) {
+        // NOTE: Inline the import of `StatusBar` so that initializing this module
+        // does not require initializing a TurboModule (and main thread one, too).
+        const {currentHeight} = require('../../Components/StatusBar/StatusBar');
+        const style = StyleSheet.compose(
+          {paddingTop: currentHeight},
+          props.style,
+        );
+        return <View {...props} style={style} />;
+      }
+    : SafeAreaView;
 
-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]]}>
+      <LogBoxInspectorHeaderSafeArea style={styles[props.level]}>
         <View style={styles.header}>
           <View style={styles.title}>
             <Text style={styles.titleText}>Failed to compile</Text>
           </View>
         </View>
-      </View>
+      </LogBoxInspectorHeaderSafeArea>
     );
   }
 
@@ -48,7 +62,7 @@ function LogBoxInspectorHeader(props: Props): React.Node {
   const titleText = `Log ${props.selectedIndex + 1} of ${props.total}`;
 
   return (
-    <View style={[styles.safeArea, styles[props.level]]}>
+    <LogBoxInspectorHeaderSafeArea style={styles[props.level]}>
       <View style={styles.header}>
         <LogBoxInspectorHeaderButton
           disabled={props.total <= 1}
@@ -66,68 +80,10 @@ function LogBoxInspectorHeader(props: Props): React.Node {
           onPress={() => props.onSelectIndex(nextIndex)}
         />
       </View>
-    </View>
-  );
-}
-
-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>
+    </LogBoxInspectorHeaderSafeArea>
   );
 }
 
-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(),
@@ -160,9 +116,4 @@ const styles = StyleSheet.create({
     includeFontPadding: false,
     lineHeight: 20,
   },
-  safeArea: {
-    paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 40,
-  },
 });
-
-export default LogBoxInspectorHeader;

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

@@ -10,33 +10,49 @@
 
 'use strict';
 
+import type {ViewProps} from '../../Components/View/ViewPropTypes';
 import type {LogLevel} from '../Data/LogBoxLog';
 
-import StatusBar from '../../Components/StatusBar/StatusBar';
+import SafeAreaView from '../../Components/SafeAreaView/SafeAreaView';
 import View from '../../Components/View/View';
 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,
-|}>;
+}>;
+
+const LogBoxInspectorHeaderSafeArea: React.AbstractComponent<ViewProps> =
+  Platform.OS === 'android'
+    ? function LogBoxInspectorHeaderSafeArea(props) {
+        // NOTE: Inline the import of `StatusBar` so that initializing this module
+        // does not require initializing a TurboModule (and main thread one, too).
+        const {currentHeight} = require('../../Components/StatusBar/StatusBar');
+        const style = StyleSheet.compose(
+          {paddingTop: currentHeight},
+          props.style,
+        );
+        return <View {...props} style={style} />;
+      }
+    : SafeAreaView;
 
-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]]}>
+      <LogBoxInspectorHeaderSafeArea style={styles[props.level]}>
         <View style={styles.header}>
           <View style={styles.title}>
             <Text style={styles.titleText}>Failed to compile</Text>
           </View>
         </View>
-      </View>
+      </LogBoxInspectorHeaderSafeArea>
     );
   }
 
@@ -48,12 +64,12 @@ function LogBoxInspectorHeader(props: Props): React.Node {
   const titleText = `Log ${props.selectedIndex + 1} of ${props.total}`;
 
   return (
-    <View style={[styles.safeArea, styles[props.level]]}>
+    <LogBoxInspectorHeaderSafeArea style={styles[props.level]}>
       <View style={styles.header}>
         <LogBoxInspectorHeaderButton
           disabled={props.total <= 1}
           level={props.level}
-          image={'←'}
+          image={new String('←')}
           onPress={() => props.onSelectIndex(prevIndex)}
         />
         <View style={styles.title}>
@@ -62,78 +78,14 @@ function LogBoxInspectorHeader(props: Props): React.Node {
         <LogBoxInspectorHeaderButton
           disabled={props.total <= 1}
           level={props.level}
-          image={'→'}
+          image={new String('→')}
           onPress={() => props.onSelectIndex(nextIndex)}
         />
       </View>
-    </View>
+    </LogBoxInspectorHeaderSafeArea>
   );
 }
 
-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: string,
-    level: LogLevel,
-    onPress?: ?() => void,
-  |}>,
-): React.Node {
-  return (
-    <LogBoxButton
-      backgroundColor={backgroundForLevel(props.level)}
-      onPress={props.disabled ? null : props.onPress}
-      style={styles.title}>
-      {props.disabled ? null : (
-        <Text style={[styles.titleText, headerStyles.buttonText]}>
-          {props.image}
-        </Text>
-      )}
-    </LogBoxButton>
-  );
-}
-
-const headerStyles = StyleSheet.create({
-  button: {
-    alignItems: 'center',
-    aspectRatio: 1,
-    justifyContent: 'center',
-    marginTop: 0,
-    marginRight: 6,
-    marginLeft: 6,
-    marginBottom: 0,
-    borderRadius: 3,
-    height: 50,
-    width: 50,
-  },
-  buttonText: {
-    fontSize: 30,
-  },
-  buttonImage: {
-    fontSize: 20,
-    color: LogBoxStyle.getTextColor(),
-  },
-});
-
 const styles = StyleSheet.create({
   syntax: {
     backgroundColor: LogBoxStyle.getFatalColor(),
@@ -169,9 +121,4 @@ const styles = StyleSheet.create({
     includeFontPadding: false,
     lineHeight: 20,
   },
-  safeArea: {
-    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/LogBoxNotification.js

@@ -8,18 +8,17 @@
  * @format
  */
 
-import type {Message as MessageType} from '../Data/parseLogBoxLog';
-
 import View from '../../Components/View/View';
-import Image from '../../Image/Image';
 import StyleSheet from '../../StyleSheet/StyleSheet';
-import Text from '../../Text/Text';
 import * as LogBoxData from '../Data/LogBoxData';
 import LogBoxLog from '../Data/LogBoxLog';
 import LogBoxButton from './LogBoxButton';
-import LogBoxMessage from './LogBoxMessage';
+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,
@@ -29,170 +28,34 @@ type Props = $ReadOnly<{
   onPressDismiss: () => void,
 }>;
 
-function LogBoxLogNotification(props: Props): React.Node {
+export default function LogBoxNotification(props: Props): React.Node {
   const {totalLogCount, level, log} = props;
 
   // Eagerly symbolicate so the stack is available when pressing to inspect.
-  React.useEffect(() => {
+  useEffect(() => {
     LogBoxData.symbolicateLogLazy(log);
   }, [log]);
 
   return (
-    <View style={toastStyles.container}>
+    <View style={styles.container}>
       <LogBoxButton
         onPress={props.onPressOpen}
-        style={toastStyles.press}
+        style={styles.press}
         backgroundColor={{
           default: LogBoxStyle.getBackgroundColor(1),
           pressed: LogBoxStyle.getBackgroundColor(0.9),
         }}>
-        <View style={toastStyles.content}>
-          <CountBadge count={totalLogCount} level={level} />
-          <Message message={log.message} />
-          <DismissButton onPress={props.onPressDismiss} />
+        <View style={styles.content}>
+          <LogBoxNotificationCountBadge count={totalLogCount} level={level} />
+          <LogBoxNotificationMessage message={log.message} />
+          <LogBoxNotificationDismissButton onPress={props.onPressDismiss} />
         </View>
       </LogBoxButton>
     </View>
   );
 }
 
-function CountBadge(props: {count: number, level: 'error' | 'warn'}) {
-  return (
-    <View style={countStyles.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={[countStyles.inside, countStyles[props.level]]}>
-        <Text style={countStyles.text}>
-          {props.count <= 1 ? '!' : props.count}
-        </Text>
-      </View>
-    </View>
-  );
-}
-
-function Message(props: {message: MessageType}) {
-  return (
-    <View style={messageStyles.container}>
-      <Text numberOfLines={1} style={messageStyles.text}>
-        {props.message && (
-          <LogBoxMessage
-            plaintext
-            message={props.message}
-            style={messageStyles.substitutionText}
-          />
-        )}
-      </Text>
-    </View>
-  );
-}
-
-function DismissButton(props: {onPress: () => void}) {
-  return (
-    <View style={dismissStyles.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={dismissStyles.press}>
-        <Image
-          source={require('./LogBoxImages/close.png')}
-          style={dismissStyles.image}
-        />
-      </LogBoxButton>
-    </View>
-  );
-}
-
-const countStyles = StyleSheet.create({
-  warn: {
-    backgroundColor: LogBoxStyle.getWarningColor(1),
-  },
-  error: {
-    backgroundColor: LogBoxStyle.getErrorColor(1),
-  },
-  log: {
-    backgroundColor: LogBoxStyle.getLogColor(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,
-  },
-});
-
-const messageStyles = 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),
-  },
-});
-
-const dismissStyles = 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),
-  },
-});
-
-const toastStyles = StyleSheet.create({
+const styles = StyleSheet.create({
   container: {
     height: 48,
     position: 'relative',
@@ -218,5 +81,3 @@ const toastStyles = StyleSheet.create({
     flexBasis: 'auto',
   },
 });
-
-export default LogBoxLogNotification;

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,
+  },
+});