react-native-xenon 2.2.0 → 2.3.0

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

@@ -1,6 +1,7 @@
-import { useMemo } from 'react';
+import { memo, useMemo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import { URL } from 'react-native-url-polyfill';
+import { NETWORK_ITEM_HEIGHT } from '../../../core/constants';
 import {
   formatRequestDuration,
   formatRequestMethod,
@@ -8,6 +9,7 @@ import {
 } from '../../../core/utils';
 import colors from '../../../theme/colors';
 import type { HttpRequest, NetworkRequest } from '../../../types';
+import Divider from '../common/Divider';
 import Touchable from '../common/Touchable';
 
 interface NetworkPanelItemProps {
@@ -39,76 +41,85 @@ const getMethodColor = (method: string) => {
   }
 };
 
-export default function NetworkPanelItem({
-  method,
-  name,
-  startTime,
-  endTime,
-  status,
-  onPress,
-}: NetworkPanelItemProps) {
-  const duration = formatRequestDuration(startTime, endTime);
-  const requestMethod = formatRequestMethod(method);
-  const requestStatusCode = formatRequestStatusCode(status);
-  const isRequestFailed = Number.isInteger(status) && status! >= 400 && status! < 600;
-  const textStyle = [styles.text, isRequestFailed && styles.failedText];
+const NetworkPanelItem = memo<NetworkPanelItemProps>(
+  ({ method, name, startTime, endTime, status, onPress }) => {
+    const duration = formatRequestDuration(startTime, endTime);
+    const requestMethod = formatRequestMethod(method);
+    const requestStatusCode = formatRequestStatusCode(status);
+    const isRequestFailed = Number.isInteger(status) && status! >= 400 && status! < 600;
+    const textStyle = [styles.text, isRequestFailed && styles.failedText];
 
-  const requestPath = useMemo(() => {
-    if (!name) return '[failed]';
+    const requestPath = useMemo(() => {
+      if (!name) return '[failed]';
 
-    try {
-      const url = new URL(name);
-      const suffixUrl = url.pathname + url.search;
+      try {
+        const url = new URL(name);
+        const suffixUrl = url.pathname + url.search;
 
-      if (suffixUrl === '/') return url.host;
-      return suffixUrl;
-    } catch (error) {
-      return name;
-    }
-  }, [name]);
+        if (suffixUrl === '/') return url.host;
+        return suffixUrl;
+      } catch (error) {
+        return name;
+      }
+    }, [name]);
 
-  return (
-    <Touchable onPress={onPress} style={styles.container}>
-      <View style={styles.column}>
-        <Text
-          numberOfLines={1}
-          style={[
-            styles.text,
-            styles.methodText,
-            { backgroundColor: getMethodColor(requestMethod) },
-          ]}
-        >
-          {requestMethod}
-        </Text>
-      </View>
+    return (
+      <View style={styles.container}>
+        <Touchable onPress={onPress} style={styles.wrapper}>
+          <View style={styles.column}>
+            <Text
+              numberOfLines={1}
+              style={[
+                styles.text,
+                styles.methodText,
+                { backgroundColor: getMethodColor(requestMethod) },
+              ]}
+            >
+              {requestMethod}
+            </Text>
+          </View>
 
-      <View style={[styles.column, styles.pathColumn]}>
-        <Text numberOfLines={1} style={textStyle}>
-          {requestPath}
-        </Text>
-      </View>
+          <View style={[styles.column, styles.pathColumn]}>
+            <Text numberOfLines={1} style={textStyle}>
+              {requestPath}
+            </Text>
+          </View>
 
-      <View style={[styles.column, styles.durationColumn]}>
-        <Text numberOfLines={1} style={textStyle}>
-          {duration}
-        </Text>
-      </View>
+          <View style={[styles.column, styles.durationColumn]}>
+            <Text numberOfLines={1} style={textStyle}>
+              {duration}
+            </Text>
+          </View>
 
-      <View style={styles.column}>
-        <Text numberOfLines={1} style={textStyle}>
-          {requestStatusCode}
-        </Text>
+          <View style={styles.column}>
+            <Text numberOfLines={1} style={textStyle}>
+              {requestStatusCode}
+            </Text>
+          </View>
+        </Touchable>
+        <Divider type="horizontal" />
       </View>
-    </Touchable>
-  );
-}
+    );
+  },
+  (prevProps, nextProps) => {
+    return (
+      prevProps.method === nextProps.method &&
+      prevProps.name === nextProps.name &&
+      prevProps.startTime === nextProps.startTime &&
+      prevProps.endTime === nextProps.endTime &&
+      prevProps.status === nextProps.status
+    );
+  },
+);
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
+  },
+  wrapper: {
     flexDirection: 'row',
     alignItems: 'center',
-    paddingVertical: 8,
+    height: NETWORK_ITEM_HEIGHT,
     columnGap: 8,
   },
   pathColumn: {
@@ -138,3 +149,5 @@ const styles = StyleSheet.create({
     fontWeight: '600',
   },
 });
+
+export default NetworkPanelItem;

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

@@ -2,20 +2,17 @@ import { forwardRef, useCallback, useContext, useMemo } from 'react';
 import {
   FlatList,
   StyleSheet,
-  View,
   type ListRenderItem,
   type StyleProp,
   type ViewStyle,
 } from 'react-native';
 import { MainContext } from '../../../contexts';
-import refs, { HeaderState, PanelState } from '../../../core/refs';
+import { CONSOLE_ITEM_HEIGHT } from '../../../core/constants';
 import { formatLogMessage } from '../../../core/utils';
 import { DebuggerPanel, type LogMessage } from '../../../types';
 import Empty from '../common/Empty';
 import ConsolePanelItem from '../items/ConsolePanelItem';
 
-const Separator = () => <View style={styles.spacing} />;
-
 const ConsolePanel = forwardRef<FlatList, { style?: StyleProp<ViewStyle> }>(({ style }, ref) => {
   const {
     debuggerState: { searchQuery },
@@ -42,8 +39,6 @@ const ConsolePanel = forwardRef<FlatList, { style?: StyleProp<ViewStyle> }>(({ s
       <ConsolePanelItem
         {...item}
         onPress={() => {
-          refs.header.current?.setCurrentIndex(HeaderState.Console);
-          refs.panel.current?.setCurrentIndex(PanelState.ConsoleDetail);
           setDebuggerState(draft => {
             draft.detailsData = {
               type: DebuggerPanel.Console,
@@ -58,6 +53,15 @@ const ConsolePanel = forwardRef<FlatList, { style?: StyleProp<ViewStyle> }>(({ s
     [setDebuggerState],
   );
 
+  const getItemLayout = useCallback(
+    (_: ArrayLike<LogMessage> | null | undefined, index: number) => ({
+      length: CONSOLE_ITEM_HEIGHT,
+      offset: CONSOLE_ITEM_HEIGHT * index,
+      index,
+    }),
+    [],
+  );
+
   return (
     <FlatList
       ref={ref}
@@ -65,10 +69,10 @@ const ConsolePanel = forwardRef<FlatList, { style?: StyleProp<ViewStyle> }>(({ s
       data={data}
       renderItem={renderItem}
       keyExtractor={(_, index) => index.toString()}
-      ItemSeparatorComponent={Separator}
       style={[styles.container, style]}
       contentContainerStyle={data.length ? styles.contentContainer : undefined}
       ListEmptyComponent={<Empty>No logs yet</Empty>}
+      getItemLayout={getItemLayout}
     />
   );
 });
@@ -80,9 +84,6 @@ const styles = StyleSheet.create({
   contentContainer: {
     padding: 8,
   },
-  spacing: {
-    height: 4,
-  },
 });
 
 export default ConsolePanel;

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

@@ -7,7 +7,7 @@ import {
   type ViewStyle,
 } from 'react-native';
 import { MainContext } from '../../../contexts';
-import refs, { HeaderState, PanelState } from '../../../core/refs';
+import { NETWORK_ITEM_HEIGHT } from '../../../core/constants';
 import {
   DebuggerPanel,
   NetworkType,
@@ -15,12 +15,9 @@ import {
   type ID,
   type WebSocketRequest,
 } from '../../../types';
-import Divider from '../common/Divider';
 import Empty from '../common/Empty';
 import NetworkPanelItem from '../items/NetworkPanelItem';
 
-const Separator = () => <Divider type="horizontal" />;
-
 const NetworkPanel = forwardRef<FlatList, { style?: StyleProp<ViewStyle> }>(({ style }, ref) => {
   const {
     debuggerState: { searchQuery },
@@ -51,8 +48,6 @@ const NetworkPanel = forwardRef<FlatList, { style?: StyleProp<ViewStyle> }>(({ s
         endTime={item.endTime}
         status={item.status}
         onPress={() => {
-          refs.header.current?.setCurrentIndex(HeaderState.Network);
-          refs.panel.current?.setCurrentIndex(PanelState.NetworkDetail);
           setDebuggerState(draft => {
             draft.detailsData = {
               type: DebuggerPanel.Network,
@@ -67,6 +62,18 @@ const NetworkPanel = forwardRef<FlatList, { style?: StyleProp<ViewStyle> }>(({ s
     [setDebuggerState],
   );
 
+  const getItemLayout = useCallback(
+    (
+      _: ArrayLike<[NonNullable<ID>, HttpRequest | WebSocketRequest]> | null | undefined,
+      index: number,
+    ) => ({
+      length: NETWORK_ITEM_HEIGHT,
+      offset: NETWORK_ITEM_HEIGHT * index,
+      index,
+    }),
+    [],
+  );
+
   return (
     <FlatList
       inverted={!!data.length}
@@ -74,9 +81,9 @@ const NetworkPanel = forwardRef<FlatList, { style?: StyleProp<ViewStyle> }>(({ s
       ref={ref}
       renderItem={renderItem}
       keyExtractor={([key]) => key}
-      ItemSeparatorComponent={Separator}
       style={[styles.container, style]}
       ListEmptyComponent={<Empty>No records yet</Empty>}
+      getItemLayout={getItemLayout}
     />
   );
 });

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

@@ -1,33 +1,51 @@
-import { Platform, StyleSheet, View, type ViewProps } from 'react-native';
-import refs, { PanelState } from '../../../core/refs';
+import { Animated, Platform, StyleSheet, View, type ViewProps } from 'react-native';
+import refs, { HeaderState, PanelState } from '../../../core/refs';
 import IndexedStack from '../common/IndexedStack';
 import LogMessageDetails from '../details/LogMessageDetails';
 import NetworkRequestDetails from '../details/NetworkRequestDetails';
 import ConsolePanel from './ConsolePanel';
 import NetworkPanel from './NetworkPanel';
 import colors from '../../../theme/colors';
-import { forwardRef, useContext, useMemo } from 'react';
+import { forwardRef, useContext, useEffect, useMemo } from 'react';
 import Header from '../headers/Header';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import SafeArea from '../common/SafeArea';
 import { MainContext } from '../../../contexts';
+import Handle from '../handle/Handle';
+import { DebuggerPanel } from '../../../types';
 
 interface PanelProps extends ViewProps {}
 
 const Panel = forwardRef<View, PanelProps>(({ style, ...props }, ref) => {
   const {
-    debuggerState: { position },
-    dimensions: { width: screenWidth, height: screenHeight },
+    debuggerState: { position, detailsData },
   } = useContext(MainContext)!;
 
   const containerStyle = useMemo(
-    () => [styles.container, { [position]: 0, height: Math.min(screenWidth, screenHeight) * 0.75 }],
-    [position, screenWidth, screenHeight],
+    () => [
+      styles.container,
+      { [position]: 0, width: refs.panelSize.current?.x, height: refs.panelSize.current?.y },
+    ],
+    [position],
   );
 
+  useEffect(() => {
+    switch (detailsData?.type) {
+      case DebuggerPanel.Network:
+        refs.header.current?.setCurrentIndex(HeaderState.Network);
+        refs.panel.current?.setCurrentIndex(PanelState.NetworkDetail);
+        break;
+      case DebuggerPanel.Console:
+        refs.header.current?.setCurrentIndex(HeaderState.Console);
+        refs.panel.current?.setCurrentIndex(PanelState.ConsoleDetail);
+        break;
+    }
+  }, [detailsData?.type]);
+
   return (
-    <View style={[containerStyle, style]} ref={ref} {...props}>
+    <Animated.View style={[containerStyle, style]} ref={ref} {...props}>
       <SafeAreaProvider>
+        {position === 'bottom' && <Handle />}
         {position === 'top' && <SafeArea inset="top" />}
 
         <Header />
@@ -39,9 +57,10 @@ const Panel = forwardRef<View, PanelProps>(({ style, ...props }, ref) => {
           <LogMessageDetails />
         </IndexedStack>
 
+        {position === 'top' && <Handle />}
         {position === 'bottom' && <SafeArea inset="bottom" />}
       </SafeAreaProvider>
-    </View>
+    </Animated.View>
   );
 });