@elliemae/ds-wysiwygeditor/cjs/components/InsertFieldModal.js

Ellie Mae - Dim Sum - WYSIWYG Editor

'use strict';

var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
var _extends = require('@babel/runtime/helpers/extends');
var _classCallCheck = require('@babel/runtime/helpers/classCallCheck');
var _createClass = require('@babel/runtime/helpers/createClass');
var _assertThisInitialized = require('@babel/runtime/helpers/assertThisInitialized');
var _inherits = require('@babel/runtime/helpers/inherits');
var _possibleConstructorReturn = require('@babel/runtime/helpers/possibleConstructorReturn');
var _getPrototypeOf = require('@babel/runtime/helpers/getPrototypeOf');
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var React = require('react');
var PropTypes = require('prop-types');
var DSModal = require('@elliemae/ds-modal');
var lodash = require('lodash');
var constants = require('@elliemae/ds-shared/constants');
var components_customFields = require('./customFields.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
var _classCallCheck__default = /*#__PURE__*/_interopDefaultLegacy(_classCallCheck);
var _createClass__default = /*#__PURE__*/_interopDefaultLegacy(_createClass);
var _assertThisInitialized__default = /*#__PURE__*/_interopDefaultLegacy(_assertThisInitialized);
var _inherits__default = /*#__PURE__*/_interopDefaultLegacy(_inherits);
var _possibleConstructorReturn__default = /*#__PURE__*/_interopDefaultLegacy(_possibleConstructorReturn);
var _getPrototypeOf__default = /*#__PURE__*/_interopDefaultLegacy(_getPrototypeOf);
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
var DSModal__default = /*#__PURE__*/_interopDefaultLegacy(DSModal);

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
var modalTypes = Object.values(DSModal.MODAL_TYPE);
var elementClassName = 'insertfieldmodal-element';

var InsertFieldModal = /*#__PURE__*/function (_React$PureComponent) {
  _inherits__default['default'](InsertFieldModal, _React$PureComponent);

  var _super = _createSuper(InsertFieldModal);

  function InsertFieldModal(props) {
    var _this;

    _classCallCheck__default['default'](this, InsertFieldModal);

    _this = _super.call(this, props);

    _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onConfirm", function () {
      var _this$props = _this.props,
          onConfirm = _this$props.onConfirm,
          onClose = _this$props.onClose;
      var selectedFieldCode = _this.state.selectedFieldCode;
      onConfirm(selectedFieldCode);
      onClose();
    });

    _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onReject", function () {
      var _this$props2 = _this.props,
          onReject = _this$props2.onReject,
          onClose = _this$props2.onClose;

      if (onReject) {
        onReject();
      } else {
        onClose();
      }
    });

    _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "drawDiv", function (className, content, content2) {
      return /*#__PURE__*/React__default['default'].createElement("div", {
        className: className
      }, /*#__PURE__*/React__default['default'].createElement("span", null, content), /*#__PURE__*/React__default['default'].createElement("span", null, content2));
    });

    _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "drawLabel", function (className, label, value) {
      return /*#__PURE__*/React__default['default'].createElement("div", {
        className: className
      }, /*#__PURE__*/React__default['default'].createElement("span", {
        className: "label"
      }, label), /*#__PURE__*/React__default['default'].createElement("span", {
        className: "value"
      }, value));
    });

    _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "handleElementClick", function (e, selectedFieldCode) {
      if (e.key && e.key !== ' ') {
        return;
      }

      var fCode = _this.state.selectedFieldCode;
      var disableDoubleClick = _this.props.disableDoubleClick;

      if (selectedFieldCode === fCode && !disableDoubleClick) {
        _this.onConfirm();

        return;
      }

      _this.setState({
        selectedFieldCode: selectedFieldCode
      });

      var onSelect = _this.props.onSelect;

      if (onSelect) {
        onSelect(selectedFieldCode);
      }
    });

    _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "preventSpacebarScroll", function () {
      document.onkeypress = function (e) {
        if (!lodash.includes(e.target.className, elementClassName)) {
          return true;
        }

        e = e || window.event;
        var charCode = e.keyCode || e.which;

        if (charCode === 32) {
          e.preventDefault();
          return false;
        }

        return true;
      };
    });

    _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "renderElements", function () {
      var customFields = _this.props.customFields;

      if (!customFields) {
        return 'Empty';
      }

      var selectedFieldCode = _this.state.selectedFieldCode;
      return customFields.map(function (customField, idx) {
        var extras = {};
        var fieldCode = components_customFields.getFieldCode(customField);

        if (_this.focusFirst && idx === 0) {
          extras.ref = function (element) {
            return element && element.focus();
          };

          _this.focusFirst = undefined;
        } else if (fieldCode === selectedFieldCode) {
          extras.ref = function (element) {
            return element && element.focus();
          };
        }

        return /*#__PURE__*/React__default['default'].createElement("div", _extends__default['default']({
          key: fieldCode,
          className: elementClassName,
          onClick: function onClick(e) {
            return _this.handleElementClick(e, fieldCode);
          },
          onKeyUp: function onKeyUp(e) {
            return _this.handleElementClick(e, fieldCode);
          },
          role: "button",
          tabIndex: 0
        }, extras), _this.drawLabel('content', components_customFields.getFieldName(customField), fieldCode));
      });
    });

    _this.state = {
      selectedFieldCode: components_customFields.getFieldCode(components_customFields.fields[0])
    };

    _this.preventSpacebarScroll();

    return _this;
  }

  _createClass__default['default'](InsertFieldModal, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      var customFields = this.props.customFields;

      if (customFields) {
        this.handleElementClick({}, customFields[0]);
        this.focusFirst = true;
      }
    }
  }, {
    key: "getDerivedStateFromProps",
    value: function getDerivedStateFromProps(nextProps) {
      var customFields = this.props.customFields;

      if (!customFields && nextProps.customFields) {
        this.setState({
          selectedFieldCode: customFields[0]
        });
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props3 = this.props;
          _this$props3.customFields;
          _this$props3.onSelect;
          var modalProps = _objectWithoutProperties__default['default'](_this$props3, ["customFields", "onSelect"]);

      return /*#__PURE__*/React__default['default'].createElement(DSModal__default['default'], _extends__default['default']({}, modalProps, {
        className: "insert-field-modal",
        onConfirm: this.onConfirm,
        onReject: this.onReject
      }), /*#__PURE__*/React__default['default'].createElement("div", {
        className: "wrapper"
      }, /*#__PURE__*/React__default['default'].createElement("div", {
        className: "col-1"
      }, this.drawDiv('title', 'Field Name', '« Field ID »'), this.renderElements())));
    }
  }]);

  return InsertFieldModal;
}(React__default['default'].PureComponent);

