ez-formbecauseican
Version:
Forms made Ez
268 lines • 11.9 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importDefault(require("react"));
var InputGenerator_1 = require("./InputGenerator");
var cloneDeep_1 = require("./cloneDeep");
var EzForm = (function (_super) {
tslib_1.__extends(EzForm, _super);
function EzForm(props) {
var _this = _super.call(this, props) || this;
_this.track = function (keyName, val, index) {
if (_this.state.schema[keyName].tracked !== false) {
var fieldValues = _this.state.fieldValues;
fieldValues[index][keyName] = val;
_this.setState(fieldValues);
}
};
_this.validateField = function (keyName, index) {
var schemaValue = _this.props.schema[keyName];
var values = _this.state.fieldValues[index];
if ((schemaValue.required != true && values[keyName] == "") ||
values[keyName] == null) {
_this.setErrors(keyName, index, null);
return null;
}
if ("visibleIf" in schemaValue &&
!schemaValue.visibleIf(_this.state.fieldValues[index])) {
_this.setErrors(keyName, index, null);
}
if (!("visibleIf" in schemaValue) ||
schemaValue.visibleIf(_this.state.fieldValues[index])) {
var validate = schemaValue.validate(values[keyName], values);
if (validate && typeof validate !== "string") {
throw new Error("All validate functions must return a string. please fix key: " + keyName);
}
_this.setErrors(keyName, index, validate);
}
return null;
};
_this.onChangeEvent = function (e, keyName, index) {
var value;
if (_this.props.multiForm) {
value = _this.state.fieldValues;
}
else {
value = _this.state.fieldValues[0];
}
_this.props.onChange && _this.props.onChange(value);
if (keyName in _this.props.schema && _this.props.schema[keyName].onChange) {
var changeVals = _this.props.schema[keyName].onChange(e, _this.state.fieldValues[keyName], _this.state.fieldValues);
if (changeVals) {
_this.track(keyName, changeVals, index);
}
}
};
_this.onBlurEvent = function (e, keyName, index) {
var fieldValues = _this.state.fieldValues;
var value;
if (_this.props.multiForm) {
value = fieldValues;
}
else {
value = fieldValues[0];
}
_this.props.onBlur && _this.props.onBlur(value);
if (keyName in _this.props.schema && _this.props.schema[keyName].onBlur) {
var blurVals = _this.props.schema[keyName].onBlur(e, _this.state.fieldValues[index][keyName], _this.state.fieldValues[index]);
if (blurVals) {
_this.track(keyName, blurVals, index);
}
}
};
_this.addFields = function () {
var _a = _this.state, schema = _a.schema, fieldValues = _a.fieldValues, errors = _a.errors;
var values = {};
for (var _i = 0, _b = Object.keys(_this.props.schema); _i < _b.length; _i++) {
var key = _b[_i];
if (schema[key].tracked === false)
break;
if (_this.props.schemaModifier && key in _this.props.schemaModifier) {
schema[key] = tslib_1.__assign({}, schema[key], _this.props.schemaModifier[key]);
}
values[key] = schema[key].initialValue || null;
}
_this.setState({
fieldValues: fieldValues.concat([values]),
errors: errors.concat([{}])
}, function () {
_this.props.onBlur && _this.props.onBlur(_this.state.fieldValues);
});
};
_this.removeFields = function (index) {
var fieldValues = _this.state.fieldValues;
var values = fieldValues.filter(function (_, i) { return i !== index; });
_this.setState({ fieldValues: values.slice() }, function () {
_this.props.onBlur && _this.props.onBlur(_this.state.fieldValues);
});
};
_this.clearForm = function (index) {
var fieldValues;
var resetIndex = function (index) {
var values = {};
for (var _i = 0, _a = Object.keys(_this.state.fieldValues[index]); _i < _a.length; _i++) {
var key = _a[_i];
values[key] = "";
}
return values;
};
if (index) {
fieldValues = _this.state.fieldValues;
fieldValues[index] = resetIndex(index);
}
else {
fieldValues = _this.state.fieldValues.map(function (_, i) {
return resetIndex(i);
});
}
_this.setState({ fieldValues: fieldValues });
};
_this.state = {
formInited: false,
fieldValues: [],
errors: [],
hasErrors: false,
schema: {}
};
return _this;
}
EzForm.prototype.setErrors = function (keyName, index, validate) {
var errors = this.state.errors;
var hasErrors = false;
if (validate != undefined) {
errors[index][keyName] = validate;
}
else if (keyName in errors[index]) {
delete errors[index][keyName];
}
for (var index_1 in errors) {
if (Object.keys(errors[index_1]).length > 0) {
hasErrors = true;
break;
}
}
this.setState({ errors: errors, hasErrors: hasErrors });
};
EzForm.prototype.validateAll = function (vals) {
var _this = this;
return new Promise(function (resolve) {
for (var index in vals) {
for (var _i = 0, _a = Object.keys(vals[index]); _i < _a.length; _i++) {
var key = _a[_i];
var schemaVal = _this.props.schema[key];
schemaVal && schemaVal.validate && _this.validateField(key, index);
}
}
resolve("done");
});
};
EzForm.prototype.onSubmitEvent = function (e) {
var _this = this;
e.preventDefault();
var values = this.state.fieldValues;
for (var index in values) {
for (var _i = 0, _a = Object.keys(this.props.schema); _i < _a.length; _i++) {
var key = _a[_i];
if (this.props.schema[key].onSubmit) {
values[index][key] =
this.props.schema[key].onSubmit(values[index][key], values[index]) || values[index][key];
}
}
}
this.validateAll(values).then(function () {
if (_this.state.hasErrors) {
return false;
}
if (_this.props.multiForm) {
_this.props.onSubmit && _this.props.onSubmit(values);
}
else {
_this.props.onSubmit && _this.props.onSubmit(values[0]);
}
return null;
});
};
EzForm.prototype.initForm = function () {
var _this = this;
var schema = this.props.schema;
var errors = [];
var values = [{}];
if (this.props.multiForm && Array.isArray(this.props.initialValues)) {
values = cloneDeep_1.cloneDeep(this.props.initialValues);
}
else if (this.props.initialValues) {
values = [cloneDeep_1.cloneDeep(this.props.initialValues)];
}
else if (this.props.initialValues &&
this.props.multiForm &&
Array.isArray(this.props.initialValues) != true) {
throw new Error("initialValues must be an Array of objects if multiForm is set true");
}
for (var index in values) {
errors.push({});
for (var _i = 0, _a = Object.keys(this.props.schema); _i < _a.length; _i++) {
var key = _a[_i];
if (schema[key].tracked === false)
break;
if (this.props.schemaModifier && key in this.props.schemaModifier) {
schema[key] = tslib_1.__assign({}, schema[key], this.props.schemaModifier[key]);
}
if (!(key in values[index]) || values[index][key] === undefined) {
values[index][key] =
schema[key].initialValue !== undefined
? schema[key].initialValue
: "";
}
}
}
this.setState({ fieldValues: values, schema: schema, errors: errors, formInited: true }, function () {
if (_this.props.validateInitialValues) {
_this.validateAll(values);
}
});
};
EzForm.prototype.componentDidMount = function () {
this.initForm();
};
EzForm.prototype.componentDidUpdate = function (prevProps) {
if (this.props.viewMode != prevProps.viewMode) {
this.initForm();
}
};
EzForm.prototype.renderInputs = function (index) {
return InputGenerator_1.InputGenerator(this.props, this.state.schema, this.track, this.validateField, this.onBlurEvent, this.onChangeEvent, this.props.initialValues, this.state.fieldValues, this.state.errors, this.props.disabled, index, this.props.featureFlags, this.props.viewMode, this.props.viewModeDefaultText || "N/A");
};
EzForm.prototype.resetForm = function () {
this.initForm();
};
EzForm.prototype.generateNewInput = function (obj) {
var schema = tslib_1.__assign({}, this.state.schema, obj);
this.setState({ schema: schema });
};
EzForm.prototype.render = function () {
var _this = this;
var inputs = this.state.fieldValues.map(function (obj, i) { return obj && _this.renderInputs(i); });
var form = this.props.inputsOnly ? (this.props.multiForm === true ? (inputs) : (inputs[0])) : (react_1.default.createElement(react_1.default.Fragment, null, !this.props.inputsOnly &&
inputs.map(function (input) {
return input &&
Object.keys(input).map(function (key) { return (react_1.default.createElement(react_1.default.Fragment, { key: key }, input[key].html)); });
})));
var FormComponent = this.props.formComponent
? this.props.formComponent
: "form";
return (react_1.default.createElement(react_1.default.Fragment, null, this.state.formInited && (react_1.default.createElement(FormComponent, { className: this.props.className ? this.props.className : "", onSubmit: function (e) { return _this.onSubmitEvent(e); } },
this.props.children({
form: form,
fieldValues: this.state.fieldValues,
errors: this.state.errors,
clearForm: this.clearForm,
resetForm: function () { return _this.resetForm(); },
addFields: this.addFields,
removeFields: this.removeFields
}),
this.props.showSubmitButton != false && !this.props.viewMode && (react_1.default.createElement("button", { type: "submit", disabled: this.props.disabled }, "submit"))))));
};
return EzForm;
}(react_1.default.Component));
exports.EzForm = EzForm;
//# sourceMappingURL=EzForm.js.map