react-native-xenon/lib/module/ui/components/panels/NetworkPanel.js

A powerful in-app debugging tool for React Native.

"use strict";

import { useCallback, useContext, useMemo } from 'react';
import { FlatList, StyleSheet } from 'react-native';
import { MainContext } from "../../../contexts/index.js";
import { NETWORK_ITEM_HEIGHT } from "../../../core/constants.js";
import { DebuggerPanel, NetworkType } from "../../../types/index.js";
import Empty from "../common/Empty.js";
import NetworkPanelItem from "../items/NetworkPanelItem.js";
import { jsx as _jsx } from "react/jsx-runtime";
export default function NetworkPanel({
  style,
  ref
}) {
  const {
    debuggerState: {
      searchQuery
    },
    networkInterceptor: {
      networkRequests
    },
    setDebuggerState
  } = useContext(MainContext);
  const data = useMemo(() => {
    let result = Array.from(networkRequests);
    if (searchQuery) {
      result = result.filter(([, item]) => item.url.toLowerCase().includes(searchQuery.toLowerCase()));
    }
    return result.reverse();
  }, [networkRequests, searchQuery]);
  const renderItem = useCallback(({
    item: [_, item]
  }) => /*#__PURE__*/_jsx(NetworkPanelItem, {
    method: item.type === NetworkType.WS ? undefined : item.method,
    name: item.url,
    startTime: item.startTime,
    endTime: item.endTime,
    status: item.status,
    onPress: () => {
      setDebuggerState(draft => {
        draft.detailsData = {
          type: DebuggerPanel.Network,
          data: item,
          selectedTab: 'overview',
          beautified: false
        };
      });
    }
  }), [setDebuggerState]);
  const getItemLayout = useCallback((_, index) => ({
    length: NETWORK_ITEM_HEIGHT,
    offset: NETWORK_ITEM_HEIGHT * index,
    index
  }), []);
  return /*#__PURE__*/_jsx(FlatList, {
    ref: ref,
    inverted: !!data.length,
    data: data,
    renderItem: renderItem,
    keyExtractor: ([key]) => key,
    style: [styles.container, style],
    ListEmptyComponent: /*#__PURE__*/_jsx(Empty, {
      children: "No records yet"
    }),
    getItemLayout: getItemLayout
  });
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingHorizontal: 8
  }
});
//# sourceMappingURL=NetworkPanel.js.map