react-native-xenon 2.2.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

@@ -1,4 +1,6 @@
-import { StyleSheet, Text } from 'react-native';
+import { memo } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { CONSOLE_ITEM_HEIGHT } from '../../../core/constants';
 import { formatLogMessage, getConsoleTypeColor } from '../../../core/utils';
 import colors from '../../../theme/colors';
 import type { LogMessage } from '../../../types';
@@ -8,23 +10,33 @@ interface ConsolePanelItemProps extends LogMessage {
   onPress: () => void;
 }
 
-export default function ConsolePanelItem({ type, values, onPress }: ConsolePanelItemProps) {
-  return (
-    <Touchable
-      onPress={onPress}
-      style={[styles.container, { backgroundColor: getConsoleTypeColor(type) }]}
-    >
-      <Text numberOfLines={1} style={styles.text}>
-        {formatLogMessage(values)}
-      </Text>
-    </Touchable>
-  );
-}
+const ConsolePanelItem = memo<ConsolePanelItemProps>(
+  ({ type, values, onPress }) => {
+    return (
+      <Touchable onPress={onPress} style={styles.container}>
+        <View style={[styles.wrapper, { backgroundColor: getConsoleTypeColor(type) }]}>
+          <Text numberOfLines={1} style={styles.text}>
+            {formatLogMessage(values)}
+          </Text>
+        </View>
+      </Touchable>
+    );
+  },
+  (prevProps, nextProps) =>
+    prevProps.type === nextProps.type &&
+    JSON.stringify(prevProps.values) === JSON.stringify(nextProps.values),
+);
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    padding: 8,
+    paddingBottom: 4,
+    height: CONSOLE_ITEM_HEIGHT,
+  },
+  wrapper: {
+    flex: 1,
+    paddingHorizontal: 8,
+    justifyContent: 'center',
     borderRadius: 8,
   },
   text: {
@@ -32,3 +44,5 @@ const styles = StyleSheet.create({
     fontSize: 14,
   },
 });
+
+export default ConsolePanelItem;

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

@@ -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,82 @@ 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) =>
+    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 +146,5 @@ const styles = StyleSheet.create({
     fontWeight: '600',
   },
 });
+
+export default NetworkPanelItem;

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

@@ -1,22 +1,24 @@
-import { forwardRef, useCallback, useContext, useMemo } from 'react';
+import { useCallback, useContext, useMemo, type Ref } 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} />;
+interface ConsolePanelProps {
+  style?: StyleProp<ViewStyle>;
+  ref?: Ref<FlatList<any>>;
+}
 
-const ConsolePanel = forwardRef<FlatList, { style?: StyleProp<ViewStyle> }>(({ style }, ref) => {
+export default function ConsolePanel({ style, ref }: ConsolePanelProps) {
   const {
     debuggerState: { searchQuery },
     consoleInterceptor: { logMessages },
@@ -42,8 +44,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 +58,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,13 +74,13 @@ 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}
     />
   );
-});
+}
 
 const styles = StyleSheet.create({
   container: {
@@ -80,9 +89,4 @@ const styles = StyleSheet.create({
   contentContainer: {
     padding: 8,
   },
-  spacing: {
-    height: 4,
-  },
 });
-
-export default ConsolePanel;

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

@@ -1,13 +1,7 @@
-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 refs, { HeaderState, PanelState } from '../../../core/refs';
+import { NETWORK_ITEM_HEIGHT } from '../../../core/constants';
 import {
   DebuggerPanel,
   NetworkType,
@@ -15,13 +9,14 @@ 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" />;
+interface NetworkPanelProps extends ViewProps {
+  ref?: Ref<FlatList<any>>;
+}
 
-const NetworkPanel = forwardRef<FlatList, { style?: StyleProp<ViewStyle> }>(({ style }, ref) => {
+export default function NetworkPanel({ style, ref }: NetworkPanelProps) {
   const {
     debuggerState: { searchQuery },
     networkInterceptor: { networkRequests },
@@ -51,8 +46,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,19 +60,31 @@ 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
+      ref={ref}
       inverted={!!data.length}
       data={data}
-      ref={ref}
       renderItem={renderItem}
       keyExtractor={([key]) => key}
-      ItemSeparatorComponent={Separator}
       style={[styles.container, style]}
       ListEmptyComponent={<Empty>No records yet</Empty>}
+      getItemLayout={getItemLayout}
     />
   );
-});
+}
 
 const styles = StyleSheet.create({
   container: {
@@ -87,5 +92,3 @@ const styles = StyleSheet.create({
     paddingHorizontal: 8,
   },
 });
-
-export default NetworkPanel;

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

@@ -1,33 +1,53 @@
-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 { 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';
 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 },
-    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]} {...props}>
       <SafeAreaProvider>
+        {position === 'bottom' && <Handle />}
         {position === 'top' && <SafeArea inset="top" />}
 
         <Header />
@@ -39,11 +59,12 @@ const Panel = forwardRef<View, PanelProps>(({ style, ...props }, ref) => {
           <LogMessageDetails />
         </IndexedStack>
 
+        {position === 'top' && <Handle />}
         {position === 'bottom' && <SafeArea inset="bottom" />}
       </SafeAreaProvider>
-    </View>
+    </Animated.View>
   );
-});
+}
 
 const styles = StyleSheet.create({
   container: {
@@ -58,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;