ink-form/lib/SubmitButton.js

Complex user-friendly form component for React Ink

import React from 'react';
import { Text, Box, useFocus, useInput } from 'ink';
export const SubmitButton = props => {
    const { isFocused } = useFocus({ isActive: props.canSubmit });
    useInput((input, key) => {
        if (key.return && isFocused && props.canSubmit) {
            props.onSubmit();
        }
    });
    return (React.createElement(Box, { marginRight: 2 },
        React.createElement(Box, { marginRight: 2, paddingY: 1 },
            React.createElement(Text, null, !props.canSubmit
                ? 'There are still required inputs you have not competed yet.'
                : isFocused
                    ? 'Press Enter to submit form'
                    : 'Use the arrow keys to navigate to the submit button.')),
        React.createElement(Box, { borderStyle: 'round', borderColor: !props.canSubmit ? 'gray' : isFocused ? 'blue' : 'white', paddingX: 2 },
            React.createElement(Text, { color: !props.canSubmit ? 'gray' : isFocused ? 'blue' : 'white', bold: true, underline: isFocused }, props.canSubmit ? 'Submit form' : 'Cannot submit form yet'))));
};