@simpozio/contact-form
Version:
Package for Contact Form component
161 lines • 7 kB
JavaScript
"use strict";
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
result["default"] = mod;
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importStar(require("react"));
var lodash_1 = __importDefault(require("lodash"));
var Form = function (_a) {
var className = _a.className, action = _a.action, _b = _a.method, method = _b === void 0 ? 'GET' : _b, initialValues = _a.initialValues, onChange = _a.onChange, onValidate = _a.onValidate, onValid = _a.onValid, onSubmit = _a.onSubmit, onError = _a.onError, children = _a.children;
var _c = react_1.useState(false), isSubmitting = _c[0], setSubmitting = _c[1];
var _d = react_1.useState(false), isValid = _d[0], setValid = _d[1];
var _e = react_1.useState(false), isSubmitted = _e[0], setSubmitted = _e[1];
var _f = react_1.useState(lodash_1.default.mapValues(initialValues, function (value) { return ({
value: value,
error: false,
touched: false
}); })), fields = _f[0], setFields = _f[1];
var _g = react_1.useState(null), error = _g[0], setError = _g[1];
var handleValidate = react_1.useCallback(function (targetFields, _a) {
if (targetFields === void 0) { targetFields = fields; }
var ignoreTouched = (_a === void 0 ? {} : _a).ignoreTouched;
if (lodash_1.default.isFunction(onValidate)) {
onValidate({ fields: targetFields, isSubmitted: isSubmitted, isValid: isValid })
.then(function (validatedFields) {
if (lodash_1.default.isObject(validatedFields)) {
lodash_1.default.forIn(targetFields, function (_a, name) {
var value = _a.value, touched = _a.touched;
targetFields[name] = {
value: value,
touched: touched,
error: ignoreTouched
? touched && Boolean(validatedFields[name])
: Boolean(validatedFields[name])
};
});
}
setFields(targetFields);
if (lodash_1.default.isEmpty(validatedFields) ||
!lodash_1.default.every(validatedFields, Boolean)) {
!isValid && setValid(true);
lodash_1.default.isFunction(onValid) &&
onValid({ fields: targetFields, isSubmitted: isSubmitted, isValid: isValid });
}
else {
isValid && setValid(false);
}
})
.catch(lodash_1.default.noop);
}
else {
setValid(true);
lodash_1.default.isFunction(onValid) &&
onValid({ fields: targetFields, isSubmitted: isSubmitted, isValid: isValid });
setFields(lodash_1.default.mapValues(targetFields, function (_a) {
var value = _a.value, touched = _a.touched;
return ({
value: value,
touched: touched,
error: false
});
}));
}
}, [fields, onValidate, isSubmitted, isValid, onValid]);
var handleChange = react_1.useCallback(function (name, value) {
var _a;
setError(null);
var newFields = __assign(__assign({}, fields), (_a = {}, _a[name] = {
value: value,
touched: value !== initialValues[name],
error: fields[name].error
}, _a));
handleValidate(newFields, { ignoreTouched: true });
}, [fields, initialValues, handleValidate]);
var updateForm = react_1.useCallback(function () {
handleValidate();
if (lodash_1.default.isFunction(onChange)) {
onChange({ fields: fields, isSubmitted: isSubmitted, isValid: isValid })
.then(function (newFields) {
if (newFields && !lodash_1.default.isEmpty(newFields)) {
setFields(newFields);
}
})
.catch(lodash_1.default.noop);
}
}, [fields, isValid, isSubmitted, onChange, handleValidate]);
var handleReset = react_1.useCallback(function () {
setFields(lodash_1.default.mapValues(initialValues, function (value) { return ({
value: value,
error: false,
touched: false
}); }));
setSubmitted(false);
setError(null);
}, [initialValues]);
var handleSubmit = react_1.useCallback(function (event) {
event.preventDefault();
setSubmitting(true);
lodash_1.default.isFunction(onSubmit) &&
onSubmit({ fields: fields, isSubmitted: isSubmitted, isValid: isValid, resetForm: handleReset })
.then(function () {
setSubmitted(true);
})
.catch(function (error) {
setError(error);
lodash_1.default.isFunction(onError) &&
onError({
fields: fields,
isSubmitted: isSubmitted,
isValid: isValid,
error: error,
resetForm: handleReset
});
})
.finally(function () { return setSubmitting(false); });
}, [onSubmit, fields, isSubmitted, isValid, handleReset, onError]);
var renderChildren = react_1.useCallback(function () {
return children({
fields: fields,
isValid: isValid,
isSubmitted: isSubmitted,
isSubmitting: isSubmitting,
updateForm: updateForm,
formError: error,
onChange: handleChange,
submitForm: handleSubmit,
resetForm: handleReset
});
}, [
isValid,
isSubmitted,
isSubmitting,
children,
fields,
error,
handleReset,
handleChange,
updateForm,
handleSubmit
]);
return (react_1.default.createElement("form", { className: className, action: action, method: method, onSubmit: handleSubmit }, renderChildren()));
};
exports.default = Form;
//# sourceMappingURL=Form.js.map