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

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.win32.js

@@ -17,17 +17,18 @@ 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,
-|}>;
+}>;
 
-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]]}>
@@ -53,7 +54,7 @@ function LogBoxInspectorHeader(props: Props): React.Node {
         <LogBoxInspectorHeaderButton
           disabled={props.total <= 1}
           level={props.level}
-          image={'←'}
+          image={new String('←')}
           onPress={() => props.onSelectIndex(prevIndex)}
         />
         <View style={styles.title}>
@@ -62,7 +63,7 @@ function LogBoxInspectorHeader(props: Props): React.Node {
         <LogBoxInspectorHeaderButton
           disabled={props.total <= 1}
           level={props.level}
-          image={'→'}
+          image={new String('→')}
           onPress={() => props.onSelectIndex(nextIndex)}
         />
       </View>
@@ -70,70 +71,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: 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(),
@@ -173,5 +110,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/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;