react-native-xenon 2.1.0 → 2.3.0

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,11 +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 },
@@ -50,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,
@@ -66,15 +62,28 @@ 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
+      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}
     />
   );
 });

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

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

@@ -20,6 +20,8 @@ import SafeArea from '../common/SafeArea';
 
 interface SearchBarProps extends ViewProps {}
 
+const ICON_SIZE = 20;
+
 const SearchBar = forwardRef<View, SearchBarProps>(({ style, ...props }, ref) => {
   const {
     debuggerState: { searchQuery },
@@ -34,7 +36,7 @@ const SearchBar = forwardRef<View, SearchBarProps>(({ style, ...props }, ref) =>
   };
 
   const onClear = () => {
-    refs.searchInput.current?.clear();
+    setValue('');
   };
 
   const onSubmitEditing = ({
@@ -53,7 +55,7 @@ const SearchBar = forwardRef<View, SearchBarProps>(({ style, ...props }, ref) =>
           <SafeArea inset="top" />
 
           <View style={styles.inputWrapper}>
-            <Icon source={icons.search} size={18} />
+            <Icon source={icons.search} size={ICON_SIZE} />
 
             <TextInput
               autoCapitalize="none"
@@ -71,9 +73,11 @@ const SearchBar = forwardRef<View, SearchBarProps>(({ style, ...props }, ref) =>
               onSubmitEditing={onSubmitEditing}
             />
 
-            <Touchable hitSlop={8} onPress={onClear} style={styles.closeButton}>
-              <Icon source={icons.close} size={12} color={colors.black} />
-            </Touchable>
+            {!!value.length && (
+              <Touchable hitSlop={8} onPress={onClear}>
+                <Icon source={icons.close} size={ICON_SIZE} color={colors.black} />
+              </Touchable>
+            )}
           </View>
         </View>
 
@@ -116,14 +120,6 @@ const styles = StyleSheet.create({
     color: colors.black,
     flex: 1,
   },
-  closeButton: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    width: 18,
-    height: 18,
-    borderRadius: 9,
-    backgroundColor: colors.gray,
-  },
 });
 
 export default SearchBar;