@letanure/resend-cli
Version:
A command-line interface for Resend email API
71 lines • 5.05 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Box, Text, useInput } from 'ink';
import { useState } from 'react';
export const InputWithSelector = ({ label, value, onChange, placeholder = '', helpText, isFocused = false, error, labelWidth = 22, disabled = false, onSelectorOpen, }) => {
const [cursorPosition, setCursorPosition] = useState(value.length);
const [focusState, setFocusState] = useState('input');
useInput((input, key) => {
if (!isFocused || disabled) {
return;
}
// Handle focus switching between input and button
if (key.tab || key.rightArrow) {
if (focusState === 'input') {
setFocusState('button');
}
else {
setFocusState('input');
}
return;
}
if (key.leftArrow && focusState === 'button') {
setFocusState('input');
return;
}
// Handle button actions
if (focusState === 'button') {
if (input === ' ' || key.return) {
onSelectorOpen?.();
}
return;
}
// Handle input field actions (only when focused on input)
if (focusState === 'input') {
if (key.leftArrow) {
setCursorPosition(Math.max(0, cursorPosition - 1));
}
else if (key.rightArrow) {
setCursorPosition(Math.min(value.length, cursorPosition + 1));
}
else if (key.backspace || key.delete) {
if (cursorPosition > 0) {
const newValue = value.slice(0, cursorPosition - 1) + value.slice(cursorPosition);
onChange(newValue);
setCursorPosition(cursorPosition - 1);
}
}
else if (input && !key.ctrl && !key.meta) {
const newValue = value.slice(0, cursorPosition) + input + value.slice(cursorPosition);
onChange(newValue);
setCursorPosition(cursorPosition + input.length);
}
}
});
const displayValue = value || placeholder;
const showCursor = isFocused && !disabled && focusState === 'input';
const inputBorderColor = disabled ? 'gray' : error ? 'red' : isFocused && focusState === 'input' ? 'cyan' : 'gray';
const dimInputBorder = disabled || !!(error && !isFocused);
const buttonBorderColor = disabled ? 'gray' : isFocused && focusState === 'button' ? 'cyan' : 'gray';
const dimButtonBorder = disabled;
return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { flexDirection: "row", children: [_jsx(Box, { width: labelWidth, justifyContent: "flex-start", alignItems: "center", children: _jsx(Text, { bold: true, color: disabled ? 'gray' : isFocused ? 'cyan' : 'white', dimColor: disabled, children: label }) }), _jsxs(Box, { flexDirection: "row", children: [_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { children: _jsx(Box, { width: 50, children: Array.from({ length: 50 }).map((_, i) => {
const uniqueKey = `input-${label}-pos-${i}`;
if (showCursor && i === cursorPosition) {
return (_jsx(Text, { color: "white", children: "\u2502" }, uniqueKey));
}
if (i < displayValue.length) {
return (_jsx(Text, { color: value ? (disabled ? 'gray' : 'white') : 'gray', dimColor: disabled, children: displayValue[i] }, uniqueKey));
}
return _jsx(Text, { children: " " }, uniqueKey);
}) }) }), _jsx(Box, { children: _jsx(Text, { color: inputBorderColor, dimColor: dimInputBorder, children: '─'.repeat(50) }) })] }), _jsxs(Box, { flexDirection: "column", marginLeft: 1, children: [_jsx(Box, { children: _jsx(Box, { width: 12, children: _jsx(Text, { color: disabled ? 'gray' : isFocused && focusState === 'button' ? 'cyan' : 'white', dimColor: disabled, children: "[ select ID]" }) }) }), _jsx(Box, { children: _jsx(Text, { color: buttonBorderColor, dimColor: dimButtonBorder, children: '─'.repeat(12) }) })] })] })] }), !error && helpText && isFocused && focusState === 'input' && (_jsx(Box, { marginLeft: labelWidth, children: _jsx(Text, { dimColor: true, color: "gray", children: helpText }) })), isFocused && focusState === 'button' && (_jsx(Box, { marginLeft: labelWidth, children: _jsx(Text, { dimColor: true, color: "gray", children: "Press Space to open selection list" }) })), error && (_jsx(Box, { marginLeft: labelWidth, children: _jsx(Text, { color: "red", children: error }) })), !error && !(helpText && isFocused) && _jsx(Box, { marginBottom: 1 })] }));
};
//# sourceMappingURL=InputWithSelector.js.map