@digifi-los/reactapp/adminclient/_src/components/ResponsiveForm/FormElements.js

react based admin.

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _clearImmediate2 = require('babel-runtime/core-js/clear-immediate');

var _clearImmediate3 = _interopRequireDefault(_clearImmediate2);

var _setImmediate2 = require('babel-runtime/core-js/set-immediate');

var _setImmediate3 = _interopRequireDefault(_setImmediate2);

var _stringify = require('babel-runtime/core-js/json/stringify');

var _stringify2 = _interopRequireDefault(_stringify);

var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');

var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);

var _defineProperty2 = require('babel-runtime/helpers/defineProperty');

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _keys = require('babel-runtime/core-js/object/keys');

var _keys2 = _interopRequireDefault(_keys);

var _typeof2 = require('babel-runtime/helpers/typeof');

var _typeof3 = _interopRequireDefault(_typeof2);

var _assign = require('babel-runtime/core-js/object/assign');

var _assign2 = _interopRequireDefault(_assign);

exports.getPropertyAttribute = getPropertyAttribute;
exports.getFormDNDTable = getFormDNDTable;
exports.getFormDatatable = getFormDatatable;
exports.getFormDatalist = getFormDatalist;
exports.getFormCombobox = getFormCombobox;
exports.getFormDropdown = getFormDropdown;
exports.getFormRemoteDropdown = getFormRemoteDropdown;
exports.getFormMaskedInput = getFormMaskedInput;
exports.getFormAddressAPIInput = getFormAddressAPIInput;
exports.getFormTextInputArea = getFormTextInputArea;
exports.getFormImageCropper = getFormImageCropper;
exports.getFormTextArea = getFormTextArea;
exports.getFormSelect = getFormSelect;
exports.getFormCheckbox = getFormCheckbox;
exports.getFormButton = getFormButton;
exports.getFormSemanticCheckbox = getFormSemanticCheckbox;
exports.getFormProgressSteps = getFormProgressSteps;
exports.getFormSwitch = getFormSwitch;
exports.getRawInput = getRawInput;
exports.getSliderInput = getSliderInput;
exports.getHiddenInput = getHiddenInput;
exports.getImage = getImage;
exports.getFormLink = getFormLink;
exports.getFormGroup = getFormGroup;
exports.getFormTabs = getFormTabs;
exports.getFormCode = getFormCode;
exports.getFormColorPicker = getFormColorPicker;
exports.getFormDatePicker = getFormDatePicker;
exports.getFormEditor = getFormEditor;
exports.getFormSubmit = getFormSubmit;
exports.getCardFooterItem = getCardFooterItem;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _FormItem = require('../FormItem');

var _FormItem2 = _interopRequireDefault(_FormItem);

var _RACodeMirror = require('../RACodeMirror');

var _RACodeMirror2 = _interopRequireDefault(_RACodeMirror);

var _PreviewEditor = require('../PreviewEditor');

var _PreviewEditor2 = _interopRequireDefault(_PreviewEditor);

var _ResponsiveDatalist = require('../ResponsiveDatalist');

var _ResponsiveDatalist2 = _interopRequireDefault(_ResponsiveDatalist);

var _ResponsiveTable = require('../ResponsiveTable');

var _ResponsiveTable2 = _interopRequireDefault(_ResponsiveTable);

var _DNDTable = require('../DNDTable');

var _DNDTable2 = _interopRequireDefault(_DNDTable);

var _RemoteDropdown = require('../RemoteDropdown');

var _RemoteDropdown2 = _interopRequireDefault(_RemoteDropdown);

var _ResponsiveTabs = require('../ResponsiveTabs');

var _ResponsiveTabs2 = _interopRequireDefault(_ResponsiveTabs);

var _SingleDatePickerWrapper = require('../SingleDatePickerWrapper');

var _SingleDatePickerWrapper2 = _interopRequireDefault(_SingleDatePickerWrapper);

var _DateRangePickerWrapper = require('../DateRangePickerWrapper');

var _DateRangePickerWrapper2 = _interopRequireDefault(_DateRangePickerWrapper);

var _ColorPicker = require('../ColorPicker');

var _ColorPicker2 = _interopRequireDefault(_ColorPicker);

var _createNumberMask = require('text-mask-addons/dist/createNumberMask');

var _createNumberMask2 = _interopRequireDefault(_createNumberMask);

var _capitalize = require('capitalize');

var _capitalize2 = _interopRequireDefault(_capitalize);

var _util = require('../../util');

var _util2 = _interopRequireDefault(_util);

var _querystring = require('querystring');

var _querystring2 = _interopRequireDefault(_querystring);

var _rcSlider = require('rc-slider');

var _rcSlider2 = _interopRequireDefault(_rcSlider);

var _rcSwitch = require('rc-switch');

var _rcSwitch2 = _interopRequireDefault(_rcSwitch);

var _reBulma = require('re-bulma');

var _reactTextMask = require('react-text-mask');

var _reactTextMask2 = _interopRequireDefault(_reactTextMask);

var _semanticUiReact = require('semantic-ui-react');

var _moment = require('moment');

var _moment2 = _interopRequireDefault(_moment);

var _numeral = require('numeral');

var _numeral2 = _interopRequireDefault(_numeral);

var _pluralize = require('pluralize');

var _pluralize2 = _interopRequireDefault(_pluralize);

var _flat = require('flat');

var _flat2 = _interopRequireDefault(_flat);

var _styles = require('../../styles');

var _styles2 = _interopRequireDefault(_styles);

var _ResponsiveCropper = require('../ResponsiveCropper');

var _ResponsiveCropper2 = _interopRequireDefault(_ResponsiveCropper);

var _FormHelpers = require('./FormHelpers');

var _reactLoadScript = require('react-load-script');

var _reactLoadScript2 = _interopRequireDefault(_reactLoadScript);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function getPropertyAttribute(options) {
  var property = options.property,
      element = options.element;

  var attribute = element.name;
  var selector = element.idSelector;
  // console.log({ options });
  var returnVal = void 0;
  if (attribute.indexOf('.') === -1) {
    returnVal = property[attribute];
  } else {
    var attrArray = attribute.split('.');
    returnVal = property[attrArray[0]] ? property[attrArray[0]][attrArray[1]] : undefined;
  }

  if (selector && !options.skipSelector) {
    return returnVal[selector];
  } else {
    return returnVal;
  }
}
// import RAEditor from '../RAEditor';
// import ResponsiveButton from '../ResponsiveButton';
// import { EditorState, } from 'draft-js';


