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

Ellie Mae - Dim Sum - WYSIWYG Editor

import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
import _extends from '@babel/runtime/helpers/esm/extends';
import _classCallCheck from '@babel/runtime/helpers/esm/classCallCheck';
import _createClass from '@babel/runtime/helpers/esm/createClass';
import _assertThisInitialized from '@babel/runtime/helpers/esm/assertThisInitialized';
import _inherits from '@babel/runtime/helpers/esm/inherits';
import _possibleConstructorReturn from '@babel/runtime/helpers/esm/possibleConstructorReturn';
import _getPrototypeOf from '@babel/runtime/helpers/esm/getPrototypeOf';
import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
import React from 'react';
import PropTypes from 'prop-types';
import DSModal, { MODAL_TYPE } from '@elliemae/ds-modal';
import { includes } from 'lodash';
import { sizeOptions } from '@elliemae/ds-shared/constants';
import { getFieldCode, getFieldName, fields } from './customFields.js';

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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(MODAL_TYPE);
var elementClassName = 'insertfieldmodal-element';

var InsertFieldModal = /*#__PURE__*/function (_React$PureComponent) {
  _inherits(InsertFieldModal, _React$PureComponent);

  var _super = _createSuper(InsertFieldModal);

  function InsertFieldModal(props) {
    var _this;

    _classCallCheck(this, InsertFieldModal);

    _this = _super.call(this, props);

    _defineProperty(_assertThisInitialized(_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(_assertThisInitialized(_this), "onReject", function () {
      var _this$props2 = _this.props,
          onReject = _this$props2.onReject,
          onClose = _this$props2.onClose;

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

    _defineProperty(_assertThisInitialized(_this), "drawDiv", function (className, content, content2) {
      return /*#__PURE__*/React.createElement("div", {
        className: className
      }, /*#__PURE__*/React.createElement("span", null, content), /*#__PURE__*/React.createElement("span", null, content2));
    });

    _defineProperty(_assertThisInitialized(_this), "drawLabel", function (className, label, value) {
      return /*#__PURE__*/React.createElement("div", {
        className: className
      }, /*#__PURE__*/React.createElement("span", {
        className: "label"
      }, label), /*#__PURE__*/React.createElement("span", {
        className: "value"
      }, value));
    });

    _defineProperty(_assertThisInitialized(_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(_assertThisInitialized(_this), "preventSpacebarScroll", function () {
      document.onkeypress = function (e) {
        if (!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(_assertThisInitialized(_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 = 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.createElement("div", _extends({
          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', getFieldName(customField), fieldCode));
      });
    });

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

    _this.preventSpacebarScroll();

    return _this;
  }

  _createClass(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(_this$props3, ["customFields", "onSelect"]);

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

  return InsertFieldModal;
}(React.PureComponent);

_defineProperty(InsertFieldModal, "propTypes", {
  onConfirm: PropTypes.func.isRequired,
  onClose: PropTypes.func.isRequired,
  confirmLabel: PropTypes.string,
  customFields: PropTypes.arrayOf(PropTypes.string),
  disableDoubleClick: PropTypes.bool,
  isOpen: PropTypes.bool,
  modalTitle: PropTypes.string,
  modalType: PropTypes.string,
  rejectLabel: PropTypes.string,
  shouldCloseOnOverlayClick: PropTypes.bool,
  size: PropTypes.string,
  onSelect: PropTypes.func
});

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

export default InsertFieldModal;
//# sourceMappingURL=InsertFieldModal.js.map