Fix sats output
This commit is contained in:
Binary file not shown.
@@ -12,6 +12,53 @@
|
||||
import React, { useState, useEffect, useCallback } from 'react';
|
||||
import { Box, Text, useInput } from 'ink';
|
||||
import TextInput from 'ink-text-input';
|
||||
|
||||
/**
|
||||
* Isolated Variable Input Component.
|
||||
* This component handles its own input without interference from parent useInput hooks.
|
||||
*/
|
||||
interface VariableInputFieldProps {
|
||||
variable: { id: string; name: string; type: string; hint?: string; value: string };
|
||||
index: number;
|
||||
isFocused: boolean;
|
||||
onChange: (index: number, value: string) => void;
|
||||
onSubmit: () => void;
|
||||
borderColor: string;
|
||||
focusColor: string;
|
||||
}
|
||||
|
||||
function VariableInputField({
|
||||
variable,
|
||||
index,
|
||||
isFocused,
|
||||
onChange,
|
||||
onSubmit,
|
||||
borderColor,
|
||||
focusColor,
|
||||
}: VariableInputFieldProps): React.ReactElement {
|
||||
return (
|
||||
<Box flexDirection="column" marginBottom={1}>
|
||||
<Text color={focusColor}>{variable.name}</Text>
|
||||
{variable.hint && (
|
||||
<Text color={borderColor} dimColor>({variable.hint})</Text>
|
||||
)}
|
||||
<Box
|
||||
borderStyle="single"
|
||||
borderColor={isFocused ? focusColor : borderColor}
|
||||
paddingX={1}
|
||||
marginTop={1}
|
||||
>
|
||||
<TextInput
|
||||
value={variable.value}
|
||||
onChange={value => onChange(index, value)}
|
||||
onSubmit={onSubmit}
|
||||
focus={isFocused}
|
||||
placeholder={`Enter ${variable.name}...`}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
import { StepIndicator, type Step } from '../components/ProgressBar.js';
|
||||
import { Button } from '../components/Button.js';
|
||||
import { useNavigation } from '../hooks/useNavigation.js';
|
||||
@@ -498,24 +545,9 @@ export function ActionWizardScreen(): React.ReactElement {
|
||||
}
|
||||
}, [focusedInput, variables.length]);
|
||||
|
||||
// Handle Tab key when in TextInput mode (separate from main useInput to allow Tab navigation)
|
||||
useInput((input, key) => {
|
||||
if (key.tab) {
|
||||
if (focusedInput < variables.length - 1) {
|
||||
setFocusedInput(prev => prev + 1);
|
||||
} else {
|
||||
setFocusArea('buttons');
|
||||
setFocusedButton('next');
|
||||
}
|
||||
}
|
||||
// Escape to go back to content from anywhere
|
||||
if (key.escape && focusArea === 'buttons') {
|
||||
setFocusArea('content');
|
||||
}
|
||||
}, { isActive: textInputHasFocus });
|
||||
|
||||
// Handle keyboard navigation for non-TextInput modes
|
||||
// IMPORTANT: Disable when TextInput should have focus to allow character input
|
||||
// Keyboard handler - COMPLETELY DISABLED when TextInput has focus
|
||||
// This allows TextInput to receive character input without interference
|
||||
// When TextInput is focused, use Enter to navigate (handled by onSubmit callback)
|
||||
useInput((input, key) => {
|
||||
// Tab to switch between content and buttons
|
||||
if (key.tab) {
|
||||
@@ -630,31 +662,21 @@ export function ActionWizardScreen(): React.ReactElement {
|
||||
<Text color={colors.text} bold>Enter required values:</Text>
|
||||
<Box marginTop={1} flexDirection="column">
|
||||
{variables.map((variable, index) => (
|
||||
<Box key={variable.id} flexDirection="column" marginBottom={1}>
|
||||
<Text color={colors.primary}>{variable.name}</Text>
|
||||
{variable.hint && (
|
||||
<Text color={colors.textMuted} dimColor>({variable.hint})</Text>
|
||||
)}
|
||||
<Box
|
||||
borderStyle="single"
|
||||
borderColor={focusArea === 'content' && focusedInput === index ? colors.focus : colors.border}
|
||||
paddingX={1}
|
||||
marginTop={1}
|
||||
>
|
||||
<TextInput
|
||||
value={variable.value}
|
||||
onChange={value => updateVariable(index, value)}
|
||||
onSubmit={handleTextInputSubmit}
|
||||
focus={focusArea === 'content' && focusedInput === index}
|
||||
placeholder={`Enter ${variable.name}...`}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
<VariableInputField
|
||||
key={variable.id}
|
||||
variable={variable}
|
||||
index={index}
|
||||
isFocused={focusArea === 'content' && focusedInput === index}
|
||||
onChange={updateVariable}
|
||||
onSubmit={handleTextInputSubmit}
|
||||
borderColor={colors.border as string}
|
||||
focusColor={colors.primary as string}
|
||||
/>
|
||||
))}
|
||||
</Box>
|
||||
<Box marginTop={1}>
|
||||
<Text color={colors.textMuted} dimColor>
|
||||
Enter: Next field • Tab: Go to buttons
|
||||
Type your value, then press Enter to continue
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
Reference in New Issue
Block a user