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

Floating action button for network logging in React Native apps.

"use strict";

import React from 'react';
import { Modal, View, StyleSheet, TouchableOpacity, Text } from 'react-native';
import NetworkLogger from 'react-native-network-logger';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function getModalColors(theme) {
  if (theme === 'dark') {
    return {
      background: '#1e1e1e',
      text: '#ffffff',
      close: '#bb86fc'
    };
  }
  if (typeof theme === 'object' && theme.colors?.background) {
    return {
      background: theme.colors.background,
      text: theme.colors.text ?? '#000000',
      close: '#6200ee'
    };
  }
  return {
    background: '#ffffff',
    text: '#000000',
    close: '#6200ee'
  };
}
const LoggerModal = ({
  visible,
  onClose,
  height = 0.7,
  theme = 'light',
  sort = 'desc',
  maxRows,
  compact = false,
  onBackPressed
}) => {
  const colors = getModalColors(theme);
  return /*#__PURE__*/_jsx(Modal, {
    visible: visible,
    transparent: true,
    animationType: "slide",
    onRequestClose: onBackPressed || onClose,
    children: /*#__PURE__*/_jsx(View, {
      style: styles.modalOverlay,
      children: /*#__PURE__*/_jsxs(View, {
        style: [styles.modalContent, {
          height: `${height * 100}%`,
          backgroundColor: colors.background
        }],
        children: [/*#__PURE__*/_jsxs(View, {
          style: styles.header,
          children: [/*#__PURE__*/_jsx(Text, {
            style: [styles.headerText, {
              color: colors.text
            }],
            children: "Network Logs"
          }), /*#__PURE__*/_jsx(TouchableOpacity, {
            onPress: onClose,
            style: styles.closeButton,
            children: /*#__PURE__*/_jsx(Text, {
              style: [styles.closeButtonText, {
                color: colors.close
              }],
              children: "Close"
            })
          })]
        }), /*#__PURE__*/_jsx(View, {
          style: styles.loggerContainer,
          children: /*#__PURE__*/_jsx(NetworkLogger, {
            theme: theme,
            sort: sort,
            maxRows: maxRows,
            compact: compact
          })
        })]
      })
    })
  });
};
const styles = StyleSheet.create({
  modalOverlay: {
    flex: 1,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    justifyContent: 'flex-end'
  },
  modalContent: {
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
    padding: 20
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 10
  },
  headerText: {
    fontSize: 18,
    fontWeight: 'bold'
  },
  closeButton: {
    padding: 5
  },
  closeButtonText: {
    fontSize: 16
  },
  loggerContainer: {
    flex: 1
  }
});
export default LoggerModal;
//# sourceMappingURL=LoggerModal.js.map