react-native-xenon/lib/module/ui/Xenon.js

A powerful in-app debugging tool for React Native.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _immer = require("immer");
var _react = require("react");
var _reactNative = require("react-native");
var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
var _useImmer = require("use-immer");
var _MainContext = _interopRequireDefault(require("../contexts/MainContext"));
var _utils = require("../core/utils");
var _hooks = require("../hooks");
var _colors = _interopRequireDefault(require("../theme/colors"));
var _types = require("../types");
var _components = require("./components");
var _reactNativeScreens = require("react-native-screens");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
let Xenon;
(function (_Xenon) {
  (0, _immer.enableMapSet)();
  const ref = /*#__PURE__*/(0, _react.createRef)();
  const styles = _reactNative.StyleSheet.create({
    container: {
      flex: 1,
      ..._reactNative.StyleSheet.absoluteFillObject,
      pointerEvents: 'box-none',
      top: undefined,
      bottom: undefined,
      ...(_reactNative.Platform.OS === 'android' ? {
        zIndex: 9999
      } : {}),
      backgroundColor: _colors.default.lightGray,
      borderBottomColor: _colors.default.gray,
      borderBottomWidth: _reactNative.StyleSheet.hairlineWidth
    },
    safeArea: {
      flex: 1
    }
  });
  const isVisible = _Xenon.isVisible = () => ref.current?.isVisible() ?? false;
  const show = _Xenon.show = () => ref.current?.show();
  const hide = _Xenon.hide = () => ref.current?.hide();
  const Debugger = /*#__PURE__*/(0, _react.memo)(({
    autoInspectNetworkEnabled = true,
    autoInspectConsoleEnabled = true,
    bubbleSize = 40,
    idleBubbleOpacity = 0.5
  }) => {
    const {
      width,
      height
    } = (0, _reactNative.useWindowDimensions)();
    const pan = (0, _react.useRef)(new _reactNative.Animated.ValueXY({
      x: 0,
      y: (0, _utils.getVerticalSafeMargin)(height)
    }));
    const [debuggerState, setDebuggerState] = (0, _useImmer.useImmer)({
      visibility: 'hidden',
      position: 'bottom',
      selectedPanel: _types.DebuggerPanel.Network,
      detailsData: null
    });
    const detailsShown = (0, _react.useMemo)(() => !debuggerState.selectedPanel && !!debuggerState.detailsData, [debuggerState.detailsData, debuggerState.selectedPanel]);
    const containerStyle = (0, _react.useMemo)(() => [styles.container, {
      [debuggerState.position]: 0,
      height: Math.min(width, height) * 0.75
    }], [debuggerState.position, height, width]);
    const networkInterceptor = (0, _hooks.useNetworkInterceptor)({
      autoEnabled: autoInspectNetworkEnabled
    });
    const consoleInterceptor = (0, _hooks.useConsoleInterceptor)({
      autoEnabled: autoInspectConsoleEnabled
    });
    (0, _react.useImperativeHandle)(ref, () => {
      const changeVisibility = (condition, value) => {
        if (!condition) return;
        setDebuggerState(draft => {
          draft.visibility = value;
        });
      };
      return {
        isVisible() {
          return debuggerState.visibility !== 'hidden';
        },
        show() {
          changeVisibility(!this.isVisible(), 'bubble');
        },
        hide() {
          changeVisibility(this.isVisible(), 'hidden');
        }
      };
    }, [debuggerState.visibility, setDebuggerState]);
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MainContext.default.Provider, {
      value: {
        debuggerState,
        setDebuggerState,
        networkInterceptor,
        consoleInterceptor
      },
      children: [debuggerState.visibility === 'bubble' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Bubble, {
        bubbleSize: bubbleSize,
        idleBubbleOpacity: idleBubbleOpacity,
        pan: pan,
        screenWidth: width,
        screenHeight: height
      }), debuggerState.visibility === 'panel' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSafeAreaContext.SafeAreaProvider, {
        style: containerStyle,
        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSafeAreaContext.SafeAreaView, {
          style: styles.safeArea,
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.DebuggerHeader, {}), debuggerState.selectedPanel === _types.DebuggerPanel.Network && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.NetworkPanel, {}), debuggerState.selectedPanel === _types.DebuggerPanel.Console && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ConsolePanel, {}), detailsShown && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.DetailsViewer, {})]
        })
      })]
    });
  });
  function Component(props) {
    if (_reactNative.Platform.OS === 'ios') {
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeScreens.FullWindowOverlay, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Debugger, {
          ...props
        })
      });
    }
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Debugger, {
      ...props
    });
  }
  _Xenon.Component = Component;
  Component.displayName = 'Xenon';
})(Xenon || (Xenon = {}));
var _default = exports.default = Xenon;
//# sourceMappingURL=Xenon.js.map