@formio/react/lib/components/Report.js

React renderer for form.io forms.

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();

var _lang = require('lodash/lang');

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _eventemitter = require('eventemitter2');

var _eventemitter2 = _interopRequireDefault(_eventemitter);

var _isEqual2 = require('lodash/isEqual');

var _isEqual3 = _interopRequireDefault(_isEqual2);

var _formiojs = require('formiojs');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var FormioReport = _formiojs.Formio.Report;

/**
 * @param {ReportProps} props
 * @returns {JSX.Element}s
 */
var Report = function Report(props) {
  var instance = void 0;
  var createPromise = void 0;
  var element = void 0;

  var _useState = (0, _react.useState)(undefined),
      _useState2 = _slicedToArray(_useState, 2),
      formio = _useState2[0],
      setFormio = _useState2[1];

  var jsonReport = (0, _react.useRef)(undefined);

  if (!FormioReport) {
    return _react2.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)(function () {
    return function () {
      return formio ? formio.destroy(true) : null;
    };
  }, [formio]);

  var createReportInstance = function createReportInstance(srcOrReport) {
    var _props$options = props.options,
        options = _props$options === undefined ? {} : _props$options,
        onReportReady = props.onReportReady,
        projectEndpoint = props.projectEndpoint;

    if (projectEndpoint) {
      options.projectEndpoint = projectEndpoint;
    }

    instance = new FormioReport(element, srcOrReport, options);
    createPromise = instance.ready.then(function (formioInstance) {
      setFormio(formioInstance);
      if (onReportReady) {
        onReportReady(formioInstance);
      }
    });

    return createPromise;
  };

  var onAnyEvent = function onAnyEvent(event) {
    for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
      args[_key - 1] = arguments[_key];
    }

    if (event.startsWith('formio.')) {
      var funcName = 'on' + event.charAt(7).toUpperCase() + event.slice(8);
      // eslint-disable-next-line no-prototype-builtins
      if (props.hasOwnProperty(funcName) && typeof props[funcName] === 'function') {
        props[funcName].apply(props, args);
      }
    }
  };

  var initializeFormio = function initializeFormio() {
    if (createPromise) {
      instance.onAny(onAnyEvent);
    }
  };

  (0, _react.useEffect)(function () {
    var src = props.src;

    if (src) {
      createReportInstance(src);
      initializeFormio();
    }
  }, [props.src]);

  (0, _react.useEffect)(function () {
    var report = props.report;
    // eslint-disable-next-line no-undef

    if (report && !(0, _isEqual3.default)(report, jsonReport.current)) {
      jsonReport.current = (0, _lang.cloneDeep)(report);
      createReportInstance(report).then(function () {
        if (formio) {
          formio.form = { components: [], report: report };
          return formio;
        }
      });
      initializeFormio();
    }
  }, [props.report]);

  (0, _react.useEffect)(function () {
    var _props$options2 = props.options,
        options = _props$options2 === undefined ? {} : _props$options2;

    if (!options.events) {
      options.events = Report.getDefaultEmitter();
    }
  }, [props.options]);

  return _react2.default.createElement('div', { ref: function ref(el) {
      return 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: _propTypes2.default.string,
  projectEndpoint: _propTypes2.default.string,
  report: _propTypes2.default.object,
  options: _propTypes2.default.shape({
    readOnly: _propTypes2.default.bool,
    noAlerts: _propTypes2.default.bool,
    i18n: _propTypes2.default.object,
    template: _propTypes2.default.string,
    language: _propTypes2.default.string
  }),
  onRowClick: _propTypes2.default.func,
  onRowSelectChange: _propTypes2.default.func,
  onFetchDataError: _propTypes2.default.func,
  onChangeItemsPerPage: _propTypes2.default.func,
  onPage: _propTypes2.default.func,
  onChange: _propTypes2.default.func,
  onFormLoad: _propTypes2.default.func,
  onError: _propTypes2.default.func,
  onRender: _propTypes2.default.func,
  onFocus: _propTypes2.default.func,
  onBlur: _propTypes2.default.func,
  onInitialized: _propTypes2.default.func,
  onReportReady: _propTypes2.default.func
};

Report.getDefaultEmitter = function () {
  return new _eventemitter2.default({
    wildcard: false,
    maxListeners: 0
  });
};

exports.default = Report;