function getErrorStatus(state, name) {
  return state.formDataErrors && state.formDataErrors[name];
}

function getValidStatus(state, name) {
  return state.formDataValid && state.formDataValid[name];
}

function getFormElementHelp(hasError, state, name) {
  return hasError ? {
    color: 'isDanger',
    text: state.formDataErrors[name][0]
  } : undefined;
}

function getCustomErrorLabel(hasError, state, formelement) {
  return hasError ? _react2.default.createElement(
    'span',
    { className: '__re-bulma_help __re-bulma_is-danger', style: formelement.customErrorProps },
    state.formDataErrors[formelement.name][0]
  ) : null;
}

function getCustomErrorIcon(hasError, isValid, state, formelement) {
  var iconStyle = formelement.customIconStyle;
  var iconVar = hasError ? formelement.errorIcon || 'fa fa-exclamation' : isValid ? formelement.validIcon || 'fa fa-check' : formelement.initialIcon ? formelement.initialIcon : '';

  return formelement.errorIconRight || formelement.errorIconLeft ? _react2.default.createElement('i', { className: '__re-bulma_fa ' + iconVar + ' __ra_custom_error_icon', style: iconStyle }) : null;
}

function getCustomLeftIcon(formElement, state) {
  state = state || {};
  var iconVar = formElement.updateIconOnChange && state[formElement.name] ? formElement.options.filter(function (obj) {
    return obj.value === state[formElement.name];
  })[0].icon : formElement.leftIcon ? formElement.leftIcon : null;
  if (iconVar) {
    return _react2.default.createElement('i', { className: '__re-bulma_icon icon ' + iconVar, style: { position: 'absolute', top: '9px', left: '6px', zIndex: 1 }, 'aria-hidden': 'true' });
  }
}

function valueChangeHandler(formElement) {
  var _this = this;

  return function (event) {
    var text = event.target.value;
    // console.debug({ text, formElement, });
    var updatedStateProp = {};
    updatedStateProp[formElement.name] = text;
    if (formElement.onChangeFilter) {
      var onChangeFunc = getFunctionFromProps.call(_this, { propFunc: formElement.onChangeFilter });
      updatedStateProp = onChangeFunc.call(_this, (0, _assign2.default)({}, _this.state, updatedStateProp), updatedStateProp);
    }
    _this.setState(updatedStateProp, function () {
      if (formElement.validateOnChange) {
        _this.validateFormElement({ formElement: formElement });
      } else if (formElement.valueCheckOnChange) {
        _this.valueCheckFormElement({ formElement: formElement });
      }
    });
  };
}

function getFormLabel(formElement) {
  return formElement.label ? formElement.layoutProps && formElement.layoutProps.horizontalform ? _react2.default.createElement(
    _reBulma.ControlLabel,
    formElement.labelProps,
    this && this.state && this.state[formElement.formdata_label] ? this.state[formElement.formdata_label] : formElement.label
  ) : _react2.default.createElement(
    _reBulma.Label,
    formElement.labelProps,
    this && this.state && this.state[formElement.formdata_label] ? this.state[formElement.formdata_label] : formElement.label
  ) : null;
}
function getCustomFormLabel(formElement) {
  return formElement.customLabel ? formElement.layoutProps && formElement.layoutProps.horizontalform ? _react2.default.createElement(
    _reBulma.ControlLabel,
    formElement.labelProps,
    formElement.label && !Array.isArray(formElement.customLabel) && (0, _typeof3.default)(formElement.customLabel) === 'object' ? this.getRenderedComponent(formElement.customLabel) : formElement.customLabel
  ) : _react2.default.createElement(
    _reBulma.Label,
    formElement.labelProps,
    formElement.customLabel && !Array.isArray(formElement.customLabel) && (0, _typeof3.default)(formElement.customLabel) === 'object' ? this.getRenderedComponent(formElement.customLabel) : formElement.customLabel
  ) : null;
}
function getInitialValue(formElement, state) {
  // console.debug({formElement, state})
  var formElementValue = formElement.value;

  if (!formElement.showNullValue && (state[formElement.name] === null || formElementValue === null || formElementValue === 'null')) {
    return '';
  } else {
    var returnVal = typeof state[formElement.name] !== 'undefined' ? state[formElement.name] : formElementValue;

    if (formElement.momentFormat) {
      returnVal = (0, _moment2.default)(returnVal).format(formElement.momentFormat);
    }
    if (formElement.numeralFormat) {
      returnVal = (0, _numeral2.default)(returnVal).format(formElement.numeralFormat);
    }

    return returnVal;
  }
}

