@simpozio/contact-form
Version:
Package for Contact Form component
99 lines • 6.27 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importDefault(require("react"));
var lodash_1 = __importDefault(require("lodash"));
var styled_components_1 = require("styled-components");
var dist_1 = require("@simpozio/aha-button/dist");
var validSchema_1 = __importDefault(require("./validSchema"));
var styles_1 = require("./styles");
var FormShort = function (_a) {
var className = _a.className, fields = _a.fields, formText = _a.formText, bottomText = _a.bottomText, onValidate = _a.onValidate, onValid = _a.onValid, onChange = _a.onChange, onSubmit = _a.onSubmit, onError = _a.onError, _b = _a.validSchema, validSchema = _b === void 0 ? validSchema_1.default : _b, _c = _a.theme, theme = _c === void 0 ? styles_1.DEFAULT_THEME : _c, styles = _a.styles;
var initialValues = {};
var fieldsPreset = fields;
lodash_1.default.forIn(fields, function (_a, name) {
var _b;
var initialValue = _a.initialValue;
lodash_1.default.assign(initialValues, (_b = {},
_b[name] = initialValue,
_b));
});
var handleValidate = function (props) {
return new Promise(function (resolve) {
var values = {};
lodash_1.default.forIn(props.fields, function (_a, name) {
var value = _a.value;
values[name] = value;
});
if (lodash_1.default.isFunction(onValidate)) {
onValidate(props)
.then(resolve)
.catch(lodash_1.default.noop);
}
var formErrors = {};
try {
validSchema.validateSync(values, { abortEarly: false });
}
catch (errors) {
lodash_1.default.forEach(errors.inner, function (error) {
formErrors[error.path] = error.message;
});
}
resolve(formErrors);
});
};
var handleChange = function (_a) {
var fields = _a.fields, isValid = _a.isValid, isSubmitted = _a.isSubmitted;
return new Promise(function (resolve) {
lodash_1.default.forIn(fields, function (_a, key) {
var value = _a.value;
fields[key].value = lodash_1.default.trim(value);
});
if (lodash_1.default.isFunction(onChange)) {
onChange({ fields: fields, isValid: isValid, isSubmitted: isSubmitted })
.then(function (returnedFields) {
if (returnedFields && !lodash_1.default.isEmpty(returnedFields)) {
lodash_1.default.forIn(returnedFields, function (_a, key) {
var value = _a.value;
fields[key].value = lodash_1.default.trim(value);
});
}
resolve(fields);
})
.catch(lodash_1.default.noop);
}
else {
resolve(fields);
}
});
};
return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme },
react_1.default.createElement(styles_1.Container, { styles: styles },
react_1.default.createElement(styles_1.StyledForm, { className: className, initialValues: initialValues, onChange: handleChange, onValid: onValid, onValidate: handleValidate, onSubmit: onSubmit, onError: onError }, function (_a) {
var fields = _a.fields, formError = _a.formError, onChange = _a.onChange, isValid = _a.isValid, isSubmitting = _a.isSubmitting, updateForm = _a.updateForm, submitForm = _a.submitForm;
return (react_1.default.createElement(react_1.default.Fragment, null,
lodash_1.default.has(fieldsPreset, 'name') && (react_1.default.createElement(styles_1.FormGroup, null,
react_1.default.createElement(styles_1.StyledField, { name: "name", placeholder: lodash_1.default.get(fieldsPreset, ['name', 'placeholder']), label: lodash_1.default.get(fieldsPreset, ['name', 'label']), field: fields['name'], onChange: onChange, onBlur: updateForm }))),
lodash_1.default.has(fields, 'phone') && (react_1.default.createElement(styles_1.FormGroup, null,
react_1.default.createElement(styles_1.StyledField, { type: "tel", placeholder: lodash_1.default.get(fieldsPreset, [
'phone',
'placeholder'
]), label: lodash_1.default.get(fieldsPreset, ['phone', 'label']), name: "phone", field: fields['phone'], onChange: onChange, onBlur: updateForm }))),
lodash_1.default.has(fields, 'email') && (react_1.default.createElement(styles_1.FormGroup, null,
react_1.default.createElement(styles_1.StyledField, { type: "email", name: "email", placeholder: lodash_1.default.get(fieldsPreset, [
'email',
'placeholder'
]), label: lodash_1.default.get(fieldsPreset, ['email', 'label']), field: fields['email'], onChange: onChange, onBlur: updateForm }))),
formText && (react_1.default.createElement(styles_1.FormGroup, null,
react_1.default.createElement(styles_1.FormText, null, formText))),
react_1.default.createElement(styles_1.FormGroup, null,
react_1.default.createElement(styles_1.StyledButton, { outlined: true, icon: react_1.default.createElement(dist_1.IconCheck, null), onClick: submitForm, disabled: !isValid, pending: isSubmitting, styles: styles_1.buttonStyles })),
formError && (react_1.default.createElement(styles_1.FormGroup, null,
react_1.default.createElement(styles_1.Error, null, formError))),
bottomText && react_1.default.createElement(styles_1.BottomText, null, bottomText)));
}))));
};
exports.default = FormShort;
//# sourceMappingURL=index.js.map