@arun-s-aot/formio-react
Version:
React renderer for formsflow form.io forms.
171 lines (167 loc) • 6.01 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 FormioReport = _lib.Formio.Report;
/**
* @param {ReportProps} props
* @returns {JSX.Element}s
*/
const Report = props => {
let instance;
let createPromise;
let element;
const [formio, setFormio] = (0, _react.useState)(undefined);
const jsonReport = (0, _react.useRef)(undefined);
if (!FormioReport) {
return /*#__PURE__*/_react.default.createElement("div", {
className: "alert alert-danger",
role: "alert"
}, "Report is not found in Formio. Please make sure that you are using the Formio Reporting module and it is correctly included in your application.");
}
(0, _react.useEffect)(() => () => formio ? formio.destroy(true) : null, [formio]);
const createReportInstance = srcOrReport => {
const {
options = {},
onReportReady,
projectEndpoint
} = props;
if (projectEndpoint) {
options.projectEndpoint = projectEndpoint;
}
instance = new FormioReport(element, srcOrReport, options);
createPromise = instance.ready.then(formioInstance => {
setFormio(formioInstance);
if (onReportReady) {
onReportReady(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 = () => {
if (createPromise) {
instance.onAny(onAnyEvent);
}
};
(0, _react.useEffect)(() => {
const {
src
} = props;
if (src) {
createReportInstance(src);
initializeFormio();
}
}, [props.src]);
(0, _react.useEffect)(() => {
const {
report
} = props;
// eslint-disable-next-line no-undef
if (report && !(0, _isEqual2.default)(report, jsonReport.current)) {
jsonReport.current = (0, _lang.cloneDeep)(report);
createReportInstance(report).then(() => {
if (formio) {
formio.form = {
components: [],
report
};
return formio;
}
});
initializeFormio();
}
}, [props.report]);
(0, _react.useEffect)(() => {
const {
options = {}
} = props;
if (!options.events) {
options.events = Report.getDefaultEmitter();
}
}, [props.options]);
return /*#__PURE__*/_react.default.createElement("div", {
ref: el => element = el
});
};
/**
* @typedef {object} Options
* @property {boolean} [readOnly]
* @property {boolean} [noAlerts]
* @property {object} [i18n]
* @property {string} [template]
* @property {string} [projectEndpoint]
*/
/**
* @typedef {object} ReportProps
* @property {string} [src]
* @property {string} [projectEndpoint]
* @property {object} [report]
* @property {Options} [options]
* @property {function} [onFormLoad]
* @property {function} [onError]
* @property {function} [onRender]
* @property {function} [onFocus]
* @property {function} [onBlur]
* @property {function} [onInitialized]
* @property {function} [onReportReady]
* @property {function} [onChange]
* @property {function} [onRowClick]
* @property {function} [onRowSelectChange]
* @property {function} [onFetchDataError]
* @property {function} [onChangeItemsPerPage]
* @property {function} [onPage]
u */
Report.propTypes = {
src: _propTypes.default.string,
projectEndpoint: _propTypes.default.string,
report: _propTypes.default.object,
options: _propTypes.default.shape({
readOnly: _propTypes.default.bool,
noAlerts: _propTypes.default.bool,
i18n: _propTypes.default.object,
template: _propTypes.default.string,
language: _propTypes.default.string
}),
onRowClick: _propTypes.default.func,
onRowSelectChange: _propTypes.default.func,
onFetchDataError: _propTypes.default.func,
onChangeItemsPerPage: _propTypes.default.func,
onPage: _propTypes.default.func,
onChange: _propTypes.default.func,
onFormLoad: _propTypes.default.func,
onError: _propTypes.default.func,
onRender: _propTypes.default.func,
onFocus: _propTypes.default.func,
onBlur: _propTypes.default.func,
onInitialized: _propTypes.default.func,
onReportReady: _propTypes.default.func
};
Report.getDefaultEmitter = () => {
return new _eventemitter.default({
wildcard: false,
maxListeners: 0
});
};
var _default = exports.default = Report;