react-native-xenon 0.2.0 → 0.3.0

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

@@ -1,4 +1,5 @@
 import { Image, StyleSheet, Text, TouchableOpacity, type ImageRequireSource } from 'react-native';
+import colors from '../../../colors';
 
 interface DebuggerHeaderItemProps {
   content?: ImageRequireSource | string;
@@ -7,26 +8,31 @@ interface DebuggerHeaderItemProps {
   onPress: () => void;
 }
 
-export default function DebuggerHeaderItem(props: DebuggerHeaderItemProps) {
+export default function DebuggerHeaderItem({
+  content,
+  isLabel,
+  isActive,
+  onPress,
+}: DebuggerHeaderItemProps) {
   return (
     <TouchableOpacity
-      onPress={props.onPress}
+      onPress={onPress}
       activeOpacity={0.8}
       style={[
         styles.container,
-        props.isLabel
-          ? props.isActive
+        isLabel
+          ? isActive
             ? styles.activeLabelContainer
             : styles.labelContainer
-          : props.isActive
+          : isActive
             ? styles.activeContainer
             : undefined,
       ]}
     >
-      {typeof props.content === 'string' ? (
-        <Text style={styles.title}>{props.content}</Text>
+      {typeof content === 'string' ? (
+        <Text style={styles.title}>{content}</Text>
       ) : (
-        <Image source={props.content} style={styles.icon} />
+        <Image source={content} style={styles.icon} />
       )}
     </TouchableOpacity>
   );
@@ -37,7 +43,7 @@ const styles = StyleSheet.create({
     paddingVertical: 4,
     paddingHorizontal: 8,
     borderRadius: 4,
-    backgroundColor: '#888888',
+    backgroundColor: colors.gray,
     borderWidth: 1,
     borderColor: 'transparent',
   },
@@ -47,16 +53,16 @@ const styles = StyleSheet.create({
   activeLabelContainer: {
     backgroundColor: 'transparent',
     borderWidth: 1,
-    borderColor: '#000000',
+    borderColor: colors.black,
   },
   activeContainer: {
-    backgroundColor: '#ef4444',
+    backgroundColor: colors.red,
   },
   title: {
     fontSize: 14,
     lineHeight: 17,
     fontWeight: '500',
-    color: '#000000',
+    color: colors.black,
   },
   icon: {
     width: 17,

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

@@ -7,6 +7,7 @@ import {
   formatRequestMethod,
   formatRequestStatusCode,
 } from '../../../utils';
+import colors from '../../../colors';
 
 interface NetworkPanelItemProps {
   method?: HttpRequest['method'];
@@ -45,13 +46,13 @@ export default function NetworkPanelItem({
         </Text>
       </View>
 
-      <View style={[styles.column, styles.mainColumn]}>
+      <View style={[styles.column, styles.nameColumn]}>
         <Text numberOfLines={1} style={styles.text}>
           {requestName}
         </Text>
       </View>
 
-      <View style={styles.column}>
+      <View style={[styles.column, styles.durationColumn]}>
         <Text numberOfLines={1} style={styles.text}>
           {formatRequestDuration(duration)}
         </Text>
@@ -71,9 +72,11 @@ const styles = StyleSheet.create({
     flex: 1,
     flexDirection: 'row',
   },
-  mainColumn: {
-    flex: 5.5,
-    flexShrink: 1,
+  nameColumn: {
+    flex: 5,
+  },
+  durationColumn: {
+    flex: 2,
   },
   column: {
     flex: 1.5,
@@ -82,7 +85,7 @@ const styles = StyleSheet.create({
     paddingRight: 0,
   },
   text: {
-    color: '#000000',
+    color: colors.black,
     fontSize: 14,
   },
 });

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

@@ -1,5 +1,6 @@
 import { StyleSheet, Text, TouchableOpacity } from 'react-native';
 import type { NetworkTab } from '../../../types';
+import colors from '../../../colors';
 
 interface NetworkRequestDetailsHeaderItemProps {
   visible: boolean;
@@ -43,10 +44,10 @@ const styles = StyleSheet.create({
   activeItem: {
     backgroundColor: 'transparent',
     borderWidth: 1,
-    borderColor: '#000000',
+    borderColor: colors.black,
   },
   itemText: {
     fontSize: 14,
-    color: '#000000',
+    color: colors.black,
   },
 });

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

@@ -1,4 +1,5 @@
 import { StyleSheet, Text } from 'react-native';
+import colors from '../../../colors';
 
 interface NetworkRequestDetailsItemProps {
   label?: string;
@@ -33,11 +34,11 @@ export default function NetworkRequestDetailsItem({
 const styles = StyleSheet.create({
   text: {
     fontSize: 14,
-    color: '#000000',
+    color: colors.black,
   },
   label: {
     fontSize: 14,
     fontWeight: 'bold',
-    color: '#000000',
+    color: colors.black,
   },
 });

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

@@ -1,7 +1,7 @@
 import { useCallback, useContext } from 'react';
 import { FlatList, StyleSheet, View, type ListRenderItem } from 'react-native';
+import colors from '../../../colors';
 import { MainContext } from '../../../contexts';
-import { useScrollToBottom } from '../../../hooks';
 import type { LogMessage } from '../../../types';
 import ConsolePanelItem from '../items/ConsolePanelItem';
 
@@ -14,8 +14,6 @@ export default function ConsolePanel() {
     detailsData,
   } = useContext(MainContext)!;
 
-  const listRef = useScrollToBottom(logMessages.length);
-
   const renderItem = useCallback<ListRenderItem<LogMessage>>(
     ({ item }) => {
       return (
@@ -33,12 +31,12 @@ export default function ConsolePanel() {
 
   return (
     <FlatList
-      ref={listRef}
-      style={styles.container}
-      data={logMessages}
+      inverted
+      data={logMessages.toReversed()}
       renderItem={renderItem}
-      ItemSeparatorComponent={Separator}
       keyExtractor={(_, index) => index.toString()}
+      ItemSeparatorComponent={Separator}
+      style={styles.container}
     />
   );
 }
@@ -50,6 +48,6 @@ const styles = StyleSheet.create({
   },
   divider: {
     height: 1,
-    backgroundColor: '#888888',
+    backgroundColor: colors.gray,
   },
 });

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

@@ -1,7 +1,7 @@
-import { useCallback, useContext } from 'react';
+import { useCallback, useContext, useMemo } from 'react';
 import { FlatList, StyleSheet, View, type ListRenderItem } from 'react-native';
+import colors from '../../../colors';
 import { MainContext } from '../../../contexts';
-import { useScrollToBottom } from '../../../hooks';
 import { NetworkType, type HttpRequest, type ID, type WebSocketRequest } from '../../../types';
 import NetworkPanelHeader from '../headers/NetworkPanelHeader';
 import NetworkPanelItem from '../items/NetworkPanelItem';
@@ -15,7 +15,7 @@ export default function NetworkPanel() {
     detailsData,
   } = useContext(MainContext)!;
 
-  const listRef = useScrollToBottom(networkRequests.size);
+  const data = useMemo(() => Array.from(networkRequests).reverse(), [networkRequests]);
 
   const renderItem = useCallback<ListRenderItem<[NonNullable<ID>, HttpRequest | WebSocketRequest]>>(
     ({ item: [_, item] }) => {
@@ -40,16 +40,17 @@ export default function NetworkPanel() {
   );
 
   return (
-    <FlatList
-      ref={listRef}
-      data={Array.from(networkRequests)}
-      style={styles.container}
-      ListHeaderComponent={NetworkPanelHeader}
-      stickyHeaderIndices={[0]}
-      ItemSeparatorComponent={Separator}
-      keyExtractor={([key]) => key}
-      renderItem={renderItem}
-    />
+    <>
+      <NetworkPanelHeader />
+      <FlatList
+        inverted
+        data={data}
+        renderItem={renderItem}
+        keyExtractor={([key]) => key}
+        ItemSeparatorComponent={Separator}
+        style={styles.container}
+      />
+    </>
   );
 }
 
@@ -60,6 +61,6 @@ const styles = StyleSheet.create({
   },
   divider: {
     height: 1,
-    backgroundColor: '#888888',
+    backgroundColor: colors.gray,
   },
 });

package/src/utils.ts

@@ -55,3 +55,9 @@ export const convertToCurl = (
 
   return curlCommand;
 };
+
+export function frozen(_target: Object) {
+  const descriptor: PropertyDescriptor = arguments[2];
+  descriptor.configurable = false;
+  descriptor.writable = false;
+}

package/lib/commonjs/hooks/useScrollToBottom.js

@@ -1,23 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = useScrollToBottom;
-var _react = require("react");
-function useScrollToBottom(listSize) {
-  const currentSize = (0, _react.useRef)(listSize);
-  const listRef = (0, _react.useRef)(null);
-  (0, _react.useEffect)(() => {
-    if (listSize <= currentSize.current) return;
-    currentSize.current = listSize;
-    const timer = setTimeout(() => {
-      if (listSize) listRef.current?.scrollToEnd();
-    }, 0);
-    return () => {
-      clearTimeout(timer);
-    };
-  }, [listSize]);
-  return listRef;
-}
-//# sourceMappingURL=useScrollToBottom.js.map

package/lib/commonjs/hooks/useScrollToBottom.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_react","require","useScrollToBottom","listSize","currentSize","useRef","listRef","useEffect","current","timer","setTimeout","scrollToEnd","clearTimeout"],"sourceRoot":"../../../src","sources":["hooks/useScrollToBottom.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAGe,SAASC,iBAAiBA,CAACC,QAAgB,EAAE;EAC1D,MAAMC,WAAW,GAAG,IAAAC,aAAM,EAACF,QAAQ,CAAC;EACpC,MAAMG,OAAO,GAAG,IAAAD,aAAM,EAAkB,IAAI,CAAC;EAE7C,IAAAE,gBAAS,EAAC,MAAM;IACd,IAAIJ,QAAQ,IAAIC,WAAW,CAACI,OAAO,EAAE;IAErCJ,WAAW,CAACI,OAAO,GAAGL,QAAQ;IAE9B,MAAMM,KAAK,GAAGC,UAAU,CAAC,MAAM;MAC7B,IAAIP,QAAQ,EAAEG,OAAO,CAACE,OAAO,EAAEG,WAAW,CAAC,CAAC;IAC9C,CAAC,EAAE,CAAC,CAAC;IAEL,OAAO,MAAM;MACXC,YAAY,CAACH,KAAK,CAAC;IACrB,CAAC;EACH,CAAC,EAAE,CAACN,QAAQ,CAAC,CAAC;EAEd,OAAOG,OAAO;AAChB","ignoreList":[]}

package/lib/module/hooks/useScrollToBottom.js

@@ -1,19 +0,0 @@
-"use strict";
-
-import { useEffect, useRef } from 'react';
-export default function useScrollToBottom(listSize) {
-  const currentSize = useRef(listSize);
-  const listRef = useRef(null);
-  useEffect(() => {
-    if (listSize <= currentSize.current) return;
-    currentSize.current = listSize;
-    const timer = setTimeout(() => {
-      if (listSize) listRef.current?.scrollToEnd();
-    }, 0);
-    return () => {
-      clearTimeout(timer);
-    };
-  }, [listSize]);
-  return listRef;
-}
-//# sourceMappingURL=useScrollToBottom.js.map

package/lib/module/hooks/useScrollToBottom.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["useEffect","useRef","useScrollToBottom","listSize","currentSize","listRef","current","timer","setTimeout","scrollToEnd","clearTimeout"],"sourceRoot":"../../../src","sources":["hooks/useScrollToBottom.ts"],"mappings":";;AAAA,SAASA,SAAS,EAAEC,MAAM,QAAQ,OAAO;AAGzC,eAAe,SAASC,iBAAiBA,CAACC,QAAgB,EAAE;EAC1D,MAAMC,WAAW,GAAGH,MAAM,CAACE,QAAQ,CAAC;EACpC,MAAME,OAAO,GAAGJ,MAAM,CAAkB,IAAI,CAAC;EAE7CD,SAAS,CAAC,MAAM;IACd,IAAIG,QAAQ,IAAIC,WAAW,CAACE,OAAO,EAAE;IAErCF,WAAW,CAACE,OAAO,GAAGH,QAAQ;IAE9B,MAAMI,KAAK,GAAGC,UAAU,CAAC,MAAM;MAC7B,IAAIL,QAAQ,EAAEE,OAAO,CAACC,OAAO,EAAEG,WAAW,CAAC,CAAC;IAC9C,CAAC,EAAE,CAAC,CAAC;IAEL,OAAO,MAAM;MACXC,YAAY,CAACH,KAAK,CAAC;IACrB,CAAC;EACH,CAAC,EAAE,CAACJ,QAAQ,CAAC,CAAC;EAEd,OAAOE,OAAO;AAChB","ignoreList":[]}

package/lib/typescript/commonjs/src/hooks/useScrollToBottom.d.ts

@@ -1,3 +0,0 @@
-import type { FlatList } from 'react-native';
-export default function useScrollToBottom(listSize: number): import("react").MutableRefObject<FlatList<any> | null>;
-//# sourceMappingURL=useScrollToBottom.d.ts.map

package/lib/typescript/commonjs/src/hooks/useScrollToBottom.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useScrollToBottom.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/useScrollToBottom.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAE7C,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,QAAQ,EAAE,MAAM,0DAmBzD"}

package/lib/typescript/module/src/hooks/useScrollToBottom.d.ts

@@ -1,3 +0,0 @@
-import type { FlatList } from 'react-native';
-export default function useScrollToBottom(listSize: number): import("react").MutableRefObject<FlatList<any> | null>;
-//# sourceMappingURL=useScrollToBottom.d.ts.map

package/lib/typescript/module/src/hooks/useScrollToBottom.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useScrollToBottom.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/useScrollToBottom.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAE7C,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,QAAQ,EAAE,MAAM,0DAmBzD"}

package/src/hooks/useScrollToBottom.ts

@@ -1,23 +0,0 @@
-import { useEffect, useRef } from 'react';
-import type { FlatList } from 'react-native';
-
-export default function useScrollToBottom(listSize: number) {
-  const currentSize = useRef(listSize);
-  const listRef = useRef<FlatList | null>(null);
-
-  useEffect(() => {
-    if (listSize <= currentSize.current) return;
-
-    currentSize.current = listSize;
-
-    const timer = setTimeout(() => {
-      if (listSize) listRef.current?.scrollToEnd();
-    }, 0);
-
-    return () => {
-      clearTimeout(timer);
-    };
-  }, [listSize]);
-
-  return listRef;
-}