[win32] Remove usage of Animated in LogBox (#14809)

* Remove usage of Animated in LogBox

* Change files

* lint fix

* lint fix

Author: acoates-ms

change/@office-iss-react-native-win32-5cee5130-421d-42b2-bb6a-1f5a1767fa2b.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Remove usage of Animated in LogBox",
+  "packageName": "@office-iss/react-native-win32",
+  "email": "30809111+acoates-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/@office-iss/react-native-win32/overrides.json

@@ -299,6 +299,12 @@
       "baseFile": "packages/react-native/Libraries/LogBox/UI/LogBoxInspectorReactFrames.js",
       "baseHash": "3a3d7da499937cce35c9bd17a11f10b2eeac04cc"
     },
+    {
+      "type": "derived",
+      "file": "src-win/Libraries/LogBox/UI/LogBoxInspectorSourceMapStatus.win32.js",
+      "baseFile": "packages/react-native/Libraries/LogBox/UI/LogBoxInspectorSourceMapStatus.js",
+      "baseHash": "b355418205aa52cf33fb7e4d521b26083eada49d"
+    },
     {
       "type": "derived",
       "file": "src-win/Libraries/LogBox/UI/LogBoxInspectorStackFrame.win32.js",

packages/@office-iss/react-native-win32/src-win/Libraries/LogBox/UI/LogBoxInspectorSourceMapStatus.win32.js

@@ -0,0 +1,140 @@
+/**
+ * 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 {GestureResponderEvent} from '../../Types/CoreEventTypes';
+
+// import Animated from '../../Animated/Animated'; [Win32]
+// import Easing from '../../Animated/Easing'; [Win32]
+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 Props = $ReadOnly<{
+  onPress?: ?(event: GestureResponderEvent) => void,
+  status: 'COMPLETE' | 'FAILED' | 'NONE' | 'PENDING',
+}>;
+
+function LogBoxInspectorSourceMapStatus(props: Props): React.Node {
+  // [Win32] Dont use Animated
+  /*
+  const [state, setState] = React.useState({
+    animation: null,
+    rotate: null,
+  });
+
+  React.useEffect(() => {
+    if (props.status === 'PENDING') {
+      if (state.animation == null) {
+        const animated = new Animated.Value(0);
+        const animation = Animated.loop(
+          Animated.timing(animated, {
+            duration: 2000,
+            easing: Easing.linear,
+            toValue: 1,
+            useNativeDriver: true,
+          }),
+        );
+        // $FlowFixMe[incompatible-call]
+        setState({
+          animation,
+          rotate: animated.interpolate({
+            inputRange: [0, 1],
+            outputRange: ['0deg', '360deg'],
+          }),
+        });
+        animation.start();
+      }
+    } else {
+      if (state.animation != null) {
+        state.animation.stop();
+        setState({
+          animation: null,
+          rotate: null,
+        });
+      }
+    }
+
+    return () => {
+      if (state.animation != null) {
+        state.animation.stop();
+      }
+    };
+  }, [props.status, state.animation]);
+
+  let image;
+  */
+  let color;
+  switch (props.status) {
+    case 'FAILED':
+      // image = require('./LogBoxImages/alert-triangle.png'); // [win32] Dont use LogBox images
+      color = LogBoxStyle.getErrorColor(1);
+      break;
+    case 'PENDING':
+      // image = require('./LogBoxImages/loader.png'); // [win32] Dont use LogBox images
+      color = LogBoxStyle.getWarningColor(1);
+      break;
+    default: // [Win32]
+      return null; // [Win32]
+  }
+
+  if (props.status === 'COMPLETE' /* [Win32] || image == null */) {
+    return null;
+  }
+
+  return (
+    <LogBoxButton
+      backgroundColor={{
+        default: 'transparent',
+        pressed: LogBoxStyle.getBackgroundColor(1),
+      }}
+      hitSlop={{bottom: 8, left: 8, right: 8, top: 8}}
+      onPress={props.onPress}
+      style={styles.root}>
+      {/* [Win32] Avoid Animated usage
+      <Animated.Image
+        source={image}
+        style={[
+          styles.image,
+          {tintColor: color},
+          state.rotate == null || props.status !== 'PENDING'
+            ? null
+            : {transform: [{rotate: state.rotate}]},
+        ]}
+      />
+      */}
+      <Text style={[styles.text, {color}]}>Source Map</Text>
+    </LogBoxButton>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: {
+    alignItems: 'center',
+    borderRadius: 12,
+    flexDirection: 'row',
+    height: 24,
+    paddingHorizontal: 8,
+  },
+  image: {
+    height: 14,
+    width: 16,
+    marginEnd: 4,
+    tintColor: LogBoxStyle.getTextColor(0.4),
+  },
+  text: {
+    fontSize: 12,
+    includeFontPadding: false,
+    lineHeight: 16,
+  },
+});
+
+export default LogBoxInspectorSourceMapStatus;