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

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

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