react-native-xenon/lib/module/ui/components/items/NetworkPanelItem.js

A powerful in-app debugging tool for React Native.

"use strict";

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.js";
import { formatRequestDuration, formatRequestMethod, formatRequestStatusCode } from "../../../core/utils.js";
import colors from "../../../theme/colors.js";
import Divider from "../common/Divider.js";
import Touchable from "../common/Touchable.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const getMethodColor = method => {
  switch (method) {
    case 'GET':
      return colors.blue;
    case 'POST':
      return colors.green;
    case 'PUT':
      return colors.yellow;
    case 'PATCH':
      return colors.cyan;
    case 'DELETE':
      return colors.red;
    case 'OPTIONS':
    case 'HEAD':
      return colors.purple;
    default:
      return colors.black;
  }
};
const NetworkPanelItem = /*#__PURE__*/memo(({
  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]';
    try {
      const url = new URL(name);
      const suffixUrl = url.pathname + url.search;
      if (suffixUrl === '/') return url.host;
      return suffixUrl;
    } catch (error) {
      return name;
    }
  }, [name]);
  return /*#__PURE__*/_jsxs(View, {
    style: styles.container,
    children: [/*#__PURE__*/_jsxs(Touchable, {
      onPress: onPress,
      style: styles.wrapper,
      children: [/*#__PURE__*/_jsx(View, {
        style: styles.column,
        children: /*#__PURE__*/_jsx(Text, {
          numberOfLines: 1,
          style: [styles.text, styles.methodText, {
            backgroundColor: getMethodColor(requestMethod)
          }],
          children: requestMethod
        })
      }), /*#__PURE__*/_jsx(View, {
        style: [styles.column, styles.pathColumn],
        children: /*#__PURE__*/_jsx(Text, {
          numberOfLines: 1,
          style: textStyle,
          children: requestPath
        })
      }), /*#__PURE__*/_jsx(View, {
        style: [styles.column, styles.durationColumn],
        children: /*#__PURE__*/_jsx(Text, {
          numberOfLines: 1,
          style: textStyle,
          children: duration
        })
      }), /*#__PURE__*/_jsx(View, {
        style: styles.column,
        children: /*#__PURE__*/_jsx(Text, {
          numberOfLines: 1,
          style: textStyle,
          children: requestStatusCode
        })
      })]
    }), /*#__PURE__*/_jsx(Divider, {
      type: "horizontal"
    })]
  });
}, (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',
    height: NETWORK_ITEM_HEIGHT,
    columnGap: 8
  },
  pathColumn: {
    flex: 5
  },
  durationColumn: {
    flex: 2
  },
  column: {
    flex: 1.5,
    flexShrink: 1
  },
  failedText: {
    color: colors.red
  },
  text: {
    color: colors.black,
    fontSize: 14
  },
  methodText: {
    borderRadius: 4,
    color: colors.lightGray,
    paddingVertical: 4,
    paddingHorizontal: 2,
    textAlign: 'center',
    fontSize: 12,
    fontWeight: '600'
  }
});
export default NetworkPanelItem;
//# sourceMappingURL=NetworkPanelItem.js.map