function getPassablePropsKeyEvents(passableProps, formElement) {
  var _this2 = this;

  if (formElement.keyPress) {
    var customKeyPress = function customKeyPress() {};
    if (typeof formElement.keyPress === 'string' && formElement.keyPress.indexOf('func:this.props') !== -1) {
      customKeyPress = this.props[formElement.keyPress.replace('func:this.props.', '')];
    } else if (typeof formElement.keyPress === 'string' && formElement.keyPress.indexOf('func:window') !== -1 && typeof window[formElement.keyPress.replace('func:window.', '')] === 'function') {
      customKeyPress = window[formElement.keyPress.replace('func:window.', '')].bind(this);
      // console.debug({ customKeyPress });
    }
    passableProps.onKeyPress = function (e) {
      if (formElement.validateOnKeypress) {
        _this2.validateFormElement({ formElement: formElement });
      }
      customKeyPress(e, formElement);
      // console.debug('custom press');
    };
  } else if (formElement.submitOnEnter) {
    passableProps.onKeyPress = function (e) {
      if (formElement.submitOnEnter && (e.key === 'Enter' || e.which === 13)) {
        _this2.submitForm();
      }
    };
  }
  if (formElement.onBlur) {
    var customonBlur = function customonBlur() {};
    if (typeof formElement.onBlur === 'string' && formElement.onBlur.indexOf('func:this.props') !== -1) {
      customonBlur = this.props[formElement.onBlur.replace('func:this.props.', '')];
    } else if (typeof formElement.onBlur === 'string' && formElement.onBlur.indexOf('func:window') !== -1 && typeof window[formElement.onBlur.replace('func:window.', '')] === 'function') {
      customonBlur = window[formElement.onBlur.replace('func:window.', '')].bind(this);
    }
    passableProps.onBlur = function (e) {
      if (formElement.validateOnBlur) {
        _this2.validateFormElement({ formElement: formElement });
      } else if (formElement.valueCheckOnBlur) {
        _this2.valueCheckFormElement({ formElement: formElement });
      }
      customonBlur(e, formElement);
    };
  }
  if (formElement.onFocus) {
    var customFocus = function customFocus() {};
    if (typeof formElement.onFocus === 'string' && formElement.onFocus.indexOf('func:this.props') !== -1) {
      customFocus = this.props[formElement.onFocus.replace('func:this.props.', '')];
    } else if (typeof formElement.onFocus === 'string' && formElement.onFocus.indexOf('func:window') !== -1 && typeof window[formElement.onFocus.replace('func:window.', '')] === 'function') {
      customFocus = window[formElement.onFocus.replace('func:window.', '')].bind(this);
    }
    passableProps.onFocus = function (e) {
      customFocus(e, formElement);
    };
  }
  if (formElement.keyUp) {
    var customkeyUp = function customkeyUp() {};
    if (typeof formElement.keyUp === 'string' && formElement.keyUp.indexOf('func:this.props') !== -1) {
      customkeyUp = this.props[formElement.keyUp.replace('func:this.props.', '')];
    } else if (typeof formElement.keyUp === 'string' && formElement.keyUp.indexOf('func:window') !== -1 && typeof window[formElement.keyUp.replace('func:window.', '')] === 'function') {
      customkeyUp = window[formElement.keyUp.replace('func:window.', '')].bind(this);
    }
    passableProps.onKeyUp = function (e) {
      if (formElement.validateOnKeyup) {
        _this2.validateFormElement({ formElement: formElement });
      }
      customkeyUp(e, formElement);
    };
  }
  return passableProps;
}

function getFunctionFromProps(options) {
  var propFunc = options.propFunc;


  if (typeof propFunc === 'string' && propFunc.indexOf('func:this.props.reduxRouter') !== -1) {
    return this.props.reduxRouter[this.props.replace('func:this.props.reduxRouter.', '')];
  } else if (typeof propFunc === 'string' && propFunc.indexOf('func:this.props') !== -1) {
    return this.props[this.props.replace('func:this.props.', '')];
  } else if (typeof propFunc === 'string' && propFunc.indexOf('func:window') !== -1 && typeof window[propFunc.replace('func:window.', '')] === 'function') {
    return window[propFunc.replace('func:window.', '')];
  } else if (typeof this.props[propFunc] === 'function') {
    return propFunc;
  } else {
    return function () {};
  }
}

function getFormDNDTable(options) {
  var _this3 = this;

  var formElement = options.formElement,
      i = options.i;
  // let initialValue = getInitialValue(formElement,
  // (Object.keys(this.state.formDataTables).length && this.state.formDataTables[formElement.name])?this.state.formDataTables :  Object.assign({}, this.state, unflatten(this.state, { overwrite: true })));

  var initialValue = this.state[formElement.name];
  // console.debug({ initialValue },this.state, this.state[formElement.name]);
  var hasError = getErrorStatus(this.state, formElement.name);
  var getTableHeaders = function getTableHeaders(row) {
    return row.map(function (rowkey) {
      var selectOptions = _this3.state.__formOptions && _this3.state.__formOptions[rowkey] ? _this3.state.__formOptions[rowkey] : [];
      // console.log({ selectOptions });
      return {
        label: (0, _capitalize2.default)(rowkey),
        sortid: rowkey,
        sortable: typeof formElement.sortable !== 'undefined' ? formElement.sortable : true,
        formtype: formElement.tableHeaderType && formElement.tableHeaderType[rowkey] ? formElement.tableHeaderType[rowkey] : 'text',
        defaultValue: formElement.tableHeaderDefaultValue && formElement.tableHeaderDefaultValue[rowkey] ? formElement.tableHeaderDefaultValue[rowkey] : selectOptions.length ? selectOptions[0].value : undefined,
        formoptions: selectOptions,
        footerFormElementPassProps: (0, _assign2.default)({
          placeholder: (0, _capitalize2.default)(rowkey)
        }, formElement.footerFormElementPassProps)
      };
    });
  };
  var handleRowUpdate = function handleRowUpdate() {
    console.debug('Error handleRowUpdate function does not exists');
  };
  if (formElement.handleRowUpdate && formElement.handleRowUpdate.indexOf('func:window') !== -1 && typeof window[formElement.handleRowUpdate.replace('func:window.', '')] === 'function') {
    handleRowUpdate = window[formElement.handleRowUpdate.replace('func:window.', '')].bind(this, formElement);
  }
  var useRowButtons = formElement.rowButtons;
  var ignoreTableHeaders = formElement.ignoreTableHeaders || [];
  var tableHeaders = formElement.headers ? formElement.useStandardHeaders ? getTableHeaders(formElement.headers.map(function (header) {
    return header.sortid;
  })) : formElement.headers : initialValue && Array.isArray(initialValue) && initialValue.length ? getTableHeaders((0, _keys2.default)(initialValue[0]).filter(function (header) {
    return ignoreTableHeaders.indexOf(header) === -1;
  })) : [];
  tableHeaders = useRowButtons ? tableHeaders.concat({
    label: formElement.rowOptionsLabel || '',
    formtype: false,
    formRowButtons: true,
    formRowButtonProps: formElement.formRowButtonProps
  }) : tableHeaders.concat({
    label: '',
    formtype: false
  });
  tableHeaders = tableHeaders.map(function (header) {
    if ((header.formtype === 'select' || header.formtype === 'dropdown') && !header.formoptions) {
      header.formoptions = header.sortid && _this3.state.__formOptions && _this3.state.__formOptions[header.sortid] ? _this3.state.__formOptions[header.sortid] : [];
    }
    return header;
  });
  var passedProps = (0, _assign2.default)({}, this.props, {
    rows: initialValue,
    headers: tableHeaders,
    toggleRowKeys: formElement.toggleRowKeys,
    toggleRowClass: formElement.toggleRowClass
  }, formElement.passProps);
  return _react2.default.createElement(
    _FormItem2.default,
    (0, _extends3.default)({ key: i }, formElement.layoutProps),
    getFormLabel(formElement),
    _react2.default.createElement(_DNDTable2.default, (0, _extends3.default)({}, passedProps, {
      handleRowUpdate: handleRowUpdate.bind(this),
      value: initialValue })),
    getCustomErrorLabel(hasError, this.state, formElement)
  );
}

