ink-form/lib/managers/StringFormFieldManager.js

Complex user-friendly form component for React Ink

import React from 'react';
import { Box, Transform } from 'ink';
import TextInput from 'ink-text-input';
export class StringFormFieldManager {
    type = 'string';
    renderField = props => (React.createElement(Box, { borderStyle: 'round', width: "100%" },
        React.createElement(TextInput, { value: props.value ?? '', onChange: value => {
                props.onChange(value);
                if (props.field.regex && !props.field.regex.test(value)) {
                    props.onError(`Value does not conform to regular expression: ${props.field.regex}`);
                }
                else {
                    props.onClearError();
                }
            }, placeholder: props.field.placeholder, onSubmit: () => props.onSetEditingField(undefined), mask: props.field.mask })));
    renderValue = props => (React.createElement(Transform, { transform: props.value !== undefined && props.field.mask
            ? text => text
                .split('')
                .map(char => '*')
                .join('')
            : text => text }, props.value));
}