react-native-xenon 2.3.0 → 2.4.0

package/src/ui/components/headers/NetworkHeader.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, useContext } from 'react';
+import { useContext, type Ref } from 'react';
 import { type ScrollView, type StyleProp, type ViewStyle } from 'react-native';
 import { MainContext } from '../../../contexts';
 import { type PanelState } from '../../../core/refs';
@@ -13,61 +13,58 @@ import HeaderComponents from './HeaderComponents';
 interface NetworkHeaderProps {
   selectedPanel: PanelState;
   style?: StyleProp<ViewStyle>;
+  ref?: Ref<ScrollView>;
 }
 
-const NetworkHeader = forwardRef<ScrollView, NetworkHeaderProps>(
-  ({ selectedPanel, style }, ref) => {
-    const {
-      debuggerState: { detailsData },
-      setDebuggerState,
-    } = useContext(MainContext)!;
+export default function NetworkHeader({ selectedPanel, style, ref }: NetworkHeaderProps) {
+  const {
+    debuggerState: { detailsData },
+    setDebuggerState,
+  } = useContext(MainContext)!;
 
-    const data = detailsData?.data as HttpRequest | WebSocketRequest | undefined;
+  const data = detailsData?.data as HttpRequest | WebSocketRequest | undefined;
 
-    const { isWS, overviewShown, headersShown, requestShown, responseShown, messagesShown } =
-      getNetworkUtils(data);
+  const { isWS, overviewShown, headersShown, requestShown, responseShown, messagesShown } =
+    getNetworkUtils(data);
 
-    return (
-      <HeaderComponents.Wrapper ref={ref} style={style}>
-        <HeaderComponents.Back selectedPanel={selectedPanel} />
-        <HeaderComponents.MainButtons />
+  return (
+    <HeaderComponents.Wrapper ref={ref} style={style}>
+      <HeaderComponents.Back selectedPanel={selectedPanel} />
+      <HeaderComponents.MainButtons />
 
-        <Divider type="vertical" />
+      <Divider type="vertical" />
 
-        {!!overviewShown && <HeaderComponents.DetailTabItem tab="overview" label="Overview" />}
-        {!!headersShown && <HeaderComponents.DetailTabItem tab="headers" label="Headers" />}
-        {!!requestShown && <HeaderComponents.DetailTabItem tab="request" label="Request" />}
-        {!!responseShown && <HeaderComponents.DetailTabItem tab="response" label="Response" />}
-        {!!messagesShown && <HeaderComponents.DetailTabItem tab="messages" label="Messages" />}
+      {!!overviewShown && <HeaderComponents.DetailTabItem tab="overview" label="Overview" />}
+      {!!headersShown && <HeaderComponents.DetailTabItem tab="headers" label="Headers" />}
+      {!!requestShown && <HeaderComponents.DetailTabItem tab="request" label="Request" />}
+      {!!responseShown && <HeaderComponents.DetailTabItem tab="response" label="Response" />}
+      {!!messagesShown && <HeaderComponents.DetailTabItem tab="messages" label="Messages" />}
 
-        {!isWS && (
-          <>
-            <Divider type="vertical" />
+      {!isWS && (
+        <>
+          <Divider type="vertical" />
 
-            <DebuggerHeaderItem
-              content={icons.beautify}
-              isActive={detailsData?.beautified}
-              activeColor={colors.green}
-              onPress={() => {
-                setDebuggerState(draft => {
-                  draft.detailsData!.beautified = !draft.detailsData?.beautified;
-                });
-              }}
-            />
-            <DebuggerHeaderItem
-              content={icons.share}
-              onPress={async () => {
-                if (data?.type === NetworkType.WS) return;
-                await shareText(
-                  convertToCurl(data!.method, data!.url, data!.requestHeaders, data!.body),
-                );
-              }}
-            />
-          </>
-        )}
-      </HeaderComponents.Wrapper>
-    );
-  },
-);
-
-export default NetworkHeader;
+          <DebuggerHeaderItem
+            content={icons.beautify}
+            isActive={detailsData?.beautified}
+            activeColor={colors.green}
+            onPress={() => {
+              setDebuggerState(draft => {
+                draft.detailsData!.beautified = !draft.detailsData?.beautified;
+              });
+            }}
+          />
+          <DebuggerHeaderItem
+            content={icons.share}
+            onPress={async () => {
+              if (data?.type === NetworkType.WS) return;
+              await shareText(
+                convertToCurl(data!.method, data!.url, data!.requestHeaders, data!.body),
+              );
+            }}
+          />
+        </>
+      )}
+    </HeaderComponents.Wrapper>
+  );
+}

