v5gl-form-builder/lib/material-elements-edit.js

Customise form builder from ecsite

"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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _react = _interopRequireDefault(require("react"));

var _UUID = _interopRequireDefault(require("./UUID"));

var _requests = require("./stores/requests");

var _draftJs = require("draft-js");

var _pickers = require("@material-ui/pickers");

var _dateFns = _interopRequireDefault(require("@date-io/date-fns"));

var _icons = require("@material-ui/icons");

var _Add = _interopRequireDefault(require("@material-ui/icons/Add"));

var _Remove = _interopRequireDefault(require("@material-ui/icons/Remove"));

var _Delete = _interopRequireDefault(require("@material-ui/icons/Delete"));

var _ArrowBack = _interopRequireDefault(require("@material-ui/icons/ArrowBack"));

var _reactTextareaAutosize = _interopRequireDefault(require("react-textarea-autosize"));

var _numberOptions = _interopRequireDefault(require("./options/number-options"));

var _phoneOptions = _interopRequireDefault(require("./options/phone-options"));

var _shorttextOptions = _interopRequireDefault(require("./options/shorttext-options"));

var _takephotoOptions = _interopRequireDefault(require("./options/takephoto-options"));

var _Divider = _interopRequireDefault(require("@material-ui/core/Divider"));

var _headerOptions = _interopRequireDefault(require("./options/header-options"));

var _CancelRounded = _interopRequireDefault(require("@material-ui/icons/CancelRounded"));

var _singleChoiceOptions = _interopRequireDefault(require("./options/single-choice-options"));

var _photoPrePostOptions = _interopRequireDefault(require("./options/photo-pre-post-options"));

var _checklistOptions = _interopRequireDefault(require("./options/checklist-options"));

var _VideoLibrary = _interopRequireDefault(require("@material-ui/icons/VideoLibrary"));

var _styles = require("@material-ui/core/styles");

var _core = require("@material-ui/core");

var _KeyboardArrowUp = _interopRequireDefault(require("@material-ui/icons/KeyboardArrowUp"));

var _KeyboardArrowDown = _interopRequireDefault(require("@material-ui/icons/KeyboardArrowDown"));

var _longTextOptions = _interopRequireDefault(require("./options/long-text-options"));

var _datepickerOptions = _interopRequireDefault(require("./options/datepicker-options"));

var _configurableListOptions = _interopRequireDefault(require("./options/configurable-list-options"));

var _buttonRadiosOptions = _interopRequireDefault(require("./options/button-radios-options"));

var _inputTableOptions = _interopRequireDefault(require("./options/input-table-options"));

var _tabsOptions = _interopRequireDefault(require("./options/tabs-options"));

var _tilesOptions = _interopRequireDefault(require("./options/tiles-options"));

var _Info = _interopRequireDefault(require("@material-ui/icons/Info"));

var _lodash = require("lodash");

var _CheckCircle = _interopRequireDefault(require("@material-ui/icons/CheckCircle"));

var _RadioButtonUnchecked = _interopRequireDefault(require("@material-ui/icons/RadioButtonUnchecked"));

var _locationMapOptions = _interopRequireDefault(require("./options/location-map-options"));

var _takevideoOptions = _interopRequireDefault(require("./options/takevideo-options"));

var _dropdownOptions = _interopRequireDefault(require("./options/dropdown-options"));

var _materialElementsConfig = require("./material-elements-config");

var _toolbar = _interopRequireDefault(require("./toolbar"));

var _Attachment = _interopRequireDefault(require("./options/Attachment"));

var _Video = _interopRequireDefault(require("./options/Video"));

var _location_coordinates = _interopRequireDefault(require("./meterial-form-elements/location_coordinates"));

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 { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }

var styles = function styles(theme) {
  return (0, _defineProperty2["default"])({
    // overrides: {
    //     MuiDialogPaper : {
    //     position:"relative",
    //     top:"25%",
    //     left:"150%",
    // },
    //  },
    checked: {
      border: "1px solid #2C3E93",
      padding: " 0 0 0 0.5rem",
      borderRadius: "4px",
      color: "#2C3E93",
      height: '30px',
      marginLeft: "0.1rem",
      marginRight: "0.6rem"
    },
    unchecked: {
      border: "1px solid #00000099",
      padding: " 0 0 0 0.5rem",
      borderRadius: "4px",
      height: '30px',
      marginLeft: "0.1rem",
      marginRight: "0.6rem"
    },
    text: {
      marginButtom: '1rem',
      // marginLeft:'1rem',
      opacity: 0.6,
      fontSize: '16px',
      fontWeight: "normal"
    },
    text1: {
      display: 'inline',
      opacity: 0.6,
      fontSize: '16px',
      fontWeight: "normal"
    },
    attachmentText: {
      display: 'inline',
      fontSize: '16px',
      fontWeight: "normal"
    },
    btnStyle: {
      outline: "none",
      textTransform: "capitalize"
    },
    label: {
      fontSize: '0.875rem',
      opacity: 0.5
    },
    label1: {
      fontSize: '0.875rem',
      opacity: 1
    },
    browseIcon: {
      display: 'block',
      padding: '0 3rem',
      border: '1px dashed rgb(128,128,128,.5)',
      opacity: "0.7"
    },
    attachment: {
      border: '1px solid black',
      borderRadius: '5px',
      width: '9rem',
      marginLeft: '0.2rem',
      padding: '5px 0 5px 50px',
      color: 'black'
    },
    attachmentEnabled: {
      border: '1px solid #2C3E93',
      borderRadius: '5px',
      width: '9rem',
      marginLeft: '0.2rem',
      padding: '5px 0 5px 50px',
      color: '#2C3E93'
    },
    paper: {
      width: "97%",
      margin: "0 auto",
      boxShadow: "none"
    },
    formControl: {
      margin: theme.spacing(1),
      minWidth: "72%",
      maxWidth: "72%"
    }
  }, "attachmentEnabled", {
    border: '1px solid #2C3E93',
    borderRadius: '5px',
    width: '9rem',
    marginLeft: '0.2rem',
    padding: '5px 0 5px 50px',
    color: '#2C3E93'
  });
};

