@dugongjs/cli
Version:
35 lines (34 loc) • 2.39 kB
JavaScript
import { Box, measureElement, Text } from "ink";
import React from "react";
import formatAggregate from "../../utils/format-aggregate.js";
import { JSONViewer } from "../components/json-viewer.js";
const PADDING_X = 1;
const FOOTER_LINES = 1;
export const AggregateViewPane = ({ isFocused, isLoading, error, aggregate, isDeleted }) => {
const containerRef = React.useRef(null);
const headerRef = React.useRef(null);
const [viewportLines, setViewportLines] = React.useState(8);
const [contentWidth, setContentWidth] = React.useState(40);
React.useLayoutEffect(() => {
if (!containerRef.current)
return;
const { height: containerH, width: containerW } = measureElement(containerRef.current);
let headerH = 0;
if (headerRef.current) {
const { height } = measureElement(headerRef.current);
headerH = height;
}
const usableH = Math.max(0, containerH - 2 - headerH - FOOTER_LINES);
const usableW = Math.max(1, containerW - 2 - PADDING_X * 2);
setViewportLines(usableH);
setContentWidth(usableW);
});
return (React.createElement(Box, { ref: containerRef, width: "100%", height: "100%", borderStyle: "round", borderColor: isFocused ? "cyan" : "gray", flexDirection: "column" },
React.createElement(Box, { ref: headerRef, flexDirection: "row", justifyContent: "space-between", paddingX: PADDING_X, paddingY: 0 },
React.createElement(Text, { bold: true }, "Aggregate state"),
React.createElement(Text, { backgroundColor: isDeleted ? "red" : "cyanBright", color: "black" }, ` ${isDeleted ? "DELETED" : "ACTIVE"} `)),
isLoading ? (React.createElement(Box, { paddingX: 1 },
React.createElement(Text, { color: "gray" }, "Loading aggregate\u2026"))) : error ? (React.createElement(Box, { paddingX: 1 },
React.createElement(Text, { color: "red" }, error))) : !aggregate ? (React.createElement(Box, { paddingX: 1 },
React.createElement(Text, { color: "gray" }, "No aggregate selected"))) : (React.createElement(Box, { flexDirection: "column", paddingX: PADDING_X }, !aggregate ? (React.createElement(Text, { color: "gray" }, "No aggregate selected")) : (React.createElement(JSONViewer, { data: formatAggregate(aggregate), width: contentWidth, height: viewportLines, isFocused: isFocused }))))));
};