@dugongjs/cli
Version:
57 lines (56 loc) • 4.48 kB
JavaScript
import { Box, Text, measureElement } from "ink";
import React from "react";
import { JSONViewer } from "../components/json-viewer.js";
import { ValueDisplay } from "../components/value-display.js";
const PADDING_X = 1;
export const DomainEventViewPane = ({ isFocused, isLoading, error, domainEvent, maximumSequenceNumber }) => {
const containerRef = React.useRef(null);
const titleRef = React.useRef(null);
const infoRef = React.useRef(null);
const [contentWidth, setContentWidth] = React.useState(40);
const [metaViewport, setMetaViewport] = React.useState(6);
const [payloadViewport, setPayloadViewport] = React.useState(6);
const sequenceNumberDisplay = `${domainEvent?.sequenceNumber ?? "0"}/${maximumSequenceNumber ?? "0"}`;
React.useLayoutEffect(() => {
if (!containerRef.current)
return;
const { height: ch, width: cw } = measureElement(containerRef.current);
const { height: th } = titleRef.current ? measureElement(titleRef.current) : { height: 1 };
const { height: ih } = infoRef.current ? measureElement(infoRef.current) : { height: 0 };
const usableW = Math.max(1, cw - 2 - PADDING_X * 2);
const remainingH = Math.max(0, ch - 2 - th - ih);
const metaBlock = Math.floor(remainingH / 2);
const payloadBlock = remainingH - metaBlock;
const metaView = Math.max(0, metaBlock - 1 - 1);
const payloadView = Math.max(0, payloadBlock - 1 - 1);
setContentWidth(usableW);
setMetaViewport(metaView);
setPayloadViewport(payloadView);
});
return (React.createElement(Box, { ref: containerRef, flexDirection: "column", flexGrow: 1, borderStyle: "round", borderColor: isFocused ? "cyan" : "gray" },
React.createElement(Box, { ref: titleRef, paddingX: PADDING_X },
React.createElement(Text, { bold: true }, "Domain Event")),
isLoading ? (React.createElement(Box, { paddingX: PADDING_X },
React.createElement(Text, { color: "gray" }, "Loading event\u2026"))) : error ? (React.createElement(Box, { paddingX: PADDING_X },
React.createElement(Text, { color: "red" }, error))) : !domainEvent ? (React.createElement(Box, { paddingX: PADDING_X },
React.createElement(Text, { color: "gray" }, "No domain event selected"))) : (React.createElement(React.Fragment, null,
React.createElement(Box, { ref: infoRef, flexDirection: "column", width: "100%", paddingX: PADDING_X },
React.createElement(ValueDisplay, { label: "ID", value: domainEvent.id }),
React.createElement(ValueDisplay, { label: "Sequence number", value: `${domainEvent.sequenceNumber ?? "0"}/${maximumSequenceNumber ?? "0"}` }),
React.createElement(ValueDisplay, { label: "Timestamp", value: domainEvent.timestamp }),
React.createElement(ValueDisplay, { label: "Type", value: domainEvent.type }),
React.createElement(ValueDisplay, { label: "Version", value: domainEvent.version }),
React.createElement(ValueDisplay, { label: "Origin", value: domainEvent.origin }),
React.createElement(ValueDisplay, { label: "Aggregate Type", value: domainEvent.aggregateType }),
React.createElement(ValueDisplay, { label: "Aggregate ID", value: domainEvent.aggregateId }),
React.createElement(ValueDisplay, { label: "Tenant ID", value: domainEvent.tenantId }),
React.createElement(ValueDisplay, { label: "Correlation ID", value: domainEvent.correlationId }),
React.createElement(ValueDisplay, { label: "Triggered by user ID", value: domainEvent.triggeredByUserId }),
React.createElement(ValueDisplay, { label: "Triggered by event ID", value: domainEvent.triggeredByEventId })),
React.createElement(Box, { flexDirection: "column", width: "100%", paddingX: PADDING_X },
React.createElement(Text, { bold: true }, "Metadata"),
React.createElement(JSONViewer, { data: domainEvent.metadata, width: contentWidth, height: metaViewport, isFocused: isFocused })),
React.createElement(Box, { flexDirection: "column", width: "100%", paddingX: PADDING_X },
React.createElement(Text, { bold: true }, "Payload"),
React.createElement(JSONViewer, { data: domainEvent.payload, width: contentWidth, height: payloadViewport, isFocused: isFocused }))))));
};