react-form-builder-devextreme/lib/form-elements/index.js

A complete form builder for react. Some changes to design

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _isomorphicFetch = _interopRequireDefault(require("isomorphic-fetch"));
var _fileSaver = require("file-saver");
var _react = _interopRequireDefault(require("react"));
var _reactSelect = _interopRequireDefault(require("react-select"));
var _reactSignatureCanvas = _interopRequireDefault(require("react-signature-canvas"));
var _reactBootstrapSlider = _interopRequireDefault(require("react-bootstrap-slider"));
var _starRating = _interopRequireDefault(require("./star-rating"));
var _datePicker = _interopRequireDefault(require("./date-picker"));
var _componentHeader = _interopRequireDefault(require("./component-header"));
var _componentLabel = _interopRequireDefault(require("./component-label"));
var _myxss = _interopRequireDefault(require("./myxss"));
var _componentRight = _interopRequireDefault(require("./component-right"));
var _componentSign = _interopRequireDefault(require("./component-sign"));
var _historyComponent = _interopRequireDefault(require("../history-component"));
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } // eslint-disable-next-line max-classes-per-file
var FormElements = {};
var Header = /*#__PURE__*/function (_React$Component) {
  (0, _inherits2["default"])(Header, _React$Component);
  var _super = _createSuper(Header);
  function Header() {
    (0, _classCallCheck2["default"])(this, Header);
    return _super.apply(this, arguments);
  }
  (0, _createClass2["default"])(Header, [{
    key: "render",
    value: function render() {
      var _this$props$data$Chec, _this$props;
      // const headerClasses = `dynamic-input ${this.props.data.element}-input`;
      var classNames = 'static';
      if (this.props.data.bold) {
        classNames += ' bold';
      }
      if (this.props.data.italic) {
        classNames += ' italic';
      }
      var containerClasses = 'ContainerItem rfb-item';
      if (this.props.data.pageBreakBefore) {
        containerClasses += ' alwaysbreak';
      }
      var mainContainerClasses = '';
      if (this.props.data.visible === false && this.props.data.visible !== undefined && this.props.mutable === true) {
        mainContainerClasses = 'hidden';
      }
      if (this.props.data.customContainerClass !== undefined && this.props.mutable === true) {
        mainContainerClasses += ' ' + this.props.data.customContainerClass;
      }
      var baseClasses = 'SortableItem rfb-item';
      if (this.props.data.pageBreakBefore) {
        baseClasses += ' alwaysbreak';
      }
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: mainContainerClasses
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: containerClasses
      }, (_this$props$data$Chec = this.props.data.CheckedBy) === null || _this$props$data$Chec === void 0 ? void 0 : _this$props$data$Chec.map(function (l) {
        return l.id;
      }), /*#__PURE__*/_react["default"].createElement("div", {
        style: _objectSpread({}, this.props.style),
        className: baseClasses
      }, (this.props.index || this.props.index === 0) && /*#__PURE__*/_react["default"].createElement("h3", {
        className: "sortableItem-sequence"
      }, this.props.index + 1), /*#__PURE__*/_react["default"].createElement("h3", {
        className: classNames,
        dangerouslySetInnerHTML: {
          __html: _myxss["default"].process(this.props.data.content)
        }
      }), /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props))), /*#__PURE__*/_react["default"].createElement(_componentSign["default"], this.props), ((_this$props = this.props) === null || _this$props === void 0 || (_this$props = _this$props.data) === null || _this$props === void 0 ? void 0 : _this$props.history) && /*#__PURE__*/_react["default"].createElement(_historyComponent["default"], this.props));
    }
  }]);
  return Header;
}(_react["default"].Component);
var Paragraph = /*#__PURE__*/function (_React$Component2) {
  (0, _inherits2["default"])(Paragraph, _React$Component2);
  var _super2 = _createSuper(Paragraph);
  function Paragraph() {
    (0, _classCallCheck2["default"])(this, Paragraph);
    return _super2.apply(this, arguments);
  }
  (0, _createClass2["default"])(Paragraph, [{
    key: "render",
    value: function render() {
      var _this$props2;
      var classNames = 'static';
      if (this.props.data.bold) {
        classNames += ' bold';
      }
      if (this.props.data.italic) {
        classNames += ' italic';
      }
      var containerClasses = 'ContainerItem rfb-item';
      if (this.props.data.pageBreakBefore) {
        containerClasses += ' alwaysbreak';
      }
      var mainContainerClasses = '';
      if (this.props.data.visible === false && this.props.data.visible !== undefined && this.props.mutable === true) {
        mainContainerClasses = 'hidden';
      }
      if (this.props.data.customContainerClass !== undefined && this.props.mutable === true) {
        mainContainerClasses += ' ' + this.props.data.customContainerClass;
      }
      var baseClasses = 'SortableItem rfb-item';
      if (this.props.data.pageBreakBefore) {
        baseClasses += ' alwaysbreak';
      }
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: mainContainerClasses
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: containerClasses
      }, /*#__PURE__*/_react["default"].createElement("div", {
        style: _objectSpread({}, this.props.style),
        className: baseClasses
      }, (this.props.index || this.props.index === 0) && /*#__PURE__*/_react["default"].createElement("h3", {
        className: "sortableItem-sequence"
      }, this.props.index + 1), /*#__PURE__*/_react["default"].createElement("p", {
        className: classNames,
        dangerouslySetInnerHTML: {
          __html: _myxss["default"].process(this.props.data.content)
        }
      }), /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props))), /*#__PURE__*/_react["default"].createElement(_componentSign["default"], this.props), ((_this$props2 = this.props) === null || _this$props2 === void 0 || (_this$props2 = _this$props2.data) === null || _this$props2 === void 0 ? void 0 : _this$props2.history) && /*#__PURE__*/_react["default"].createElement(_historyComponent["default"], this.props));
    }
  }]);
  return Paragraph;
}(_react["default"].Component);
var Label = /*#__PURE__*/function (_React$Component3) {
  (0, _inherits2["default"])(Label, _React$Component3);
  var _super3 = _createSuper(Label);
  function Label() {
    (0, _classCallCheck2["default"])(this, Label);
    return _super3.apply(this, arguments);
  }
  (0, _createClass2["default"])(Label, [{
    key: "render",
    value: function render() {
      var _this$props3;
      var classNames = 'static';
      if (this.props.data.bold) {
        classNames += ' bold';
      }
      if (this.props.data.italic) {
        classNames += ' italic';
      }
      var containerClasses = 'ContainerItem rfb-item';
      if (this.props.data.pageBreakBefore) {
        containerClasses += ' alwaysbreak';
      }
      var mainContainerClasses = '';
      if (this.props.data.visible === false && this.props.data.visible !== undefined && this.props.mutable === true) {
        mainContainerClasses = 'hidden';
      }
      if (this.props.data.customContainerClass !== undefined && this.props.mutable === true) {
        mainContainerClasses += ' ' + this.props.data.customContainerClass;
      }
      var baseClasses = 'SortableItem rfb-item';
      if (this.props.data.pageBreakBefore) {
        baseClasses += ' alwaysbreak';
      }
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: mainContainerClasses
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: containerClasses
      }, /*#__PURE__*/_react["default"].createElement("div", {
        style: _objectSpread({}, this.props.style),
        className: baseClasses
      }, (this.props.index || this.props.index === 0) && /*#__PURE__*/_react["default"].createElement("h3", {
        className: "sortableItem-sequence"
      }, this.props.index + 1), /*#__PURE__*/_react["default"].createElement("label", {
        className: classNames,
        dangerouslySetInnerHTML: {
          __html: _myxss["default"].process(this.props.data.content)
        }
      }), /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props))), /*#__PURE__*/_react["default"].createElement(_componentSign["default"], this.props), ((_this$props3 = this.props) === null || _this$props3 === void 0 || (_this$props3 = _this$props3.data) === null || _this$props3 === void 0 ? void 0 : _this$props3.history) && /*#__PURE__*/_react["default"].createElement(_historyComponent["default"], this.props));
    }
  }]);
  return Label;
}(_react["default"].Component);
var LineBreak = /*#__PURE__*/function (_React$Component4) {
  (0, _inherits2["default"])(LineBreak, _React$Component4);
  var _super4 = _createSuper(LineBreak);
  function LineBreak() {
    (0, _classCallCheck2["default"])(this, LineBreak);
    return _super4.apply(this, arguments);
  }
  (0, _createClass2["default"])(LineBreak, [{
    key: "render",
    value: function render() {
      var _this$props4;
      var containerClasses = 'ContainerItem rfb-item';
      if (this.props.data.pageBreakBefore) {
        containerClasses += ' alwaysbreak';
      }
      var mainContainerClasses = '';
      if (this.props.data.visible === false && this.props.data.visible !== undefined && this.props.mutable === true) {
        mainContainerClasses = 'hidden';
      }
      if (this.props.data.customContainerClass !== undefined && this.props.mutable === true) {
        mainContainerClasses += ' ' + this.props.data.customContainerClass;
      }
      var baseClasses = 'SortableItem rfb-item';
      if (this.props.data.pageBreakBefore) {
        baseClasses += ' alwaysbreak';
      }
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: mainContainerClasses
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: containerClasses
      }, /*#__PURE__*/_react["default"].createElement("div", {
        style: _objectSpread({}, this.props.style),
        className: baseClasses
      }, (this.props.index || this.props.index === 0) && /*#__PURE__*/_react["default"].createElement("h3", {
        className: "sortableItem-sequence"
      }, this.props.index + 1), (this.props.index || this.props.index === 0) && /*#__PURE__*/_react["default"].createElement("h4", null, "horizontal line"), /*#__PURE__*/_react["default"].createElement("hr", null), /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props))), /*#__PURE__*/_react["default"].createElement(_componentSign["default"], this.props), ((_this$props4 = this.props) === null || _this$props4 === void 0 || (_this$props4 = _this$props4.data) === null || _this$props4 === void 0 ? void 0 : _this$props4.history) && /*#__PURE__*/_react["default"].createElement(_historyComponent["default"], this.props));
    }
  }]);
  return LineBreak;
}(_react["default"].Component);
var TextInput = /*#__PURE__*/function (_React$Component5) {
  (0, _inherits2["default"])(TextInput, _React$Component5);
  var _super5 = _createSuper(TextInput);
  function TextInput(props) {
    var _this;
    (0, _classCallCheck2["default"])(this, TextInput);
    _this = _super5.call(this, props);
    _this.inputField = /*#__PURE__*/_react["default"].createRef();
    return _this;
  }
  (0, _createClass2["default"])(TextInput, [{
    key: "render",
    value: function render() {
      var _this$props5;
      var props = {};
      props.type = 'text';
      props.className = 'form-control';
      props.name = this.props.data.field_name;
      if (this.props.mutable) {
        props.defaultValue = this.props.defaultValue;
        props.ref = this.inputField;
      }
      var containerClasses = 'ContainerItem rfb-item';
      if (this.props.data.pageBreakBefore) {
        containerClasses += ' alwaysbreak';
      }
      var mainContainerClasses = '';
      if (this.props.data.visible === false && this.props.data.visible !== undefined && this.props.mutable === true) {
        mainContainerClasses = 'hidden';
      }
      if (this.props.data.customContainerClass !== undefined && this.props.mutable === true) {
        mainContainerClasses += ' ' + this.props.data.customContainerClass;
      }
      var baseClasses = 'SortableItem rfb-item';
      if (this.props.data.pageBreakBefore) {
        baseClasses += ' alwaysbreak';
      }
      if (this.props.read_only) {
        props.disabled = 'disabled';
      }

      //console.log('hiddenClass', hiddenClass);
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: mainContainerClasses
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: containerClasses
      }, /*#__PURE__*/_react["default"].createElement("div", {
        style: _objectSpread({}, this.props.style),
        className: baseClasses
      }, (this.props.index || this.props.index === 0) && /*#__PURE__*/_react["default"].createElement("h3", {
        className: "sortableItem-sequence"
      }, this.props.index + 1), /*#__PURE__*/_react["default"].createElement("div", {
        className: "form-group"
      }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement("input", props)), /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props))), /*#__PURE__*/_react["default"].createElement(_componentSign["default"], this.props), ((_this$props5 = this.props) === null || _this$props5 === void 0 || (_this$props5 = _this$props5.data) === null || _this$props5 === void 0 ? void 0 : _this$props5.history) && /*#__PURE__*/_react["default"].createElement(_historyComponent["default"], this.props));
    }
  }]);
  return TextInput;
}(_react["default"].Component);
var EmailInput = /*#__PURE__*/function (_React$Component6) {
  (0, _inherits2["default"])(EmailInput, _React$Component6);
  var _super6 = _createSuper(EmailInput);
  function EmailInput(props) {
    var _this2;
    (0, _classCallCheck2["default"])(this, EmailInput);
    _this2 = _super6.call(this, props);
    _this2.inputField = /*#__PURE__*/_react["default"].createRef();
    return _this2;
  }
  (0, _createClass2["default"])(EmailInput, [{
    key: "render",
    value: function render() {
      var _this$props6;
      var props = {};
      props.type = 'text';
      props.className = 'form-control';
      props.name = this.props.data.field_name;
      if (this.props.mutable) {
        props.defaultValue = this.props.defaultValue;
        props.ref = this.inputField;
      }
      var baseClasses = 'SortableItem rfb-item';
      if (this.props.data.pageBreakBefore) {
        baseClasses += ' alwaysbreak';
      }
      var containerClasses = 'ContainerItem rfb-item';
      if (this.props.data.pageBreakBefore) {
        containerClasses += ' alwaysbreak';
      }
      var mainContainerClasses = '';
      if (this.props.data.visible === false && this.props.data.visible !== undefined && this.props.mutable === true) {
        mainContainerClasses = 'hidden';
      }
      if (this.props.data.customContainerClass !== undefined && this.props.mutable === true) {
        mainContainerClasses += ' ' + this.props.data.customContainerClass;
      }
      if (this.props.read_only) {
        props.disabled = 'disabled';
      }
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: mainContainerClasses
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: containerClasses
      }, /*#__PURE__*/_react["default"].createElement("div", {
        style: _objectSpread({}, this.props.style),
        className: baseClasses
      }, (this.props.index || this.props.index === 0) && /*#__PURE__*/_react["default"].createElement("h3", {
        className: "sortableItem-sequence"
      }, this.props.index + 1), /*#__PURE__*/_react["default"].createElement("div", {
        className: "form-group"
      }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement("input", props)), /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props))), /*#__PURE__*/_react["default"].createElement(_componentSign["default"], this.props), ((_this$props6 = this.props) === null || _this$props6 === void 0 || (_this$props6 = _this$props6.data) === null || _this$props6 === void 0 ? void 0 : _this$props6.history) && /*#__PURE__*/_react["default"].createElement(_historyComponent["default"], this.props));
    }
  }]);
  return EmailInput;
}(_react["default"].Component);
var PhoneNumber = /*#__PURE__*/function (_React$Component7) {
  (0, _inherits2["default"])(PhoneNumber, _React$Component7);
  var _super7 = _createSuper(PhoneNumber);
  function PhoneNumber(props) {
    var _this3;
    (0, _classCallCheck2["default"])(this, PhoneNumber);
    _this3 = _super7.call(this, props);
    _this3.inputField = /*#__PURE__*/_react["default"].createRef();
    return _this3;
  }
  (0, _createClass2["default"])(PhoneNumber, [{
    key: "render",
    value: function render() {
      var _this$props7;
      var props = {};
      props.type = 'tel';
      props.className = 'form-control';
      props.name = this.props.data.field_name;
      if (this.props.mutable) {
        props.defaultValue = this.props.defaultValue;
        props.ref = this.inputField;
      }
      var baseClasses = 'SortableItem rfb-item';
      if (this.props.data.pageBreakBefore) {
        baseClasses += ' alwaysbreak';
      }
      var containerClasses = 'ContainerItem rfb-item';
      if (this.props.data.pageBreakBefore) {
        containerClasses += ' alwaysbreak';
      }
      var mainContainerClasses = '';
      if (this.props.data.visible === false && this.props.data.visible !== undefined && this.props.mutable === true) {
        mainContainerClasses = 'hidden';
      }
      if (this.props.data.customContainerClass !== undefined && this.props.mutable === true) {
        mainContainerClasses += ' ' + this.props.data.customContainerClass;
      }
      if (this.props.read_only) {
        props.disabled = 'disabled';
      }
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: mainContainerClasses
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: containerClasses
      }, /*#__PURE__*/_react["default"].createElement("div", {
        style: _objectSpread({}, this.props.style),
        className: baseClasses
      }, (this.props.index || this.props.index === 0) && /*#__PURE__*/_react["default"].createElement("h3", {
        className: "sortableItem-sequence"
      }, this.props.index + 1), /*#__PURE__*/_react["default"].createElement("div", {
        className: "form-group"
      }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement("input", props)), /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props))), /*#__PURE__*/_react["default"].createElement(_componentSign["default"], this.props), ((_this$props7 = this.props) === null || _this$props7 === void 0 || (_this$props7 = _this$props7.data) === null || _this$props7 === void 0 ? void 0 : _this$props7.history) && /*#__PURE__*/_react["default"].createElement(_historyComponent["default"], this.props));
    }
  }]);
  return PhoneNumber;
}(_react["default"].Component);
var NumberInput = /*#__PURE__*/function (_React$Component8) {
  (0, _inherits2["default"])(NumberInput, _React$Component8);
  var _super8 = _createSuper(NumberInput);
  function NumberInput(props) {
    var _this4;
    (0, _classCallCheck2["default"])(this, NumberInput);
    _this4 = _super8.call(this, props);
    _this4.inputField = /*#__PURE__*/_react["default"].createRef();
    return _this4;
  }
  (0, _createClass2["default"])(NumberInput, [{
    key: "render",
    value: function render() {
      var _this$props8;
      var props = {};
      props.type = 'number';
      props.className = 'form-control';
      props.name = this.props.data.field_name;
      if (this.props.mutable) {
        props.defaultValue = this.props.defaultValue;
        props.ref = this.inputField;
      }
      if (this.props.read_only) {
        props.disabled = 'disabled';
      }
      var containerClasses = 'ContainerItem rfb-item';
      if (this.props.data.pageBreakBefore) {
        containerClasses += ' alwaysbreak';
      }
      var mainContainerClasses = '';
      if (this.props.data.visible === false && this.props.data.visible !== undefined && this.props.mutable === true) {
        mainContainerClasses = 'hidden';
      }
      if (this.props.data.customContainerClass !== undefined && this.props.mutable === true) {
        mainContainerClasses += ' ' + this.props.data.customContainerClass;
      }
      var baseClasses = 'SortableItem rfb-item';
      if (this.props.data.pageBreakBefore) {
        baseClasses += ' alwaysbreak';
      }
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: mainContainerClasses
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: containerClasses
      }, /*#__PURE__*/_react["default"].createElement("div", {
        style: _objectSpread({}, this.props.style),
        className: baseClasses
      }, (this.props.index || this.props.index === 0) && /*#__PURE__*/_react["default"].createElement("h3", {
        className: "sortableItem-sequence"
      }, this.props.index + 1), /*#__PURE__*/_react["default"].createElement("div", {
        className: "form-group"
      }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement("input", props)), /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props))), /*#__PURE__*/_react["default"].createElement(_componentSign["default"], this.props), ((_this$props8 = this.props) === null || _this$props8 === void 0 || (_this$props8 = _this$props8.data) === null || _this$props8 === void 0 ? void 0 : _this$props8.history) && /*#__PURE__*/_react["default"].createElement(_historyComponent["default"], this.props));
    }
  }]);
  return NumberInput;
}(_react["default"].Component);
var TextArea = /*#__PURE__*/function (_React$Component9) {
  (0, _inherits2["default"])(TextArea, _React$Component9);
  var _super9 = _createSuper(TextArea);
  function TextArea(props) {
    var _this5;
    (0, _classCallCheck2["default"])(this, TextArea);
    _this5 = _super9.call(this, props);
    _this5.inputField = /*#__PURE__*/_react["default"].createRef();
    return _this5;
  }
  (0, _createClass2["default"])(TextArea, [{
    key: "render",
    value: function render() {
      var _this$props9;
      var props = {};
      props.className = 'form-control';
      props.name = this.props.data.field_name;
      if (this.props.read_only) {
        props.disabled = 'disabled';
      }
      if (this.props.mutable) {
        props.defaultValue = this.props.defaultValue;
        props.ref = this.inputField;
      }
      var containerClasses = 'ContainerItem rfb-item';
      if (this.props.data.pageBreakBefore) {
        containerClasses += ' alwaysbreak';
      }
      var mainContainerClasses = '';
      if (this.props.data.visible === false && this.props.data.visible !== undefined && this.props.mutable === true) {
        mainContainerClasses = 'hidden';
      }
      if (this.props.data.customContainerClass !== undefined && this.props.mutable === true) {
        mainContainerClasses += ' ' + this.props.data.customContainerClass;
      }
      var baseClasses = 'SortableItem rfb-item';
      if (this.props.data.pageBreakBefore) {
        baseClasses += ' alwaysbreak';
      }
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: mainContainerClasses
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: containerClasses
      }, /*#__PURE__*/_react["default"].createElement("div", {
        style: _objectSpread({}, this.props.style),
        className: baseClasses
      }, (this.props.index || this.props.index === 0) && /*#__PURE__*/_react["default"].createElement("h3", {
        className: "sortableItem-sequence"
      }, this.props.index + 1), /*#__PURE__*/_react["default"].createElement("div", {
        className: "form-group"
      }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement("textarea", props)), /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props))), /*#__PURE__*/_react["default"].createElement(_componentSign["default"], this.props), ((_this$props9 = this.props) === null || _this$props9 === void 0 || (_this$props9 = _this$props9.data) === null || _this$props9 === void 0 ? void 0 : _this$props9.history) && /*#__PURE__*/_react["default"].createElement(_historyComponent["default"], this.props));
    }
  }]);
  return TextArea;
}(_react["default"].Component);
var Dropdown = /*#__PURE__*/function (_React$Component10) {
  (0, _inherits2["default"])(Dropdown, _React$Component10);
  var _super10 = _createSuper(Dropdown);
  function Dropdown(props) {
    var _this6;
    (0, _classCallCheck2["default"])(this, Dropdown);
    _this6 = _super10.call(this, props);
    _this6.inputField = /*#__PURE__*/_react["default"].createRef();
    return _this6;
  }
  (0, _createClass2["default"])(Dropdown, [{
    key: "render",
    value: function render() {
      var _this$props10;
      var props = {};
      props.className = 'form-control';
      props.name = this.props.data.field_name;
      if (this.props.mutable) {
        props.defaultValue = this.props.defaultValue;
        props.ref = this.inputField;
      }
      if (this.props.read_only) {
        props.disabled = 'disabled';
      }
      var containerClasses = 'ContainerItem rfb-item';
      if (this.props.data.pageBreakBefore) {
        containerClasses += ' alwaysbreak';
      }
      var mainContainerClasses = '';
      if (this.props.data.visible === false && this.props.data.visible !== undefined && this.props.mutable === true) {
        mainContainerClasses = 'hidden';
      }
      if (this.props.data.customContainerClass !== undefined && this.props.mutable === true) {
        mainContainerClasses += ' ' + this.props.data.customContainerClass;
      }
      var baseClasses = 'SortableItem rfb-item';
      if (this.props.data.pageBreakBefore) {
        baseClasses += ' alwaysbreak';
      }
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: mainContainerClasses
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: containerClasses
      }, /*#__PURE__*/_react["default"].createElement("div", {
        style: _objectSpread({}, this.props.style),
        className: baseClasses
      }, (this.props.index || this.props.index === 0) && /*#__PURE__*/_react["default"].createElement("h3", {
        className: "sortableItem-sequence"
      }, this.props.index + 1), /*#__PURE__*/_react["default"].createElement("div", {
        className: "form-group"
      }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement("select", props, this.props.data.options.map(function (option) {
        var this_key = "preview_".concat(option.key);
        return /*#__PURE__*/_react["default"].createElement("option", {
          value: option.value,
          key: this_key
        }, option.text);
      }))), /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props))), /*#__PURE__*/_react["default"].createElement(_componentSign["default"], this.props), ((_this$props10 = this.props) === null || _this$props10 === void 0 || (_this$props10 = _this$props10.data) === null || _this$props10 === void 0 ? void 0 : _this$props10.history) && /*#__PURE__*/_react["default"].createElement(_historyComponent["default"], this.props));
    }
  }]);
  return Dropdown;
}(_react["default"].Component);
var Signature = /*#__PURE__*/function (_React$Component11) {
  (0, _inherits2["default"])(Signature, _React$Component11);
  var _super11 = _createSuper(Signature);
  function Signature(props) {
    var _this7;
    (0, _classCallCheck2["default"])(this, Signature);
    _this7 = _super11.call(this, props);
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this7), "clear", function () {
      if (_this7.state.defaultValue) {
        _this7.setState({
          defaultValue: ''
        });
      } else if (_this7.canvas.current) {
        _this7.canvas.current.clear();
      }
    });
    _this7.state = {
      defaultValue: props.defaultValue
    };
    _this7.inputField = /*#__PURE__*/_react["default"].createRef();
    _this7.canvas = /*#__PURE__*/_react["default"].createRef();
    return _this7;
  }
  (0, _createClass2["default"])(Signature, [{
    key: "render",
    value: function render() {
      var _this$props11;
      var defaultValue = this.state.defaultValue;
      var canClear = !!defaultValue;
      var props = {};
      props.type = 'hidden';
      props.name = this.props.data.field_name;
      if (this.props.mutable) {
        props.defaultValue = defaultValue;
        props.ref = this.inputField;
      }
      var pad_props = {};
      // umd requires canvasProps={{ width: 400, height: 150 }}
      if (this.props.mutable) {
        pad_props.defaultValue = defaultValue;
        pad_props.ref = this.canvas;
        canClear = !this.props.read_only;
      }
      var baseClasses = 'SortableItem rfb-item';
      if (this.props.data.pageBreakBefore) {
        baseClasses += ' alwaysbreak';
      }
      var containerClasses = 'ContainerItem rfb-item';
      if (this.props.data.pageBreakBefore) {
        containerClasses += ' alwaysbreak';
      }
      var mainContainerClasses = '';
      if (this.props.data.visible === false && this.props.data.visible !== undefined && this.props.mutable === true) {
        mainContainerClasses = 'hidden';
      }
      if (this.props.data.customContainerClass !== undefined && this.props.mutable === true) {
        mainContainerClasses += ' ' + this.props.data.customContainerClass;
      }
      var sourceDataURL;
      if (defaultValue && defaultValue.length > 0) {
        sourceDataURL = "data:image/png;base64,".concat(defaultValue);
      }
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: mainContainerClasses
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: containerClasses
      }, /*#__PURE__*/_react["default"].createElement("div", {
        style: _objectSpread({}, this.props.style),
        className: baseClasses
      }, (this.props.index || this.props.index === 0) && /*#__PURE__*/_react["default"].createElement("h3", {
        className: "sortableItem-sequence"
      }, this.props.index + 1), /*#__PURE__*/_react["default"].createElement("div", {
        className: "form-group"
      }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), this.props.read_only === true || !!sourceDataURL ? /*#__PURE__*/_react["default"].createElement("img", {
        src: sourceDataURL
      }) : /*#__PURE__*/_react["default"].createElement(_reactSignatureCanvas["default"], pad_props), canClear && /*#__PURE__*/_react["default"].createElement("i", {
        className: "fas fa-times clear-signature",
        onClick: this.clear,
        title: "Clear Signature"
      }), /*#__PURE__*/_react["default"].createElement("input", props)), /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props))), /*#__PURE__*/_react["default"].createElement(_componentSign["default"], this.props), ((_this$props11 = this.props) === null || _this$props11 === void 0 || (_this$props11 = _this$props11.data) === null || _this$props11 === void 0 ? void 0 : _this$props11.history) && /*#__PURE__*/_react["default"].createElement(_historyComponent["default"], this.props));
    }
  }]);
  return Signature;
}(_react["default"].Component);
var Tags = /*#__PURE__*/function (_React$Component12) {
  (0, _inherits2["default"])(Tags, _React$Component12);
  var _super12 = _createSuper(Tags);
  function Tags(props) {
    var _this8;
    (0, _classCallCheck2["default"])(this, Tags);
    _this8 = _super12.call(this, props);
    // state = { value: this.props.defaultValue !== undefined ? this.props.defaultValue.split(',') : [] };
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this8), "handleChange", function (e) {
      _this8.setState({
        value: e || []
      });
    });
    _this8.inputField = /*#__PURE__*/_react["default"].createRef();
    var defaultValue = props.defaultValue,
      data = props.data;
    _this8.state = {
      value: _this8.getDefaultValue(defaultValue, data.options)
    };
    return _this8;
  }
  (0, _createClass2["default"])(Tags, [{
    key: "getDefaultValue",
    value: function getDefaultValue(defaultValue, options) {
      if (defaultValue) {
        if (typeof defaultValue === 'string') {
          var vals = defaultValue.split(',').map(function (x) {
            return x.trim();
          });
          return options.filter(function (x) {
            return vals.indexOf(x.value) > -1;
          });
        }
        return options.filter(function (x) {
          return defaultValue.indexOf(x.value) > -1;
        });
      }
      return [];
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props12;
      var options = this.props.data.options.map(function (option) {
        option.label = option.text;
        return option;
      });
      var props = {};
      props.isMulti = true;
      props.name = this.props.data.field_name;
      props.onChange = this.handleChange;
      props.options = options;
      if (!this.props.mutable) {
        props.value = options[0].text;
      } // to show a sample of what tags looks like
      if (this.props.mutable) {
        props.isDisabled = this.props.read_only;
        props.value = this.state.value;
        props.ref = this.inputField;
      }
      var containerClasses = 'ContainerItem rfb-item';
      if (this.props.data.pageBreakBefore) {
        containerClasses += ' alwaysbreak';
      }
      var mainContainerClasses = '';
      if (this.props.data.visible === false && this.props.data.visible !== undefined && this.props.mutable === true) {
        mainContainerClasses = 'hidden';
      }
      if (this.props.data.customContainerClass !== undefined && this.props.mutable === true) {
        mainContainerClasses += ' ' + this.props.data.customContainerClass;
      }
      var baseClasses = 'SortableItem rfb-item';
      if (this.props.data.pageBreakBefore) {
        baseClasses += ' alwaysbreak';
      }
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: mainContainerClasses
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: containerClasses
      }, /*#__PURE__*/_react["default"].createElement("div", {
        style: _objectSpread({}, this.props.style),
        className: baseClasses
      }, (this.props.index || this.props.index === 0) && /*#__PURE__*/_react["default"].createElement("h3", {
        className: "sortableItem-sequence"
      }, this.props.index + 1), /*#__PURE__*/_react["default"].createElement("div", {
        className: "form-group"
      }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactSelect["default"], props)), /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props))), /*#__PURE__*/_react["default"].createElement(_componentSign["default"], this.props), ((_this$props12 = this.props) === null || _this$props12 === void 0 || (_this$props12 = _this$props12.data) === null || _this$props12 === void 0 ? void 0 : _this$props12.history) && /*#__PURE__*/_react["default"].createElement(_historyComponent["default"], this.props));
    }
  }]);
  return Tags;
}(_react["default"].Component);
var Checkboxes = /*#__PURE__*/function (_React$Component13) {
  (0, _inherits2["default"])(Checkboxes, _React$Component13);
  var _super13 = _createSuper(Checkboxes);
  function Checkboxes(props) {
    var _this9;
    (0, _classCallCheck2["default"])(this, Checkboxes);
    _this9 = _super13.call(this, props);
    _this9.options = {};
    return _this9;
  }
  (0, _createClass2["default"])(Checkboxes, [{
    key: "render",
    value: function render() {
      var _this10 = this,
        _this$props13;
      var self = this;
      var classNames = 'custom-control custom-checkbox';
      if (this.props.data.inline) {
        classNames += ' option-inline';
      }
      var containerClasses = 'ContainerItem rfb-item';
      if (this.props.data.pageBreakBefore) {
        containerClasses += ' alwaysbreak';
      }
      var mainContainerClasses = '';
      if (this.props.data.visible === false && this.props.data.visible !== undefined && this.props.mutable === true) {
        mainContainerClasses = 'hidden';
      }
      if (this.props.data.customContainerClass !== undefined && this.props.mutable === true) {
        mainContainerClasses += ' ' + this.props.data.customContainerClass;
      }
      var baseClasses = 'SortableItem rfb-item';
      if (this.props.data.pageBreakBefore) {
        baseClasses += ' alwaysbreak';
      }
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: mainContainerClasses
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: containerClasses
      }, /*#__PURE__*/_react["default"].createElement("div", {
        style: _objectSpread({}, this.props.style),
        className: baseClasses
      }, (this.props.index || this.props.index === 0) && /*#__PURE__*/_react["default"].createElement("h3", {
        className: "sortableItem-sequence"
      }, this.props.index + 1), /*#__PURE__*/_react["default"].createElement("div", {
        className: "form-group"
      }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({
        className: "form-label"
      }, this.props)), this.props.data.options.map(function (option) {
        var this_key = "preview_".concat(option.key);
        var props = {};
        props.name = "option_".concat(option.key);
        props.type = 'checkbox';
        props.value = option.value;
        if (self.props.mutable) {
          props.defaultChecked = self.props.defaultValue !== undefined && self.props.defaultValue.indexOf(option.key) > -1;
        }
        if (_this10.props.read_only) {
          props.disabled = 'disabled';
        }
        return /*#__PURE__*/_react["default"].createElement("div", {
          className: classNames,
          key: this_key
        }, /*#__PURE__*/_react["default"].createElement("input", (0, _extends2["default"])({
          id: "fid_".concat(this_key),
          className: "custom-control-input",
          ref: function ref(c) {
            if (c && self.props.mutable) {
              self.options["child_ref_".concat(option.key)] = c;
            }
          }
        }, props)), /*#__PURE__*/_react["default"].createElement("label", {
          className: "custom-control-label",
          htmlFor: "fid_".concat(this_key)
        }, option.text));
      })), /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props))), /*#__PURE__*/_react["default"].createElement(_componentSign["default"], this.props), ((_this$props13 = this.props) === null || _this$props13 === void 0 || (_this$props13 = _this$props13.data) === null || _this$props13 === void 0 ? void 0 : _this$props13.history) && /*#__PURE__*/_react["default"].createElement(_historyComponent["default"], this.props));
    }
  }]);
  return Checkboxes;
}(_react["default"].Component);
var RadioButtons = /*#__PURE__*/function (_React$Component14) {
  (0, _inherits2["default"])(RadioButtons, _React$Component14);
  var _super14 = _createSuper(RadioButtons);
  function RadioButtons(props) {
    var _this11;
    (0, _classCallCheck2["default"])(this, RadioButtons);
    _this11 = _super14.call(this, props);
    _this11.options = {};
    return _this11;
  }
  (0, _createClass2["default"])(RadioButtons, [{
    key: "render",
    value: function render() {
      var _this12 = this,
        _this$props14;
      var self = this;
      var classNames = 'custom-control custom-radio';
      if (this.props.data.inline) {
        classNames += ' option-inline';
      }
      var containerClasses = 'ContainerItem rfb-item';
      if (this.props.data.pageBreakBefore) {
        containerClasses += ' alwaysbreak';
      }
      var mainContainerClasses = '';
      if (this.props.data.visible === false && this.props.data.visible !== undefined && this.props.mutable === true) {
        mainContainerClasses = 'hidden';
      }
      if (this.props.data.customContainerClass !== undefined && this.props.mutable === true) {
        mainContainerClasses += ' ' + this.props.data.customContainerClass;
      }
      var baseClasses = 'SortableItem rfb-item';
      if (this.props.data.pageBreakBefore) {
        baseClasses += ' alwaysbreak';
      }
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: mainContainerClasses
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: containerClasses
      }, /*#__PURE__*/_react["default"].createElement("div", {
        style: _objectSpread({}, this.props.style),
        className: baseClasses
      }, (this.props.index || this.props.index === 0) && /*#__PURE__*/_react["default"].createElement("h3", {
        className: "sortableItem-sequence"
      }, this.props.index + 1), /*#__PURE__*/_react["default"].createElement("div", {
        className: "form-group"
      }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({
        className: "form-label"
      }, this.props)), this.props.data.options.map(function (option) {
        var this_key = "preview_".concat(option.key);
        var props = {};
        props.name = self.props.data.field_name;
        props.type = 'radio';
        props.value = option.value;
        if (self.props.mutable) {
          props.defaultChecked = self.props.defaultValue !== undefined && (self.props.defaultValue.indexOf(option.key) > -1 || self.props.defaultValue.indexOf(option.value) > -1);
        }
        if (_this12.props.read_only) {
          props.disabled = 'disabled';
        }
        return /*#__PURE__*/_react["default"].createElement("div", {
          className: classNames,
          key: this_key
        }, /*#__PURE__*/_react["default"].createElement("input", (0, _extends2["default"])({
          id: "fid_".concat(this_key),
          className: "custom-control-input",
          ref: function ref(c) {
            if (c && self.props.mutable) {
              self.options["child_ref_".concat(option.key)] = c;
            }
          }
        }, props)), /*#__PURE__*/_react["default"].createElement("label", {
          className: "custom-control-label",
          htmlFor: "fid_".concat(this_key)
        }, option.text));
      })), /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props))), /*#__PURE__*/_react["default"].createElement(_componentSign["default"], this.props), ((_this$props14 = this.props) === null || _this$props14 === void 0 || (_this$props14 = _this$props14.data) === null || _this$props14 === void 0 ? void 0 : _this$props14.history) && /*#__PURE__*/_react["default"].createElement(_historyComponent["default"], this.props));
    }
  }]);
  return RadioButtons;
}(_react["default"].Component);
var Image = /*#__PURE__*/function (_React$Component15) {
  (0, _inherits2["default"])(Image, _React$Component15);
  var _super15 = _createSuper(Image);
  function Image() {
    (0, _classCallCheck2["default"])(this, Image);
    return _super15.apply(this, arguments);
  }
  (0, _createClass2["default"])(Image, [{
    key: "render",
    value: function render() {
      var _this$props15;
      var style = this.props.data.center ? {
        textAlign: 'center'
      } : null;
      var baseClasses = 'SortableItem rfb-item';
      if (this.props.data.pageBreakBefore) {
        baseClasses += ' alwaysbreak';
      }
      var containerClasses = 'ContainerItem rfb-item';
      if (this.props.data.pageBreakBefore) {
        containerClasses += ' alwaysbreak';
      }
      var mainContainerClasses = '';
      if (this.props.data.visible === false && this.props.data.visible !== undefined && this.props.mutable === true) {
        mainContainerClasses = 'hidden';
      }
      if (this.props.data.customContainerClass !== undefined && this.props.mutable === true) {
        mainContainerClasses += ' ' + this.props.data.customContainerClass;
      }
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: mainContainerClasses
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: containerClasses
      }, /*#__PURE__*/_react["default"].createElement("div", {
        style: _objectSpread(_objectSpread({}, this.props.style), {}, {
          style: style
        }),
        className: baseClasses
      }, (this.props.index || this.props.index === 0) && /*#__PURE__*/_react["default"].createElement("h3", {
        className: "sortableItem-sequence"
      }, this.props.index + 1), this.props.data.src && /*#__PURE__*/_react["default"].createElement("img", {
        src: this.props.data.src,
        width: this.props.data.width,
        height: this.props.data.height
      }), !this.props.data.src && /*#__PURE__*/_react["default"].createElement("div", {
        className: "no-image"
      }, "No Image"), /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props))), /*#__PURE__*/_react["default"].createElement(_componentSign["default"], this.props), ((_this$props15 = this.props) === null || _this$props15 === void 0 || (_this$props15 = _this$props15.data) === null || _this$props15 === void 0 ? void 0 : _this$props15.history) && /*#__PURE__*/_react["default"].createElement(_historyComponent["default"], this.props));
    }
  }]);
  return Image;
}(_react["default"].Component);
var Rating = /*#__PURE__*/function (_React$Component16) {
  (0, _inherits2["default"])(Rating, _React$Component16);
  var _super16 = _createSuper(Rating);
  function Rating(props) {
    var _this13;
    (0, _classCallCheck2["default"])(this, Rating);
    _this13 = _super16.call(this, props);
    _this13.inputField = /*#__PURE__*/_react["default"].createRef();
    return _this13;
  }
  (0, _createClass2["default"])(Rating, [{
    key: "render",
    value: function render() {
      var _this$props16;
      var props = {};
      props.name = this.props.data.field_name