@unito/integration-debugger
Version:
The Unito Integration Debugger
62 lines (61 loc) • 3.08 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const chalk_1 = __importDefault(require("chalk"));
const styles_1 = require("../../styles");
const store_1 = require("../../store");
const blessed_1 = require("../../resources/blessed");
const InspectPane = () => {
const listRef = (0, react_1.useRef)(null);
const debuggerState = (0, store_1.useDebuggerState)();
// When the step changes,
// build the list of things to inspect on it.
const items = (0, react_1.useCallback)(() => {
const toInspect = [];
const step = debuggerState.selectedStack ?? debuggerState.selected;
if (!step) {
return toInspect;
}
const errorsCount = step.errors.length;
const warningsCount = step.warnings.length;
toInspect.push({ mode: store_1.InspectMode.Payloads, label: 'Payloads' });
toInspect.push({ mode: store_1.InspectMode.Headers, label: 'Headers' });
toInspect.push({ mode: store_1.InspectMode.Errors, label: chalk_1.default.redBright(`${errorsCount} error(s)`) });
toInspect.push({ mode: store_1.InspectMode.Warnings, label: chalk_1.default.yellowBright(`${warningsCount} warning(s)`) });
return toInspect;
}, [debuggerState.selectedStack, debuggerState.selected]);
// Initialize the list with key bindings, events, etc.
(0, react_1.useEffect)(() => {
if (listRef.current) {
(0, blessed_1.enableListScrolling)(listRef.current);
listRef.current.key(['left', 'right'], () => {
debuggerState.selectedPane = store_1.Pane.Output;
});
}
return () => {
if (listRef.current) {
listRef.current.free();
}
};
}, [listRef]);
// Display an orange border when the pane is in focus.
(0, react_1.useEffect)(() => {
if (listRef.current && debuggerState.selectedPane === store_1.Pane.Inspect) {
listRef.current.focus();
}
}, [listRef, debuggerState.selectedPane]);
return ((0, jsx_runtime_1.jsx)("list", { ref: listRef, label: (0, styles_1.paneTitle)('inspect'), left: 0, width: "40%", bottom: 15, height: 6, border: styles_1.paneBorder, scrollbar: styles_1.scrollbar, scrollable: true, focusable: true, keys: true, items: items().map(item => item.label), style: debuggerState.selectedPane === store_1.Pane.Inspect ? styles_1.focusedList : styles_1.unfocusedList,
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore not supported in @types/react-blessed
onSelectItem: (_item, index) => {
const mode = items().at(index)?.mode;
if (debuggerState.selected && mode) {
debuggerState.inspectMode = mode;
}
} }));
};
exports.default = InspectPane;