react-native-xenon
Version:
A powerful in-app debugging tool for React Native.
197 lines (196 loc) • 8.16 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = DebuggerHeader;
var _react = require("react");
var _reactNative = require("react-native");
var _contexts = require("../../../contexts");
var _utils = require("../../../core/utils");
var _colors = _interopRequireDefault(require("../../../theme/colors"));
var _icons = _interopRequireDefault(require("../../../theme/icons"));
var _types = require("../../../types");
var _DebuggerHeaderItem = _interopRequireDefault(require("../items/DebuggerHeaderItem"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
let isSharing = false;
function DebuggerHeader() {
const {
debuggerState: {
detailsData,
selectedPanel
},
setDebuggerState,
networkInterceptor,
consoleInterceptor
} = (0, _react.useContext)(_contexts.MainContext);
const lastSelectedPanel = (0, _react.useRef)(selectedPanel ?? _types.DebuggerPanel.Network);
const backButton = (0, _react.useMemo)(() => /*#__PURE__*/(0, _jsxRuntime.jsx)(_DebuggerHeaderItem.default, {
content: _icons.default.arrowLeft,
onPress: () => {
setDebuggerState(draft => {
draft.selectedPanel = lastSelectedPanel.current;
draft.detailsData = null;
});
}
}), [setDebuggerState]);
const renderTabItem = (0, _react.useCallback)((tab, label) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_DebuggerHeaderItem.default, {
isLabel: true,
isActive: detailsData?.selectedTab === tab,
content: label,
onPress: () => {
setDebuggerState(draft => {
draft.detailsData.selectedTab = tab;
});
}
}), [detailsData?.selectedTab, setDebuggerState]);
const networkHeader = (0, _react.useMemo)(() => {
if (detailsData?.type !== _types.DebuggerPanel.Network) return null;
const {
isHttp,
overviewShown,
headersShown,
requestShown,
responseShown,
messagesShown
} = (0, _utils.getNetworkUtils)(detailsData.data);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [backButton, isHttp && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_DebuggerHeaderItem.default, {
content: _icons.default.share,
onPress: async () => {
if (isSharing || detailsData.data.type === _types.NetworkType.WS) return;
try {
isSharing = true;
setDebuggerState(draft => {
draft.visibility = 'bubble';
});
await _reactNative.Share.share({
message: (0, _utils.convertToCurl)(detailsData.data.method, detailsData.data.url, detailsData.data.requestHeaders, detailsData.data.body)
});
} catch (error) {
// Handle error
} finally {
isSharing = false;
}
}
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DebuggerHeaderItem.default, {
content: _icons.default.beautify,
isActive: detailsData.beautified,
activeColor: _colors.default.green,
onPress: () => {
setDebuggerState(draft => {
draft.detailsData.beautified = !draft.detailsData?.beautified;
});
}
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: styles.divider
}), overviewShown && renderTabItem('overview', 'Overview'), headersShown && renderTabItem('headers', 'Headers'), requestShown && renderTabItem('request', 'Request'), responseShown && renderTabItem('response', 'Response'), messagesShown && renderTabItem('messages', 'Messages')]
});
}, [detailsData?.type, detailsData?.data, detailsData?.beautified, backButton, renderTabItem, setDebuggerState]);
const consoleHeader = (0, _react.useMemo)(() => {
if (detailsData?.type !== _types.DebuggerPanel.Console) return null;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [backButton, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: styles.divider
}), renderTabItem('logMessage', 'Log Message')]
});
}, [detailsData?.type, backButton, renderTabItem]);
const mainHeader = (0, _react.useMemo)(() => {
const onHide = () => {
setDebuggerState(draft => {
draft.visibility = 'bubble';
});
};
const onMove = () => {
setDebuggerState(draft => {
draft.position = draft.position === 'bottom' ? 'top' : 'bottom';
});
};
const switchTo = debuggerPanel => {
setDebuggerState(draft => {
draft.selectedPanel = debuggerPanel;
draft.detailsData = null;
lastSelectedPanel.current = debuggerPanel;
});
};
const toggleNetworkInterception = () => {
networkInterceptor.isInterceptorEnabled ? networkInterceptor.disableInterception() : networkInterceptor.enableInterception();
};
const toggleConsoleInterception = () => {
consoleInterceptor.isInterceptorEnabled ? consoleInterceptor.disableInterception() : consoleInterceptor.enableInterception();
};
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_DebuggerHeaderItem.default, {
onPress: onHide,
content: _icons.default.hide
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DebuggerHeaderItem.default, {
onPress: onMove,
content: _icons.default.move
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: styles.divider
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DebuggerHeaderItem.default, {
isLabel: true,
isActive: selectedPanel === _types.DebuggerPanel.Network,
content: "Network Panel",
onPress: () => switchTo(_types.DebuggerPanel.Network)
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DebuggerHeaderItem.default, {
onPress: toggleNetworkInterception,
isActive: networkInterceptor.isInterceptorEnabled,
content: _icons.default.record
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DebuggerHeaderItem.default, {
onPress: networkInterceptor.clearAllNetworkRequests,
content: _icons.default.delete
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: styles.divider
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DebuggerHeaderItem.default, {
isLabel: true,
isActive: selectedPanel === _types.DebuggerPanel.Console,
content: "Console Panel",
onPress: () => switchTo(_types.DebuggerPanel.Console)
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DebuggerHeaderItem.default, {
onPress: toggleConsoleInterception,
isActive: consoleInterceptor.isInterceptorEnabled,
content: _icons.default.record
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DebuggerHeaderItem.default, {
onPress: consoleInterceptor.clearAllLogMessages,
content: _icons.default.delete
})]
});
}, [selectedPanel, consoleInterceptor, networkInterceptor, setDebuggerState]);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
horizontal: true,
style: styles.container,
contentContainerStyle: styles.contentContainer,
showsHorizontalScrollIndicator: false,
children: (() => {
switch (detailsData?.type) {
case _types.DebuggerPanel.Network:
return networkHeader;
case _types.DebuggerPanel.Console:
return consoleHeader;
default:
return mainHeader;
}
})()
});
}
const styles = _reactNative.StyleSheet.create({
container: {
flexGrow: 0,
borderTopColor: _colors.default.gray,
borderTopWidth: _reactNative.StyleSheet.hairlineWidth,
borderBottomColor: _colors.default.gray,
borderBottomWidth: _reactNative.StyleSheet.hairlineWidth
},
contentContainer: {
padding: 8,
columnGap: 8
},
divider: {
width: _reactNative.StyleSheet.hairlineWidth,
backgroundColor: _colors.default.gray
}
});
//# sourceMappingURL=DebuggerHeader.js.map