react-survey-builder 1.0.71 → 1.0.73

package/lib/survey-elements-edit.js

@@ -1,32 +1,37 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["onChange", "onBlur", "value", "name"];
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+var _excluded = ["containerProps", "onChange", "onBlur", "value", "name"];
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+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) { _defineProperty(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 _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } } return target; }
 import React from 'react';
 import TextAreaAutosize from 'react-textarea-autosize';
-import { ContentState, EditorState, convertFromHTML as _convertFromHTML, convertToRaw } from 'draft-js';
+import { ContentState, EditorState, convertFromHTML as draftJsConvertFromHTML, convertToRaw } from 'draft-js';
 import draftToHtml from 'draftjs-to-html';
 import DynamicOptionList from './dynamic-option-list';
 import { get } from './stores/requests';
 import { FaTimes } from 'react-icons/fa';
-import { Button, Col, Form, Row } from 'react-bootstrap/esm';
+import { Button, Col, Form, Row } from 'react-bootstrap';
 import Editor from 'react-simple-wysiwyg';
 import ID from './UUID';
+import { isListNotEmpty, isObjectNotEmpty } from './utils/objectUtils';
 var CustomWysiwygInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var onChange = _ref.onChange,
+  var containerProps = _ref.containerProps,
+    onChange = _ref.onChange,
     onBlur = _ref.onBlur,
     value = _ref.value,
     name = _ref.name,
@@ -36,569 +41,659 @@ var CustomWysiwygInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     value: value,
     name: name,
     onChange: onChange,
-    containerProps: {
-      style: {
-        height: '500px',
-        width: '100%',
-        resize: 'both'
-      }
-    }
+    containerProps: containerProps
   }));
 });
