@letanure/resend-cli
Version:
A command-line interface for Resend email API
23 lines • 3.92 kB
JavaScript
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import { Box, Text } from 'ink';
export const SelectField = ({ label, options, value, isActive, helpText, errorMessage, labelWidth = 22, display = 'inline', onToggle: _onToggle, }) => {
const labelColor = isActive ? 'cyan' : 'white';
const selectedOption = options.find((option) => option.value === value);
// Compact display - shows current selection like a select dropdown
if (display === 'compact') {
return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Box, { width: labelWidth, children: _jsxs(Text, { bold: true, color: labelColor, children: [label, ":"] }) }), _jsxs(Box, { flexDirection: "row", children: [_jsx(Text, { color: "gray", children: "[" }), _jsx(Text, { bold: true, children: selectedOption?.label || 'Unknown' }), _jsx(Text, { color: "gray", children: "]" }), isActive && _jsx(Text, { color: "gray", children: " (Use \u2190/\u2192 or Space to change)" })] })] }), _jsxs(Box, { marginLeft: labelWidth, marginTop: 0, minHeight: 1, children: [isActive && helpText && !errorMessage && _jsx(Text, { dimColor: true, children: helpText }), errorMessage && _jsx(Text, { color: "red", children: errorMessage }), !isActive && !errorMessage && _jsx(Text, { children: " " })] })] }));
}
// Inline display (default) - shows all options side by side with checkboxes
if (display === 'inline' || display === undefined) {
return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Box, { width: labelWidth, children: _jsxs(Text, { bold: true, color: labelColor, children: [label, ":"] }) }), _jsxs(Box, { flexDirection: "row", children: [options.map((option, index) => {
const isSelected = option.value === value;
return (_jsxs(Box, { marginRight: index < options.length - 1 ? 1 : 0, children: [_jsx(Text, { color: isSelected ? 'green' : 'gray', children: isSelected ? '[✓]' : '[ ]' }), _jsx(Text, { children: " " }), _jsx(Text, { bold: isSelected, children: option.label }), index < options.length - 1 && _jsx(Text, { color: "gray", children: " | " })] }, String(option.value)));
}), isActive && _jsx(Text, { color: "gray", children: " (Use \u2190/\u2192 or Space)" })] })] }), _jsxs(Box, { marginLeft: labelWidth, marginTop: 0, minHeight: 1, children: [isActive && helpText && !errorMessage && _jsx(Text, { dimColor: true, children: helpText }), errorMessage && _jsx(Text, { color: "red", children: errorMessage }), !isActive && !errorMessage && _jsx(Text, { children: " " })] })] }));
}
// Stacked display - shows all options with checkboxes
return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Box, { width: labelWidth, children: _jsxs(Text, { bold: true, color: labelColor, children: [label, ":"] }) }), _jsx(Box, { flexDirection: "column", children: options.map((option, index) => {
const isSelected = option.value === value;
return (_jsxs(Box, { marginBottom: index < options.length - 1 ? 0 : 0, children: [_jsx(Text, { color: isSelected ? 'green' : 'gray', children: isSelected ? '[✓]' : '[ ]' }), _jsx(Text, { children: " " }), _jsx(Text, { bold: isSelected, children: option.label }), isSelected && isActive && _jsx(Text, { color: "gray", children: " (Use \u2191/\u2193 to navigate options, Space to select)" })] }, String(option.value)));
}) })] }), _jsxs(Box, { marginLeft: labelWidth, marginTop: 0, minHeight: 1, children: [isActive && helpText && !errorMessage && _jsx(Text, { dimColor: true, children: helpText }), errorMessage && _jsx(Text, { color: "red", children: errorMessage }), !isActive && !errorMessage && _jsx(Text, { children: " " })] })] }));
};
//# sourceMappingURL=SelectField.js.map