function getFormDatatable(options) {
  var _this4 = this;

  var formElement = options.formElement,
      i = options.i;

  var initialValue = getInitialValue(formElement, (0, _keys2.default)(this.state.formDataTables).length && this.state.formDataTables[formElement.name] ? this.state.formDataTables : (0, _assign2.default)({}, this.state, (0, _flat.unflatten)(this.state, { overwrite: true })));
  // console.debug({ initialValue },this.state, this.state[formElement.name]);
  var hasError = getErrorStatus(this.state, formElement.name);
  var getTableHeaders = function getTableHeaders(row) {
    return row.map(function (rowkey) {
      var selectOptions = _this4.state.__formOptions && _this4.state.__formOptions[rowkey] ? _this4.state.__formOptions[rowkey] : [];
      return {
        label: (0, _capitalize2.default)(rowkey),
        sortid: rowkey,
        sortable: typeof formElement.sortable !== 'undefined' ? formElement.sortable : true,
        formtype: formElement.tableHeaderType && formElement.tableHeaderType[rowkey] ? formElement.tableHeaderType[rowkey] : 'text',
        defaultValue: formElement.tableHeaderDefaultValue && formElement.tableHeaderDefaultValue[rowkey] ? formElement.tableHeaderDefaultValue[rowkey] : selectOptions.length ? selectOptions[0].value : undefined,
        formoptions: selectOptions,
        footerFormElementPassProps: (0, _assign2.default)({
          placeholder: (0, _capitalize2.default)(rowkey)
        }, formElement.footerFormElementPassProps)
      };
    });
  };
  var useRowButtons = formElement.rowButtons;
  var ignoreTableHeaders = formElement.ignoreTableHeaders || [];
  var tableHeaders = formElement.headers ? formElement.useStandardHeaders ? getTableHeaders(formElement.headers.map(function (header) {
    return header.sortid;
  })) : formElement.headers : initialValue && Array.isArray(initialValue) && initialValue.length ? getTableHeaders((0, _keys2.default)(initialValue[0]).filter(function (header) {
    return ignoreTableHeaders.indexOf(header) === -1;
  })) : [];
  tableHeaders = useRowButtons ? tableHeaders.concat({
    label: formElement.rowOptionsLabel || '',
    formtype: false,
    formRowButtons: true,
    formRowButtonProps: formElement.formRowButtonProps
  }) : tableHeaders.concat({
    label: '',
    formtype: false
  });
  tableHeaders = tableHeaders.map(function (header) {
    if ((header.formtype === 'select' || header.formtype === 'dropdown') && !header.formoptions) {
      header.formoptions = header.sortid && _this4.state.__formOptions && _this4.state.__formOptions[header.sortid] ? _this4.state.__formOptions[header.sortid] : [];
    }
    return header;
  });
  var passedProps = (0, _assign2.default)({}, this.props, {
    selectEntireRow: formElement.selectEntireRow,
    insertSelectedRowHeaderIndex: formElement.insertSelectedRowHeaderIndex,
    selectOptionSortId: formElement.selectOptionSortId,
    selectOptionSortIdLabel: formElement.selectOptionSortIdLabel,
    flattenRowData: formElement.flattenRowData,
    addNewRows: formElement.addNewRows,
    sortable: formElement.sortable,
    replaceButton: false,
    uploadAddButton: true,
    useInputRows: formElement.useInputRows,
    rows: initialValue,
    headers: tableHeaders,
    limit: 5000,
    hasPagination: false,
    tableForm: true,
    uniqueFormOptions: formElement.uniqueFormOptions
  }, formElement.passProps); // formElement.datalist,
  // console.log({ tableHeaders, useRowButtons,passedProps });
  // console.debug({tableHeaders})
  // let shape ={};// this is the header of of the footer which has elements for new insert
  // let inlineshape ={};// if true, should look like a regular form row, else form below
  // console.debug({formElement,initialValue, },'this.state',this.state);
  return _react2.default.createElement(
    _FormItem2.default,
    (0, _extends3.default)({ key: i }, formElement.layoutProps),
    getFormLabel(formElement),
    _react2.default.createElement(_ResponsiveTable2.default, (0, _extends3.default)({}, passedProps, {
      onChange: function onChange(newvalue) {
        var selectedRowData = formElement.selectEntireRow && (newvalue.selectedRowData || newvalue.selectedRowIndex) ? (0, _defineProperty3.default)({}, formElement.name + '__tabledata', {
          selectedRowData: newvalue.selectedRowData,
          selectedRowIndex: newvalue.selectedRowIndex
        }) : {};
        var flattenedData = _this4.props.flattenFormData ? (0, _flat2.default)((0, _assign2.default)({}, selectedRowData, (0, _defineProperty3.default)({}, formElement.name, newvalue.rows))) : {};
        var updatedStateProp = (0, _assign2.default)((0, _defineProperty3.default)({
          formDataTables: (0, _assign2.default)({}, _this4.state.formDataTables, (0, _defineProperty3.default)({}, formElement.name, newvalue.rows))
        }, formElement.name, newvalue.rows), flattenedData, selectedRowData);
        if (formElement.onChangeFilter) {
          var onChangeFunc = getFunctionFromProps.call(_this4, { propFunc: formElement.onChangeFilter });
          updatedStateProp = onChangeFunc.call(_this4, (0, _assign2.default)({}, _this4.state, updatedStateProp), updatedStateProp);
        }
        // console.debug('DATATABLE', updatedStateProp);
        _this4.setState(updatedStateProp);
      },
      value: initialValue })),
    getCustomErrorLabel(hasError, this.state, formElement)
  );
}