-var SurveyElementsEdit = /*#__PURE__*/function (_React$Component) {
-  function SurveyElementsEdit(props) {
-    var _this;
-    _classCallCheck(this, SurveyElementsEdit);
-    _this = _callSuper(this, SurveyElementsEdit, [props]);
-    _this.state = {
-      element: _this.props.element,
-      item: _this.props.item,
-      dirty: false
-    };
-    return _this;
-  }
-  _inherits(SurveyElementsEdit, _React$Component);
-  return _createClass(SurveyElementsEdit, [{
-    key: "toggleRequired",
-    value: function toggleRequired() {
-      // const this_element = this.state.element;
+var SurveyElementsEdit = function SurveyElementsEdit(_ref2) {
+  var _element$options;
+  var element = _ref2.element,
+    setElement = _ref2.setElement,
+    _ref2$files = _ref2.files,
+    files = _ref2$files === void 0 ? [] : _ref2$files,
+    _ref2$showCorrectColu = _ref2.showCorrectColumn,
+    showCorrectColumn = _ref2$showCorrectColu === void 0 ? false : _ref2$showCorrectColu,
+    _ref2$showDescription = _ref2.showDescription,
+    showDescription = _ref2$showDescription === void 0 ? false : _ref2$showDescription,
+    manualEditModeOff = _ref2.manualEditModeOff,
+    updateElement = _ref2.updateElement;
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    dirty = _React$useState2[0],
+    setDirty = _React$useState2[1];
+  var toggleRequired = function toggleRequired() {
+    // const thisElement = isObjectNotEmpty(element) ? { ...element } : {};
+  };
+  var editElementProp = function editElementProp(elementProperty, targetProperty, e) {
+    // elemProperty could be content or label
+    // targProperty could be value or checked
+    var thisElement = isObjectNotEmpty(element) ? _objectSpread({}, element) : {};
+    thisElement[elementProperty] = e.target[targetProperty];
+    setElement(thisElement);
+    setDirty(true);
+    if (targetProperty === 'checked') {
+      onUpdateElement();
     }
-  }, {
-    key: "editElementProp",
-    value: function editElementProp(elemProperty, targProperty, e) {
-      var _this2 = this;
-      // elemProperty could be content or label
-      // targProperty could be value or checked
-      var thisElement = this.state.element;
-      thisElement[elemProperty] = e.target[targProperty];
-      this.setState({
-        element: thisElement,
-        dirty: true
-      }, function () {
-        if (targProperty === 'checked') {
-          _this2.updateElement();
-        }
+  };
+  var onEditorStateChange = function onEditorStateChange(index, property, editorContent) {
+    var html = draftToHtml(convertToRaw(editorContent.getCurrentContent())).replace(/&nbsp;/g, ' ').replace(/(?:\r\n|\r|\n)/g, '');
+    var thisElement = isObjectNotEmpty(element) ? _objectSpread({}, element) : {};
+    thisElement[property] = html;
+    setElement(thisElement);
+    setDirty(true);
+  };
+  var onUpdateElement = function onUpdateElement() {
+    var thisElement = isObjectNotEmpty(element) ? _objectSpread({}, element) : {};
+    // to prevent ajax calls with no change
+    if (dirty) {
+      updateElement(thisElement);
+      setDirty(false);
+    }
+  };
+  var convertFromHTML = function convertFromHTML(content) {
+    var newContent = draftJsConvertFromHTML(content);
+    if (!newContent.contentBlocks || !newContent.contentBlocks.length) {
+      // to prevent crash when no contents in editor
+      return EditorState.createEmpty();
+    }
+    var contentState = ContentState.createFromBlockArray(newContent);
+    return EditorState.createWithContent(contentState);
+  };
+  var addOptions = function addOptions() {
+    var optionsApiUrl = document.getElementById('optionsApiUrl').value;
+    if (optionsApiUrl) {
+      get(optionsApiUrl).then(function (data) {
+        var options = [];
+        data.forEach(function (dataOption) {
+          // eslint-disable-next-line no-param-reassign
+          dataOption.key = ID.uuid();
+          options.push(dataOption);
+        });
+        var thisElement = isObjectNotEmpty(element) ? _objectSpread({}, element) : {};
+        thisElement.options = options;
+        setElement(thisElement);
+        setDirty(true);
       });
     }
-  }, {
-    key: "onEditorStateChange",
-    value: function onEditorStateChange(index, property, editorContent) {
-      // const html = draftToHtml(convertToRaw(editorContent.getCurrentContent())).replace(/<p>/g, '<div>').replace(/<\/p>/g, '</div>');
-      // const html = draftToHtml(convertToRaw(editorContent.getCurrentContent())).replace(/<p>/g, '').replace(/<\/p>/g, '').replace(/&nbsp;/g, ' ').replace(/(?:\r\n|\r|\n)/g, '');
-      var html = draftToHtml(convertToRaw(editorContent.getCurrentContent())).replace(/&nbsp;/g, ' ').replace(/(?:\r\n|\r|\n)/g, '');
-      var thisElement = this.state.element;
-      thisElement[property] = html;
-      this.setState({
-        element: thisElement,
+  };
+  React.useEffect(function () {
+    if (dirty) {
+      var thisElement = isObjectNotEmpty(element) ? _objectSpread(_objectSpread({}, element), {}, {
         dirty: true
-      });
+      }) : {
+        dirty: true
+      };
+      updateElement(thisElement);
     }
-  }, {
-    key: "updateElement",
-    value: function updateElement() {
-      var thisElement = this.state.element;
-      // to prevent ajax calls with no change
-      if (this.state.dirty) {
-        this.props.updateElement.call(this.props.preview, thisElement);
-        this.setState({
-          dirty: false
-        });
+  }, [dirty, element]);
+  var thisRequiredChecked = element.hasOwnProperty('required') ? element.required : false;
+  var thisDefaultChecked = element.hasOwnProperty('defaultChecked') ? element.defaultChecked : false;
+  var thisReadOnly = element.hasOwnProperty('readOnly') ? element.readOnly : false;
+  var thisDefaultToday = element.hasOwnProperty('defaultToday') ? element.defaultToday : false;
+  var thisCheckedInline = element.hasOwnProperty('inline') ? element.inline : false;
+  var thisCheckedBold = element.hasOwnProperty('bold') ? element.bold : false;
+  var thisCheckedItalic = element.hasOwnProperty('italic') ? element.italic : false;
+  var thisCheckedCenter = element.hasOwnProperty('center') ? element.center : false;
+  var thisCheckedPageBreak = element.hasOwnProperty('pageBreakBefore') ? element.pageBreakBefore : false;
+  var thisCheckedAlternateForm = element.hasOwnProperty('alternateForm') ? element.alternateForm : false;
+  var thisCheckedHideLabel = element.hasOwnProperty('hideLabel') ? element.hideLabel : false;
+  var thisCheckedConditional = element.hasOwnProperty('conditional') ? element.conditional : false;
+  var canHaveAnswer = ['NumberInput', 'EmailInput', 'TextInput', 'PhoneNumber', 'TextArea', 'DatePicker', 'Dropdown', 'Tags', 'Checkboxes', 'Checkbox', 'RadioButtons', 'Rating', 'Range'].indexOf(element.element) !== -1;
+  var canHaveOptionValue = ['Dropdown', 'Tags', 'Checkboxes', 'RadioButtons'].indexOf(element.element) !== -1;
+  var canHaveOptionCorrect = canHaveAnswer && canHaveOptionValue;
+  var thisFiles = isListNotEmpty(files) ? _toConsumableArray(files) : [];
+  if (thisFiles.length < 1 || thisFiles.length > 0 && thisFiles[0].id !== '') {
+    thisFiles.unshift({
+      id: '',
+      file_name: ''
+    });
+  }
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: "clearfix"
+  }, /*#__PURE__*/React.createElement("h4", {
+    className: "float-start"
+  }, element.text), /*#__PURE__*/React.createElement(FaTimes, {
+    className: "float-end dismiss-edit",
+    onClick: manualEditModeOff
+  })), element.hasOwnProperty('content') && (element.element === 'Header' || element.element === 'Label' || element.element === 'Paragraph' || element.element === 'ContentBody') && /*#__PURE__*/React.createElement(Form.Group, {
+    className: "form-group mb-5"
+  }, /*#__PURE__*/React.createElement(Form.Label, {
+    className: "fw-bold"
+  }, "Text to display:"), /*#__PURE__*/React.createElement(Form.Control, {
+    type: "text",
+    id: "content",
+    name: "content",
+    as: CustomWysiwygInput,
+    value: element.content,
+    defaultValue: element.content,
+    onBlur: onUpdateElement,
+    onChange: function onChange(e) {
+      editElementProp('content', 'value', e);
+    },
+    containerProps: {
+      style: {
+        height: '200px',
+        width: '100%',
+        resize: 'vertical'
       }
     }
-  }, {
-    key: "convertFromHTML",
-    value: function convertFromHTML(content) {
-      var newContent = _convertFromHTML(content);
-      if (!newContent.contentBlocks || !newContent.contentBlocks.length) {
-        // to prevent crash when no contents in editor
-        return EditorState.createEmpty();
+  })), element.hasOwnProperty('filePath') && /*#__PURE__*/React.createElement(Form.Group, {
+    className: "form-group mb-5"
+  }, /*#__PURE__*/React.createElement(Form.Label, {
+    className: "fw-bold",
+    htmlFor: "fileSelect"
+  }, "Choose file:"), /*#__PURE__*/React.createElement(Form.Select, {
+    id: "fileSelect",
+    defaultValue: element.filePath,
+    onBlur: onUpdateElement,
+    onChange: function onChange(e) {
+      editElementProp('filePath', 'value', e);
+    }
+  }, thisFiles.map(function (file) {
+    var thisKey = "file_".concat(file.id);
+    return /*#__PURE__*/React.createElement("option", {
+      value: file.id,
+      key: thisKey
+    }, file.file_name);
+  }))), element.hasOwnProperty('href') && /*#__PURE__*/React.createElement(Form.Group, {
+    className: "form-group mb-5"
+  }, /*#__PURE__*/React.createElement(Form.Label, {
+    className: "fw-bold",
+    htmlFor: "href"
+  }, "Link to:"), /*#__PURE__*/React.createElement(Form.Control, {
+    id: "href",
+    type: "text",
+    defaultValue: element.href,
+    onBlur: onUpdateElement,
+    onChange: function onChange(e) {
+      editElementProp('href', 'value', e);
+    }
+  })), element.hasOwnProperty('label') && /*#__PURE__*/React.createElement(Form.Group, {
+    className: "form-group mb-5"
+  }, /*#__PURE__*/React.createElement(Form.Label, {
+    className: "fw-bold"
+  }, "Display Label:"), /*#__PURE__*/React.createElement(Form.Control, {
+    type: "text",
+    id: "label",
+    name: "label",
+    as: CustomWysiwygInput,
+    value: element.label,
+    defaultValue: element.label,
+    onBlur: onUpdateElement,
+    onChange: function onChange(e) {
+      editElementProp('label', 'value', e);
+    },
+    containerProps: {
+      style: {
+        height: '200px',
+        width: '100%',
+        resize: 'vertical'
       }
-      var contentState = ContentState.createFromBlockArray(newContent);
-      return EditorState.createWithContent(contentState);
     }
-  }, {
-    key: "addOptions",
-    value: function addOptions() {
-      var _this3 = this;
-      var optionsApiUrl = document.getElementById('optionsApiUrl').value;
-      if (optionsApiUrl) {
-        get(optionsApiUrl).then(function (data) {
-          _this3.props.element.options = [];
-          var options = _this3.props.element.options;
-          data.forEach(function (x) {
-            // eslint-disable-next-line no-param-reassign
-            x.key = ID.uuid();
-            options.push(x);
-          });
-          var this_element = _this3.state.element;
-          _this3.setState({
-            element: this_element,
-            dirty: true
-          });
-        });
+  })), (element.hasOwnProperty('required') || element.hasOwnProperty('readOnly') || element.hasOwnProperty('defaultToday') || ['Checkboxes', 'Checkbox'].indexOf(element.element) !== -1 || (element.element === 'RadioButtons' || element.element === 'Checkboxes') && element.hasOwnProperty('inline')) && /*#__PURE__*/React.createElement(Form.Group, {
+    className: "form-group mb-5"
+  }, /*#__PURE__*/React.createElement(Form.Label, {
+    className: "fw-bold"
+  }, "Field Properties:"), element.hasOwnProperty('required') && /*#__PURE__*/React.createElement(Form.Check, {
+    id: "is-required",
+    label: "Required",
+    type: "checkbox",
+    checked: thisRequiredChecked,
+    value: true,
+    onChange: function onChange(e) {
+      editElementProp('required', 'checked', e);
+    }
+  }), element.hasOwnProperty('readOnly') && /*#__PURE__*/React.createElement(Form.Check, {
+    id: "is-read-only",
+    label: "Read Only",
+    type: "checkbox",
+    checked: thisReadOnly,
+    value: true,
+    onChange: function onChange(e) {
+      editElementProp('readOnly', 'checked', e);
+    }
+  }), element.hasOwnProperty('defaultToday') && /*#__PURE__*/React.createElement(Form.Check, {
+    id: "is-default-to-today",
+    label: "Default to Today",
+    type: "checkbox",
+    checked: thisDefaultToday,
+    value: true,
+    onChange: function onChange(e) {
+      editElementProp('defaultToday', 'checked', e);
+    }
+  }), ['Checkboxes', 'Checkbox'].indexOf(element.element) !== -1 && /*#__PURE__*/React.createElement(Form.Check, {
+    id: "default-checked",
+    label: "Default Checked",
+    type: "checkbox",
+    checked: thisDefaultChecked,
+    value: true,
+    onChange: function onChange(e) {
+      editElementProp('defaultChecked', 'checked', e);
+    }
+  }), (element.element === 'RadioButtons' || element.element === 'Checkboxes') && element.hasOwnProperty('inline') && /*#__PURE__*/React.createElement(Form.Check, {
+    id: "display-horizontal",
+    label: "Display Horizontal",
+    type: "checkbox",
+    checked: thisCheckedInline,
+    value: true,
+    onChange: function onChange(e) {
+      editElementProp('inline', 'checked', e);
+    }
+  })), element.element === 'Checkbox' && /*#__PURE__*/React.createElement(Form.Group, {
+    className: "form-group mb-5"
+  }, /*#__PURE__*/React.createElement(Form.Label, {
+    className: "fw-bold"
+  }, "Checkbox Label Text:"), /*#__PURE__*/React.createElement(Form.Control, {
+    type: "text",
+    id: "boxLabel",
+    name: "boxLabel",
+    as: CustomWysiwygInput,
+    value: element.boxLabel,
+    defaultValue: element.boxLabel,
+    onBlur: onUpdateElement,
+    onChange: function onChange(e) {
+      editElementProp('boxLabel', 'value', e);
+    },
+    containerProps: {
+      style: {
+        height: '200px',
+        width: '100%',
+        resize: 'vertical'
       }
     }
+  })), element.hasOwnProperty('src') && /*#__PURE__*/React.createElement(Form.Group, {
+    className: "form-group mb-5"
+  }, /*#__PURE__*/React.createElement(Form.Label, {
+    className: "fw-bold",
+    htmlFor: "srcInput"
+  }, "Link to:"), /*#__PURE__*/React.createElement(Form.Control, {
+    id: "srcInput",
+    type: "text",
+    defaultValue: element.src,
+    onBlur: onUpdateElement,
+    onChange: function onChange(e) {
+      editElementProp('src', 'value', e);
+    }
+  })), (element.element === 'Image' || element.element === 'Camera') && /*#__PURE__*/React.createElement(Form.Group, {
+    className: "form-group mb-5"
+  }, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
+    sm: 3
+  }, /*#__PURE__*/React.createElement(Form.Label, {
+    className: "fw-bold",
+    htmlFor: "do-center"
+  }, "Alignment:"), /*#__PURE__*/React.createElement(Form.Check, {
+    id: "do-center",
+    label: "Center",
+    type: "checkbox",
+    checked: thisCheckedCenter,
+    value: true,
+    onChange: function onChange(e) {
+      editElementProp('center', 'checked', e);
+    }
+  })), /*#__PURE__*/React.createElement(Col, {
+    sm: 3
+  }, /*#__PURE__*/React.createElement(Form.Label, {
+    className: "fw-bold",
+    htmlFor: "elementWidth"
+  }, "Width:"), /*#__PURE__*/React.createElement(Form.Control, {
+    id: "elementWidth",
+    type: "number",
+    defaultValue: element.width,
+    onBlur: onUpdateElement,
+    onChange: function onChange(e) {
+      editElementProp('width', 'value', e);
+    }
+  })), /*#__PURE__*/React.createElement(Col, {
+    sm: 3
+  }, /*#__PURE__*/React.createElement(Form.Label, {
+    className: "fw-bold",
+    htmlFor: "elementHeight"
+  }, "Height:"), /*#__PURE__*/React.createElement(Form.Control, {
+    id: "elementHeight",
+    type: "number",
+    defaultValue: element.height,
+    onBlur: onUpdateElement,
+    onChange: function onChange(e) {
+      editElementProp('height', 'value', e);
+    }
+  })))), element.element === 'FileUpload' && /*#__PURE__*/React.createElement(Form.Group, {
+    className: "form-group mb-5"
+  }, /*#__PURE__*/React.createElement(Form.Label, {
+    className: "fw-bold",
+    htmlFor: "fileType"
+  }, "Choose file type:"), /*#__PURE__*/React.createElement(Form.Select, {
+    id: "fileType",
+    onBlur: onUpdateElement,
+    onChange: function onChange(e) {
+      editElementProp('fileType', 'value', e);
+    }
+  }, [{
+    type: 'image, application/pdf, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-powerpoint, application/vnd.openxmlformats-officedocument.presentationml.presentation, video/mp4,video/x-m4v,video/*',
+    typeName: 'All File Type'
   }, {
-    key: "render",
-    value: function render() {
-      if (this.state.dirty) {
-        this.props.element.dirty = true;
-      }
-      var thisRequiredChecked = this.props.element.hasOwnProperty('required') ? this.props.element.required : false;
-      var thisDefaultChecked = this.props.element.hasOwnProperty('defaultChecked') ? this.props.element.defaultChecked : false;
-      var thisReadOnly = this.props.element.hasOwnProperty('readOnly') ? this.props.element.readOnly : false;
-      var thisDefaultToday = this.props.element.hasOwnProperty('defaultToday') ? this.props.element.defaultToday : false;
-      var thisCheckedInline = this.props.element.hasOwnProperty('inline') ? this.props.element.inline : false;
-      var thisCheckedBold = this.props.element.hasOwnProperty('bold') ? this.props.element.bold : false;
-      var thisCheckedItalic = this.props.element.hasOwnProperty('italic') ? this.props.element.italic : false;
-      var thisCheckedCenter = this.props.element.hasOwnProperty('center') ? this.props.element.center : false;
-      var thisCheckedPageBreak = this.props.element.hasOwnProperty('pageBreakBefore') ? this.props.element.pageBreakBefore : false;
-      var thisCheckedAlternateForm = this.props.element.hasOwnProperty('alternateForm') ? this.props.element.alternateForm : false;
-      var thisCheckedHideLabel = this.props.element.hasOwnProperty('hideLabel') ? this.props.element.hideLabel : false;
-      var canHaveAnswer = ['NumberInput', 'EmailInput', 'TextInput', 'PhoneNumber', 'TextArea', 'DatePicker', 'Dropdown', 'Tags', 'Checkboxes', 'Checkbox', 'RadioButtons', 'Rating', 'Range'].indexOf(this.state.element.element) !== -1;
-      var canHaveOptionValue = ['Dropdown', 'Tags', 'Checkboxes', 'RadioButtons'].indexOf(this.state.element.element) !== -1;
-      var canHaveOptionCorrect = canHaveAnswer && canHaveOptionValue;
-      var thisFiles = this.props.files.length ? this.props.files : [];
-      if (thisFiles.length < 1 || thisFiles.length > 0 && thisFiles[0].id !== '') {
-        thisFiles.unshift({
-          id: '',
-          file_name: ''
-        });
-      }
-      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-        className: "clearfix"
-      }, /*#__PURE__*/React.createElement("h4", {
-        className: "float-start"
-      }, this.props.element.text), /*#__PURE__*/React.createElement(FaTimes, {
-        className: "float-end dismiss-edit",
-        onClick: this.props.manualEditModeOff
-      })), this.props.element.hasOwnProperty('content') && (this.state.element.element === 'Header' || this.state.element.element === 'Label' || this.state.element.element === 'Paragraph' || this.state.element.element === 'ContentBody') && /*#__PURE__*/React.createElement(Form.Group, {
-        className: "form-group mb-5"
-      }, /*#__PURE__*/React.createElement(Form.Label, {
-        className: "fw-bold"
-      }, "Text to display:"), /*#__PURE__*/React.createElement(Form.Control, {
-        type: "text",
-        id: "content",
-        name: "content",
-        as: CustomWysiwygInput,
-        value: this.props.element.content,
-        defaultValue: this.props.element.content,
-        onBlur: this.updateElement.bind(this),
-        onChange: this.editElementProp.bind(this, 'content', 'value')
-      })), this.props.element.hasOwnProperty('filePath') && /*#__PURE__*/React.createElement(Form.Group, {
-        className: "form-group mb-5"
-      }, /*#__PURE__*/React.createElement(Form.Label, {
-        className: "fw-bold",
-        htmlFor: "fileSelect"
-      }, "Choose file:"), /*#__PURE__*/React.createElement(Form.Select, {
-        id: "fileSelect",
-        defaultValue: this.props.element.filePath,
-        onBlur: this.updateElement.bind(this),
-        onChange: this.editElementProp.bind(this, 'filePath', 'value')
-      }, thisFiles.map(function (file) {
-        var thisKey = "file_".concat(file.id);
-        return /*#__PURE__*/React.createElement("option", {
-          value: file.id,
-          key: thisKey
-        }, file.file_name);
-      }))), this.props.element.hasOwnProperty('href') && /*#__PURE__*/React.createElement(Form.Group, {
-        className: "form-group mb-5"
-      }, /*#__PURE__*/React.createElement(Form.Label, {
-        className: "fw-bold",
-        htmlFor: "href"
-      }, "Link to:"), /*#__PURE__*/React.createElement(Form.Control, {
-        id: "href",
-        type: "text",
-        defaultValue: this.props.element.href,
-        onBlur: this.updateElement.bind(this),
-        onChange: this.editElementProp.bind(this, 'href', 'value')
-      })), this.props.element.hasOwnProperty('label') && /*#__PURE__*/React.createElement(Form.Group, {
-        className: "form-group mb-5"
-      }, /*#__PURE__*/React.createElement(Form.Label, {
-        className: "fw-bold"
-      }, "Display Label:"), /*#__PURE__*/React.createElement(Form.Control, {
-        type: "text",
-        id: "label",
-        name: "label",
-        as: CustomWysiwygInput,
-        value: this.props.element.label,
-        defaultValue: this.props.element.label,
-        onBlur: this.updateElement.bind(this),
-        onChange: this.editElementProp.bind(this, 'label', 'value')
-      })), (this.props.element.hasOwnProperty('required') || this.props.element.hasOwnProperty('readOnly') || this.props.element.hasOwnProperty('defaultToday') || ['Checkboxes', 'Checkbox'].indexOf(this.state.element.element) !== -1 || (this.state.element.element === 'RadioButtons' || this.state.element.element === 'Checkboxes') && this.props.element.hasOwnProperty('inline')) && /*#__PURE__*/React.createElement(Form.Group, {
-        className: "form-group mb-5"
-      }, /*#__PURE__*/React.createElement(Form.Label, {
-        className: "fw-bold"
-      }, "Field Properties:"), this.props.element.hasOwnProperty('required') && /*#__PURE__*/React.createElement(Form.Check, {
-        id: "is-required",
-        label: "Required",
-        type: "checkbox",
-        checked: thisRequiredChecked,
-        value: true,
-        onChange: this.editElementProp.bind(this, 'required', 'checked')
-      }), this.props.element.hasOwnProperty('readOnly') && /*#__PURE__*/React.createElement(Form.Check, {
-        id: "is-read-only",
-        label: "Read Only",
-        type: "checkbox",
-        checked: thisReadOnly,
-        value: true,
-        onChange: this.editElementProp.bind(this, 'readOnly', 'checked')
-      }), this.props.element.hasOwnProperty('defaultToday') && /*#__PURE__*/React.createElement(Form.Check, {
-        id: "is-default-to-today",
-        label: "Default to Today",
-        type: "checkbox",
-        checked: thisDefaultToday,
-        value: true,
-        onChange: this.editElementProp.bind(this, 'defaultToday', 'checked')
-      }), ['Checkboxes', 'Checkbox'].indexOf(this.state.element.element) !== -1 && /*#__PURE__*/React.createElement(Form.Check, {
-        id: "default-checked",
-        label: "Default Checked",
-        type: "checkbox",
-        checked: thisDefaultChecked,
-        value: true,
-        onChange: this.editElementProp.bind(this, 'defaultChecked', 'checked')
-      }), (this.state.element.element === 'RadioButtons' || this.state.element.element === 'Checkboxes') && this.props.element.hasOwnProperty('inline') && /*#__PURE__*/React.createElement(Form.Check, {
-        id: "display-horizontal",
-        label: "Display Horizontal",
-        type: "checkbox",
-        checked: thisCheckedInline,
-        value: true,
-        onChange: this.editElementProp.bind(this, 'inline', 'checked')
-      })), this.state.element.element === 'Checkbox' && /*#__PURE__*/React.createElement(Form.Group, {
-        className: "form-group mb-5"
-      }, /*#__PURE__*/React.createElement(Form.Label, {
-        className: "fw-bold"
-      }, "Checkbox Label Text:"), /*#__PURE__*/React.createElement(Form.Control, {
-        type: "text",
-        id: "boxLabel",
-        name: "boxLabel",
-        as: CustomWysiwygInput,
-        value: this.props.element.boxLabel,
-        defaultValue: this.props.element.boxLabel,
-        onBlur: this.updateElement.bind(this),
-        onChange: this.editElementProp.bind(this, 'boxLabel', 'value'),
-        containerProps: {
-          style: {
-            height: '500px',
-            width: '100%',
-            resize: 'both'
-          }
-        }
-      })), this.props.element.hasOwnProperty('src') && /*#__PURE__*/React.createElement(Form.Group, {
-        className: "form-group mb-5"
-      }, /*#__PURE__*/React.createElement(Form.Label, {
-        className: "fw-bold",
-        htmlFor: "srcInput"
-      }, "Link to:"), /*#__PURE__*/React.createElement(Form.Control, {
-        id: "srcInput",
-        type: "text",
-        defaultValue: this.props.element.src,
-        onBlur: this.updateElement.bind(this),
-        onChange: this.editElementProp.bind(this, 'src', 'value')
-      })), (this.state.element.element === 'Image' || this.state.element.element === 'Camera') && /*#__PURE__*/React.createElement(Form.Group, {
-        className: "form-group mb-5"
-      }, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
-        sm: 3
-      }, /*#__PURE__*/React.createElement(Form.Label, {
-        className: "fw-bold",
-        htmlFor: "do-center"
-      }, "Alignment:"), /*#__PURE__*/React.createElement(Form.Check, {
-        id: "do-center",
-        label: "Center",
-        type: "checkbox",
-        checked: thisCheckedCenter,
-        value: true,
-        onChange: this.editElementProp.bind(this, 'center', 'checked')
-      })), /*#__PURE__*/React.createElement(Col, {
-        sm: 3
-      }, /*#__PURE__*/React.createElement(Form.Label, {
-        className: "fw-bold",
-        htmlFor: "elementWidth"
-      }, "Width:"), /*#__PURE__*/React.createElement(Form.Control, {
-        id: "elementWidth",
-        type: "number",
-        defaultValue: this.props.element.width,
-        onBlur: this.updateElement.bind(this),
-        onChange: this.editElementProp.bind(this, 'width', 'value')
-      })), /*#__PURE__*/React.createElement(Col, {
-        sm: 3
-      }, /*#__PURE__*/React.createElement(Form.Label, {
-        className: "fw-bold",
-        htmlFor: "elementHeight"
-      }, "Height:"), /*#__PURE__*/React.createElement(Form.Control, {
-        id: "elementHeight",
-        type: "number",
-        defaultValue: this.props.element.height,
-        onBlur: this.updateElement.bind(this),
-        onChange: this.editElementProp.bind(this, 'height', 'value')
-      })))), this.state.element.element === 'FileUpload' && /*#__PURE__*/React.createElement(Form.Group, {
-        className: "form-group mb-5"
-      }, /*#__PURE__*/React.createElement(Form.Label, {
-        className: "fw-bold",
-        htmlFor: "fileType"
-      }, "Choose file type:"), /*#__PURE__*/React.createElement(Form.Select, {
-        id: "fileType",
-        onBlur: this.updateElement.bind(this),
-        onChange: this.editElementProp.bind(this, 'fileType', 'value')
-      }, [{
-        type: 'image, application/pdf, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-powerpoint, application/vnd.openxmlformats-officedocument.presentationml.presentation, video/mp4,video/x-m4v,video/*',
-        typeName: 'All File Type'
-      }, {
-        type: 'image',
-        typeName: 'Image'
-      }, {
-        type: 'application/pdf',
-        typeName: 'PDF'
-      }, {
-        type: 'application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document',
-        typeName: 'Word'
-      }, {
-        type: 'application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
-        typeName: 'Excel'
-      }, {
-        type: 'application/vnd.ms-powerpoint, application/vnd.openxmlformats-officedocument.presentationml.presentation',
-        typeName: 'Powerpoint'
-      }, {
-        type: 'video/mp4,video/x-m4v,video/*',
-        typeName: 'Videos'
-      }].map(function (file, index) {
-        return /*#__PURE__*/React.createElement("option", {
-          value: file.type,
-          key: index
-        }, file.typeName);
-      }))), this.props.element.hasOwnProperty('pageBreakBefore') && /*#__PURE__*/React.createElement(Form.Group, {
-        className: "form-group mb-5"
-      }, /*#__PURE__*/React.createElement(Form.Label, {
-        className: "fw-bold"
-      }, "Print options:"), /*#__PURE__*/React.createElement(Form.Check, {
-        id: "page-break-before-element",
-        label: "Page Break Before Element",
-        type: "checkbox",
-        checked: thisCheckedPageBreak,
-        value: true,
-        onChange: this.editElementProp.bind(this, 'pageBreakBefore', 'checked')
-      })), this.props.element.hasOwnProperty('alternateForm') && /*#__PURE__*/React.createElement(Form.Group, {
-        className: "form-group mb-5"
-      }, /*#__PURE__*/React.createElement(Form.Label, {
-        className: "fw-bold"
-      }, "Alternate/Signature Page:"), /*#__PURE__*/React.createElement(Form.Check, {
-        id: "display-on-alternate",
-        label: "Display on alternate/signature Page",
-        type: "checkbox",
-        checked: thisCheckedAlternateForm,
-        value: true,
-        onChange: this.editElementProp.bind(this, 'alternateForm', 'checked')
-      })), this.props.element.hasOwnProperty('step') && /*#__PURE__*/React.createElement(Form.Group, {
-        className: "form-group mb-5"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "form-group-range"
-      }, /*#__PURE__*/React.createElement(Form.Label, {
-        className: "fw-bold",
-        htmlFor: "rangeStep"
-      }, "Step:"), /*#__PURE__*/React.createElement(Form.Control, {
-        id: "rangeStep",
-        type: "number",
-        defaultValue: this.props.element.step,
-        onBlur: this.updateElement.bind(this),
-        onChange: this.editElementProp.bind(this, 'step', 'value')
-      }))), this.props.element.hasOwnProperty('minValue') && /*#__PURE__*/React.createElement(Form.Group, {
-        className: "form-group mb-5"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "form-group-range"
-      }, /*#__PURE__*/React.createElement(Form.Label, {
-        className: "fw-bold",
-        htmlFor: "rangeMin"
-      }, "Min:"), /*#__PURE__*/React.createElement(Form.Control, {
-        id: "rangeMin",
-        type: "number",
-        defaultValue: this.props.element.minValue,
-        onBlur: this.updateElement.bind(this),
-        onChange: this.editElementProp.bind(this, 'minValue', 'value')
-      }))), this.props.element.hasOwnProperty('minLabel') && /*#__PURE__*/React.createElement(Form.Group, {
-        className: "form-group mb-5"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "form-group-range"
-      }, /*#__PURE__*/React.createElement(Form.Label, {
-        className: "fw-bold",
-        htmlFor: "rangeMin"
-      }, "Minimum Value Label:"), /*#__PURE__*/React.createElement(Form.Control, {
-        type: "text",
-        defaultValue: this.props.element.minLabel,
-        onBlur: this.updateElement.bind(this),
-        onChange: this.editElementProp.bind(this, 'minLabel', 'value')
-      }))), this.props.element.hasOwnProperty('maxValue') && /*#__PURE__*/React.createElement(Form.Group, {
-        className: "form-group mb-5"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "form-group-range"
-      }, /*#__PURE__*/React.createElement(Form.Label, {
-        className: "fw-bold",
-        htmlFor: "rangeMax"
-      }, "Max:"), /*#__PURE__*/React.createElement(Form.Control, {
-        id: "rangeMax",
-        type: "number",
-        defaultValue: this.props.element.maxValue,
-        onBlur: this.updateElement.bind(this),
-        onChange: this.editElementProp.bind(this, 'maxValue', 'value')
-      }))), this.props.element.hasOwnProperty('maxLabel') && /*#__PURE__*/React.createElement(Form.Group, {
-        className: "form-group mb-5"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "form-group-range"
-      }, /*#__PURE__*/React.createElement(Form.Label, {
-        className: "fw-bold",
-        htmlFor: "rangeMax"
-      }, "Maximum Value Label:"), /*#__PURE__*/React.createElement(Form.Control, {
-        type: "text",
-        defaultValue: this.props.element.maxLabel,
-        onBlur: this.updateElement.bind(this),
-        onChange: this.editElementProp.bind(this, 'maxLabel', 'value')
-      }))), this.props.element.hasOwnProperty('defaultValue') && /*#__PURE__*/React.createElement(Form.Group, {
-        className: "form-group mb-5"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "form-group-range"
-      }, /*#__PURE__*/React.createElement(Form.Label, {
-        className: "fw-bold",
-        htmlFor: "defaultSelected"
-      }, "Default Selected:"), /*#__PURE__*/React.createElement(Form.Control, {
-        id: "defaultSelected",
-        type: "number",
-        defaultValue: this.props.element.defaultValue,
-        onBlur: this.updateElement.bind(this),
-        onChange: this.editElementProp.bind(this, 'defaultValue', 'value')
-      }))), this.props.element.hasOwnProperty('static') && this.props.element["static"] && this.props.element.hasOwnProperty('bold') && this.props.element.hasOwnProperty('italic') && /*#__PURE__*/React.createElement(Form.Group, {
-        className: "form-group mb-5"
-      }, /*#__PURE__*/React.createElement(Form.Label, {
-        className: "fw-bold"
-      }, "Text Style:"), /*#__PURE__*/React.createElement(Form.Check, {
-        id: "do-bold",
-        inline: true,
-        label: "Bold",
-        type: "checkbox",
-        checked: thisCheckedBold,
-        value: true,
-        onChange: this.editElementProp.bind(this, 'bold', 'checked')
-      }), /*#__PURE__*/React.createElement(Form.Check, {
-        id: "do-italic",
-        inline: true,
-        label: "Italic",
-        type: "checkbox",
-        checked: thisCheckedItalic,
-        value: true,
-        onChange: this.editElementProp.bind(this, 'italic', 'checked')
-      })), this.props.element.hasOwnProperty('placeholder') && /*#__PURE__*/React.createElement(Form.Group, {
-        className: "form-group mb-5"
-      }, /*#__PURE__*/React.createElement(Form.Label, {
-        className: "fw-bold",
-        htmlFor: "placeholder"
-      }, "Placeholder:"), /*#__PURE__*/React.createElement(Form.Control, {
-        type: "text",
-        id: "placeholder",
-        defaultValue: this.props.element.placeholder,
-        onBlur: this.updateElement.bind(this),
-        onChange: this.editElementProp.bind(this, 'placeholder', 'value')
-      })), this.props.element.hasOwnProperty('customName') && /*#__PURE__*/React.createElement(Form.Group, {
-        className: "form-group mb-5"
-      }, /*#__PURE__*/React.createElement(Form.Label, {
-        className: "fw-bold",
-        htmlFor: "customName"
-      }, "A Name To Give This Input That Will Show Up In Data Retrieval:"), /*#__PURE__*/React.createElement(Form.Control, {
-        type: "text",
-        id: "customName",
-        defaultValue: this.props.element.customName,
-        onBlur: this.updateElement.bind(this),
-        onChange: this.editElementProp.bind(this, 'customName', 'value')
-      })), this.props.element.hasOwnProperty('labelLocation') && /*#__PURE__*/React.createElement(Form.Group, {
-        className: "form-group mb-5"
-      }, /*#__PURE__*/React.createElement(Form.Label, {
-        className: "fw-bold",
-        htmlFor: "labelLocation"
-      }, "Choose Label Location:"), /*#__PURE__*/React.createElement(Form.Select, {
-        id: "labelLocation",
-        defaultValue: this.props.element.labelLocation,
-        onBlur: this.updateElement.bind(this),
-        onChange: this.editElementProp.bind(this, 'labelLocation', 'value')
-      }, /*#__PURE__*/React.createElement("option", {
-        value: "ABOVE"
-      }, "Above Form Field"), /*#__PURE__*/React.createElement("option", {
-        value: "FLOATING"
-      }, "Floating Inside Form Field"))), this.props.element.hasOwnProperty('hideLabel') && /*#__PURE__*/React.createElement(Form.Group, {
-        className: "form-group mb-5"
-      }, /*#__PURE__*/React.createElement(Form.Label, {
-        className: "fw-bold"
-      }, "Hide Label:"), /*#__PURE__*/React.createElement(Form.Check, {
-        id: "hide-label",
-        label: "Hide Label",
-        type: "checkbox",
-        checked: thisCheckedHideLabel,
-        value: true,
-        onChange: this.editElementProp.bind(this, 'hideLabel', 'checked')
-      })), this.props.element.hasOwnProperty('help') && /*#__PURE__*/React.createElement(Form.Group, {
-        className: "form-group mb-5"
-      }, /*#__PURE__*/React.createElement(Form.Label, {
-        className: "fw-bold",
-        htmlFor: "help"
-      }, "Help instructions/details that will show up beneath the input field:"), /*#__PURE__*/React.createElement(TextAreaAutosize, {
-        type: "text",
-        className: "form-control",
-        id: "help",
-        defaultValue: this.props.element.help,
-        onBlur: this.updateElement.bind(this),
-        onChange: this.editElementProp.bind(this, 'help', 'value')
-      })), (this.props.showDescription && !this.props.element["static"] || this.props.element.hasOwnProperty('description')) && /*#__PURE__*/React.createElement(Form.Group, {
-        className: "form-group mb-5"
-      }, /*#__PURE__*/React.createElement(Form.Label, {
-        className: "fw-bold",
-        htmlFor: "description"
-      }, "Description:"), /*#__PURE__*/React.createElement(TextAreaAutosize, {
-        type: "text",
-        className: "form-control",
-        id: "description",
-        defaultValue: this.props.element.description,
-        onBlur: this.updateElement.bind(this),
-        onChange: this.editElementProp.bind(this, 'description', 'value')
-      })), this.props.showCorrectColumn && canHaveAnswer && !this.props.element.hasOwnProperty('options') && /*#__PURE__*/React.createElement(Form.Group, {
-        className: "form-group mb-5"
-      }, /*#__PURE__*/React.createElement(Form.Label, {
-        className: "fw-bold",
-        htmlFor: "correct"
-      }, "Correct Answer:"), /*#__PURE__*/React.createElement(Form.Control, {
-        id: "correct",
-        type: "text",
-        defaultValue: this.props.element.correct,
-        onBlur: this.updateElement.bind(this),
-        onChange: this.editElementProp.bind(this, 'correct', 'value')
-      })), this.props.element.canPopulateFromApi && this.props.element.hasOwnProperty('options') && /*#__PURE__*/React.createElement(Form.Group, {
-        className: "form-group mb-5"
-      }, /*#__PURE__*/React.createElement(Form.Label, {
-        className: "fw-bold",
-        htmlFor: "optionsApiUrl"
-      }, "Populate Options from API:"), /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
-        sm: 6
-      }, /*#__PURE__*/React.createElement(Form.Control, {
-        style: {
-          width: '100%'
-        },
-        type: "text",
-        id: "optionsApiUrl",
-        placeholder: "http://localhost:8080/api/optionsdata"
-      })), /*#__PURE__*/React.createElement(Col, {
-        sm: 6
-      }, /*#__PURE__*/React.createElement(Button, {
-        variant: "success",
-        onClick: this.addOptions.bind(this)
-      }, "Populate")))), this.props.element.hasOwnProperty('options') && /*#__PURE__*/React.createElement(DynamicOptionList, {
-        showCorrectColumn: this.props.showCorrectColumn,
-        canHaveOptionCorrect: canHaveOptionCorrect,
-        canHaveOptionValue: canHaveOptionValue,
-        item: this.props.preview.state.item,
-        updateElement: this.props.updateElement,
-        preview: this.props.preview,
-        element: this.props.element,
-        key: this.props.element.options.length
-      }));
-    }
-  }]);
-}(React.Component);
-export { SurveyElementsEdit as default };
+    type: 'image',
+    typeName: 'Image'
+  }, {
+    type: 'application/pdf',
+    typeName: 'PDF'
+  }, {
+    type: 'application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+    typeName: 'Word'
+  }, {
+    type: 'application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+    typeName: 'Excel'
+  }, {
+    type: 'application/vnd.ms-powerpoint, application/vnd.openxmlformats-officedocument.presentationml.presentation',
+    typeName: 'Powerpoint'
+  }, {
+    type: 'video/mp4,video/x-m4v,video/*',
+    typeName: 'Videos'
+  }].map(function (file, index) {
+    return /*#__PURE__*/React.createElement("option", {
+      value: file.type,
+      key: index
+    }, file.typeName);
+  }))), element.hasOwnProperty('pageBreakBefore') && /*#__PURE__*/React.createElement(Form.Group, {
+    className: "form-group mb-5"
+  }, /*#__PURE__*/React.createElement(Form.Label, {
+    className: "fw-bold"
+  }, "Print options:"), /*#__PURE__*/React.createElement(Form.Check, {
+    id: "page-break-before-element",
+    label: "Page Break Before Element",
+    type: "checkbox",
+    checked: thisCheckedPageBreak,
+    value: true,
+    onChange: function onChange(e) {
+      editElementProp('pageBreakBefore', 'checked', e);
+    }
+  })), element.hasOwnProperty('alternateForm') && /*#__PURE__*/React.createElement(Form.Group, {
+    className: "form-group mb-5"
+  }, /*#__PURE__*/React.createElement(Form.Label, {
+    className: "fw-bold"
+  }, "Alternate/Signature Page:"), /*#__PURE__*/React.createElement(Form.Check, {
+    id: "display-on-alternate",
+    label: "Display on alternate/signature Page",
+    type: "checkbox",
+    checked: thisCheckedAlternateForm,
+    value: true,
+    onChange: function onChange(e) {
+      editElementProp('alternateForm', 'checked', e);
+    }
+  })), element.hasOwnProperty('step') && /*#__PURE__*/React.createElement(Form.Group, {
+    className: "form-group mb-5"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "form-group-range"
+  }, /*#__PURE__*/React.createElement(Form.Label, {
+    className: "fw-bold",
+    htmlFor: "rangeStep"
+  }, "Step:"), /*#__PURE__*/React.createElement(Form.Control, {
+    id: "rangeStep",
+    type: "number",
+    defaultValue: element.step,
+    onBlur: onUpdateElement,
+    onChange: function onChange(e) {
+      editElementProp('step', 'value', e);
+    }
+  }))), element.hasOwnProperty('minValue') && /*#__PURE__*/React.createElement(Form.Group, {
+    className: "form-group mb-5"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "form-group-range"
+  }, /*#__PURE__*/React.createElement(Form.Label, {
+    className: "fw-bold",
+    htmlFor: "rangeMin"
+  }, "Min:"), /*#__PURE__*/React.createElement(Form.Control, {
+    id: "rangeMin",
+    type: "number",
+    defaultValue: element.minValue,
+    onBlur: onUpdateElement,
+    onChange: function onChange(e) {
+      editElementProp('minValue', 'value', e);
+    }
+  }))), element.hasOwnProperty('minLabel') && /*#__PURE__*/React.createElement(Form.Group, {
+    className: "form-group mb-5"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "form-group-range"
+  }, /*#__PURE__*/React.createElement(Form.Label, {
+    className: "fw-bold",
+    htmlFor: "rangeMin"
+  }, "Minimum Value Label:"), /*#__PURE__*/React.createElement(Form.Control, {
+    type: "text",
+    defaultValue: element.minLabel,
+    onBlur: onUpdateElement,
+    onChange: function onChange(e) {
+      editElementProp('minLabel', 'value', e);
+    }
+  }))), element.hasOwnProperty('maxValue') && /*#__PURE__*/React.createElement(Form.Group, {
+    className: "form-group mb-5"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "form-group-range"
+  }, /*#__PURE__*/React.createElement(Form.Label, {
+    className: "fw-bold",
+    htmlFor: "rangeMax"
+  }, "Max:"), /*#__PURE__*/React.createElement(Form.Control, {
+    id: "rangeMax",
+    type: "number",
+    defaultValue: element.maxValue,
+    onBlur: onUpdateElement,
+    onChange: function onChange(e) {
+      editElementProp('maxValue', 'value', e);
+    }
+  }))), element.hasOwnProperty('maxLabel') && /*#__PURE__*/React.createElement(Form.Group, {
+    className: "form-group mb-5"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "form-group-range"
+  }, /*#__PURE__*/React.createElement(Form.Label, {
+    className: "fw-bold",
+    htmlFor: "rangeMax"
+  }, "Maximum Value Label:"), /*#__PURE__*/React.createElement(Form.Control, {
+    type: "text",
+    defaultValue: element.maxLabel,
+    onBlur: onUpdateElement,
+    onChange: function onChange(e) {
+      editElementProp('maxLabel', 'value', e);
+    }
+  }))), element.hasOwnProperty('defaultValue') && /*#__PURE__*/React.createElement(Form.Group, {
+    className: "form-group mb-5"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "form-group-range"
+  }, /*#__PURE__*/React.createElement(Form.Label, {
+    className: "fw-bold",
+    htmlFor: "defaultSelected"
+  }, "Default Selected:"), /*#__PURE__*/React.createElement(Form.Control, {
+    id: "defaultSelected",
+    type: "number",
+    defaultValue: element.defaultValue,
+    onBlur: onUpdateElement,
+    onChange: function onChange(e) {
+      editElementProp('defaultValue', 'value', e);
+    }
+  }))), element.hasOwnProperty('static') && element["static"] && element.hasOwnProperty('bold') && element.hasOwnProperty('italic') && /*#__PURE__*/React.createElement(Form.Group, {
+    className: "form-group mb-5"
+  }, /*#__PURE__*/React.createElement(Form.Label, {
+    className: "fw-bold"
+  }, "Text Style:"), /*#__PURE__*/React.createElement(Form.Check, {
+    id: "do-bold",
+    inline: true,
+    label: "Bold",
+    type: "checkbox",
+    checked: thisCheckedBold,
+    value: true,
+    onChange: function onChange(e) {
+      editElementProp('bold', 'checked', e);
+    }
+  }), /*#__PURE__*/React.createElement(Form.Check, {
+    id: "do-italic",
+    inline: true,
+    label: "Italic",
+    type: "checkbox",
+    checked: thisCheckedItalic,
+    value: true,
+    onChange: function onChange(e) {
+      editElementProp('italic', 'checked', e);
+    }
+  })), element.hasOwnProperty('placeholder') && /*#__PURE__*/React.createElement(Form.Group, {
+    className: "form-group mb-5"
+  }, /*#__PURE__*/React.createElement(Form.Label, {
+    className: "fw-bold",
+    htmlFor: "placeholder"
+  }, "Placeholder:"), /*#__PURE__*/React.createElement(Form.Control, {
+    type: "text",
+    id: "placeholder",
+    defaultValue: element.placeholder,
+    onBlur: onUpdateElement,
+    onChange: function onChange(e) {
+      editElementProp('placeholder', 'value', e);
+    }
+  })), element.hasOwnProperty('customName') && /*#__PURE__*/React.createElement(Form.Group, {
+    className: "form-group mb-5"
+  }, /*#__PURE__*/React.createElement(Form.Label, {
+    className: "fw-bold",
+    htmlFor: "customName"
+  }, "A Name To Give This Input That Will Show Up In Data Retrieval:"), /*#__PURE__*/React.createElement(Form.Control, {
+    type: "text",
+    id: "customName",
+    defaultValue: element.customName,
+    onBlur: onUpdateElement,
+    onChange: function onChange(e) {
+      editElementProp('customName', 'value', e);
+    }
+  })), element.hasOwnProperty('labelLocation') && /*#__PURE__*/React.createElement(Form.Group, {
+    className: "form-group mb-5"
+  }, /*#__PURE__*/React.createElement(Form.Label, {
+    className: "fw-bold",
+    htmlFor: "labelLocation"
+  }, "Choose Label Location:"), /*#__PURE__*/React.createElement(Form.Select, {
+    id: "labelLocation",
+    defaultValue: element.labelLocation,
+    onBlur: onUpdateElement,
+    onChange: function onChange(e) {
+      editElementProp('labelLocation', 'value', e);
+    }
+  }, /*#__PURE__*/React.createElement("option", {
+    value: "ABOVE"
+  }, "Above Form Field"), /*#__PURE__*/React.createElement("option", {
+    value: "FLOATING"
+  }, "Floating Inside Form Field"))), element.hasOwnProperty('hideLabel') && /*#__PURE__*/React.createElement(Form.Group, {
+    className: "form-group mb-5"
+  }, /*#__PURE__*/React.createElement(Form.Label, {
+    className: "fw-bold"
+  }, "Hide Label:"), /*#__PURE__*/React.createElement(Form.Check, {
+    id: "hide-label",
+    label: "Hide Label",
+    type: "checkbox",
+    checked: thisCheckedHideLabel,
+    value: true,
+    onChange: function onChange(e) {
+      editElementProp('hideLabel', 'checked', e);
+    }
+  })), element.hasOwnProperty('conditional') && /*#__PURE__*/React.createElement(Form.Group, {
+    className: "form-group mb-5"
+  }, /*#__PURE__*/React.createElement(Form.Label, {
+    className: "fw-bold"
+  }, "Step is Conditional and Display is Dependent on Answers to another Survey Block:"), /*#__PURE__*/React.createElement(Form.Check, {
+    id: "conditional",
+    label: "Conditional",
+    type: "checkbox",
+    checked: thisCheckedConditional,
+    value: true,
+    onChange: function onChange(e) {
+      editElementProp('conditional', 'checked', e);
+    }
+  })), element.hasOwnProperty('conditionalFieldName') && /*#__PURE__*/React.createElement(Form.Group, {
+    className: "form-group mb-5"
+  }, /*#__PURE__*/React.createElement(Form.Label, {
+    className: "fw-bold",
+    htmlFor: "conditionalFieldName"
+  }, "Field Name for the Dependent Survey Block:"), /*#__PURE__*/React.createElement(Form.Control, {
+    type: "text",
+    id: "conditionalFieldName",
+    defaultValue: element.conditionalFieldName,
+    onBlur: onUpdateElement,
+    onChange: function onChange(e) {
+      editElementProp('conditionalFieldName', 'value', e);
+    }
+  })), element.hasOwnProperty('conditionalFieldValue') && /*#__PURE__*/React.createElement(Form.Group, {
+    className: "form-group mb-5"
+  }, /*#__PURE__*/React.createElement(Form.Label, {
+    className: "fw-bold",
+    htmlFor: "conditionalFieldValue"
+  }, "Value(s) for Survey Block to Display the Conditional Step:"), /*#__PURE__*/React.createElement(Form.Control, {
+    type: "text",
+    id: "conditionalFieldValue",
+    defaultValue: element.conditionalFieldValue,
+    onBlur: onUpdateElement,
+    onChange: function onChange(e) {
+      editElementProp('conditionalFieldValue', 'value', e);
+    }
+  })), element.hasOwnProperty('help') && /*#__PURE__*/React.createElement(Form.Group, {
+    className: "form-group mb-5"
+  }, /*#__PURE__*/React.createElement(Form.Label, {
+    className: "fw-bold",
+    htmlFor: "help"
+  }, "Help instructions/details that will show up beneath the input field:"), /*#__PURE__*/React.createElement(TextAreaAutosize, {
+    type: "text",
+    className: "form-control",
+    id: "help",
+    defaultValue: element.help,
+    onBlur: onUpdateElement,
+    onChange: function onChange(e) {
+      editElementProp('help', 'value', e);
+    }
+  })), (showDescription && !element["static"] || element.hasOwnProperty('description')) && /*#__PURE__*/React.createElement(Form.Group, {
+    className: "form-group mb-5"
+  }, /*#__PURE__*/React.createElement(Form.Label, {
+    className: "fw-bold",
+    htmlFor: "description"
+  }, "Description:"), /*#__PURE__*/React.createElement(TextAreaAutosize, {
+    type: "text",
+    className: "form-control",
+    id: "description",
+    defaultValue: element.description,
+    onBlur: onUpdateElement,
+    onChange: function onChange(e) {
+      editElementProp('description', 'value', e);
+    }
+  })), showCorrectColumn && canHaveAnswer && !element.hasOwnProperty('options') && /*#__PURE__*/React.createElement(Form.Group, {
+    className: "form-group mb-5"
+  }, /*#__PURE__*/React.createElement(Form.Label, {
+    className: "fw-bold",
+    htmlFor: "correct"
+  }, "Correct Answer:"), /*#__PURE__*/React.createElement(Form.Control, {
+    id: "correct",
+    type: "text",
+    defaultValue: element.correct,
+    onBlur: onUpdateElement,
+    onChange: function onChange(e) {
+      editElementProp('correct', 'value', e);
+    }
+  })), element.canPopulateFromApi && element.hasOwnProperty('options') && /*#__PURE__*/React.createElement(Form.Group, {
+    className: "form-group mb-5"
+  }, /*#__PURE__*/React.createElement(Form.Label, {
+    className: "fw-bold",
+    htmlFor: "optionsApiUrl"
+  }, "Populate Options from API:"), /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
+    sm: 6
+  }, /*#__PURE__*/React.createElement(Form.Control, {
+    style: {
+      width: '100%'
+    },
+    type: "text",
+    id: "optionsApiUrl",
+    placeholder: "http://localhost:8080/api/optionsdata"
+  })), /*#__PURE__*/React.createElement(Col, {
+    sm: 6
+  }, /*#__PURE__*/React.createElement(Button, {
+    variant: "success",
+    onClick: addOptions
+  }, "Populate")))), element.hasOwnProperty('options') && /*#__PURE__*/React.createElement(DynamicOptionList, {
+    showCorrectColumn: showCorrectColumn,
+    canHaveOptionCorrect: canHaveOptionCorrect,
+    canHaveOptionValue: canHaveOptionValue,
+    updateElement: updateElement,
+    element: element,
+    key: element === null || element === void 0 || (_element$options = element.options) === null || _element$options === void 0 ? void 0 : _element$options.length
+  }));
+};
 SurveyElementsEdit.defaultProps = {
   className: 'edit-element-fields'
-};
+};
+export default SurveyElementsEdit;