@arun-s-aot/formio-react/lib/components/FormBuilder.js

React renderer for formsflow form.io forms.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
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 FormBuilder = props => {
  const {
    options = {},
    Builder = _lib.FormBuilder,
    form
  } = props;
  const builderRef = (0, _react.useRef)();
  let element;
  const emit = funcName => function () {
    // eslint-disable-next-line no-prototype-builtins
    if (props.hasOwnProperty(funcName) && typeof props[funcName] === 'function') {
      props[funcName](...arguments);
    }
  };
  const onChange = () => {
    const {
      onChange
    } = props;
    if (onChange && typeof onChange === 'function') {
      builderRef.current.instance.form.components = iterateConditionsAndSetLogic(builderRef.current.instance.form.components);
      // console.log('updated components -->',builderRef.current.instance.form.components);
      const schema = {
        ...builderRef.current.instance.form
      };
      Object.defineProperty(schema, 'components', {
        get: function () {
          return builderRef.current.instance.schema.components;
        }
      });
      onChange(builderRef.current.instance.form, schema);
    }
  };
  const builderEvents = [{
    name: 'saveComponent',
    action: (component, original, parent, path, index, isNew) => {
      emit('onSaveComponent')({
        component,
        original,
        parent,
        path,
        index,
        isNew
      });
    }
  }, {
    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: (component, parent, path, index) => {
      emit('onDeleteComponent')({
        component,
        parent,
        path,
        index
      });
    }
  }, {
    name: 'deleteComponent',
    action: onChange
  }, {
    name: 'pdfUploaded',
    action: onChange
  }];
  const initializeBuilder = builderProps => {
    let {
      options,
      form
    } = builderProps;
    const {
      Builder
    } = builderProps;
    options = Object.assign({}, options);
    form = Object.assign({}, form);
    builderRef.current = new Builder(element, form, options);
    builderRef.current.ready.then(() => {
      onChange();
      builderEvents.forEach(_ref => {
        let {
          name,
          action
        } = _ref;
        builderRef.current.instance.off(name, action);
        builderRef.current.instance.on(name, action);
      });
    });
  };
  (0, _react.useEffect)(() => {
    initializeBuilder({
      options,
      Builder,
      form
    });
    return () => builderRef.current ? builderRef.current.instance.destroy(true) : null;
  }, [builderRef]);
  (0, _react.useEffect)(() => {
    if (!builderRef.current && form) {
      initializeBuilder({
        options,
        Builder,
        form
      });
    }
  }, [form, builderRef]);
  const elementDidMount = (0, _react.useCallback)(el => element = el);
  (0, _react.useLayoutEffect)(() => {
    if (builderRef.current && form && form.display) {
      builderRef.current.setDisplay(form.display);
    }
  }, [form.display]);
  (0, _react.useLayoutEffect)(() => {
    if (builderRef.current && form && form.components) {
      builderRef.current.setForm(form);
    }
  }, [form]);
  function iterateConditionsAndSetLogic(components) {
    // console.log(components);
    components.forEach(comp => {
      if (comp && comp.conditional && comp.conditional.conditions) comp.conditional.conditions.forEach(codition => {
        comp.customConditional = createCustomConditions(codition.component, codition.operator, codition.value, comp.customConditional);
        console.log(comp.customConditional);
      });
      if (comp.customConditional && !comp.customConditional.endsWith(';')) comp.customConditional = comp.customConditional.concat(';');
    });
    return components;
  }
  function createCustomConditions(component, operator, value, existingCustomConditional) {
    let condition = '';
    let fullCondition = existingCustomConditional ? existingCustomConditional : '';
    switch (operator) {
      case 'isEqual':
        condition = `data.${component} && data.${component} == '${value}'`;
        break;
      case 'isNotEqual':
        condition = `data.${component} && data.${component} != '${value}'`;
        break;
      case 'isEmpty':
        condition = `!data.${component}`;
        break;
      case 'isNotEmpty':
        condition = `!!data.${component}`;
        break;
      case 'includes':
        condition = `data.${component} && data.${component}.includes('${value}')`;
        break;
      case 'notIncludes':
        condition = `data.${component} && !data.${component}.includes('${value}')`;
        break;
      case 'endsWith':
        condition = `data.${component} && data.${component}.endsWith('${value}')`;
        break;
      default:
        break;
    }
    console.log('existingCustomConditional->', existingCustomConditional);
    if (existingCustomConditional) {
      if (existingCustomConditional.endsWith(';')) fullCondition = existingCustomConditional.slice(0, -1) + ' && ' + condition;else fullCondition = existingCustomConditional + ' && ' + condition;
    } else {
      fullCondition = `show = ${condition}`;
    }
    return fullCondition;
  }
  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
    ref: elementDidMount
  }));
};
FormBuilder.propTypes = {
  form: _propTypes.default.object,
  options: _propTypes.default.object,
  onChange: _propTypes.default.func,
  onSaveComponent: _propTypes.default.func,
  onUpdateComponent: _propTypes.default.func,
  onDeleteComponent: _propTypes.default.func,
  onCancelComponent: _propTypes.default.func,
  onEditComponent: _propTypes.default.func,
  Builder: _propTypes.default.any
};
var _default = exports.default = FormBuilder;