@arudovwen/react-form-builder/lib/form-elements-edit.js

A complete form builder for react.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _reactTextareaAutosize = _interopRequireDefault(require("react-textarea-autosize"));
var _draftJs = require("draft-js");
var _draftjsToHtml = _interopRequireDefault(require("draftjs-to-html"));
var _reactDraftWysiwyg = require("react-draft-wysiwyg");
var _axios = _interopRequireDefault(require("axios"));
var _dynamicOptionList = _interopRequireDefault(require("./dynamic-option-list"));
var _requests = require("./stores/requests");
var _data = require("./data");
var _UUID = _interopRequireDefault(require("./UUID"));
var _IntlMessages = _interopRequireDefault(require("./language-provider/IntlMessages"));
var _ApiExample = _interopRequireDefault(require("./ApiExample"));
var _TableInputColumns = _interopRequireDefault(require("./TableInputColumns"));
var _DynamicInputOptions = _interopRequireDefault(require("./DynamicInputOptions"));
var _FileReaderComponent = _interopRequireDefault(require("./FileReaderComponent"));
var _OptionsCreate = _interopRequireDefault(require("./OptionsCreate"));
var _OptionsCreateApi = _interopRequireDefault(require("./OptionsCreateApi"));
var _OptionsExample = _interopRequireDefault(require("./OptionsExample"));
var _MultiSelectInput = _interopRequireDefault(require("./MultiSelectInput"));
var _dataGridOptions = _interopRequireDefault(require("./data-grid-options"));
var _MultiSelectValue = _interopRequireDefault(require("./MultiSelectValue"));
var _ArithmeticComponent = _interopRequireDefault(require("./form-elements/ArithmeticComponent"));
const toolbar = {
  options: ['inline', 'list', 'textAlign', 'fontSize', 'link', 'history'],
  inline: {
    inDropdown: false,
    className: undefined,
    options: ['bold', 'italic', 'underline', 'superscript', 'subscript']
  }
};
const dateFormats = [{
  label: 'Day/Month/Year',
  format: 'dd/MM/yyyy'
}, {
  label: 'Month/Day/Year',
  format: 'MM/dd/yyyy'
}, {
  label: 'ISO (Year-Month-Day)',
  format: 'yyyy-MM-dd'
}, {
  label: 'Full Month Day, Year',
  format: 'MMMM d, yyyy'
}, {
  label: 'Abbreviated Month Day, Year',
  format: 'MMM d, yyyy'
}, {
  label: 'Day. Month. Year (Dots)',
  format: 'dd.MM.yyyy'
}, {
  label: 'Day Month Name Year',
  format: 'dd MMMM yyyy'
}, {
  label: 'Weekday, Month Day, Year',
  format: 'EEEE, MMMM d, yyyy'
}, {
  label: 'Short Weekday, Month Day, Year',
  format: 'EEE, MMM d, yyyy'
}, {
  label: 'Day-Month-Year',
  format: 'dd-MM-yyyy'
}];
class FormElementsEdit extends _react.default.Component {
  constructor(props) {
    super(props);
    (0, _defineProperty2.default)(this, "getDocuments", async () => {
      try {
        const token = window.localStorage.getItem('token');
        const localData = window.localStorage.getItem('userData');
        const userData = localData ? JSON.parse(localData) : null;
        const LoginInfo = window.localStorage.getItem('LoginInfo');
        const loginData = LoginInfo ? JSON.parse(LoginInfo) : null;
        this.setState({
          fileLoading: true
        });
        const query = {
          Page: 1,
          Page_Size: 15,
          count: 100000,
          documentType: 0,
          organizationId: userData?.id ?? 'a9d0b5de-c51b-4e6a-a003-4f75e46d9ac7',
          documentTabs: 2
        };
        const config = {
          headers: {
            Authorization: `Bearer ${token}`
          }
        };
        // a4368688-3294-412e-a516-7e1bde2c32a6
        if (!token) return;
        const url = `https://api.dev.document.kusala.com.ng/api/v1/documentmanagement/get-documents-inbox?email=${loginData?.email}`;
        const response = await _axios.default.post(url, query, config);
        if (response.status === 200) {
          this.setState({
            documents: response.data.data?.map(i => ({
              label: i?.title,
              value: i?.documentMainId
            }))
          });
        }
      } finally {
        this.setState({
          fileLoading: false
        });
      }
    });
    (0, _defineProperty2.default)(this, "updateJsonElement", () => {
      const this_element = JSON.stringify(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
        });
      }
    });
    this.state = {
      element: this.props.element,
      data: this.props.data,
      dirty: false,
      fileLoading: false,
      documents: [],
      multiFieldOptions: this.props.formData.filter(i => i.id !== this.props.element.id)
    };
    this.getDocuments = this.getDocuments.bind(this);
  }
  toggleRequired() {
    // const this_element = this.state.element;
  }
  editElementProp(elemProperty, targProperty, e) {
    // console.log(elemProperty);
    // console.log(targProperty);
    // console.log(e);

    const this_element = this.state.element;
    // Check if e is an event or direct value
    if (e && e.target) {
      this_element[elemProperty] = e.target[targProperty];
    } else {
      // Handle case where e is the direct value (like from TableInputColumn)
      this_element[targProperty] = e;
    }
    this.setState({
      element: this_element,
      dirty: true
    }, () => {
      if (targProperty === 'checked') {
        this.updateElement();
      }
    });
  }
  onEditorStateChange(index, property, editorContent) {
    // const html = draftToHtml(convertToRaw(editorContent.getCurrentContent())).replace(/<p>/g, '<div>').replace(/<\/p>/g, '</div>');
    const html = (0, _draftjsToHtml.default)((0, _draftJs.convertToRaw)(editorContent.getCurrentContent())).replace(/<p>/g, '').replace(/<\/p>/g, '').replace(/&nbsp;/g, ' ').replace(/(?:\r\n|\r|\n)/g, ' ');
    const this_element = this.state.element;
    this_element[property] = html;
    this.setState({
      element: this_element,
      dirty: true
    });
  }
  updateElement() {
    const 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
      });
    }
  }
  convertFromHTML(content) {
    const newContent = (0, _draftJs.convertFromHTML)(content);
    if (!newContent.contentBlocks || !newContent.contentBlocks.length) {
      // to prevent crash when no contents in editor
      return _draftJs.EditorState.createEmpty();
    }
    const contentState = _draftJs.ContentState.createFromBlockArray(newContent);
    return _draftJs.EditorState.createWithContent(contentState);
  }
  addOptions() {
    const optionsApiUrl = document.getElementById('optionsApiUrl').value;
    if (optionsApiUrl) {
      (0, _requests.get)(optionsApiUrl).then(response => {
        this.props.element.options = [];
        const {
          options
        } = this.props.element;
        (response.data || response).forEach(x => {
          // eslint-disable-next-line no-param-reassign
          x.id = _UUID.default.uuid();
          options.push(x);
        });
        const this_element = this.state.element;
        this.setState({
          element: this_element,
          dirty: true
        });
      });
    }
  }
  addOptionsFromSheet(data) {
    const {
      options
    } = this.props.element;
    data.forEach(x => {
      // eslint-disable-next-line no-param-reassign
      x.id = _UUID.default.uuid();
      options.push(x);
    });
    const this_element = this.state.element;
    this.setState({
      element: this_element,
      dirty: true
    });
  }
  componentDidMount() {
    this.getDocuments();
  }
  render() {
    if (this.state.dirty) {
      this.props.element.dirty = true;
    }
    const this_checked = this.props.element.hasOwnProperty('required') ? this.props.element.required : false;
    // const this_read_only = this.props.element.hasOwnProperty('readOnly')
    //   ? this.props.element.readOnly
    //   : false;

    const this_is_read_only = this.props.element.hasOwnProperty('isReadOnly') ? this.props.element.isReadOnly : false;
    const this_default_today = this.props.element.hasOwnProperty('defaultToday') ? this.props.element.defaultToday : false;
    const this_show_time_select = this.props.element.hasOwnProperty('showTimeSelect') ? this.props.element.showTimeSelect : false;
    const this_show_time_select_only = this.props.element.hasOwnProperty('showTimeSelectOnly') ? this.props.element.showTimeSelectOnly : false;
    const this_show_time_input = this.props.element.hasOwnProperty('showTimeInput') ? this.props.element.showTimeInput : false;
    const this_checked_inline = this.props.element.hasOwnProperty('inline') ? this.props.element.inline : false;
    const this_checked_bold = this.props.element.hasOwnProperty('bold') ? this.props.element.bold : false;
    const this_checked_italic = this.props.element.hasOwnProperty('italic') ? this.props.element.italic : false;
    const this_checked_center = this.props.element.hasOwnProperty('center') ? this.props.element.center : false;
    const this_checked_page_break = this.props.element.hasOwnProperty('pageBreakBefore') ? this.props.element.pageBreakBefore : false;
    const this_checked_toggle_password = this.props.element.hasOwnProperty('togglePassword') ? this.props.element.togglePassword : false;
    const this_checked_toggle_negative = this.props.element.hasOwnProperty('toggleNegative') ? this.props.element.toggleNegative : false;
    const this_checked_toggle_vibility = this.props.element.hasOwnProperty('toggleVisibility') ? this.props.element.toggleVisibility : false;
    const this_checked_is_cascade = this.props.element.hasOwnProperty('isCascade') ? this.props.element.isCascade : false;

    // const this_checked_alternate_form = this.props.element.hasOwnProperty(
    //   'alternateForm',
    // )
    //   ? this.props.element.alternateForm
    //   : false;

    const {
      canHavePageBreakBefore,
      // canHaveAlternateForm,
      canHaveDisplayHorizontal,
      canHaveOptionCorrect,
      canHaveOptionValue
    } = this.props.element;
    const canHaveImageSize = this.state.element.element === 'Image' || this.state.element.element === 'Camera';
    const this_files = this.props.files.length ? this.props.files : [];
    if (this_files.length < 1 || this_files.length > 0 && this_files[0].id !== '') {
      this_files.unshift({
        id: '',
        file_name: ''
      });
    }
    let editorState;
    if (this.props.element.hasOwnProperty('content')) {
      editorState = this.convertFromHTML(this.props.element.content);
    }
    if (this.props.element.hasOwnProperty('label')) {
      editorState = this.convertFromHTML(this.props.element.label);
    }
    return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
      className: "clearfix"
    }, /*#__PURE__*/_react.default.createElement("h4", {
      className: "float-left"
    }, this.props.element.text), /*#__PURE__*/_react.default.createElement("i", {
      className: "float-right fas fa-times dismiss-edit",
      onClick: this.props.manualEditModeOff
    })), this.props.element.hasOwnProperty('content') && /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group"
    }, /*#__PURE__*/_react.default.createElement("label", {
      className: "control-label"
    }, /*#__PURE__*/_react.default.createElement(_IntlMessages.default, {
      id: "text-to-display"
    }), ":"), /*#__PURE__*/_react.default.createElement(_reactDraftWysiwyg.Editor, {
      toolbar: toolbar,
      defaultEditorState: editorState,
      onBlur: this.updateElement.bind(this),
      onEditorStateChange: this.onEditorStateChange.bind(this, 0, 'content'),
      stripPastedStyles: true
    })), this.props.element.hasOwnProperty('file_path') && /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group"
    }, /*#__PURE__*/_react.default.createElement("label", {
      className: "control-label",
      htmlFor: "fileSelect"
    }, /*#__PURE__*/_react.default.createElement(_IntlMessages.default, {
      id: "choose-file"
    }), ":"), /*#__PURE__*/_react.default.createElement("select", {
      id: "fileSelect",
      className: "form-control",
      defaultValue: this.props.element.file_path,
      onBlur: this.updateElement.bind(this),
      onChange: this.editElementProp.bind(this, 'file_path', 'value')
    }, this_files.map(file => {
      const this_key = `file_${file.id}`;
      return /*#__PURE__*/_react.default.createElement("option", {
        value: file.id,
        key: this_key
      }, file.file_name);
    }))), this.props.element.hasOwnProperty('href') && /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group"
    }, /*#__PURE__*/_react.default.createElement(_reactTextareaAutosize.default, {
      type: "text",
      className: "form-control",
      defaultValue: this.props.element.href,
      onBlur: this.updateElement.bind(this),
      onChange: this.editElementProp.bind(this, 'href', 'value')
    })), this.props.element.hasOwnProperty('label') && /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group"
    }, /*#__PURE__*/_react.default.createElement("label", null, /*#__PURE__*/_react.default.createElement(_IntlMessages.default, {
      id: "display-label"
    })), /*#__PURE__*/_react.default.createElement(_reactDraftWysiwyg.Editor, {
      toolbar: toolbar,
      defaultEditorState: editorState,
      onBlur: this.updateElement.bind(this),
      onEditorStateChange: this.onEditorStateChange.bind(this, 0, 'label'),
      stripPastedStyles: true,
      height: 100
    }), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("div", {
      className: "custom-control custom-checkbox"
    }, /*#__PURE__*/_react.default.createElement("input", {
      id: "is-required",
      className: "custom-control-input",
      type: "checkbox",
      checked: this_checked,
      value: true,
      onChange: this.editElementProp.bind(this, 'required', 'checked')
    }), /*#__PURE__*/_react.default.createElement("label", {
      className: "custom-control-label",
      htmlFor: "is-required"
    }, /*#__PURE__*/_react.default.createElement(_IntlMessages.default, {
      id: "required"
    }))), this.props.element.hasOwnProperty('isReadOnly') && /*#__PURE__*/_react.default.createElement("div", {
      className: "custom-control custom-checkbox"
    }, /*#__PURE__*/_react.default.createElement("input", {
      id: "read-only",
      className: "custom-control-input",
      type: "checkbox",
      checked: this_is_read_only,
      value: true,
      onChange: this.editElementProp.bind(this, 'isReadOnly', 'checked')
    }), /*#__PURE__*/_react.default.createElement("label", {
      className: "custom-control-label",
      htmlFor: "read-only"
    }, /*#__PURE__*/_react.default.createElement(_IntlMessages.default, {
      id: "read-only"
    }))), this.props.element.hasOwnProperty('defaultToday') && /*#__PURE__*/_react.default.createElement("div", {
      className: "custom-control custom-checkbox"
    }, /*#__PURE__*/_react.default.createElement("input", {
      id: "is-default-to-today",
      className: "custom-control-input",
      type: "checkbox",
      checked: this_default_today,
      value: true,
      onChange: this.editElementProp.bind(this, 'defaultToday', 'checked')
    }), /*#__PURE__*/_react.default.createElement("label", {
      className: "custom-control-label",
      htmlFor: "is-default-to-today"
    }, /*#__PURE__*/_react.default.createElement(_IntlMessages.default, {
      id: "default-to-today"
    }), "?")), this.props.element.hasOwnProperty('showTimeSelect') && /*#__PURE__*/_react.default.createElement("div", {
      className: "custom-control custom-checkbox"
    }, /*#__PURE__*/_react.default.createElement("input", {
      id: "show-time-select",
      className: "custom-control-input",
      type: "checkbox",
      checked: this_show_time_select,
      value: true,
      onChange: this.editElementProp.bind(this, 'showTimeSelect', 'checked')
    }), /*#__PURE__*/_react.default.createElement("label", {
      className: "custom-control-label",
      htmlFor: "show-time-select"
    }, /*#__PURE__*/_react.default.createElement(_IntlMessages.default, {
      id: "show-time-select"
    }), "?")), this_show_time_select && this.props.element.hasOwnProperty('showTimeSelectOnly') && /*#__PURE__*/_react.default.createElement("div", {
      className: "custom-control custom-checkbox"
    }, /*#__PURE__*/_react.default.createElement("input", {
      id: "show-time-select-only",
      className: "custom-control-input",
      type: "checkbox",
      checked: this_show_time_select_only,
      value: true,
      onChange: this.editElementProp.bind(this, 'showTimeSelectOnly', 'checked')
    }), /*#__PURE__*/_react.default.createElement("label", {
      className: "custom-control-label",
      htmlFor: "show-time-select-only"
    }, /*#__PURE__*/_react.default.createElement(_IntlMessages.default, {
      id: "show-time-select-only"
    }), "?")), this.props.element.hasOwnProperty('showTimeInput') && /*#__PURE__*/_react.default.createElement("div", {
      className: "custom-control custom-checkbox"
    }, /*#__PURE__*/_react.default.createElement("input", {
      id: "show-time-input",
      className: "custom-control-input",
      type: "checkbox",
      checked: this_show_time_input,
      value: true,
      onChange: this.editElementProp.bind(this, 'showTimeInput', 'checked')
    }), /*#__PURE__*/_react.default.createElement("label", {
      className: "custom-control-label",
      htmlFor: "show-time-input"
    }, /*#__PURE__*/_react.default.createElement(_IntlMessages.default, {
      id: "show-time-input"
    }), "?")), (this.state.element.element === 'RadioButtons' || this.state.element.element === 'Checkboxes') && canHaveDisplayHorizontal && /*#__PURE__*/_react.default.createElement("div", {
      className: "custom-control custom-checkbox"
    }, /*#__PURE__*/_react.default.createElement("input", {
      id: "display-horizontal",
      className: "custom-control-input",
      type: "checkbox",
      checked: this_checked_inline,
      value: true,
      onChange: this.editElementProp.bind(this, 'inline', 'checked')
    }), /*#__PURE__*/_react.default.createElement("label", {
      className: "custom-control-label",
      htmlFor: "display-horizontal"
    }, /*#__PURE__*/_react.default.createElement(_IntlMessages.default, {
      id: "display-horizontal"
    })))), this.props.element.hasOwnProperty('src') && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group"
    }, /*#__PURE__*/_react.default.createElement("label", {
      className: "control-label",
      htmlFor: "srcInput"
    }, /*#__PURE__*/_react.default.createElement(_IntlMessages.default, {
      id: "link-to"
    }), ":"), /*#__PURE__*/_react.default.createElement("input", {
      id: "srcInput",
      type: "text",
      className: "form-control",
      defaultValue: this.props.element.src,
      onBlur: this.updateElement.bind(this),
      onChange: this.editElementProp.bind(this, 'src', 'value')
    }))), canHaveImageSize && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group"
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: "custom-control custom-checkbox"
    }, /*#__PURE__*/_react.default.createElement("input", {
      id: "do-center",
      className: "custom-control-input",
      type: "checkbox",
      checked: this_checked_center,
      value: true,
      onChange: this.editElementProp.bind(this, 'center', 'checked')
    }), /*#__PURE__*/_react.default.createElement("label", {
      className: "custom-control-label",
      htmlFor: "do-center"
    }, /*#__PURE__*/_react.default.createElement(_IntlMessages.default, {
      id: "center"
    }), "?"))), /*#__PURE__*/_react.default.createElement("div", {
      className: "row"
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: "col-sm-3"
    }, /*#__PURE__*/_react.default.createElement("label", {
      className: "control-label",
      htmlFor: "elementWidth"
    }, /*#__PURE__*/_react.default.createElement(_IntlMessages.default, {
      id: "width"
    }), ":"), /*#__PURE__*/_react.default.createElement("input", {
      id: "elementWidth",
      type: "text",
      className: "form-control",
      defaultValue: this.props.element.width,
      onBlur: this.updateElement.bind(this),
      onChange: this.editElementProp.bind(this, 'width', 'value')
    })), /*#__PURE__*/_react.default.createElement("div", {
      className: "col-sm-3"
    }, /*#__PURE__*/_react.default.createElement("label", {
      className: "control-label",
      htmlFor: "elementHeight"
    }, /*#__PURE__*/_react.default.createElement(_IntlMessages.default, {
      id: "height"
    }), ":"), /*#__PURE__*/_react.default.createElement("input", {
      id: "elementHeight",
      type: "text",
      className: "form-control",
      defaultValue: this.props.element.height,
      onBlur: this.updateElement.bind(this),
      onChange: this.editElementProp.bind(this, 'height', 'value')
    })))), (this.state.element.element === 'FileUpload' || this.state.element.element === 'MultiFileUpload') && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group"
    }, /*#__PURE__*/_react.default.createElement("label", {
      className: "control-label",
      htmlFor: "fileType"
    }, /*#__PURE__*/_react.default.createElement(_IntlMessages.default, {
      id: "choose-file-type"
    }), ":"), /*#__PURE__*/_react.default.createElement("select", {
      id: "fileType",
      className: "form-control",
      onBlur: this.updateElement.bind(this),
      onChange: this.editElementProp.bind(this, 'fileType', 'value'),
      value: this.props.element.fileType
    }, _data.FileTypes.map((file, index) => /*#__PURE__*/_react.default.createElement("option", {
      value: file.type,
      key: index
    }, file.typeName))))), this.state.element.element === 'Signature' && this.props.element.readOnly ? /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group"
    }, /*#__PURE__*/_react.default.createElement("label", {
      className: "control-label",
      htmlFor: "variableKey"
    }, /*#__PURE__*/_react.default.createElement(_IntlMessages.default, {
      id: "variable-key"
    }), ":"), /*#__PURE__*/_react.default.createElement("input", {
      id: "variableKey",
      type: "text",
      className: "form-control",
      defaultValue: this.props.element.variableKey,
      onBlur: this.updateElement.bind(this),
      onChange: this.editElementProp.bind(this, 'variableKey', 'value')
    }), /*#__PURE__*/_react.default.createElement("p", {
      className: "help-block"
    }, /*#__PURE__*/_react.default.createElement(_IntlMessages.default, {
      id: "variable-key-desc"
    }), ".")) : /*#__PURE__*/_react.default.createElement("div", null), canHavePageBreakBefore && /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group"
    }, /*#__PURE__*/_react.default.createElement("label", {
      className: "control-label"
    }, /*#__PURE__*/_react.default.createElement(_IntlMessages.default, {
      id: "print-options"
    })), /*#__PURE__*/_react.default.createElement("div", {
      className: "custom-control custom-checkbox"
    }, /*#__PURE__*/_react.default.createElement("input", {
      id: "page-break-before-element",
      className: "custom-control-input",
      type: "checkbox",
      checked: this_checked_page_break,
      value: true,
      onChange: this.editElementProp.bind(this, 'pageBreakBefore', 'checked')
    }), /*#__PURE__*/_react.default.createElement("label", {
      className: "custom-control-label",
      htmlFor: "page-break-before-element"
    }, /*#__PURE__*/_react.default.createElement(_IntlMessages.default, {
      id: "page-break-before-elements"
    }), "?"))), this.props.element.hasOwnProperty('step') && /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group"
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group-range"
    }, /*#__PURE__*/_react.default.createElement("label", {
      className: "control-label",
      htmlFor: "rangeStep"
    }, /*#__PURE__*/_react.default.createElement(_IntlMessages.default, {
      id: "step"
    })), /*#__PURE__*/_react.default.createElement("input", {
      id: "rangeStep",
      type: "number",
      className: "form-control",
      defaultValue: this.props.element.step,
      onBlur: this.updateElement.bind(this),
      onChange: this.editElementProp.bind(this, 'step', 'value')
    }))), this.props.element.hasOwnProperty('min_value') && /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group"
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group-range"
    }, /*#__PURE__*/_react.default.createElement("label", {
      className: "control-label",
      htmlFor: "rangeMin"
    }, /*#__PURE__*/_react.default.createElement(_IntlMessages.default, {
      id: "min"
    })), /*#__PURE__*/_react.default.createElement("input", {
      id: "rangeMin",
      type: "number",
      className: "form-control",
      defaultValue: this.props.element.min_value,
      onBlur: this.updateElement.bind(this),
      onChange: this.editElementProp.bind(this, 'min_value', 'value')
    }), /*#__PURE__*/_react.default.createElement("input", {
      type: "text",
      className: "form-control",
      defaultValue: this.props.element.min_label,
      onBlur: this.updateElement.bind(this),
      onChange: this.editElementProp.bind(this, 'min_label', 'value')
    }))), this.props.element.hasOwnProperty('max_value') && /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group"
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group-range"
    }, /*#__PURE__*/_react.default.createElement("label", {
      className: "control-label",
      htmlFor: "rangeMax"
    }, /*#__PURE__*/_react.default.createElement(_IntlMessages.default, {
      id: "max"
    })), /*#__PURE__*/_react.default.createElement("input", {
      id: "rangeMax",
      type: "number",
      className: "form-control",
      defaultValue: this.props.element.max_value,
      onBlur: this.updateElement.bind(this),
      onChange: this.editElementProp.bind(this, 'max_value', 'value')
    }), /*#__PURE__*/_react.default.createElement("input", {
      type: "text",
      className: "form-control",
      defaultValue: this.props.element.max_label,
      onBlur: this.updateElement.bind(this),
      onChange: this.editElementProp.bind(this, 'max_label', 'value')
    }))), this.props.element.hasOwnProperty('canHaveMaxLength') && /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group"
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group-range"
    }, /*#__PURE__*/_react.default.createElement("label", {
      className: "control-label text-13",
      htmlFor: "maxLength"
    }, "Max Length"), /*#__PURE__*/_react.default.createElement("input", {
      type: "number",
      className: "form-control",
      defaultValue: this.props.element.maxLength,
      onBlur: this.updateElement.bind(this),
      onChange: this.editElementProp.bind(this, 'maxLength', 'value')
    }))), this.props.element.hasOwnProperty('canTogglePassword') && /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group"
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: "custom-control custom-checkbox"
    }, /*#__PURE__*/_react.default.createElement("input", {
      id: "toggle-password",
      className: "custom-control-input",
      type: "checkbox",
      checked: this_checked_toggle_password,
      value: true,
      onChange: this.editElementProp.bind(this, 'togglePassword', 'checked')
    }), /*#__PURE__*/_react.default.createElement("label", {
      className: "custom-control-label",
      htmlFor: "toggle-password"
    }, "Can Toggle Password"))), this.props.element.hasOwnProperty('canToggleNegative') && /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group"
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: "custom-control custom-checkbox"
    }, /*#__PURE__*/_react.default.createElement("input", {
      id: "toggle-negative",
      className: "custom-control-input",
      type: "checkbox",
      checked: this_checked_toggle_negative,
      value: true,
      onChange: this.editElementProp.bind(this, 'toggleNegative', 'checked')
    }), /*#__PURE__*/_react.default.createElement("label", {
      className: "custom-control-label",
      htmlFor: "toggle-negative"
    }, "Can Allow Negative"))), this.props.element.hasOwnProperty('canMapFields') && /*#__PURE__*/_react.default.createElement("div", {
      className: "mb-2 "
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group"
    }, /*#__PURE__*/_react.default.createElement("label", {
      className: "control-label text-13",
      htmlFor: "documentId"
    }, "Select Mapped Fields"), /*#__PURE__*/_react.default.createElement(_MultiSelectInput.default, {
      element: this.props.element,
      options: this.state.multiFieldOptions,
      value: this.props.element.mappedFields || [],
      onChange: newValues => {
        this.editElementProp(this, 'mappedFields', newValues);
      }
    })), /*#__PURE__*/_react.default.createElement("div", null, this.props.element.hasOwnProperty('haveArithmetic') && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_ArithmeticComponent.default, {
      mappedFields: this.props.element.mappedFields || [],
      calculationFields: this.props.element.calculationFields || [],
      onChangeCalculationFields: newValues => {
        this.editElementProp(this, 'calculationFields', newValues);
      },
      isEditing: true
    })))), this.props.element.hasOwnProperty('canToggleField') && /*#__PURE__*/_react.default.createElement("div", {
      className: ""
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: "mt-2 mb-3 custom-control custom-checkbox"
    }, /*#__PURE__*/_react.default.createElement("input", {
      id: "toggle-field-visibility",
      className: "custom-control-input",
      type: "checkbox",
      checked: this_checked_toggle_vibility,
      onChange: this.editElementProp.bind(this, 'toggleVisibility', 'checked')
    }), /*#__PURE__*/_react.default.createElement("label", {
      className: "custom-control-label",
      htmlFor: "toggle-field-visibility"
    }, "Toggle Field Visibility")), this_checked_toggle_vibility && /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group"
    }, /*#__PURE__*/_react.default.createElement("label", {
      className: "control-label text-13",
      htmlFor: "toggeIds"
    }, "Dependent Fields/Values"), /*#__PURE__*/_react.default.createElement(_MultiSelectValue.default, {
      element: this.props.element,
      options: this.state.multiFieldOptions,
      value: this.props.element.visibilityFields || [],
      onChange: newValues => {
        this.editElementProp(this, 'visibilityFields', newValues);
      }
    }))), this.props.element.hasOwnProperty('canUseCascade') && /*#__PURE__*/_react.default.createElement("div", {
      className: ""
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: "mt-2 mb-3 custom-control custom-checkbox"
    }, /*#__PURE__*/_react.default.createElement("input", {
      id: "is-cascade",
      className: "custom-control-input",
      type: "checkbox",
      checked: this_checked_is_cascade,
      onChange: this.editElementProp.bind(this, 'isCascade', 'checked')
    }), /*#__PURE__*/_react.default.createElement("label", {
      className: "custom-control-label",
      htmlFor: "is-cascade"
    }, "Use Cascade")), this_checked_is_cascade && /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group"
    }, /*#__PURE__*/_react.default.createElement("label", {
      className: "control-label text-13",
      htmlFor: "toggeIds"
    }, "Dependent Field"), /*#__PURE__*/_react.default.createElement("select", {
      className: "form-control",
      value: this.props.element.method,
      onBlur: this.updateElement.bind(this),
      onChange: this.editElementProp.bind(this, 'dependentField', 'value')
    }, /*#__PURE__*/_react.default.createElement("option", {
      value: ""
    }, "Select field"), this.state.multiFieldOptions.map((item, index) => /*#__PURE__*/_react.default.createElement("option", {
      key: index,
      value: item.field_name
    }, item.label))))), this.props.element.hasOwnProperty('canMakeApiValidation') && /*#__PURE__*/_react.default.createElement("div", {
      className: ""
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: "mb-4"
    }, /*#__PURE__*/_react.default.createElement(_ApiExample.default, null)), /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group"
    }, /*#__PURE__*/_react.default.createElement("label", {
      className: "control-label text-13",
      htmlFor: "url"
    }, "Api Url"), /*#__PURE__*/_react.default.createElement("input", {
      type: "text",
      className: "form-control",
      defaultValue: this.props.element.url,
      onBlur: this.updateElement.bind(this),
      onChange: this.editElementProp.bind(this, 'url', 'value')
    })), /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group"
    }, /*#__PURE__*/_react.default.createElement("label", {
      className: "control-label text-13",
      htmlFor: "url"
    }, "File Retrieval Api Url (optional)"), /*#__PURE__*/_react.default.createElement("input", {
      type: "text",
      className: "form-control",
      defaultValue: this.props.element.fileUrl,
      onBlur: this.updateElement.bind(this),
      onChange: this.editElementProp.bind(this, 'fileUrl', 'value')
    })), /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group"
    }, /*#__PURE__*/_react.default.createElement("label", {
      className: "control-label text-13",
      htmlFor: "method"
    }, "Method"), /*#__PURE__*/_react.default.createElement("select", {
      className: "form-control",
      defaultValue: this.props.element.method,
      onBlur: this.updateElement.bind(this),
      onChange: this.editElementProp.bind(this, 'method', 'value')
    }, /*#__PURE__*/_react.default.createElement("option", {
      value: "get"
    }, "GET"), /*#__PURE__*/_react.default.createElement("option", {
      value: "post"
    }, "POST"))), /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group"
    }, /*#__PURE__*/_react.default.createElement("label", {
      className: "control-label text-13",
      htmlFor: "responseType"
    }, "Response Type"), /*#__PURE__*/_react.default.createElement("select", {
      className: "form-control",
      defaultValue: this.props.element.responseType,
      onBlur: this.updateElement.bind(this),
      onChange: this.editElementProp.bind(this, 'responseType', 'value')
    }, /*#__PURE__*/_react.default.createElement("option", {
      value: "string"
    }, "String"), /*#__PURE__*/_react.default.createElement("option", {
      value: "object"
    }, "Object"))), /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group"
    }, /*#__PURE__*/_react.default.createElement("label", {
      className: "control-label text-13",
      htmlFor: "apiKey"
    }, /*#__PURE__*/_react.default.createElement("span", null, ' ', "Authorization Key", ' ', /*#__PURE__*/_react.default.createElement("span", {
      className: "text-muted"
    }, "(Optional)"))), /*#__PURE__*/_react.default.createElement("input", {
      type: "text",
      className: "form-control",
      defaultValue: this.props.element.apiKey,
      onBlur: this.updateElement.bind(this),
      onChange: this.editElementProp.bind(this, 'apiKey', 'value')
    }))), this.props.element.hasOwnProperty('canSelectDocuments') && /*#__PURE__*/_react.default.createElement("div", {
      className: ""
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group"
    }, /*#__PURE__*/_react.default.createElement("label", {
      className: "control-label text-13",
      htmlFor: "documentId"
    }, "Choose a document"), /*#__PURE__*/_react.default.createElement("select", {
      id: "documentId",
      className: "form-control",
      value: this.props.element.documentId,
      onBlur: this.updateElement.bind(this),
      onChange: this.editElementProp.bind(this, 'documentId', 'value')
    }, /*#__PURE__*/_react.default.createElement("option", {
      value: null
    }, this.state.fileLoading ? 'Fetching documents...' : 'Select document'), this.state.documents?.map(item => /*#__PURE__*/_react.default.createElement("option", {
      key: item.value,
      value: JSON.stringify(item)
    }, item.label))))), this.props.element.hasOwnProperty('canSelectDateFormat') && /*#__PURE__*/_react.default.createElement("div", {
      className: ""
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group"
    }, /*#__PURE__*/_react.default.createElement("label", {
      className: "control-label text-13",
      htmlFor: "documentId"
    }, "Choose a date format"), /*#__PURE__*/_react.default.createElement("select", {
      id: "dateFormat",
      className: "form-control",
      value: this.props.element.documentId,
      onBlur: this.updateElement.bind(this),
      onChange: this.editElementProp.bind(this, 'dateFormat', 'value')
    }, dateFormats?.map(item => /*#__PURE__*/_react.default.createElement("option", {
      key: item.format,
      value: item.format
    }, item.label, " (", item.format, ")"))))), this.props.element.hasOwnProperty('canHaveDenonimator') && /*#__PURE__*/_react.default.createElement("div", {
      className: ""
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group"
    }, /*#__PURE__*/_react.default.createElement(_TableInputColumns.default, {
      value: this.props.element.denominators || [],
      onChange: newValues => {
        this.editElementProp(this, 'denominators', newValues);
      }
    }))), this.props.element.hasOwnProperty('canHaveDynamicInputOptions') && /*#__PURE__*/_react.default.createElement("div", {
      className: ""
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group"
    }, /*#__PURE__*/_react.default.createElement("label", {
      className: "control-label text-13",
      htmlFor: "dynamicInputOptions"
    }, "Add Inputs Key/Label"), /*#__PURE__*/_react.default.createElement(_DynamicInputOptions.default, {
      initialFields: this.props.element.dynamicInputOptions,
      onChange: newValues => {
        this.editElementProp(this, 'dynamicInputOptions', newValues);
      }
    }))), ' ', this.props.element.hasOwnProperty('canHaveDataColumns') && /*#__PURE__*/_react.default.createElement("div", {
      className: ""
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group"
    }, /*#__PURE__*/_react.default.createElement("label", {
      className: "control-label text-13",
      htmlFor: "dynamicInputOptions"
    }, "Add Data Columns"), /*#__PURE__*/_react.default.createElement(_dataGridOptions.default, {
      value: this.props.element.dataColumns,
      onChange: newValues => {
        this.editElementProp(this, 'dataColumns', newValues);
      },
      onGetUrl: url => {
        this.editElementProp(this, 'url', url);
      }
    }))), ' ', this.props.element.hasOwnProperty('canHandleMultiOptions') && /*#__PURE__*/_react.default.createElement("div", {
      className: ""
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group"
    }, /*#__PURE__*/_react.default.createElement("label", {
      className: "control-label text-13",
      htmlFor: "firstLabel"
    }, "First DropDown Detail"), /*#__PURE__*/_react.default.createElement("input", {
      id: "firstLabel",
      className: "input-style",
      defaultValue: this.props.element.firstLabel,
      placeholder: "Enter First label",
      onBlur: this.updateElement.bind(this),
      onChange: this.editElementProp.bind(this, 'firstLabel', 'value')
    }), /*#__PURE__*/_react.default.createElement("div", {
      className: "mt-1"
    }, /*#__PURE__*/_react.default.createElement(_OptionsCreateApi.default, {
      onChange: newValues => {
        this.editElementProp(this, 'firstDropdownOptions', newValues);
      }
    })), /*#__PURE__*/_react.default.createElement(_OptionsCreate.default, {
      hideKey: true,
      initialFields: this.props.element.firstDropdownOptions,
      onChange: newValues => {
        this.editElementProp(this, 'firstDropdownOptions', newValues);
      }
    })), /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group"
    }, /*#__PURE__*/_react.default.createElement("label", {
      className: "control-label text-13",
      htmlFor: "secondLabel"
    }, "Second DropDown Detail"), /*#__PURE__*/_react.default.createElement("input", {
      id: "secondLabel",
      className: "input-style",
      defaultValue: this.props.element.secondLabel,
      placeholder: "Enter Second label",
      onBlur: this.updateElement.bind(this),
      onChange: this.editElementProp.bind(this, 'secondLabel', 'value')
    }), /*#__PURE__*/_react.default.createElement("div", {
      className: "mt-1"
    }, /*#__PURE__*/_react.default.createElement(_OptionsCreateApi.default, {
      onChange: newValues => {
        this.editElementProp(this, 'secondDropdownOptions', newValues);
      }
    })), /*#__PURE__*/_react.default.createElement(_OptionsCreate.default, {
      initialFields: this.props.element.secondDropdownOptions,
      onChange: newValues => {
        this.editElementProp(this, 'secondDropdownOptions', newValues);
      }
    }))), this.props.element.hasOwnProperty('default_value') && /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group"
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group-range"
    }, /*#__PURE__*/_react.default.createElement("label", {
      className: "control-label",
      htmlFor: "defaultSelected"
    }, /*#__PURE__*/_react.default.createElement(_IntlMessages.default, {
      id: "default-selected"
    })), /*#__PURE__*/_react.default.createElement("input", {
      id: "defaultSelected",
      type: "number",
      className: "form-control",
      defaultValue: this.props.element.default_value,
      onBlur: this.updateElement.bind(this),
      onChange: this.editElementProp.bind(this, 'default_value', 'value')
    }))), this.props.element.hasOwnProperty('static') && this.props.element.static && /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group"
    }, /*#__PURE__*/_react.default.createElement("label", {
      className: "control-label"
    }, /*#__PURE__*/_react.default.createElement(_IntlMessages.default, {
      id: "text-style"
    })), /*#__PURE__*/_react.default.createElement("div", {
      className: "custom-control custom-checkbox"
    }, /*#__PURE__*/_react.default.createElement("input", {
      id: "do-bold",
      className: "custom-control-input",
      type: "checkbox",
      checked: this_checked_bold,
      value: true,
      onChange: this.editElementProp.bind(this, 'bold', 'checked')
    }), /*#__PURE__*/_react.default.createElement("label", {
      className: "custom-control-label",
      htmlFor: "do-bold"
    }, /*#__PURE__*/_react.default.createElement(_IntlMessages.default, {
      id: "bold"
    }))), /*#__PURE__*/_react.default.createElement("div", {
      className: "custom-control custom-checkbox"
    }, /*#__PURE__*/_react.default.createElement("input", {
      id: "do-italic",
      className: "custom-control-input",
      type: "checkbox",
      checked: this_checked_italic,
      value: true,
      onChange: this.editElementProp.bind(this, 'italic', 'checked')
    }), /*#__PURE__*/_react.default.createElement("label", {
      className: "custom-control-label",
      htmlFor: "do-italic"
    }, /*#__PURE__*/_react.default.createElement(_IntlMessages.default, {
      id: "italic"
    })))), this.props.element.showDescription && /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group"
    }, /*#__PURE__*/_react.default.createElement("label", {
      className: "control-label",
      htmlFor: "questionDescription"
    }, /*#__PURE__*/_react.default.createElement(_IntlMessages.default, {
      id: "description"
    })), /*#__PURE__*/_react.default.createElement(_reactTextareaAutosize.default, {
      type: "text",
      className: "form-control",
      id: "questionDescription",
      defaultValue: this.props.element.description,
      onBlur: this.updateElement.bind(this),
      onChange: this.editElementProp.bind(this, 'description', 'value')
    })), this.props.showCorrectColumn && this.props.element.canHaveAnswer && !this.props.element.hasOwnProperty('options') && /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group"
    }, /*#__PURE__*/_react.default.createElement("label", {
      className: "control-label",
      htmlFor: "correctAnswer"
    }, /*#__PURE__*/_react.default.createElement(_IntlMessages.default, {
      id: "correct-answer"
    })), /*#__PURE__*/_react.default.createElement("input", {
      id: "correctAnswer",
      type: "text",
      className: "form-control",
      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.default.createElement("div", {
      className: "form-group"
    }, /*#__PURE__*/_react.default.createElement("label", {
      className: "control-label",
      htmlFor: "optionsApiUrl"
    }, /*#__PURE__*/_react.default.createElement(_IntlMessages.default, {
      id: "populate-options-from-api"
    })), /*#__PURE__*/_react.default.createElement(_OptionsExample.default, null), /*#__PURE__*/_react.default.createElement("div", {
      className: "row"
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: "col-sm-8"
    }, /*#__PURE__*/_react.default.createElement("input", {
      className: "input-style",
      style: {
        width: '100%'
      },
      type: "text",
      id: "optionsApiUrl",
      onBlur: this.updateElement.bind(this),
      onChange: this.editElementProp.bind(this, 'optionsApiUrl', 'value'),
      placeholder: "http://localhost:8080/api/optionsdata"
    })), /*#__PURE__*/_react.default.createElement("div", {
      className: "col-sm-4"
    }, /*#__PURE__*/_react.default.createElement("button", {
      onClick: this.addOptions.bind(this),
      className: "button-style"
    }, /*#__PURE__*/_react.default.createElement(_IntlMessages.default, {
      id: "populate"
    }))))), this.props.element.canPopulateFromApi && this.props.element.hasOwnProperty('options') && /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group"
    }, /*#__PURE__*/_react.default.createElement("label", {
      className: "control-label",
      htmlFor: "optionsApiUrl"
    }, "Populate from sheet (csv, xlsx)"), /*#__PURE__*/_react.default.createElement("div", {
      className: "row"
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: "col-sm-6"
    }, /*#__PURE__*/_react.default.createElement(_FileReaderComponent.default, {
      name: "options",
      setValue: (name, value) => {
        this.addOptionsFromSheet(value);
      }
    })))), this.props.element.hasOwnProperty('options') && /*#__PURE__*/_react.default.createElement(_dynamicOptionList.default, {
      showCorrectColumn: this.props.showCorrectColumn,
      canHaveOptionCorrect: canHaveOptionCorrect,
      canHaveOptionValue: canHaveOptionValue,
      data: this.props.preview.state.data,
      updateElement: this.props.updateElement,
      preview: this.props.preview,
      element: this.props.element,
      key: this.props.element.options.length
    }));
  }
}
exports.default = FormElementsEdit;
FormElementsEdit.defaultProps = {
  className: 'edit-element-fields'
};