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

React renderer for form.io forms.

'use strict';

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

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _formiojs = require('formiojs');

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

var FormBuilder = function FormBuilder(props) {
  var _props$options = props.options,
      options = _props$options === undefined ? {} : _props$options,
      _props$Builder = props.Builder,
      Builder = _props$Builder === undefined ? _formiojs.FormBuilder : _props$Builder,
      form = props.form;

  var builderRef = (0, _react.useRef)();
  var element = void 0;

  var emit = function emit(funcName) {
    return function () {
      // eslint-disable-next-line no-prototype-builtins
      if (props.hasOwnProperty(funcName) && typeof props[funcName] === 'function') {
        props[funcName].apply(props, arguments);
      }
    };
  };

  var onChange = function onChange() {
    var onChange = props.onChange;

    if (onChange && typeof onChange === 'function') {
      var schema = _extends({}, builderRef.current.instance.form);

      Object.defineProperty(schema, 'components', {
        get: function get() {
          return builderRef.current.instance.schema.components;
        }
      });

      onChange(builderRef.current.instance.form, schema);
    }
  };

  var builderEvents = [{ name: 'saveComponent', action: emit('onSaveComponent') }, { name: 'updateComponent', action: emit('onUpdateComponent') }, { name: 'removeComponent', action: emit('onDeleteComponent') }, { name: 'cancelComponent', action: emit('onUpdateComponent') }, { name: 'editComponent', action: emit('onEditComponent') }, { name: 'addComponent', action: onChange }, { name: 'saveComponent', action: onChange }, { name: 'updateComponent', action: onChange }, { name: 'removeComponent', action: onChange }, { name: 'deleteComponent', action: onChange }, { name: 'pdfUploaded', action: onChange }];

  var initializeBuilder = function initializeBuilder(builderProps) {
    var options = builderProps.options,
        form = builderProps.form;
    var Builder = builderProps.Builder;

    options = Object.assign({}, options);
    form = Object.assign({}, form);

    builderRef.current = new Builder(element, form, options);

    builderRef.current.ready.then(function () {
      onChange();
      builderEvents.forEach(function (_ref) {
        var name = _ref.name,
            action = _ref.action;

        builderRef.current.instance.off(name, action);
        builderRef.current.instance.on(name, action);
      });
    });
  };

  (0, _react.useEffect)(function () {
    initializeBuilder({ options: options, Builder: Builder, form: form });
    return function () {
      return builderRef.current ? builderRef.current.instance.destroy(true) : null;
    };
  }, [builderRef]);

  (0, _react.useEffect)(function () {
    if (!builderRef.current && form) {
      initializeBuilder({ options: options, Builder: Builder, form: form });
    }
  }, [form, builderRef]);

  var elementDidMount = (0, _react.useCallback)(function (el) {
    return element = el;
  });

  (0, _react.useLayoutEffect)(function () {
    if (builderRef.current && form && form.display) {
      builderRef.current.setDisplay(form.display);
    }
  }, [form.display]);

  (0, _react.useLayoutEffect)(function () {
    if (builderRef.current && form && form.components) {
      builderRef.current.setForm(form);
    }
  }, [form]);

  return _react2.default.createElement(
    'div',
    null,
    _react2.default.createElement('div', { ref: elementDidMount })
  );
};

FormBuilder.propTypes = {
  form: _propTypes2.default.object,
  options: _propTypes2.default.object,
  onChange: _propTypes2.default.func,
  onSaveComponent: _propTypes2.default.func,
  onUpdateComponent: _propTypes2.default.func,
  onDeleteComponent: _propTypes2.default.func,
  onCancelComponent: _propTypes2.default.func,
  onEditComponent: _propTypes2.default.func,
  Builder: _propTypes2.default.any
};

exports.default = FormBuilder;