react-native-netlog-fab/lib/module/NetworkLoggerFAB.js

Floating action button for network logging in React Native apps.

"use strict";

import React, { useState, useEffect } from 'react';
import { StyleSheet } from 'react-native';
import FloatingButton from "./FloatingButton.js";
import LoggerModal from "./LoggerModal.js";
import Icon, { Icons } from "./Icons.js";
import { startNetworkLogging } from 'react-native-network-logger';
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
const NetworkLoggerFAB = ({
  // FAB Props
  color = '#6200ee',
  icon,
  iconSize = 30,
  iconColor = '#ffffff',
  position = {
    bottom: 20,
    right: 20
  },
  showIn = 'dev',
  modalHeight = 0.7,
  // NetworkLogger Props
  theme = 'light',
  sort = 'desc',
  maxRows,
  compact = false,
  onBackPressed,
  // Logging Options
  maxRequests = 500,
  ignoredHosts = [],
  ignoredUrls = [],
  ignoredPatterns = [],
  forceEnable = false
}) => {
  const [isModalVisible, setIsModalVisible] = useState(false);
  useEffect(() => {
    // Start network logging with the provided options
    startNetworkLogging({
      maxRequests,
      ignoredHosts,
      ignoredUrls,
      ignoredPatterns,
      forceEnable
    });
  }, [maxRequests, ignoredHosts, ignoredUrls, ignoredPatterns, forceEnable]);
  const handlePress = () => {
    setIsModalVisible(true);
  };
  const handleClose = () => {
    setIsModalVisible(false);
  };

  // Only render in development if showIn is 'dev'
  if (showIn === 'dev' && __DEV__ === false) {
    return null;
  }

  // Render the icon based on the type of icon prop
  const renderIcon = () => {
    if (/*#__PURE__*/React.isValidElement(icon)) {
      return icon;
    }
    if (typeof icon === 'string') {
      return /*#__PURE__*/_jsx(Icon, {
        type: Icons.MaterialIcons,
        name: icon,
        size: iconSize,
        color: iconColor
      });
    }
    // Default icon if none provided
    return /*#__PURE__*/_jsx(Icon, {
      type: Icons.MaterialIcons,
      name: "expand-less",
      size: iconSize,
      color: iconColor
    });
  };
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_jsx(FloatingButton, {
      color: color,
      icon: renderIcon(),
      position: position,
      onPress: handlePress,
      style: styles.fab
    }), /*#__PURE__*/_jsx(LoggerModal, {
      visible: isModalVisible,
      onClose: handleClose,
      height: modalHeight,
      theme: theme,
      sort: sort,
      maxRows: maxRows,
      compact: compact,
      onBackPressed: onBackPressed
    })]
  });
};
const styles = StyleSheet.create({
  fab: {
    position: 'absolute',
    zIndex: 999
  }
});
export default NetworkLoggerFAB;
//# sourceMappingURL=NetworkLoggerFAB.js.map