react-native-xenon/lib/module/ui/components/headers/HeaderComponents.js

A powerful in-app debugging tool for React Native.

"use strict";

import { useContext } from 'react';
import { ScrollView, StyleSheet } from 'react-native';
import { MainContext } from "../../../contexts/index.js";
import refs, { DebuggerVisibility, HeaderState } from "../../../core/refs.js";
import colors from "../../../theme/colors.js";
import icons from "../../../theme/icons.js";
import DebuggerHeaderItem from "../items/DebuggerHeaderItem.js";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
const Back = ({
  selectedPanel
}) => {
  const {
    setDebuggerState
  } = useContext(MainContext);
  return /*#__PURE__*/_jsx(DebuggerHeaderItem, {
    content: icons.arrowLeft,
    onPress: () => {
      refs.header.current?.setCurrentIndex(HeaderState.Debugger);
      refs.panel.current?.setCurrentIndex(selectedPanel);
      setDebuggerState(draft => {
        draft.detailsData = null;
      });
    }
  });
};
const DetailTabItem = ({
  tab,
  label
}) => {
  const {
    debuggerState: {
      detailsData
    },
    setDebuggerState
  } = useContext(MainContext);
  return /*#__PURE__*/_jsx(DebuggerHeaderItem, {
    isLabel: true,
    isActive: detailsData?.selectedTab === tab,
    content: label,
    onPress: () => {
      setDebuggerState(draft => {
        draft.detailsData.selectedTab = tab;
      });
    }
  });
};
const MainButtons = () => {
  const {
    setDebuggerState
  } = useContext(MainContext);
  const onHide = () => {
    refs.debugger.current?.setCurrentIndex(DebuggerVisibility.Bubble);
  };
  const onMove = () => {
    setDebuggerState(draft => {
      draft.position = draft.position === 'bottom' ? 'top' : 'bottom';
    });
  };
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_jsx(DebuggerHeaderItem, {
      onPress: onHide,
      content: icons.hide
    }), /*#__PURE__*/_jsx(DebuggerHeaderItem, {
      onPress: onMove,
      content: icons.move
    })]
  });
};
function Wrapper({
  children,
  style,
  ref
}) {
  return /*#__PURE__*/_jsx(ScrollView, {
    ref: ref,
    horizontal: true,
    style: [styles.container, style],
    contentContainerStyle: styles.contentContainer,
    showsHorizontalScrollIndicator: false,
    children: children
  });
}
const styles = StyleSheet.create({
  container: {
    flexGrow: 0,
    borderTopColor: colors.gray,
    borderTopWidth: StyleSheet.hairlineWidth,
    borderBottomColor: colors.gray,
    borderBottomWidth: StyleSheet.hairlineWidth
  },
  contentContainer: {
    padding: 8,
    columnGap: 8
  }
});
const HeaderComponents = {
  Back,
  DetailTabItem,
  MainButtons,
  Wrapper
};
export default HeaderComponents;
//# sourceMappingURL=HeaderComponents.js.map