ink-form/lib/managers/BooleanFormFieldManager.js

Complex user-friendly form component for React Ink

import React from 'react';
import { Box, Text, useInput } from 'ink';
export class BooleanFormFieldManager {
    type = 'boolean';
    renderField = props => {
        useInput((input, key) => {
            if (input === ' ') {
                props.onChange(!props.value);
            }
        });
        return (React.createElement(Box, { width: "100%", borderStyle: 'round', borderColor: props.value ? 'green' : 'gray', marginBottom: 2 },
            React.createElement(Box, { marginRight: 2 },
                React.createElement(Text, { color: props.value ? 'green' : 'gray' }, props.value === undefined ? '[Not set]' : props.value ? '[True]' : '[False]')),
            React.createElement(Box, { flexGrow: 1 },
                React.createElement(Text, null, "Press Space to toggle value"))));
    };
    renderValue = props => (React.createElement(Text, null, props.value === undefined ? '[Not set]' : props.value ? '[True]' : '[False]'));
}