function getFormDatalist(options) {
  var _this5 = this;

  var formElement = options.formElement,
      i = options.i;

  var initialValue = getInitialValue(formElement, (0, _assign2.default)({}, this.state, (0, _flat.unflatten)(this.state)));
  var hasError = getErrorStatus(this.state, formElement.name);
  var passedProps = (0, _assign2.default)({}, this.props, {
    wrapperProps: {
      style: {
        display: 'flex',
        width: '100%',
        flex: '5',
        alignItems: 'stretch',
        flexDirection: 'column'
      }
    },
    passableProps: {
      help: getFormElementHelp(hasError, this.state, formElement.name),
      color: hasError ? 'isDanger' : undefined,
      icon: hasError ? formElement.errorIcon || 'fa fa-exclamation' : undefined,
      placeholder: formElement.placeholder,
      style: {
        width: '100%'
      }
    }
  }, formElement.datalist);
  // console.debug({formElement,initialValue, },'this.state',this.state);
  // console.debug({ passedProps });
  if (formElement.datalist.staticSearch) {
    // let datalistdata = this.state[formElement.name];
    var datalistdata = [];
    if (this.props.__formOptions && this.props.__formOptions[formElement.name]) {
      datalistdata = this.props.__formOptions[formElement.name];
    } else {
      datalistdata = this.props.formdata[(0, _pluralize2.default)(formElement.datalist.entity)] || [];
    }
    passedProps.datalistdata = datalistdata;
  }
  return _react2.default.createElement(
    _FormItem2.default,
    (0, _extends3.default)({ key: i }, formElement.layoutProps),
    getFormLabel(formElement),
    _react2.default.createElement(_ResponsiveDatalist2.default, (0, _extends3.default)({}, passedProps, {
      onChange: function onChange(newvalue) {
        var updatedStateProp = {};
        updatedStateProp[formElement.name] = newvalue;
        _this5.setState(updatedStateProp);
      },
      value: initialValue }))
  );
}

function getFormCombobox(options) {
  var _this6 = this;

  var formElement = options.formElement,
      i = options.i;

  var customLabel = getCustomFormLabel.bind(this);
  var wrapperProps = (0, _assign2.default)({
    className: '__re-bulma_control'
  }, formElement.wrapperProps);

  this.state[formElement.name] = this.state[formElement.name] || [];

  var comboboxInput = void 0;
  var handleAddition = function handleAddition() {
    if (comboboxInput.value) {
      _this6.setState((0, _defineProperty3.default)({}, formElement.name, [comboboxInput.value].concat((0, _toConsumableArray3.default)(_this6.state[formElement.name]))));
      comboboxInput.value = "";
    }
  };
  var handleDelete = function handleDelete(idx) {
    _this6.state[formElement.name].splice(idx, 1);
    _this6.setState((0, _defineProperty3.default)({}, formElement.name, _this6.state[formElement.name]));
  };

  return _react2.default.createElement(
    _FormItem2.default,
    (0, _extends3.default)({ key: i }, formElement.layoutProps, { initialIcon: formElement.initialIcon }),
    formElement.customLabel ? customLabel(formElement) : getFormLabel(formElement),
    _react2.default.createElement(
      'div',
      (0, _extends3.default)({ role: 'combobox' }, wrapperProps, { style: (0, _assign2.default)({}, wrapperProps.style, { position: 'relative' }) }),
      _react2.default.createElement(
        'div',
        { className: '__re-bulma_control __ra_combobox_item' },
        _react2.default.createElement('input', { className: '__re-bulma_input', ref: function ref(_ref2) {
            return comboboxInput = _ref2;
          } }),
        _react2.default.createElement(
          _reBulma.Button,
          { color: 'isSuccess', onClick: handleAddition },
          'ADD'
        )
      ),
      this.state[formElement.name] && Array.isArray(this.state[formElement.name]) ? this.state[formElement.name].map(function (el, idx) {
        return _react2.default.createElement(
          'div',
          { className: '__re-bulma_control __ra_combobox_item', key: formElement.name + '_combobox_' + idx },
          _react2.default.createElement('input', { className: '__re-bulma_input', value: el, readOnly: true }),
          _react2.default.createElement(
            _reBulma.Button,
            { color: 'isDanger', onClick: function onClick() {
                return handleDelete(idx);
              } },
            'Delete'
          )
        );
      }) : null
    )
  );
}

