wehub-resource-sync
39 lines
1.1 KiB
React
39 lines
1.1 KiB
React
import React, { useState } from "react";
|
|
import { Box, Text, useInput } from "ink";
|
|
|
|
export function MenuSelect({ items = [], onSelect, initial = 0 }) {
|
|
const [idx, setIdx] = useState(Math.min(initial, Math.max(0, items.length - 1)));
|
|
|
|
useInput((input, key) => {
|
|
if (items.length === 0) return;
|
|
if (key.upArrow) setIdx((i) => (i - 1 + items.length) % items.length);
|
|
if (key.downArrow) setIdx((i) => (i + 1) % items.length);
|
|
if (key.return && onSelect) onSelect(items[idx]);
|
|
const n = parseInt(input, 10);
|
|
if (!isNaN(n) && n >= 1 && n <= items.length) {
|
|
const newIdx = n - 1;
|
|
setIdx(newIdx);
|
|
if (onSelect) onSelect(items[newIdx]);
|
|
}
|
|
});
|
|
|
|
return (
|
|
<Box flexDirection="column">
|
|
{items.map((item, i) => (
|
|
<Box key={i}>
|
|
<Text bold={i === idx} color={i === idx ? "yellow" : undefined} dimColor={item.disabled}>
|
|
{i === idx ? "▶ " : " "}
|
|
{item.label}
|
|
</Text>
|
|
{item.hint && (
|
|
<Text dimColor>
|
|
{" "}
|
|
{item.hint}
|
|
</Text>
|
|
)}
|
|
</Box>
|
|
))}
|
|
</Box>
|
|
);
|
|
}
|