@dugongjs/cli
Version:
29 lines (28 loc) • 1.97 kB
JavaScript
import { Box, Spacer, Text } from "ink";
import SelectInput from "ink-select-input";
import TextInput from "ink-text-input";
import React from "react";
import { HotkeyIndicator } from "../components/hotkey-indicator.js";
export const AggregateIdSelectPane = ({ isFocused, isLoading, error, selectedType, ids, selectedId, setSelectedId }) => {
const [filter, setFilter] = React.useState("");
const filteredItems = React.useMemo(() => {
return ids
.filter((id) => id.toLowerCase().includes(filter.toLowerCase()))
.map((id) => ({ label: id, value: id }));
}, [ids, filter]);
return (React.createElement(Box, { flexDirection: "column", width: "100%", height: "100%" },
React.createElement(Text, { bold: true },
selectedType,
" list (",
ids.length,
")"),
React.createElement(Box, null,
React.createElement(Text, null,
React.createElement(Text, { color: "gray" }, "Search: "),
React.createElement(TextInput, { value: filter, onChange: setFilter, showCursor: true, focus: isFocused }))),
React.createElement(Box, { flexDirection: "column", width: "100%", marginTop: 1 }, isLoading ? (React.createElement(Text, { color: "gray" }, "Loading IDs\u2026")) : error ? (React.createElement(Text, { color: "red" }, error)) : filteredItems.length === 0 ? (React.createElement(Text, { color: "gray" }, "No aggregates found")) : (React.createElement(SelectInput, { items: filteredItems, onSelect: (item) => setSelectedId(item.value), initialIndex: selectedId ? ids.indexOf(selectedId) : 0, isFocused: isFocused }))),
React.createElement(Spacer, null),
React.createElement(Box, { marginTop: 1, flexDirection: "column" },
React.createElement(HotkeyIndicator, { hotkey: "\u2191/\u2193", label: "navigate" }),
React.createElement(HotkeyIndicator, { hotkey: "\u21B5", label: "select" }))));
};