react-form-with-constraints
Version:
Simple form validation for React
90 lines (89 loc) • 3.12 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Input = void 0;
const React = require("react");
const prop_types_1 = require("prop-types");
const FormWithConstraints_1 = require("./FormWithConstraints");
class Input extends React.Component {
constructor() {
super(...arguments);
this.state = {
field: undefined
};
this.fieldWillValidate = (fieldName) => {
if (fieldName === this.props.name) {
this.setState({ field: 'pending' });
}
};
this.fieldDidValidate = (field) => {
if (field.name === this.props.name) {
this.setState({ field });
}
};
this.fieldDidReset = (field) => {
if (field.name === this.props.name) {
this.setState({ field: undefined });
}
};
}
componentDidMount() {
this.context.form.addFieldWillValidateEventListener(this.fieldWillValidate);
this.context.form.addFieldDidValidateEventListener(this.fieldDidValidate);
this.context.form.addFieldDidResetEventListener(this.fieldDidReset);
}
componentWillUnmount() {
this.context.form.removeFieldWillValidateEventListener(this.fieldWillValidate);
this.context.form.removeFieldDidValidateEventListener(this.fieldDidValidate);
this.context.form.removeFieldDidResetEventListener(this.fieldDidReset);
}
fieldValidationStates() {
const { field } = this.state;
const states = [];
if (field !== undefined) {
if (field === 'pending') {
states.push('isPending');
}
else {
if (field.hasErrors())
states.push('hasErrors');
if (field.hasWarnings())
states.push('hasWarnings');
if (field.hasInfos())
states.push('hasInfos');
if (field.isValid())
states.push('isValid');
}
}
return states;
}
render() {
const { innerRef, className, classes, ...inputProps } = this.props;
const validationStates = this.fieldValidationStates();
let classNames = className;
validationStates.forEach(validationState => {
const tmp = classes[validationState];
if (tmp !== undefined) {
if (classNames !== undefined) {
classNames += ` ${tmp}`;
}
else {
classNames = tmp;
}
}
});
return React.createElement("input", { ref: innerRef, ...inputProps, className: classNames });
}
}
exports.Input = Input;
Input.contextTypes = {
form: (0, prop_types_1.instanceOf)(FormWithConstraints_1.FormWithConstraints).isRequired
};
Input.defaultProps = {
classes: {
isPending: 'is-pending',
hasErrors: 'has-errors',
hasWarnings: 'has-warnings',
hasInfos: 'has-infos',
isValid: 'is-valid'
}
};