package/src/ui/components/items/ConsolePanelItem.tsx

@@ -22,9 +22,9 @@ const ConsolePanelItem = memo<ConsolePanelItemProps>(
       </Touchable>
     );
   },
-  (prevProps, nextProps) => {
-    return prevProps.type === nextProps.type && prevProps.values === nextProps.values;
-  },
+  (prevProps, nextProps) =>
+    prevProps.type === nextProps.type &&
+    JSON.stringify(prevProps.values) === JSON.stringify(nextProps.values),
 );
 
 const styles = StyleSheet.create({

package/src/ui/components/items/DebuggerHeaderItem.tsx

@@ -65,5 +65,6 @@ const styles = StyleSheet.create({
     lineHeight: 18,
     fontWeight: '600',
     color: colors.black,
+    fontVariant: ['tabular-nums'],
   },
 });

package/src/ui/components/items/NetworkPanelItem.tsx

@@ -101,15 +101,12 @@ const NetworkPanelItem = memo<NetworkPanelItemProps>(
       </View>
     );
   },
-  (prevProps, nextProps) => {
-    return (
-      prevProps.method === nextProps.method &&
-      prevProps.name === nextProps.name &&
-      prevProps.startTime === nextProps.startTime &&
-      prevProps.endTime === nextProps.endTime &&
-      prevProps.status === nextProps.status
-    );
-  },
+  (prevProps, nextProps) =>
+    prevProps.method === nextProps.method &&
+    prevProps.name === nextProps.name &&
+    prevProps.startTime === nextProps.startTime &&
+    prevProps.endTime === nextProps.endTime &&
+    prevProps.status === nextProps.status,
 );
 
 const styles = StyleSheet.create({

package/src/ui/components/panels/ConsolePanel.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, useCallback, useContext, useMemo } from 'react';
+import { useCallback, useContext, useMemo, type Ref } from 'react';
 import {
   FlatList,
   StyleSheet,
@@ -13,7 +13,12 @@ import { DebuggerPanel, type LogMessage } from '../../../types';
 import Empty from '../common/Empty';
 import ConsolePanelItem from '../items/ConsolePanelItem';
 
-const ConsolePanel = forwardRef<FlatList, { style?: StyleProp<ViewStyle> }>(({ style }, ref) => {
+interface ConsolePanelProps {
+  style?: StyleProp<ViewStyle>;
+  ref?: Ref<FlatList<any>>;
+}
+
+export default function ConsolePanel({ style, ref }: ConsolePanelProps) {
   const {
     debuggerState: { searchQuery },
     consoleInterceptor: { logMessages },
@@ -75,7 +80,7 @@ const ConsolePanel = forwardRef<FlatList, { style?: StyleProp<ViewStyle> }>(({ s
       getItemLayout={getItemLayout}
     />
   );
-});
+}
 
 const styles = StyleSheet.create({
   container: {
@@ -85,5 +90,3 @@ const styles = StyleSheet.create({
     padding: 8,
   },
 });
-
-export default ConsolePanel;

package/src/ui/components/panels/NetworkPanel.tsx

@@ -1,11 +1,5 @@
-import { forwardRef, useCallback, useContext, useMemo } from 'react';
-import {
-  FlatList,
-  StyleSheet,
-  type ListRenderItem,
-  type StyleProp,
-  type ViewStyle,
-} from 'react-native';
+import { useCallback, useContext, useMemo, type Ref } from 'react';
+import { FlatList, StyleSheet, type ListRenderItem, type ViewProps } from 'react-native';
 import { MainContext } from '../../../contexts';
 import { NETWORK_ITEM_HEIGHT } from '../../../core/constants';
 import {
@@ -18,7 +12,11 @@ import {
 import Empty from '../common/Empty';
 import NetworkPanelItem from '../items/NetworkPanelItem';
 
-const NetworkPanel = forwardRef<FlatList, { style?: StyleProp<ViewStyle> }>(({ style }, ref) => {
+interface NetworkPanelProps extends ViewProps {
+  ref?: Ref<FlatList<any>>;
+}
+
+export default function NetworkPanel({ style, ref }: NetworkPanelProps) {
   const {
     debuggerState: { searchQuery },
     networkInterceptor: { networkRequests },
@@ -76,9 +74,9 @@ const NetworkPanel = forwardRef<FlatList, { style?: StyleProp<ViewStyle> }>(({ s
 
   return (
     <FlatList
+      ref={ref}
       inverted={!!data.length}
       data={data}
-      ref={ref}
       renderItem={renderItem}
       keyExtractor={([key]) => key}
       style={[styles.container, style]}
@@ -86,7 +84,7 @@ const NetworkPanel = forwardRef<FlatList, { style?: StyleProp<ViewStyle> }>(({ s
       getItemLayout={getItemLayout}
     />
   );
-});
+}
 
 const styles = StyleSheet.create({
   container: {
@@ -94,5 +92,3 @@ const styles = StyleSheet.create({
     paddingHorizontal: 8,
   },
 });
-
-export default NetworkPanel;

package/src/ui/components/panels/Panel.tsx

@@ -6,7 +6,7 @@ import NetworkRequestDetails from '../details/NetworkRequestDetails';
 import ConsolePanel from './ConsolePanel';
 import NetworkPanel from './NetworkPanel';
 import colors from '../../../theme/colors';
-import { forwardRef, useContext, useEffect, useMemo } from 'react';
+import { useContext, useEffect, useMemo, type Ref } from 'react';
 import Header from '../headers/Header';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import SafeArea from '../common/SafeArea';
@@ -14,9 +14,11 @@ import { MainContext } from '../../../contexts';
 import Handle from '../handle/Handle';
 import { DebuggerPanel } from '../../../types';
 
-interface PanelProps extends ViewProps {}
+interface PanelComponentProps extends ViewProps {
+  ref?: Ref<View>;
+}
 
-const Panel = forwardRef<View, PanelProps>(({ style, ...props }, ref) => {
+export default function Panel({ style, ...props }: PanelComponentProps) {
   const {
     debuggerState: { position, detailsData },
   } = useContext(MainContext)!;
@@ -43,7 +45,7 @@ const Panel = forwardRef<View, PanelProps>(({ style, ...props }, ref) => {
   }, [detailsData?.type]);
 
   return (
-    <Animated.View style={[containerStyle, style]} ref={ref} {...props}>
+    <Animated.View style={[containerStyle, style]} {...props}>
       <SafeAreaProvider>
         {position === 'bottom' && <Handle />}
         {position === 'top' && <SafeArea inset="top" />}
@@ -62,7 +64,7 @@ const Panel = forwardRef<View, PanelProps>(({ style, ...props }, ref) => {
       </SafeAreaProvider>
     </Animated.View>
   );
-});
+}
 
 const styles = StyleSheet.create({
   container: {
@@ -77,5 +79,3 @@ const styles = StyleSheet.create({
     borderBottomWidth: StyleSheet.hairlineWidth,
   },
 });
-
-export default Panel;

package/src/ui/components/search-bar/SearchBar.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, useContext, useState } from 'react';
+import { useContext, useState, type Ref } from 'react';
 import {
   Keyboard,
   Platform,
@@ -18,11 +18,13 @@ import Icon from '../common/Icon';
 import Touchable from '../common/Touchable';
 import SafeArea from '../common/SafeArea';
 
-interface SearchBarProps extends ViewProps {}
+interface SearchBarProps extends ViewProps {
+  ref?: Ref<View>;
+}
 
 const ICON_SIZE = 20;
 
-const SearchBar = forwardRef<View, SearchBarProps>(({ style, ...props }, ref) => {
+export default function SearchBar({ style, ...props }: SearchBarProps) {
   const {
     debuggerState: { searchQuery },
     setDebuggerState,
@@ -49,7 +51,7 @@ const SearchBar = forwardRef<View, SearchBarProps>(({ style, ...props }, ref) =>
   };
 
   return (
-    <View ref={ref} style={[styles.container, style]} {...props}>
+    <View style={[styles.container, style]} {...props}>
       <SafeAreaProvider>
         <View style={styles.barView}>
           <SafeArea inset="top" />
@@ -87,7 +89,7 @@ const SearchBar = forwardRef<View, SearchBarProps>(({ style, ...props }, ref) =>
       </SafeAreaProvider>
     </View>
   );
-});
+}
 
 const styles = StyleSheet.create({
   container: {
@@ -121,5 +123,3 @@ const styles = StyleSheet.create({
     flex: 1,
   },
 });
-
-export default SearchBar;