function getFormDropdown(options) {
  var _this7 = this;

  var formElement = options.formElement,
      i = options.i;

  var initialValue = getInitialValue(formElement, (0, _assign2.default)({}, this.state, (0, _flat.unflatten)(this.state)));
  var hasError = getErrorStatus(this.state, formElement.name);
  var hasValue = formElement.name && this.state[formElement.name] ? true : false;
  var isValid = getValidStatus(this.state, formElement.name);
  var customLabel = getCustomFormLabel.bind(this);
  var wrapperProps = (0, _assign2.default)({
    className: '__re-bulma_control'
  }, formElement.wrapperProps);
  var _renderContentComponent = function _renderContentComponent(content) {
    if ((typeof content === 'undefined' ? 'undefined' : (0, _typeof3.default)(content)) === 'object' && !Array.isArray(content)) {
      return _this7.getRenderedComponent(content);
    } else {
      return content;
    }
  };
  wrapperProps.className = (hasError || isValid || formElement.initialIcon) && (formElement.errorIconRight || formElement.errorIconLeft) ? formElement.errorIconRight ? wrapperProps.className + ' __re-bulma_has-icon __re-bulma_has-icon-right' : wrapperProps.className + ' __re-bulma_has-icon __re-bulma_has-icon-left' : wrapperProps.className;
  wrapperProps.className = formElement.leftIcon || formElement.updateIconOnChange ? wrapperProps.className + ' __ra-left-icon' : wrapperProps.className;

  var _onChange = void 0;
  var passedProps = formElement.passProps;
  var getPassablePropkeyevents = getPassablePropsKeyEvents.bind(this);
  passedProps = getPassablePropkeyevents(passedProps, formElement);
  var dropdowndata = [];
  var displayField = formElement.passProps.displayField ? formElement.passProps.displayField : 'label';
  var valueField = formElement.passProps.valueField ? formElement.passProps.valueField : 'value';
  var imageField = formElement.passProps.imageField ? formElement.passProps.imageField : 'image';
  if (this.props.__formOptions && formElement.formoptions_field && this.props.__formOptions[formElement.formoptions_field]) {
    dropdowndata = this.props.__formOptions[formElement.formoptions_field];
    dropdowndata = dropdowndata.map(function (option) {
      return option[imageField] ? { text: _renderContentComponent(option[displayField]), value: option[valueField], key: option[valueField], image: { avatar: true, src: option[imageField] } } : { text: _renderContentComponent(option[displayField]), value: option[valueField], key: option[valueField], icon: option.icon, selectedLabelStyle: option.selectedLabelStyle, content: option.content ? _this7.getRenderedComponent(option.content) : null };
    });
  } else if (this.props.__formOptions && this.props.__formOptions[formElement.name]) {
    dropdowndata = this.props.__formOptions[formElement.name];
    dropdowndata = dropdowndata.map(function (option) {
      return option[imageField] ? { text: _renderContentComponent(option[displayField]), value: option[valueField], key: option[valueField], image: { avatar: true, src: option[imageField] } } : { text: _renderContentComponent(option[displayField]), value: option[valueField], key: option[valueField], icon: option.icon, selectedLabelStyle: option.selectedLabelStyle, content: option.content ? _this7.getRenderedComponent(option.content) : null };
    });
  } else {
    dropdowndata = formElement.options || [];
    dropdowndata = dropdowndata.map(function (option) {
      return option[imageField] ? { text: _renderContentComponent(option[displayField]), value: option[valueField], key: option[valueField], image: { avatar: true, src: option[imageField] } } : { text: _renderContentComponent(option[displayField]), value: option[valueField], key: option[valueField], icon: option.icon, selectedLabelStyle: option.selectedLabelStyle, content: option.content ? _this7.getRenderedComponent(option.content) : null };
    });
  }
  passedProps.options = dropdowndata;
  if (formElement.disableOnChange) {
    _onChange = function onChange() {
      return function () {};
    };
  } else if (!_onChange && formElement.passProps.multiple) {
    _onChange = function onChange(event, newvalue) {
      var updatedStateProp = {};
      newvalue.options.forEach(function (val, idx) {
        if (newvalue.value[idx]) updatedStateProp[formElement.name + '.' + idx] = newvalue.value[idx];else updatedStateProp[formElement.name + '.' + idx] = undefined;
      });
      _this7.setState(updatedStateProp, function () {
        if (formElement.validateOnChange) {
          _this7.validateFormElement({ formElement: formElement });
        } else if (formElement.valueCheckOnChange) {
          _this7.valueCheckFormElement({ formElement: formElement });
        }
      });
    };
  } else if (!_onChange) {
    _onChange = function onChange(event, newvalue) {
      var updatedStateProp = {};
      updatedStateProp[formElement.name] = newvalue.value;
      _this7.setState(updatedStateProp, function () {
        if (formElement.validateOnChange) {
          _this7.validateFormElement({ formElement: formElement });
        } else if (formElement.valueCheckOnChange) {
          _this7.valueCheckFormElement({ formElement: formElement });
        }
      });
    };
  }
  var customCallbackfunction = void 0;
  if (formElement.customOnChange) {
    if (formElement.customOnChange.indexOf('func:this.props') !== -1) {
      customCallbackfunction = this.props[formElement.customOnChange.replace('func:this.props.', '')];
    } else if (formElement.customOnChange.indexOf('func:window') !== -1 && typeof window[formElement.customOnChange.replace('func:window.', '')] === 'function') {
      customCallbackfunction = window[formElement.customOnChange.replace('func:window.', '')].bind(this, formElement);
    }
  }

  formElement.customIconStyle = (0, _assign2.default)({}, { right: "24px" }, formElement.customIconStyle);

  if (formElement.passProps.multiple && Array.isArray((0, _flat.unflatten)(this.state)[formElement.name])) {
    initialValue = (0, _flat.unflatten)(this.state)[formElement.name].filter(function (i) {
      return i !== undefined;
    });
  }
  return _react2.default.createElement(
    _FormItem2.default,
    (0, _extends3.default)({ key: i }, formElement.layoutProps, { initialIcon: formElement.initialIcon, isValid: isValid, hasError: hasError, hasValue: hasValue }),
    formElement.customLabel ? customLabel(formElement) : getFormLabel(formElement),
    _react2.default.createElement(
      'div',
      (0, _extends3.default)({}, wrapperProps, { style: (0, _assign2.default)({}, wrapperProps.style, { position: 'relative' }) }),
      _react2.default.createElement(_semanticUiReact.Dropdown, (0, _extends3.default)({
        fluid: true,
        selection: true
      }, passedProps, {
        renderLabel: function renderLabel(label) {
          return {
            icon: label.icon,
            content: label.text,
            image: label.image,
            style: label.selectedLabelStyle
          };
        },
        value: initialValue,
        onChange: function onChange(event, newvalue) {
          _onChange.call(_this7, event, newvalue);
          if (customCallbackfunction) customCallbackfunction(event, newvalue);
        }
      })),
      getCustomLeftIcon(formElement, this.state),
      getCustomErrorIcon(hasError, isValid, this.state, formElement),
      getCustomErrorLabel(hasError, this.state, formElement)
    )
  );
}