var theme = (0, _styles.createMuiTheme)({
  overrides: {
    MuiFormControlLabel: {
      label: {
        fontSize: '0.875rem'
      }
    }
  },
  palette: {
    primary: {
      main: "#2C3E93"
    }
  }
});
var characterLimitHelperTheme = (0, _styles.createMuiTheme)({
  palette: {
    primary: {
      main: "#2C3E93"
    }
  },
  overrides: {
    MuiFormHelperText: {
      contained: {
        marginRight: 0,
        textAlign: 'right'
      }
    },
    MuiFormLabel: {
      asterisk: {
        color: "#db3131",
        "&$error": {
          color: "#db3131"
        }
      }
    } // MuiDialogPaper : {
    //   position:"relative",
    //   top:"25%",
    //   left:"150%",
    // },

  }
});

var FormElementsEdit = /*#__PURE__*/function (_React$Component) {
  (0, _inherits2["default"])(FormElementsEdit, _React$Component);

  var _super = _createSuper(FormElementsEdit);

  function FormElementsEdit(props) {
    var _this;

    (0, _classCallCheck2["default"])(this, FormElementsEdit);
    _this = _super.call(this, props);
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleAttachments", function (e) {
      var this_element = _this.state.element;
      var arry = _this.state.element.customOptions.Attachment;

      if (e.target.value === "All Type" && arry.length < 3) {
        _this.state.element.customOptions.Attachment = ['.pdf', '.doc', '.xls'];
      } else if (e.target.value === "All Type" && arry.length === 3) {
        _this.state.element.customOptions.Attachment = [];
      } else if (arry.includes("".concat(e.target.value))) {
        var index = arry.indexOf("".concat(e.target.value));

        if (index > -1) {
          arry.splice(index, 1);
        }
      } else {
        arry.push(e.target.value);
      }

      _this.setState({
        element: this_element,
        dirty: true
      });
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleDeleteVideo", function () {
      var this_element = _this.state.element;
      this_element.customOptions.isFieldDisabled = false;
      this_element.customOptions.fileName = "";
      this_element.customOptions.url = "";
      this_element.customOptions.defaultValue = "";

      _this.setState({
        element: this_element,
        dirty: true
      });
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleDeleteFile", function (e) {
      var this_element = _this.state.element;
      _this.state.element.customOptions.fileName = "";
      _this.state.element.customOptions.defaultValue = "";

      _this.setState({
        element: this_element,
        dirty: true
      });
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMaxSize", function (e) {
      var this_element = _this.state.element;
      this_element.customOptions.maxSize = e.target.value;

      _this.setState({
        element: this_element,
        dirty: true
      });
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleHyperlink", function (e) {
      var this_element = _this.state.element;
      var value = e.target.value;
      this_element.customOptions.Hyperlink = value;

      _this.setState({
        element: this_element,
        dirty: true
      });
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeFieldVarient", function (e) {
      var this_element = _this.state.element;

      if (_this.props.globalStyles.formDefault) {
        _this.props.updateGlobalStyleOptions("globalFieldVariant", e.target.value);

        _this.setState({
          element: this_element,
          dirty: true
        }, function () {
          _this.updateElement();
        });
      } else {
        var _this_element = _this.state.element;
        _this_element.fieldVariant = e.target.value;

        _this.setState({
          element: _this_element,
          dirty: true
        }, function () {
          _this.updateElement();
        });
      }
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeFieldVarient", function (e) {
      var this_element = _this.state.element;

      if (_this.props.globalStyles.formDefault) {
        _this.props.updateGlobalStyleOptions("globalFieldVariant", e.target.value);

        _this.setState({
          element: this_element,
          dirty: true
        }, function () {
          _this.updateElement();
        });
      } else {
        var _this_element2 = _this.state.element;
        _this_element2.fieldVariant = e.target.value;

        _this.setState({
          element: _this_element2,
          dirty: true
        }, function () {
          _this.updateElement();
        });
      }
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeInputFieldSize", function (e) {
      var this_element = _this.state.element;
      this_element.inputFieldSize = e.target.value;

      _this.setState({
        element: this_element,
        dirty: true
      }, function () {
        _this.updateElement();
      });
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeButtonType", function (e) {
      var this_element = _this.state.element;
      this_element.buttonType = e.target.value;

      _this.setState({
        element: this_element,
        dirty: true
      }, function () {
        _this.updateElement();
      });
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeTextAlginment", function (e) {
      var this_element = _this.state.element;
      this_element.textAlignment = e.target.value;

      _this.setState({
        element: this_element,
        dirty: true
      }, function () {
        _this.updateElement();
      });
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "updateFormDefault", function (value) {
      _this.props.updateFormDefault(_this.state.element);
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "textAreaHandleChange", function (e) {
      var text = e.target.value.trim();
      var optionsData = text.split('\n');
      var this_element = _this.state.element;
      this_element.dropDownOptions = [];
      this_element.customOptions.optionsText = text;

      for (var i = 0; i < optionsData.length; i++) {
        this_element.dropDownOptions.push({
          value: optionsData[i],
          label: optionsData[i],
          key: _UUID["default"].uuid()
        });
      }

      if (text === "" || text === undefined || text === null) {
        //on empty dropdown list emtying the dependent components
        this_element.hasDependentComponents = false;
        this_element.dependentComponents = [];
      }

      _this.setState({
        element: this_element,
        dirty: true
      });
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "showTextEmptyOption", function (e) {
      var this_element = _this.state.element;
      this_element.customOptions.showEmptyTextOption = e.target.checked;

      _this.setState({
        element: this_element,
        dirty: true
      });
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setInputMaskedValue", function (e) {
      var this_element = _this.state.element;
      this_element.customOptions.maskedValue = e.target.value;

      _this.setState({
        element: this_element,
        dirty: true
      });
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeCameraOptions", function (elementProperty, e) {
      var this_element = _this.state.element;

      if (elementProperty === "videoLink") {
        var urlRegex = /(http|ftp|https):\/\/[\w-]+(\.[\w-]+)+([\w.,@?^=%&amp;amp;:\/~+#-]*[\w@?^=%&amp;amp;\/~+#-])?/;

        if (e.target.value.match(urlRegex)) {
          this_element.customOptions[elementProperty] = e.target.value;
          _this.state.videoLinkDisable = false;
          this_element.customOptions.required = false;
          this_element.customOptions.error = false;
        } else {
          _this.state.videoLinkDisable = true;
          this_element.customOptions.required = true;
          this_element.customOptions.error = true;
        }
      } else {
        this_element.customOptions[elementProperty] = e.target.value;
      }

      _this.setState({
        element: this_element,
        dirty: true
      });
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setPhotoCustomOptions", function (elementProperty, e) {
      var this_element = _this.state.element;
      this_element.customOptions[elementProperty] = e.target.checked;

      _this.setState({
        element: this_element,
        dirty: true
      });
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setCutomeTime", function (timeValue, elemProp, e) {
      var this_element = _this.state.element;
      this_element.customOptions[elemProp] = timeValue;
      this_element.customOptions.cutomTime = null;

      _this.setState({
        element: this_element,
        dirty: true
      });
    });
    _this.state = {
      element: _this.props.element,
      data: _this.props.data,
      dirty: false,
      characterLimit: _this.props.element.customOptions.charLimit,
      elementValues: JSON.parse(JSON.stringify(_this.props.element)),
      require: false,
      selectedTime: null,
      open: false,
      videoLinkDisable: false,
      disableNumber: false,
      Attachments: [{
        id: 0,
        name: 'All Type'
      }, {
        id: 1,
        name: '.pdf'
      }, {
        id: 2,
        name: '.xls'
      }, {
        id: 3,
        name: '.doc'
      }]
    };
    _this.setNumberLimit = _this.setNumberLimit.bind((0, _assertThisInitialized2["default"])(_this));
    _this.editElementProp = _this.editElementProp.bind((0, _assertThisInitialized2["default"])(_this));
    _this.setValidationType = _this.setValidationType.bind((0, _assertThisInitialized2["default"])(_this));
    _this.setValidationOptions = _this.setValidationOptions.bind((0, _assertThisInitialized2["default"])(_this));
    _this.setInputMaskedValue = _this.setInputMaskedValue.bind((0, _assertThisInitialized2["default"])(_this));
    _this.setDefaultOptions = _this.setDefaultOptions.bind((0, _assertThisInitialized2["default"])(_this));
    _this.setDisplayOptions = _this.setDisplayOptions.bind((0, _assertThisInitialized2["default"])(_this));
    _this.setActionClick = _this.setActionClick.bind((0, _assertThisInitialized2["default"])(_this));
    _this.setScreenSelect = _this.setScreenSelect.bind((0, _assertThisInitialized2["default"])(_this));
    _this.handleTilesOptions = _this.handleTilesOptions.bind((0, _assertThisInitialized2["default"])(_this));
    _this.handleTableOptions = _this.handleTableOptions.bind((0, _assertThisInitialized2["default"])(_this));
    _this.addTilesOptions = _this.addTilesOptions.bind((0, _assertThisInitialized2["default"])(_this));
    _this.addTableOptions = _this.addTableOptions.bind((0, _assertThisInitialized2["default"])(_this));
    _this.removeTilesOptions = _this.removeTilesOptions.bind((0, _assertThisInitialized2["default"])(_this));
    _this.removeTableOptions = _this.removeTableOptions.bind((0, _assertThisInitialized2["default"])(_this));
    _this.handleTimeChange = _this.handleTimeChange.bind((0, _assertThisInitialized2["default"])(_this)); // this.handlePopup = this.handlePopup.bind(this);
    // this.handleIconOpen = this.handleIconOpen.bind(this);

    _this.handleAttachments = _this.handleAttachments.bind((0, _assertThisInitialized2["default"])(_this));
    _this.handleHyperlink = _this.handleHyperlink.bind((0, _assertThisInitialized2["default"])(_this));
    _this.handleSelectedIcon = _this.handleSelectedIcon.bind((0, _assertThisInitialized2["default"])(_this));
    _this.handleDropdownDataOptions = _this.handleDropdownDataOptions.bind((0, _assertThisInitialized2["default"])(_this));
    _this.handledropDownOptions = _this.handledropDownOptions.bind((0, _assertThisInitialized2["default"])(_this));
    _this.handleMaxSize = _this.handleMaxSize.bind((0, _assertThisInitialized2["default"])(_this));
    _this.handleFile = _this.handleFile.bind((0, _assertThisInitialized2["default"])(_this));
    _this.handleDeleteFile = _this.handleDeleteFile.bind((0, _assertThisInitialized2["default"])(_this));
    _this.handleVideoChange = _this.handleVideoChange.bind((0, _assertThisInitialized2["default"])(_this));
    _this.handleDeleteVideo = _this.handleDeleteVideo.bind((0, _assertThisInitialized2["default"])(_this));
    return _this;
  }

  (0, _createClass2["default"])(FormElementsEdit, [{
    key: "editElementProp",
    value: function editElementProp(elemProperty, targProperty, e) {
      var _this2 = this;

      // elemProperty could be content or label
      // targProperty could be value or checked
      var this_element = this.state.element;
      this_element[elemProperty] = e.target[targProperty];
      this.setState({
        element: this_element,
        dirty: true
      }, function () {
        if (targProperty === 'checked') {
          _this2.updateElement();
        }
      });
    }
  }, {
    key: "editElementCustomOptionsProp",
    value: function editElementCustomOptionsProp(elemProperty, targProperty, e) {
      var _this3 = this;

      // elemProperty could be content or label
      // targProperty could be value or checked
      var this_element = this.state.element;

      if (elemProperty.includes("isCommentsAvail")) {
        this_element.customOptions["isCommentPopAvail"] = !e.target[targProperty];
      } else if (elemProperty.includes("isCommentPopAvail")) {
        this_element.customOptions["isCommentsAvail"] = !e.target[targProperty];
      }

      if (elemProperty.includes("tapedrop") && e.target[targProperty]) {
        this_element.customOptions["isDistToBuilding"] = !e.target[targProperty];
        this_element.customOptions["isTargetAzimuthAngle"] = !e.target[targProperty];
      } else if (elemProperty.includes("isDistToBuilding") && e.target[targProperty]) {
        this_element.customOptions["tapedrop"] = !e.target[targProperty];
        this_element.customOptions["isTargetAzimuthAngle"] = !e.target[targProperty];
      } else if (elemProperty.includes("isTargetAzimuthAngle") && e.target[targProperty]) {
        this_element.customOptions["tapedrop"] = !e.target[targProperty];
        this_element.customOptions["isDistToBuilding"] = !e.target[targProperty];
      } // if (elemProperty === "isFieldDisabled" && targProperty ) {
      //   this_element.customOptions.charLimit = "";
      // }


      if (elemProperty === 'editorMode' && this_element.customOptions[elemProperty].toLowerCase().includes("rich")) {
        this_element.customOptions.isLimitEntry = false;
      }

      this_element.customOptions[elemProperty] = e.target[targProperty];

      if (elemProperty === 'required' || elemProperty === 'isLimitEntry' || elemProperty === "showEmptyTextOption" || elemProperty === 'isMasked' || elemProperty === 'countryCode' || elemProperty === 'isOtherOption' || elemProperty === 'checked' || elemProperty === 'readOnly' || elemProperty === 'disablePastDates' || elemProperty === 'disableTime' || elemProperty === 'isDependentSectionExpanded' || elemProperty === 'isFieldDisabled' || elemProperty === 'defaultValue') {
        this_element.customOptions[elemProperty] = targProperty;

        if (elemProperty === 'isFieldDisabled') {
          if (this_element.element === 'Number') {
            this_element.customOptions.isNumberLimit = false;
            this_element.customOptions.min = "";
            this_element.customOptions.max = "";
          }

          if (this_element.element === 'Long_Text') {
            this_element.customOptions.isLimitEntry = false;
            this_element.customOptions.editorMode = "Plain_Text", this_element.customOptions.validationType = 'None';
          }

          if (this_element.element === 'Short_Text') {
            this_element.customOptions.validation = "None";
            this_element.customOptions.charLimit = 120;
          }
        }
      }

      if (elemProperty === 'hasDependentComponents') {
        this_element[elemProperty] = targProperty;
      }

      this.setState({
        element: this_element,
        dirty: true
      }, function () {
        if (targProperty === 'checked') {
          _this3.updateElement();
        }
      });
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      if (this.props.element.element.toLowerCase().includes("table")) {
        var headerList = [{
          headerId: "0",
          label: "Header Item",
          type: 'text',
          required: false,
          options: []
        }];
        var rows = [{
          rowId: 0
        }];

        if (this.props.element.hasOwnProperty('headerList')) {
          headerList = this.props.element.headerList;
          rows = this.props.element.rows;
        }

        var element = this.state.element;
        element.headerList = headerList;
        element.rows = rows;
        this.setState({
          element: element
        });
      }
    }
  }, {
    key: "setChatLimit",
    value: function setChatLimit(elemProperty, e) {
      var this_element = this.state.element;
      this_element.customOptions[elemProperty] = e.target.value;
      this.setState({
        element: this_element,
        dirty: true,
        characterLimit: e.target.value
      });
    }
  }, {
    key: "setDefaultValue",
    value: function setDefaultValue(elemProperty, e) {
      var _e$target$value;

      var this_element = this.state.element;

      if (isNaN(parseFloat(e.target.value))) {
        this_element.customOptions[elemProperty] = e.target.value;
      } else {
        this_element.customOptions[elemProperty] = Number(e.target.value);
      }

      if (((_e$target$value = e.target.value) === null || _e$target$value === void 0 ? void 0 : _e$target$value.length) < 1) {
        this_element.customOptions.isFieldDisabled = false;
      }

      this.setState({
        element: this_element,
        dirty: true
      });
    }
  }, {
    key: "handleTimeChange",
    value: function handleTimeChange(time) {
      var this_element = this.state.element;
      this_element.customOptions.cutomTime = time;
      this.setState({
        selectedTime: time
      });
    }
  }, {
    key: "handleSelectedIcon",
    value: function handleSelectedIcon(selectedIcon) {
      var this_element = this.state.element;
      this_element.customOptions.selectedIcons = selectedIcon;
      this_element.customOptions.selectedIconsMobile = selectedIcon.split("_").join("-");
      this.setState({
        element: this_element,
        dirty: true
      });
    }
  }, {
    key: "handleFile",
    value: function () {
      var _handleFile = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(e) {
        var files, this_element;
        return _regenerator["default"].wrap(function _callee$(_context) {
          while (1) {
            switch (_context.prev = _context.next) {
              case 0:
                files = e.target.files;
                this_element = this.state.element;
                this_element.customOptions.fileName = files[0].name;
                this_element.customOptions.file = files[0];
                _context.next = 6;
                return this.props.uploadFile(files[0], "file");

              case 6:
                this_element.customOptions.defaultValue = _context.sent;
                this.setState({
                  element: this_element,
                  dirty: true
                });

              case 8:
              case "end":
                return _context.stop();
            }
          }
        }, _callee, this);
      }));

      function handleFile(_x) {
        return _handleFile.apply(this, arguments);
      }

      return handleFile;
    }() // handleVideo =(e)=> {
    //   const this_element = this.state.element;
    //   this.state.element.customOptions.fileName = e.target.files[0].name;
    //   this.state.element.customOptions.uploadVideoFile(e.target.files[0]);
    //   this.state.element.customOptions.url = URL.createObjectURL(e.target.files[0]);
    //   this.state.element.customOptions.defaultValue = this.state.element.customOptions.uploadVideoId;
    //   this.setState({
    //     element: this_element,
    //     dirty: true,
    //   });
    // }

  }, {
    key: "handleVideoChange",
    value: function () {
      var _handleVideoChange = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2(e) {
        var files, this_element;
        return _regenerator["default"].wrap(function _callee2$(_context2) {
          while (1) {
            switch (_context2.prev = _context2.next) {
              case 0:
                files = e.target.files;
                this_element = this.state.element;
                this_element.customOptions.fileName = files[0].name;
                _context2.next = 5;
                return this.props.uploadFile(files[0], "video");

              case 5:
                this_element.customOptions.defaultValue = _context2.sent;
                this_element.customOptions.url = URL.createObjectURL(files[0]);
                this.setState({
                  element: this_element,
                  dirty: true
                });

              case 8:
              case "end":
                return _context2.stop();
            }
          }
        }, _callee2, this);
      }));

      function handleVideoChange(_x2) {
        return _handleVideoChange.apply(this, arguments);
      }

      return handleVideoChange;
    }()
  }, {
    key: "toggleOtherOption",
    value: function toggleOtherOption(elemProperty, targProperty, e) {
      var this_element = this.state.element; // if (e.target[targProperty]) {

      if (targProperty) {
        if (!this_element.customOptions[elemProperty]) {
          var text = 'Other';
          var val = text.toLowerCase().split(' ').join('_');
          this_element.singleChoiceOptions.push({
            value: val,
            label: text,
            key: _UUID["default"].uuid()
          });
        }
      } else if (this_element.customOptions[elemProperty]) {
        this_element.singleChoiceOptions.pop();
      } //this_element.customOptions[elemProperty] = e.target[targProperty];


      this_element.customOptions[elemProperty] = targProperty; // setTimeout(()=>{
      //   this_element.customOptions[elemProperty] = targProperty;
      // }, 1000)
      // if (elemProperty === 'isOption') {
      //   this_element.customOptions[elemProperty] = targProperty;
      // }

      this.setState({
        element: this_element,
        dirty: true
      });
    }
  }, {
    key: "toggleCheckListOtherOption",
    value: function toggleCheckListOtherOption(elemProperty, targProperty, e) {
      var this_element = this.state.element;

      if (targProperty) {
        if (!this_element.customOptions[elemProperty]) {
          var text = 'Other';
          var val = text.toLowerCase().split(' ').join('_');
          this_element.checkListOptions.push({
            value: val,
            label: text
          });
        }
      } else if (this_element.customOptions[elemProperty]) {
        this_element.checkListOptions.pop();
      } // this_element.customOptions[elemProperty] = e.target[targProperty];
      // if (elemProperty === 'isOtherOption') {
      //   this_element.customOptions[elemProperty] = targProperty;
      // }


      this_element.customOptions[elemProperty] = targProperty;
      this.setState({
        element: this_element,
        dirty: true
      });
    }
  }, {
    key: "pickColor",
    value: function pickColor(event, elemProperty) {
      var this_element = this.state.element;
      this_element.customOptions[elemProperty] = event.target.value;
      this.setState({
        element: this_element,
        dirty: true
      });
    }
  }, {
    key: "setRows",
    value: function setRows(elemProperty, e) {
      var this_element = this.state.element;
      var rows = this_element.rows;

      if (e.target.value > rows.length) {
        var count = e.target.value - rows.length;
        rows.splice(rows.length, count, {
          rowId: rows.length
        });
      } else if (e.target.value < rows.length) {
        var _count = rows.length - e.target.value;

        rows.splice(e.target.value, _count);
      }

      this_element[elemProperty] = rows;
      this.setState({
        element: this_element,
        dirty: true
      });
    }
  }, {
    key: "setNumberLimit",
    value: function setNumberLimit(elemProperty, value) {
      var this_element = this.state.element;

      if (elemProperty == 'min' || elemProperty == 'max') {
        this_element.customOptions[elemProperty] = Number(value);
      } else {
        this_element.customOptions[elemProperty] = value;
      }

      if (this_element.customOptions.min >= this_element.customOptions.max || value === "") {
        this.state.disableNumber = true;
      } else if (this_element.customOptions.min < this_element.customOptions.max) {
        this.state.disableNumber = false;
      }

      this.setState({
        element: this_element,
        dirty: true
      });
    }
  }, {
    key: "setValidationType",
    value: function setValidationType(value) {
      var this_element = this.state.element;
      this_element.customOptions.validationType = value;
      this.setState({
        element: this_element,
        dirty: true
      });
    }
  }, {
    key: "onEditorStateChange",
    value: function onEditorStateChange(index, property, editorContent) {
      var this_element = this.state.element;
      this_element[property] = html;
      this.setState({
        element: this_element,
        dirty: true
      });
    }
  }, {
    key: "onLabelChange",
    value: function onLabelChange(elemProperty, e) {
      var this_element = this.state.element;
      this_element[elemProperty] = e.target.value;
      this.setState({
        element: this_element,
        dirty: true
      });
    }
  }, {
    key: "handleTableOptions",
    value: function handleTableOptions(elemProperty, index, e) {
      var _this4 = this;

      var this_element = this.state.element;

      if (elemProperty === "required") {
        this_element.customOptions.headerList[index][elemProperty] = e; // let anyFieldIsMandatory = false;
        // this_element.customOptions.headerList.map((h, i) => {
        //   if (h.required) {
        //     anyFieldIsMandatory = true;
        //   }
        // });
        // if (anyFieldIsMandatory) {
        //   this_element.customOptions.editRow = true;
        // } else {
        //   if (e && !this_element.customOptions.editRow) {
        //     this_element.customOptions.editRow = true;
        //   } //else if (!e && this_element.customOptions.editRow) {
        //     //this_element.customOptions.editRow = false;
        //   //}
        // }
      } else {
        this_element.customOptions.headerList[index][elemProperty] = e.target.value;
      }

      this.setState({
        element: this_element,
        dirty: true
      }, function () {
        _this4.updateElement();
      });
    }
  }, {
    key: "handleTilesOptions",
    value: function handleTilesOptions(elemProperty, index, e) {
      var _this5 = this;

      // if (elemProperty === "columns" && e.target.value > 4) {
      //   return;
      // }
      var this_element = this.state.element;

      if (elemProperty == "spacing") {
        this_element.customOptions[elemProperty] = e.target.value;
      } else if (elemProperty == "componentOnScreenMethod") {
        this_element.customOptions.tileProperties[index][elemProperty] = e; //..Component Source

        var cs = this_element.customOptions.tileProperties[index].componentOnScreenSource; //..Component Target

        var ct = this_element.customOptions.tileProperties[index].componentOnScreenTarget;
        var sv, tv;

        if (cs && ct) {
          //..Source Index
          var si = this_element.customOptions.tileProperties.findIndex(function (x) {
            return x.ID === cs;
          }); //..Target Index

          var ti = this_element.customOptions.tileProperties.findIndex(function (x) {
            return x.ID === ct;
          }); //..Source Value

          sv = this_element.customOptions.tileProperties[si].text; //..Target Value

          tv = this_element.customOptions.tileProperties[ti].text;
        }

        if (!isNaN(sv) && !isNaN(tv)) {
          sv = parseInt(sv);
          tv = parseInt(tv);

          switch (e) {
            case 'add':
              if (sv && tv) {
                //alert(sv + tv);           
                this_element.customOptions.tileProperties[index].text = sv + tv;
              }

              break;

            case 'sub':
              if (sv && tv) {
                this_element.customOptions.tileProperties[index].text = sv - tv;
              }

              break;

            case 'mult':
              if (sv && tv) {
                this_element.customOptions.tileProperties[index].text = sv * tv;
              }

              break;

            case 'div':
              if (sv && tv) {
                var n = sv / tv;
                var result = n - Math.floor(n) !== 0;

                if (result) {
                  this_element.customOptions.tileProperties[index].text = n.toFixed(2);
                } else {
                  this_element.customOptions.tileProperties[index].text = n;
                }
              }

              break;

            default:
              this_element.customOptions.tileProperties[index].text = 0;
              break;
          }
        }
      } else if (elemProperty == "action") {
        if (e.target.checked) {
          var count = this_element.customOptions.tileProperties[index][elemProperty].length;
          this_element.customOptions.tileProperties[index][elemProperty].splice(count, 0, e.target.value);
        } else {
          var actionIndex = this_element.customOptions.tileProperties[index][elemProperty].findIndex(function (x) {
            return x === e.target.value;
          });

          if (actionIndex != -1) {
            this_element.customOptions.tileProperties[index][elemProperty].splice(actionIndex, 1);
          }
        }
      } else {
        this_element.customOptions.tileProperties[index][elemProperty] = e.target.value;
      }

      this.setState({
        element: this_element,
        dirty: true
      }, function () {
        _this5.updateElement();
      });
    }
  }, {
    key: "handleDropdownDataOptions",
    value: function handleDropdownDataOptions(e) {
      var _this6 = this;

      var this_element = this.state.element;
      this_element.customOptions.dataOptions = e.target.value;
      this.setState({
        element: this_element,
        dirty: true
      }, function () {
        _this6.updateElement();
      });
    }
  }, {
    key: "handledropDownOptions",
    value: function handledropDownOptions(dropdown, optionText, fileName, uploaded, download) {
      var this_element = this.state.element;
      this_element.dropDownOptions = [];
      this_element.customOptions.optionsText = optionText;
      this_element.customOptions.fileUploaded = fileName;
      this_element.customOptions.uploaded = uploaded;
      this_element.customOptions.download = download;

      for (var i = 0; i < dropdown.length; i++) {
        this_element.dropDownOptions.push({
          value: dropdown[i].value,
          label: dropdown[i].label,
          key: _UUID["default"].uuid()
        });
      }

      this.setState({
        element: this_element,
        dirty: true
      });
    }
  }, {
    key: "addTilesOptions",
    value: function addTilesOptions(index) {
      var this_element = this.state.element;

      if (this_element.customOptions && this_element.customOptions.tileProperties.length >= 4) {
        return;
      }

      var compId = this_element.customOptions.tileProperties.length + 1;
      this_element.customOptions.tileProperties.splice(compId, 0, {
        ID: "Tile ID- COMPONENT00".concat(compId),
        key: "Tile ID- COMPONENT00".concat(compId),
        title: "",
        text: "",
        rule: "",
        tilesType: "",
        component: "",
        tilesColor: "",
        action: ""
      });
      this_element.customOptions.columns = this_element.customOptions.columns + 1;
      this.props.updateElement.call(this.props.preview, this_element);
    }
  }, {
    key: "removeTilesOptions",
    value: function removeTilesOptions(index) {
      var this_element = this.state.element;
      this_element.customOptions.tileProperties.splice(index, 1);
      this_element.customOptions.columns = this_element.customOptions.columns - 1;
      this.props.updateElement.call(this.props.preview, this_element);
    }
  }, {
    key: "addTableOptions",
    value: function addTableOptions() {
      var this_element = this.state.element;
      var compId = this_element.customOptions.headerList.length + 1;
      this_element.customOptions.headerList.splice(compId, 0, {
        label: '',
        headerId: "headerId00".concat(compId),
        required: false,
        type: ''
      });
      this_element.customOptions.columns = this_element.customOptions.columns + 1;
      this.props.updateElement.call(this.props.preview, this_element);
    }
  }, {
    key: "removeTableOptions",
    value: function removeTableOptions(index) {
      var this_element = this.state.element;
      this_element.customOptions.headerList.splice(index, 1);
      this_element.customOptions.columns = this_element.customOptions.columns - 1;
      this.props.updateElement.call(this.props.preview, this_element);
    }
  }, {
    key: "updateElement",
    value: function updateElement() {
      var this_element = this.state.element; // to prevent ajax calls with no change

      if (this.state.dirty) {
        this.props.updateElement.call(this.props.preview, this_element);
        this.setState({
          dirty: false
        });
      }
    }
  }, {
    key: "convertFromHTML",
    value: function convertFromHTML(content) {
      var newContent = (0, _draftJs.convertFromHTML)(content);

      if (!newContent.contentBlocks || !newContent.contentBlocks.length) {
        // to prevent crash when no contents in editor
        return _draftJs.EditorState.createEmpty();
      }

      var contentState = _draftJs.ContentState.createFromBlockArray(newContent);

      return _draftJs.EditorState.createWithContent(contentState);
    }
  }, {
    key: "addOptions",
    value: function addOptions() {
      var _this7 = this;

      var optionsApiUrl = document.getElementById('optionsApiUrl').value;

      if (optionsApiUrl) {
        (0, _requests.get)(optionsApiUrl).then(function (data) {
          _this7.props.element.options = [];
          var options = null;

          if (_this7.props.element.element.toLowerCase('singlechoice')) {
            options = _this7.props.element.singleChoiceOptions;
            data.forEach(function (x) {
              options.push(x);
            });
            this_element.singleChoiceOptions = options;
          } else if (_this7.props.element.element.toLowerCase('dropdown')) {
            options = _this7.props.element.dropDownOptions;
            data.forEach(function (x) {
              options.push(x);
            });
            this_element.singleChoiceOptions = options;
          }

          _this7.setState({
            element: this_element,
            dirty: true
          });
        });
      }
    }
  }, {
    key: "setEmptyText",
    value: function setEmptyText(elemProperty, e) {
      var this_element = this.state.element;
      this_element.customOptions[elemProperty] = e.target.value;
      this.setState({
        element: this_element,
        dirty: true
      });
    }
  }, {
    key: "setDefaultOptions",
    value: function setDefaultOptions(elemProperty, e) {
      var this_element = this.state.element;
      this_element.customOptions[elemProperty] = e.target.value;
      this.setState({
        element: this_element,
        dirty: true
      });
    }
  }, {
    key: "setDisplayOptions",
    value: function setDisplayOptions(elemProperty, e) {
      var this_element = this.state.element;
      this_element.customOptions[elemProperty] = e.target.value;
      this.setState({
        element: this_element,
        dirty: true
      });
    }
  }, {
    key: "setActionClick",
    value: function setActionClick(elemProperty, e) {
      var this_element = this.state.element;
      this_element.customOptions[elemProperty] = e.target.value;
      this.setState({
        element: this_element,
        dirty: true
      });
    }
  }, {
    key: "setScreenSelect",
    value: function setScreenSelect(elemProperty, e) {
      var this_element = this.state.element;
      this_element.customOptions[elemProperty] = e.target.value;
      this.setState({
        element: this_element,
        dirty: true
      });
    }
  }, {
    key: "setValidationOptions",
    value: function setValidationOptions(e) {
      var this_element = this.state.element;
      this_element.customOptions.validation = e.target.value;

      if (this_element.customOptions.validation === 'Email' || this_element.customOptions.validation === 'Currency' || this_element.customOptions.validation === 'URL') {
        this.state.element.customOptions.charLimit = ""; // this.state.characterLimit = ""; 
      } // else {
      //   this.state.element.customOptions.charLimit = this.state.characterLimit;
      // }


      this.setState({
        element: this_element,
        dirty: true
      });
    }
  }, {
    key: "setOtherOptionText",
    value: function setOtherOptionText(elemProperty, e) {
      var this_element = this.state.element;
      this_element.customOptions[elemProperty] = e.target.value;
      var text = e.target.value;
      var val = e.target.value.toLowerCase().split(' ').join('_');
      this_element.checkListOptions[this_element.checkListOptions.length - 1].value = val;
      this_element.checkListOptions[this_element.checkListOptions.length - 1].label = text;
      this_element.checkListOptions[this_element.checkListOptions.length - 1].key = _UUID["default"].uuid();
      this.setState({
        element: this_element,
        dirty: true
      });
    }
  }, {
    key: "setPreviousValues",
    value: function setPreviousValues() {
      var this_element = this.state.elementValues;
      this_element.dirty = false; // to prevent ajax calls with no change

      this.props.updateElement.call(this.props.preview, this_element);
      this.props.closeEdit();
    }
  }, {
    key: "handleDropdownOptionChange",
    value: function handleDropdownOptionChange(index, ids) {
      var this_element = this.state.element;
      this_element.dependentComponents[index].parentId = ids;
      this.setState({
        element: this_element,
        dirty: true
      });
    }
  }, {
    key: "handleAddSectionComponent",
    value: function handleAddSectionComponent(index, iIndex, element) {
      var this_element = this.state.element;
      this_element.dependentComponents[index].form[iIndex] = element;
      this.setState({
        element: this_element,
        dirty: true
      });
    }
  }, {
    key: "addMoreOption",
    value: function addMoreOption(index) {
      var this_element = this.state.element;
      this_element.dependentComponents.push({
        parentId: [],
        form: [{
          label: "",
          key: ""
        }]
      });
      this.setState({
        element: this_element,
        dirty: true
      });
    }
  }, {
    key: "removeOption",
    value: function removeOption(index) {
      var this_element = this.state.element;
      this_element.dependentComponents.splice(index, 1);
      this.setState({
        element: this_element,
        dirty: true
      });
    }
  }, {
    key: "addSectionComponentItem",
    value: function addSectionComponentItem(index, iIndex) {
      var this_element = this.state.element;
      this_element.dependentComponents[index].form.push({
        label: "",
        key: ""
      });
      this.setState({
        element: this_element,
        dirty: true
      });
    }
  }, {
    key: "removeSectionComponentItem",
    value: function removeSectionComponentItem(index, iIndex) {
      var this_element = this.state.element;
      this_element.dependentComponents[index].form.splice(iIndex, 1);
      this.setState({
        element: this_element,
        dirty: true
      });
    }
  }, {
    key: "handleDefaultLocationChange",
    value: function handleDefaultLocationChange(index, iIndex) {
      var this_element = this.state.element;
      this_element.dependentComponents[index].form.splice(iIndex, 1);
      this.setState({
        element: this_element,
        dirty: true
      });
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps) {
      localStorage.setItem("updatedItem", JSON.stringify(this.props.element));

      if (prevProps.element !== this.props.element) {
        this.setState({
          element: this.props.element
        });
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this8 = this;

      if (this.state.dirty) {
        this.props.element.dirty = true;
      }

      var elementKey = this.props.element.element;
      var isformDefault = this.props.globalStyles.formDefault;
      var this_show_empty_text = this.props.element.customOptions.hasOwnProperty('showEmptyTextOption') ? this.props.element.customOptions.showEmptyTextOption : false;