@dugongjs/cli/studio/panes/domain-event-select-pane.js

import { Box, measureElement, Spacer, Text, useInput } from "ink";
import React from "react";
import { Pane } from "../components/pane.js";
import { useStdoutDimensions } from "../hooks/use-stdout-dimensions.js";
export const DomainEventSelectPane = ({ isFocused, isLoading, domainEvents, selectedDomainEventIndex, setSelectedDomainEventIndex }) => {
    const selectedIndex = selectedDomainEventIndex ?? domainEvents.length - 1;
    const paneRef = React.useRef(null);
    const [visibleLines, setVisibleLines] = React.useState(10);
    const [scrollOffset, setScrollOffset] = React.useState(0);
    const [_, rows] = useStdoutDimensions();
    React.useEffect(() => {
        if (paneRef.current) {
            const { height } = measureElement(paneRef.current);
            setVisibleLines(height - 8);
        }
    }, [rows]);
    React.useEffect(() => {
        const maxOffset = Math.max(0, domainEvents.length - visibleLines);
        if (selectedIndex < scrollOffset) {
            setScrollOffset(Math.max(0, selectedIndex));
        }
        else if (selectedIndex >= scrollOffset + visibleLines) {
            setScrollOffset(Math.min(selectedIndex - visibleLines + 1, maxOffset));
        }
    }, [selectedIndex, visibleLines, domainEvents.length]);
    useInput((_, key) => {
        if (!isFocused || domainEvents.length === 0) {
            return;
        }
        if (key.upArrow) {
            setSelectedDomainEventIndex(Math.max(0, selectedIndex - 1));
        }
        else if (key.downArrow) {
            setSelectedDomainEventIndex(Math.min(domainEvents.length - 1, selectedIndex + 1));
        }
    });
    const visibleDomainEvents = domainEvents.slice(scrollOffset, scrollOffset + visibleLines);
    return (React.createElement(Pane, { ref: paneRef, isFocused: isFocused, isLoading: isLoading },
        React.createElement(Text, { bold: true }, "Domain Events"),
        domainEvents.length === 0 ? (React.createElement(Text, { color: "gray" }, "No domain events to display")) : (React.createElement(Box, { flexDirection: "column", marginTop: 1 }, visibleDomainEvents.map((event, idx) => {
            const realIndex = scrollOffset + idx;
            const isSelected = realIndex === selectedIndex;
            return (React.createElement(Text, { key: realIndex, color: isSelected ? "cyan" : undefined, inverse: isSelected },
                realIndex + 1,
                ": ",
                event.type));
        }))),
        React.createElement(Spacer, null),
        React.createElement(Box, { marginTop: 1 },
            React.createElement(Text, { color: "gray", dimColor: true }, "\u2191/\u2193 : select"))));
};