function getFormRemoteDropdown(options) {
  var _this8 = this;

  var formElement = options.formElement,
      i = options.i;

  var initialValue = getInitialValue(formElement, (0, _assign2.default)({}, this.state, (0, _flat.unflatten)(this.state)));
  var hasError = getErrorStatus(this.state, formElement.name);
  var hasValue = formElement.name && this.state[formElement.name] ? true : false;
  var isValid = getValidStatus(this.state, formElement.name);
  var customLabel = getCustomFormLabel.bind(this);
  var wrapperProps = (0, _assign2.default)({
    className: '__re-bulma_control'
  }, formElement.wrapperProps);

  wrapperProps.className = (hasError || isValid || formElement.initialIcon) && (formElement.errorIconRight || formElement.errorIconLeft) ? formElement.errorIconRight ? wrapperProps.className + ' __re-bulma_has-icon __re-bulma_has-icon-right' : wrapperProps.className + ' __re-bulma_has-icon __re-bulma_has-icon-left' : wrapperProps.className;

  var _onChange2 = void 0;
  var passedProps = (0, _assign2.default)({}, this.props, formElement.passProps);
  var getPassablePropkeyevents = getPassablePropsKeyEvents.bind(this);
  passedProps = getPassablePropkeyevents(passedProps, formElement);
  var dropdowndata = [];
  var updatedState = {};
  if (formElement.disableOnChange) {
    _onChange2 = function onChange() {
      return function () {};
    };
  } else if (!_onChange2 && formElement.passProps.multiple) {
    _onChange2 = function onChange(event, newvalue) {
      var updatedStateProp = {};
      newvalue.options.forEach(function (val, idx) {
        if (newvalue.value[idx]) updatedStateProp[formElement.name + '.' + idx] = newvalue.value[idx];else updatedStateProp[formElement.name + '.' + idx] = undefined;
      });
      _this8.setState(updatedStateProp, function () {
        if (formElement.validateOnChange) {
          _this8.validateFormElement({ formElement: formElement });
        } else if (formElement.valueCheckOnChange) {
          _this8.valueCheckFormElement({ formElement: formElement });
        }
      });
    };
  } else if (!_onChange2) {
    _onChange2 = function onChange(event, newvalue) {
      var updatedStateProp = {};
      updatedStateProp[formElement.name] = newvalue.value;
      _this8.setState(updatedStateProp, function () {
        if (formElement.validateOnChange) {
          _this8.validateFormElement({ formElement: formElement });
        } else if (formElement.valueCheckOnChange) {
          _this8.valueCheckFormElement({ formElement: formElement });
        }
      });
    };
  }
  var customCallbackfunction = void 0;
  if (formElement.customOnChange) {
    if (formElement.customOnChange.indexOf('func:this.props') !== -1) {
      customCallbackfunction = this.props[formElement.customOnChange.replace('func:this.props.', '')];
    } else if (formElement.customOnChange.indexOf('func:window') !== -1 && typeof window[formElement.customOnChange.replace('func:window.', '')] === 'function') {
      customCallbackfunction = window[formElement.customOnChange.replace('func:window.', '')].bind(this, formElement);
    }
  }

  formElement.customIconStyle = (0, _assign2.default)({}, { right: "24px" }, formElement.customIconStyle);

  if (formElement.passProps.multiple && Array.isArray((0, _flat.unflatten)(this.state)[formElement.name])) {
    initialValue = (0, _flat.unflatten)(this.state)[formElement.name].filter(function (i) {
      return i !== undefined;
    });
  }
  return _react2.default.createElement(
    _FormItem2.default,
    (0, _extends3.default)({ key: i }, formElement.layoutProps, { initialIcon: formElement.initialIcon, isValid: isValid, hasError: hasError, hasValue: hasValue }),
    formElement.customLabel ? customLabel(formElement) : getFormLabel(formElement),
    _react2.default.createElement(
      'div',
      wrapperProps,
      _react2.default.createElement(_RemoteDropdown2.default, (0, _extends3.default)({}, passedProps, {
        value: initialValue,
        onChange: function onChange(event, newvalue) {
          _onChange2.call(_this8, event, newvalue);
          if (customCallbackfunction) customCallbackfunction(event, newvalue);
        }
      })),
      getCustomErrorIcon(hasError, isValid, this.state, formElement),
      getCustomErrorLabel(hasError, this.state, formElement)
    )
  );
}

function getFormMaskedInput(options) {
  var _this9 = this;

  var formElement = options.formElement,
      i = options.i,
      onChange = options.onChange;

  var initialValue = getInitialValue(formElement, this.state);
  var getPassablePropkeyevents = getPassablePropsKeyEvents.bind(this);
  var fileClassname = '__reactapp_file_' + formElement.name;
  var hasError = getErrorStatus(this.state, formElement.name);
  var hasValue = formElement.name && this.state[formElement.name] ? true : false;
  var isValid = getValidStatus(this.state, formElement.name);
  var customLabel = getCustomFormLabel.bind(this);
  var passableProps = (0, _assign2.default)({
    type: 'text',
    className: '__re-bulma_input'
  }, formElement.passProps);

  if (typeof initialValue !== 'string') {
    initialValue = (0, _stringify2.default)(initialValue, null, 2);
  }
  if (formElement.disableOnChange) {
    onChange = function onChange() {};
  } else if (!onChange) {
    onChange = function onChange(event) {
      var text = event.target.value;
      var updatedStateProp = {};
      if (passableProps && passableProps.multiple) {
        document.querySelector('.' + fileClassname + ' input').setAttribute('multiple', true);
      }
      updatedStateProp[formElement.name] = passableProps.maxLength ? text.substring(0, passableProps.maxLength) : text;
      _this9.setState(updatedStateProp);
    };
  }
  passableProps = getPassablePropkeyevents(passableProps, formElement);
  if (passableProps && passableProps.multiple) {
    var t = (0, _setImmediate3.default)(function () {
      document.querySelector('.' + fileClassname + ' input').setAttribute('multiple', true);
      (0, _clearImmediate3.default)(t);
    });
  }

  formElement.customErrorProps = formElement.customErrorProps ? (0, _assign2.default)({}, { marginTop: '6px' }, formElement.customErrorProps) : { marginTop: '6px' };

  var mask = [];
  function maskFunction(maskProp) {
    return function () {
      // return [ '(', /[1-9]/, /\d/, /\d/, ')', '\u2000', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/ ];
      if (Array.isArray(maskProp)) {
        var maskArray = maskProp.map(function (maskItem) {
          if (maskItem.charAt(0) === '/' && maskItem.charAt(maskItem.length - 1) === '/') {
            if (maskItem.charAt(1) === '[') {
              return new RegExp(maskItem.slice(1, maskItem.length - 1));
            } else {
              return new RegExp('\\' + maskItem.slice(1, maskItem.length - 1));
            }
          } else {
            return maskItem;
          }
        });
        return maskArray;
      } else {
        return maskProp;
      }
    };
  }
  if (formElement.createNumberMask && typeof passableProps.mask === 'string' && passableProps.mask.indexOf('func:window') !== -1 && typeof window[passableProps.mask.replace('func:window.', '')] === 'function') {
    var numberMaskConfig = (0, _typeof3.default)(window[passableProps.mask.replace('func:window.', '')].call(this, formElement)) === 'object' ? window[passableProps.mask.replace('func:window.', '')].call(this, formElement) : {};
    mask = (0, _createNumberMask2.default)(numberMaskConfig);
  } else if (typeof passableProps.mask === 'string' && passableProps.mask.indexOf('func:window') !== -1 && typeof window[passableProps.mask.replace('func:window.', '')] === 'function') {
    mask = window[passableProps.mask.replace('func:window.', '')].bind(this, formElement);
  } else if (formElement.createNumberMask) {
    // console.log('passableProps.numberMask',passableProps.numberMask)
    mask = (0, _createNumberMask2.default)(maskFunction(passableProps.mask));
  } else if (passableProps.mask) {
    mask = maskFunction(passableProps.mask);
  }
  // console.log({mask})
  var wrapperProps = (0, _assign2.default)({
    className: '__re-bulma_control'
  }, formElement.wrapperProps);

  wrapperProps.className = (hasError || isValid || formElement.initialIcon) && (formElement.errorIconRight || formElement.errorIconLeft) ? formElement.errorIconRight ? wrapperProps.className + ' __re-bulma_has-icon __re-bulma_has-icon-right' : wrapperProps.className + ' __re-bulma_has-icon __re-bulma_has-icon-left' : wrapperProps.className;
  wrapperProps.className = formElement.leftIcon ? wrapperProps.className + ' __ra-left-icon' : wrapperProps.className;

  return _react2.default.createElement(
    _FormItem2.default,
    (0, _extends3.default)({ key: i }, formElement.layoutProps, { initialIcon: formElement.initialIcon, isValid: isValid, hasError: hasError, hasValue: hasValue }),
    formElement.customLabel ? customLabel(formElement) : getFormLabel(formElement),
    _react2.default.createElement(
      'span',
      (0, _extends3.default)({}, wrapperProps, { style: (0, _assign2.default)({}, wrapperProps.style, { position: 'relative' }) }),
      _react2.default.createElement(_reactTextMask2.default, (0, _extends3.default)({}, passableProps, {
        mask: mask,
        className: hasError ? passableProps.className + ' __re-bulma_is-danger' : passableProps.className,
        color: hasError ? 'isDanger' : undefined,
        onChange: onChange,
        placeholder: formElement.placeholder,
        value: initialValue })),
      getCustomLeftIcon(formElement),
      getCustomErrorIcon(hasError, isValid, this.state, formElement),
      getCustomErrorLabel(hasError, this.state, formElement)
    )
  );
}

