ui-input-tv4

Input components enriched with a tv4 validator. You can pass the schema as a property on the various input components instead of a validator property.

To provide custom error messages or format validators, wrap your app in the <Tv4Container>.

Usage

import { TextField, Tv4Container, ErrorCodes } from '@ambassify/ui-input-tv4';

const messages = {
    [ErrorCodes.STRING_LENGTH_LONG]: ({ minimum }) => <span>Enter at least {minimum} characters</span>,
    'FORMAT.email': 'Please enter a valid e-mail address'
};

const formats = {
    'email': value => value.indexOf('@') > -1 ? null : 'It must be foo!'
};

class App extends React.Component {
    render() {
        return (
            <div>
                <TextField
                    label="Not customized"
                    schema={{ type: 'string', minLength: 2 }} />
                <Tv4Container messages={messages} formats={formats}>
                    <TextField
                        label="I have customized validation"
                        schema={{ type: 'string', format: 'email', minLength: 5 }} />
                </TV4Container>
            </div>
        );
    }
}

Error codes

These are taken from https://github.com/geraintluff/tv4/blob/master/tv4.js#L1370

var ErrorCodes = {
    INVALID_TYPE: 0,
    ENUM_MISMATCH: 1,
    ANY_OF_MISSING: 10,
    ONE_OF_MISSING: 11,
    ONE_OF_MULTIPLE: 12,
    NOT_PASSED: 13,
    // Numeric errors
    NUMBER_MULTIPLE_OF: 100,
    NUMBER_MINIMUM: 101,
    NUMBER_MINIMUM_EXCLUSIVE: 102,
    NUMBER_MAXIMUM: 103,
    NUMBER_MAXIMUM_EXCLUSIVE: 104,
    NUMBER_NOT_A_NUMBER: 105,
    // String errors
    STRING_LENGTH_SHORT: 200,
    STRING_LENGTH_LONG: 201,
    STRING_PATTERN: 202,
    // Object errors
    OBJECT_PROPERTIES_MINIMUM: 300,
    OBJECT_PROPERTIES_MAXIMUM: 301,
    OBJECT_REQUIRED: 302,
    OBJECT_ADDITIONAL_PROPERTIES: 303,
    OBJECT_DEPENDENCY_KEY: 304,
    // Array errors
    ARRAY_LENGTH_SHORT: 400,
    ARRAY_LENGTH_LONG: 401,
    ARRAY_UNIQUE: 402,
    ARRAY_ADDITIONAL_ITEMS: 403,
    // Custom/user-defined errors
    FORMAT_CUSTOM: 500,
    KEYWORD_CUSTOM: 501,
    // Schema structure
    CIRCULAR_REFERENCE: 600,
    // Non-standard validation options
    UNKNOWN_PROPERTY: 1000
};