react-native-xenon 2.0.0 → 2.2.0

package/src/ui/components/bubble/Bubble.tsx

@@ -1,29 +1,29 @@
-import { forwardRef, useMemo, useRef, useState } from 'react';
+import { forwardRef, useContext, useMemo, useRef, useState } from 'react';
 import {
   Animated,
   PanResponder,
   StyleSheet,
   View,
   type PanResponderGestureState,
-  type StyleProp,
-  type ViewStyle,
+  type ViewProps,
 } from 'react-native';
+import { MainContext } from '../../../contexts';
 import refs, { DebuggerVisibility } from '../../../core/refs';
 import { clamp, getVerticalSafeMargin } from '../../../core/utils';
 import colors from '../../../theme/colors';
 import icons from '../../../theme/icons';
 import Icon from '../common/Icon';
 
-interface BubbleProps {
+interface BubbleProps extends ViewProps {
   bubbleSize: number;
   idleBubbleOpacity: number;
-  screenWidth: number;
-  screenHeight: number;
-  style?: StyleProp<ViewStyle>;
 }
 
 const Bubble = forwardRef<View, BubbleProps>(
-  ({ bubbleSize, idleBubbleOpacity, screenWidth, screenHeight, style }, ref) => {
+  ({ bubbleSize, idleBubbleOpacity, style, ...props }, ref) => {
+    const {
+      dimensions: { width: screenWidth, height: screenHeight },
+    } = useContext(MainContext)!;
     const [idleOpacity, setIdleOpacity] = useState(idleBubbleOpacity);
     const pan = useRef(new Animated.ValueXY({ x: 0, y: getVerticalSafeMargin(screenHeight) }));
     const opacityTimer = useRef<NodeJS.Timeout | null>(null);
@@ -97,7 +97,7 @@ const Bubble = forwardRef<View, BubbleProps>(
     }, [bubbleSize, idleBubbleOpacity, screenHeight, screenWidth]);
 
     return (
-      <View ref={ref} style={[styles.bubbleBackdrop, style]}>
+      <View ref={ref} style={[styles.bubbleBackdrop, style]} {...props}>
         <Animated.View
           {...panResponder.panHandlers}
           style={[

package/src/ui/components/common/Empty.tsx

@@ -0,0 +1,15 @@
+import type { PropsWithChildren } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+export default function Empty({ children }: PropsWithChildren) {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.text}>{children}</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { padding: 16, alignItems: 'center', justifyContent: 'center' },
+  text: { textAlign: 'center' },
+});

package/src/ui/components/index.ts

@@ -1,5 +1,4 @@
 export { default as Bubble } from './bubble/Bubble';
 export { default as IndexedStack } from './common/IndexedStack';
-export { default as Header } from './headers/Header';
 export { default as Panel } from './panels/Panel';
 export { default as SearchBar } from './search-bar/SearchBar';

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

@@ -8,12 +8,13 @@ import {
   type ViewStyle,
 } from 'react-native';
 import { MainContext } from '../../../contexts';
-import { DebuggerPanel, type LogMessage } from '../../../types';
-import ConsolePanelItem from '../items/ConsolePanelItem';
 import refs, { HeaderState, PanelState } from '../../../core/refs';
 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.divider} />;
+const Separator = () => <View style={styles.spacing} />;
 
 const ConsolePanel = forwardRef<FlatList, { style?: StyleProp<ViewStyle> }>(({ style }, ref) => {
   const {
@@ -60,13 +61,14 @@ const ConsolePanel = forwardRef<FlatList, { style?: StyleProp<ViewStyle> }>(({ s
   return (
     <FlatList
       ref={ref}
-      inverted
+      inverted={!!data.length}
       data={data}
       renderItem={renderItem}
       keyExtractor={(_, index) => index.toString()}
       ItemSeparatorComponent={Separator}
       style={[styles.container, style]}
-      contentContainerStyle={styles.contentContainer}
+      contentContainerStyle={data.length ? styles.contentContainer : undefined}
+      ListEmptyComponent={<Empty>No logs yet</Empty>}
     />
   );
 });
@@ -78,7 +80,7 @@ const styles = StyleSheet.create({
   contentContainer: {
     padding: 8,
   },
-  divider: {
+  spacing: {
     height: 4,
   },
 });

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

@@ -16,6 +16,7 @@ import {
   type WebSocketRequest,
 } from '../../../types';
 import Divider from '../common/Divider';
+import Empty from '../common/Empty';
 import NetworkPanelItem from '../items/NetworkPanelItem';
 
 const Separator = () => <Divider type="horizontal" />;
@@ -68,13 +69,14 @@ const NetworkPanel = forwardRef<FlatList, { style?: StyleProp<ViewStyle> }>(({ s
 
   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>}
     />
   );
 });

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

@@ -1,17 +1,62 @@
+import { Platform, StyleSheet, View, type ViewProps } from 'react-native';
 import refs, { 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 Header from '../headers/Header';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import SafeArea from '../common/SafeArea';
+import { MainContext } from '../../../contexts';
+
+interface PanelProps extends ViewProps {}
+
+const Panel = forwardRef<View, PanelProps>(({ style, ...props }, ref) => {
+  const {
+    debuggerState: { position },
+    dimensions: { width: screenWidth, height: screenHeight },
+  } = useContext(MainContext)!;
+
+  const containerStyle = useMemo(
+    () => [styles.container, { [position]: 0, height: Math.min(screenWidth, screenHeight) * 0.75 }],
+    [position, screenWidth, screenHeight],
+  );
 
-export default function Panel() {
   return (
-    <IndexedStack defaultIndex={PanelState.Network} id="debugger-panel" ref={refs.panel}>
-      <NetworkPanel />
-      <ConsolePanel />
-      <NetworkRequestDetails />
-      <LogMessageDetails />
-    </IndexedStack>
+    <View style={[containerStyle, style]} ref={ref} {...props}>
+      <SafeAreaProvider>
+        {position === 'top' && <SafeArea inset="top" />}
+
+        <Header />
+
+        <IndexedStack defaultIndex={PanelState.Network} id="debugger-panel" ref={refs.panel}>
+          <NetworkPanel />
+          <ConsolePanel />
+          <NetworkRequestDetails />
+          <LogMessageDetails />
+        </IndexedStack>
+
+        {position === 'bottom' && <SafeArea inset="bottom" />}
+      </SafeAreaProvider>
+    </View>
   );
-}
+});
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    ...StyleSheet.absoluteFillObject,
+    pointerEvents: 'box-none',
+    ...(Platform.OS === 'android' ? { zIndex: 9999 } : {}),
+    top: undefined,
+    bottom: undefined,
+    backgroundColor: colors.lightGray,
+    borderBottomColor: colors.gray,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+  },
+});
+
+export default Panel;

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;