function getFormAddressAPIInput(options) {
  var _this10 = this;

  var applicationSettings = this.props.getState().settings;

  var formElement = options.formElement,
      i = options.i,
      onChange = options.onChange;

  var initialValue = getInitialValue(formElement, this.state);
  var getPassablePropkeyevents = getPassablePropsKeyEvents.bind(this);
  var hasError = getErrorStatus(this.state, formElement.name);
  var isValid = getValidStatus(this.state, formElement.name);
  var hasValue = formElement.name && this.state[formElement.name] ? true : false;
  var customLabel = getCustomFormLabel.bind(this);
  var submitMultipartForm = void 0;
  var passableProps = (0, _assign2.default)({
    type: formElement.type || 'text'
  }, formElement.passProps);

  var wrapperProps = (0, _assign2.default)({}, formElement.wrapperProps, {
    className: '__re-bulma_control __re-bulma_has-icon __re-bulma_has-icon-right' + (formElement.leftIcon ? ' __ra-left-icon' : '') + ' ' + (formElement.wrapperProps && formElement.wrapperProps.className ? formElement.wrapperProps.className : '')
  });
  if (initialValue && (typeof initialValue === 'undefined' ? 'undefined' : (0, _typeof3.default)(initialValue)) === 'object') {
    initialValue = initialValue.formatted_address || '';
  }
  if (formElement.disableOnChange) {
    onChange = function onChange() {};
  } else if (!onChange) {
    onChange = function onChange(value) {
      var updatedStateProp = {};
      var customCallbackfunction = void 0;
      updatedStateProp[formElement.name] = value.target.value;
      if (formElement.onChangeFilter) {
        var onChangeFunc = getFunctionFromProps.call(_this10, { propFunc: formElement.onChangeFilter });
        updatedStateProp = onChangeFunc.call(_this10, (0, _assign2.default)({}, _this10.state, updatedStateProp), updatedStateProp);
      } else if (formElement.customOnChange) {
        if (formElement.customOnChange.indexOf('func:this.props') !== -1) {
          customCallbackfunction = _this10.props[formElement.customOnChange.replace('func:this.props.', '')];
        } else if (formElement.customOnChange.indexOf('func:window') !== -1 && typeof window[formElement.customOnChange.replace('func:window.', '')] === 'function') {
          customCallbackfunction = window[formElement.customOnChange.replace('func:window.', '')].bind(_this10, formElement);
        }
      }
      _this10.setState(updatedStateProp);
      if (typeof customCallbackfunction === 'function') customCallbackfunction();
    };
  }
  passableProps = getPassablePropkeyevents(passableProps, formElement);

  function handlePlaceSelect() {
    var addressObject = formElement.autocomplete.getPlace();
    var addressData = { formatted_address: addressObject.formatted_address };
    var address = addressObject.address_components;
    if (formElement.passProps && formElement.passProps.include_places_detail && address) {
      var fieldConfig = formElement.passProps.fieldConfig || {};
      for (var _i = 0; _i < address.length; _i++) {
        var addressChunk = address[_i];
        if (addressChunk.types && addressChunk.types[0]) {
          var addressType = addressChunk.types[0];
          if (fieldConfig[addressType]) {
            var name_type = fieldConfig[addressType].short ? 'short_name' : 'long_name';
            var field_name = fieldConfig[addressType].field_name ? fieldConfig[addressType].field_name : addressType;
            addressData[field_name] = addressChunk[name_type];
          }
        }
      }
    }
    var updateData = void 0;
    if (formElement.passProps && formElement.passProps.include_places_detail && address) {
      updateData = (0, _assign2.default)({}, addressData, {
        query: addressObject.formatted_address
      });
    } else {
      updateData = addressObject.formatted_address;
    }
    onChange({
      target: {
        value: updateData
      }
    });
  }
  function handleScriptLoad() {
    var options = {
      types: ['address'],
      componentRestrictions: { country: "us" }
    };
    if (formElement.passProps && formElement.passProps.include_places_detail) {
      options.fields = ["formatted_address", 'address_components'];
    } else {