@arun-s-aot/formio-react
Version:
React renderer for formsflow form.io forms.
203 lines (199 loc) • 6.89 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _lang = require("lodash/lang");
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _eventemitter = _interopRequireDefault(require("eventemitter2"));
var _isEqual2 = _interopRequireDefault(require("lodash/isEqual"));
var _lib = require("@arun-s-aot/formiojs/lib");
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 FormioForm = _lib.Formio.Form;
/**
* @param {FormProps} props
* @returns {JSX.Element}
*/
const Form = props => {
let instance;
let createPromise;
let element;
const [formio, setFormio] = (0, _react.useState)(undefined);
const jsonForm = (0, _react.useRef)(undefined);
(0, _react.useEffect)(() => () => formio ? formio.destroy(true) : null, [formio]);
const createWebformInstance = srcOrForm => {
const {
options = {},
formioform,
formReady
} = props;
instance = new (formioform || FormioForm)(element, srcOrForm, options);
createPromise = instance.ready.then(formioInstance => {
setFormio(formioInstance);
if (formReady) {
formReady(formioInstance);
}
return formioInstance;
});
return createPromise;
};
const onAnyEvent = function (event) {
if (event.startsWith('formio.')) {
const funcName = `on${event.charAt(7).toUpperCase()}${event.slice(8)}`;
// eslint-disable-next-line no-prototype-builtins
if (props.hasOwnProperty(funcName) && typeof props[funcName] === 'function') {
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
args[_key - 1] = arguments[_key];
}
props[funcName](...args);
}
}
};
const initializeFormio = () => {
const {
submission
} = props;
if (createPromise) {
instance.onAny(onAnyEvent);
createPromise.then(() => {
if (formio && submission) {
formio.submission = submission;
}
});
}
};
(0, _react.useEffect)(() => {
const {
src
} = props;
if (src) {
createWebformInstance(src).then(formioInstance => {
if (formioInstance) {
formioInstance.src = src;
}
});
initializeFormio();
}
}, [props.src]);
(0, _react.useEffect)(() => {
const {
form,
url
} = props;
if (form && !(0, _isEqual2.default)(form, jsonForm.current)) {
jsonForm.current = (0, _lang.cloneDeep)(form);
createWebformInstance(jsonForm.current).then(formioInstance => {
if (formioInstance) {
formioInstance.form = jsonForm.current;
if (url) {
formioInstance.url = url;
}
}
});
initializeFormio();
}
}, [props.form]);
(0, _react.useEffect)(() => {
const {
options = {}
} = props;
if (!options.events) {
options.events = Form.getDefaultEmitter();
}
}, [props.options]);
(0, _react.useEffect)(() => {
const {
submission
} = props;
if (formio && submission && !(0, _isEqual2.default)(formio.submission.data, submission.data)) {
formio.submission = submission;
}
}, [props.submission, formio]);
return /*#__PURE__*/_react.default.createElement("div", {
ref: el => element = el
});
};
/**
* @typedef {object} Options
* @property {boolean} [readOnly]
* @property {boolean} [useSessionToken]
* @property {boolean} [flatten]
* @property {boolean} [sanitize]
* @property {string} [renderMode]
* @property {boolean} [noAlerts]
* @property {object} [i18n]
* @property {string} [template]
* @property {boolean} [saveDraft]
*/
/**
* @typedef {object} FormProps
* @property {string} [src]
* @property {string} [url]
* @property {object} [form]
* @property {object} [submission]
* @property {Options} [options]
* @property {function} [onPrevPage]
* @property {function} [onNextPage]
* @property {function} [onCancel]
* @property {function} [onChange]
* @property {function} [onCustomEvent]
* @property {function} [onComponentChange]
* @property {function} [onSubmit]
* @property {function} [onSubmitDone]
* @property {function} [onFormLoad]
* @property {function} [onError]
* @property {function} [onRender]
* @property {function} [onAttach]
* @property {function} [onBuild]
* @property {function} [onFocus]
* @property {function} [onBlur]
* @property {function} [onInitialized]
* @property {function} [formReady]
* @property {any} [formioform]
*/
Form.propTypes = {
src: _propTypes.default.string,
url: _propTypes.default.string,
form: _propTypes.default.object,
submission: _propTypes.default.object,
options: _propTypes.default.shape({
readOnly: _propTypes.default.bool,
useSessionToken: _propTypes.default.bool,
flatten: _propTypes.default.bool,
renderMode: _propTypes.default.string,
sanitize: _propTypes.default.string,
noAlerts: _propTypes.default.bool,
i18n: _propTypes.default.object,
template: _propTypes.default.string,
saveDraft: _propTypes.default.bool,
language: _propTypes.default.string
}),
onPrevPage: _propTypes.default.func,
onNextPage: _propTypes.default.func,
onCancel: _propTypes.default.func,
onChange: _propTypes.default.func,
onCustomEvent: _propTypes.default.func,
onComponentChange: _propTypes.default.func,
onSubmit: _propTypes.default.func,
onSubmitDone: _propTypes.default.func,
onFormLoad: _propTypes.default.func,
onError: _propTypes.default.func,
onRender: _propTypes.default.func,
onAttach: _propTypes.default.func,
onBuild: _propTypes.default.func,
onFocus: _propTypes.default.func,
onBlur: _propTypes.default.func,
onInitialized: _propTypes.default.func,
formReady: _propTypes.default.func,
formioform: _propTypes.default.any
};
Form.getDefaultEmitter = () => {
return new _eventemitter.default({
wildcard: false,
maxListeners: 0
});
};
var _default = exports.default = Form;