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

A powerful in-app debugging tool for React Native.

"use strict";

import { Animated, Platform, StyleSheet } from 'react-native';
import refs, { HeaderState, PanelState } from "../../../core/refs.js";
import IndexedStack from "../common/IndexedStack.js";
import LogMessageDetails from "../details/LogMessageDetails.js";
import NetworkRequestDetails from "../details/NetworkRequestDetails.js";
import ConsolePanel from "./ConsolePanel.js";
import NetworkPanel from "./NetworkPanel.js";
import colors from "../../../theme/colors.js";
import { useContext, useEffect, useMemo } from 'react';
import Header from "../headers/Header.js";
import { SafeAreaProvider } from 'react-native-safe-area-context';
import SafeArea from "../common/SafeArea.js";
import { MainContext } from "../../../contexts/index.js";
import Handle from "../handle/Handle.js";
import { DebuggerPanel } from "../../../types/index.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export default function Panel({
  style,
  ...props
}) {
  const {
    debuggerState: {
      position,
      detailsData
    }
  } = useContext(MainContext);
  const containerStyle = useMemo(() => [styles.container, {
    [position]: 0,
    width: refs.panelSize.current?.x,
    height: refs.panelSize.current?.y
  }], [position]);
  useEffect(() => {
    switch (detailsData?.type) {
      case DebuggerPanel.Network:
        refs.header.current?.setCurrentIndex(HeaderState.Network);
        refs.panel.current?.setCurrentIndex(PanelState.NetworkDetail);
        break;
      case DebuggerPanel.Console:
        refs.header.current?.setCurrentIndex(HeaderState.Console);
        refs.panel.current?.setCurrentIndex(PanelState.ConsoleDetail);
        break;
    }
  }, [detailsData?.type]);
  return /*#__PURE__*/_jsx(Animated.View, {
    style: [containerStyle, style],
    ...props,
    children: /*#__PURE__*/_jsxs(SafeAreaProvider, {
      children: [position === 'bottom' && /*#__PURE__*/_jsx(Handle, {}), position === 'top' && /*#__PURE__*/_jsx(SafeArea, {
        inset: "top"
      }), /*#__PURE__*/_jsx(Header, {}), /*#__PURE__*/_jsxs(IndexedStack, {
        defaultIndex: PanelState.Network,
        id: "debugger-panel",
        ref: refs.panel,
        children: [/*#__PURE__*/_jsx(NetworkPanel, {}), /*#__PURE__*/_jsx(ConsolePanel, {}), /*#__PURE__*/_jsx(NetworkRequestDetails, {}), /*#__PURE__*/_jsx(LogMessageDetails, {})]
      }), position === 'top' && /*#__PURE__*/_jsx(Handle, {}), position === 'bottom' && /*#__PURE__*/_jsx(SafeArea, {
        inset: "bottom"
      })]
    })
  });
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    ...StyleSheet.absoluteFillObject,
    pointerEvents: 'box-none',
    ...(Platform.OS === 'android' ? {
      zIndex: 9999
    } : {}),
    top: undefined,
    bottom: undefined,
    backgroundColor: colors.lightGray,
    borderBottomColor: colors.gray,
    borderBottomWidth: StyleSheet.hairlineWidth
  }
});
//# sourceMappingURL=Panel.js.map