_defineProperty__default['default'](InsertFieldModal, "propTypes", {
  onConfirm: PropTypes__default['default'].func.isRequired,
  onClose: PropTypes__default['default'].func.isRequired,
  confirmLabel: PropTypes__default['default'].string,
  customFields: PropTypes__default['default'].arrayOf(PropTypes__default['default'].string),
  disableDoubleClick: PropTypes__default['default'].bool,
  isOpen: PropTypes__default['default'].bool,
  modalTitle: PropTypes__default['default'].string,
  modalType: PropTypes__default['default'].string,
  rejectLabel: PropTypes__default['default'].string,
  shouldCloseOnOverlayClick: PropTypes__default['default'].bool,
  size: PropTypes__default['default'].string,
  onSelect: PropTypes__default['default'].func
});

_defineProperty__default['default'](InsertFieldModal, "defaultProps", {
  confirmLabel: 'Add',
  customFields: components_customFields.fields,
  disableDoubleClick: false,
  isOpen: true,
  modalTitle: 'Add Field',
  modalType: modalTypes[1],
  rejectLabel: 'Cancel',
  shouldCloseOnOverlayClick: true,
  size: constants.sizeOptions[1],
  onSelect: undefined
});

module.exports = InsertFieldModal;
//# sourceMappingURL=InsertFieldModal.js.map