@arun-s-aot/formio-react
Version:
React renderer for formsflow form.io forms.
222 lines (221 loc) • 8.15 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _FormBuilder = _interopRequireDefault(require("./FormBuilder"));
var _set2 = _interopRequireDefault(require("lodash/set"));
var _cloneDeep2 = _interopRequireDefault(require("lodash/cloneDeep"));
var _camelCase2 = _interopRequireDefault(require("lodash/camelCase"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
const reducer = (form, _ref) => {
let {
type,
value
} = _ref;
const formCopy = (0, _cloneDeep2.default)(form);
switch (type) {
case 'formChange':
for (let prop in value) {
// eslint-disable-next-line no-prototype-builtins
if (value.hasOwnProperty(prop)) {
form[prop] = value[prop];
}
}
return form;
case 'replaceForm':
return (0, _cloneDeep2.default)(value);
case 'title':
if (type === 'title' && !form._id) {
formCopy.name = (0, _camelCase2.default)(value);
formCopy.path = (0, _camelCase2.default)(value).toLowerCase();
}
break;
}
(0, _set2.default)(formCopy, type, value);
return formCopy;
};
const FormEdit = props => {
const {
form: propsForm = {
title: '',
name: '',
path: '',
display: 'form',
type: 'form',
components: []
},
saveText,
options,
builder,
ref,
onSaveComponent,
onDeleteComponent
} = props;
const [form, dispatchFormAction] = (0, _react.useReducer)(reducer, (0, _cloneDeep2.default)(propsForm));
(0, _react.useEffect)(() => {
const {
form: newForm
} = props;
if (newForm && (form._id !== newForm._id || form.modified !== newForm.modified)) {
dispatchFormAction({
type: 'replaceForm',
value: newForm
});
}
}, [propsForm]);
const saveForm = () => {
const {
saveForm
} = props;
if (saveForm && typeof saveForm === 'function') {
saveForm(form);
}
};
const handleChange = (path, event) => {
const {
target
} = event;
const value = target.type === 'checkbox' ? target.checked : target.value;
dispatchFormAction({
type: path,
value
});
};
const formChange = newForm => dispatchFormAction({
type: 'formChange',
value: newForm
});
return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
className: "row",
ref: ref
}, /*#__PURE__*/_react.default.createElement("div", {
className: "col-lg-2 col-md-4 col-sm-4"
}, /*#__PURE__*/_react.default.createElement("div", {
id: "form-group-title",
className: "form-group"
}, /*#__PURE__*/_react.default.createElement("label", {
htmlFor: "title",
className: "control-label field-required"
}, "Title"), /*#__PURE__*/_react.default.createElement("input", {
type: "text",
className: "form-control",
id: "title",
placeholder: "Enter the form title",
value: form.title || '',
onChange: event => handleChange('title', event)
}))), /*#__PURE__*/_react.default.createElement("div", {
className: "col-lg-2 col-md-4 col-sm-4"
}, /*#__PURE__*/_react.default.createElement("div", {
id: "form-group-name",
className: "form-group"
}, /*#__PURE__*/_react.default.createElement("label", {
htmlFor: "name",
className: "control-label field-required"
}, "Name"), /*#__PURE__*/_react.default.createElement("input", {
type: "text",
className: "form-control",
id: "name",
placeholder: "Enter the form machine name",
value: form.name || '',
onChange: event => handleChange('name', event)
}))), /*#__PURE__*/_react.default.createElement("div", {
className: "col-lg-2 col-md-3 col-sm-3"
}, /*#__PURE__*/_react.default.createElement("div", {
id: "form-group-display",
className: "form-group"
}, /*#__PURE__*/_react.default.createElement("label", {
htmlFor: "name",
className: "control-label"
}, "Display as"), /*#__PURE__*/_react.default.createElement("div", {
className: "input-group"
}, /*#__PURE__*/_react.default.createElement("select", {
className: "form-control",
name: "form-display",
id: "form-display",
value: form.display || '',
onChange: event => handleChange('display', event)
}, /*#__PURE__*/_react.default.createElement("option", {
label: "Form",
value: "form"
}, "Form"), /*#__PURE__*/_react.default.createElement("option", {
label: "Wizard",
value: "wizard"
}, "Wizard"), /*#__PURE__*/_react.default.createElement("option", {
label: "PDF",
value: "pdf"
}, "PDF"))))), /*#__PURE__*/_react.default.createElement("div", {
className: "col-lg-2 col-md-3 col-sm-3"
}, /*#__PURE__*/_react.default.createElement("div", {
id: "form-group-type",
className: "form-group"
}, /*#__PURE__*/_react.default.createElement("label", {
htmlFor: "form-type",
className: "control-label"
}, "Type"), /*#__PURE__*/_react.default.createElement("div", {
className: "input-group"
}, /*#__PURE__*/_react.default.createElement("select", {
className: "form-control",
name: "form-type",
id: "form-type",
value: form.type,
onChange: event => handleChange('type', event)
}, /*#__PURE__*/_react.default.createElement("option", {
label: "Form",
value: "form"
}, "Form"), /*#__PURE__*/_react.default.createElement("option", {
label: "Resource",
value: "resource"
}, "Resource"))))), /*#__PURE__*/_react.default.createElement("div", {
className: "col-lg-2 col-md-4 col-sm-4"
}, /*#__PURE__*/_react.default.createElement("div", {
id: "form-group-path",
className: "form-group"
}, /*#__PURE__*/_react.default.createElement("label", {
htmlFor: "path",
className: "control-label field-required"
}, "Path"), /*#__PURE__*/_react.default.createElement("div", {
className: "input-group"
}, /*#__PURE__*/_react.default.createElement("input", {
type: "text",
className: "form-control",
id: "path",
placeholder: "example",
style: {
textTransform: 'lowercase',
width: '120px'
},
value: form.path || '',
onChange: event => handleChange('path', event)
})))), /*#__PURE__*/_react.default.createElement("div", {
id: "save-buttons",
className: "col-lg-2 col-md-5 col-sm-5 save-buttons float-end"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "form-group float-end"
}, /*#__PURE__*/_react.default.createElement("span", {
className: "btn btn-primary",
onClick: () => saveForm()
}, saveText)))), /*#__PURE__*/_react.default.createElement(_FormBuilder.default, {
key: form._id,
form: form,
options: options,
builder: builder,
onChange: formChange,
onSaveComponent: onSaveComponent,
onDeleteComponent: onDeleteComponent
}));
};
FormEdit.propTypes = {
form: _propTypes.default.object.isRequired,
options: _propTypes.default.object,
builder: _propTypes.default.any,
saveForm: _propTypes.default.func,
saveText: _propTypes.default.string,
onSaveComponent: _propTypes.default.func,
onDeleteComponent: _propTypes.default.func
};
var _default = exports.default = FormEdit;