@elliemae/ds-modal 3.0.0-next.2 → 3.0.0-next.3

package/cjs/v1/DSModalWrapper.js

@@ -1,166 +0,0 @@
-'use strict';
-
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-require('core-js/modules/web.dom-collections.iterator.js');
-require('core-js/modules/esnext.async-iterator.filter.js');
-require('core-js/modules/esnext.iterator.constructor.js');
-require('core-js/modules/esnext.iterator.filter.js');
-require('core-js/modules/esnext.async-iterator.for-each.js');
-require('core-js/modules/esnext.iterator.for-each.js');
-var react = require('react');
-var constants = require('../constants.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var DSModalWrapper = (WrappedComponent => {
-  class DSModalWrapper extends react.Component {
-    constructor() {
-      super(...arguments);
-      this.state = {
-        childready: false,
-        additionalFooterCssClass: 'loading',
-        container: null,
-        actions: null,
-        height: '100%'
-      };
-
-      this.onHeaderHeight = e => {
-        this.heightHeaderFlag = true;
-        this.heightHeader = e.height || 0;
-      };
-
-      this.onFooterHeight = e => {
-        this.heightFooterFlag = true;
-        this.heightFooter = e.height || 0;
-      };
-
-      this.onResize = _ref => {
-        let {
-          bounds
-        } = _ref;
-
-        if (this.heightFooterFlag && this.heightHeaderFlag) {
-          return this.setState({
-            height: bounds.height - this.heightFooter - this.heightHeader
-          });
-        }
-
-        return setTimeout(this.onResize({
-          bounds
-        }), 0);
-      };
-
-      this.handleContainer = node => {
-        if (node) this.setState({
-          container: node
-        });
-        this.handleResize();
-      };
-
-      this.handleActions = node => {
-        if (node) this.setState({
-          actions: node
-        });
-        this.handleResize();
-      };
-    }
-
-    componentDidMount() {
-      window.addEventListener('resize', this.handleResize);
-    }
-
-    componentWillUnmount() {
-      window.removeEventListener('resize', this.handleResize);
-    }
-
-    /**
-     * Change button width to 100% if the
-     * combined width of the button (or button group) exceed 50% of the container width.
-     */
-    handleResize() {
-      if (!this.state) return null;
-      const {
-        container,
-        actions,
-        childready
-      } = this.state;
-      if (!childready) return null;
-      this.setState({
-        additionalFooterCssClass: null
-      }); // !important reset to default state to recalculate
-
-      const {
-        clientWidth: containerWidth
-      } = container;
-      const {
-        clientWidth: actionsWidth
-      } = actions; // Change button width to 100% if the combined width of the button (or button group) exceed 50% of the container width.
-
-      if (containerWidth && actionsWidth && actionsWidth / containerWidth * 100 > 50) {
-        return this.setState({
-          additionalFooterCssClass: 'fluid-actions'
-        });
-      }
-
-      return this.setState({
-        additionalFooterCssClass: null
-      });
-    }
-
-    verifyNodes() {
-      const {
-        modalType
-      } = this.props;
-
-      if (modalType !== constants.MODAL_TYPE.DEFAULT) {
-        const nodesInterval = setInterval(() => {
-          // !important it checks when nodes are availables
-          const {
-            container,
-            actions
-          } = this.state;
-          if (!container || !actions) return null;
-          clearInterval(nodesInterval);
-          this.setState({
-            childready: true
-          });
-          return this.handleResize();
-        }, 100);
-      }
-    }
-
-    render() {
-      const {
-        props,
-        state
-      } = this;
-      const {
-        additionalFooterCssClass,
-        height
-      } = state;
-      return /*#__PURE__*/react.createElement(WrappedComponent, _objectSpread(_objectSpread({}, props), {}, {
-        height,
-        onResize: this.onResize,
-        onFooterHeight: this.onFooterHeight,
-        onHeaderHeight: this.onHeaderHeight,
-        containerRef: this.handleContainer,
-        actionsRef: this.handleActions,
-        additionalFooterCssClass,
-        onAfterOpen: () => {
-          if (props.onAfterOpen) props.onAfterOpen();
-          this.verifyNodes();
-        }
-      }));
-    }
-
-  }
-
-  return DSModalWrapper;
-});
-
-module.exports = DSModalWrapper;

package/cjs/v1/ModalFeedBack/ModalFeedBack.js

@@ -1,98 +0,0 @@
-'use strict';
-
-var _jsx = require('@babel/runtime/helpers/jsx');
-require('react');
-var dsIcons = require('@elliemae/ds-icons');
-var dsClassnames = require('@elliemae/ds-classnames');
-var constants = require('../../constants.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-
-var _WarningCircle, _CheckmarkCircle, _HelpCircle, _InfoCircle, _InfoCircle2;
-const feedbackIconSize = 'xxl';
-const {
-  WARNING,
-  ERROR,
-  SUCCESS,
-  HELP,
-  INFO
-} = constants.MODAL_TYPE;
-
-const getModalType = (modalType, _ref) => {
-  let {
-    hasError,
-    hasWarning,
-    hasSuccess,
-    hasInfo,
-    hasHelp
-  } = _ref;
-  if ([WARNING, ERROR, SUCCESS, HELP, INFO].indexOf(modalType) > -1) return modalType;
-  if (hasError) return ERROR;
-  if (hasWarning) return WARNING;
-  if (hasSuccess) return SUCCESS;
-  if (hasHelp) return HELP;
-  if (hasInfo) return INFO;
-  return INFO;
-};
-
-const getIconType = modalType => {
-  switch (modalType) {
-    case WARNING:
-    case ERROR:
-      return _WarningCircle || (_WarningCircle = /*#__PURE__*/_jsx__default["default"](dsIcons.WarningCircle, {
-        size: feedbackIconSize
-      }));
-
-    case SUCCESS:
-      return _CheckmarkCircle || (_CheckmarkCircle = /*#__PURE__*/_jsx__default["default"](dsIcons.CheckmarkCircle, {
-        size: feedbackIconSize
-      }));
-
-    case HELP:
-      return _HelpCircle || (_HelpCircle = /*#__PURE__*/_jsx__default["default"](dsIcons.HelpCircle, {
-        size: feedbackIconSize
-      }));
-
-    case INFO:
-      return _InfoCircle || (_InfoCircle = /*#__PURE__*/_jsx__default["default"](dsIcons.InfoCircle, {
-        size: feedbackIconSize
-      }));
-
-    default:
-      return _InfoCircle2 || (_InfoCircle2 = /*#__PURE__*/_jsx__default["default"](dsIcons.InfoCircle, {
-        size: feedbackIconSize
-      }));
-  }
-};
-
-const ModalFeedBack = _ref2 => {
-  let {
-    className = '',
-    modalType = null,
-    hasError = false,
-    hasWarning = false,
-    hasSuccess = false,
-    hasInfo = false,
-    hasHelp = false
-  } = _ref2;
-  const type = getModalType(modalType, {
-    hasError,
-    hasWarning,
-    hasSuccess,
-    hasInfo,
-    hasHelp
-  });
-  const {
-    cssClassName
-  } = dsClassnames.convertPropToCssClassName('modal-feedback', className, {
-    modalType: type
-  });
-  const feedbackIcon = getIconType(type);
-  return /*#__PURE__*/_jsx__default["default"]("div", {
-    className: cssClassName
-  }, void 0, feedbackIcon);
-};
-
-module.exports = ModalFeedBack;

package/cjs/v2/DSModal.js

@@ -1,203 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-require('core-js/modules/esnext.async-iterator.filter.js');
-require('core-js/modules/esnext.iterator.constructor.js');
-require('core-js/modules/esnext.iterator.filter.js');
-require('core-js/modules/esnext.async-iterator.for-each.js');
-require('core-js/modules/esnext.iterator.for-each.js');
-var _jsx = require('@babel/runtime/helpers/jsx');
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-require('react');
-var reactDesc = require('react-desc');
-var ReactModal = require('react-modal');
-var dsClassnames = require('@elliemae/ds-classnames');
-var constants = require('../constants.js');
-var ModalContent = require('./components/ModalContent.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
-var ReactModal__default = /*#__PURE__*/_interopDefaultLegacy(ReactModal);
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-const DSModal = _ref => {
-  let {
-    containerProps = {},
-    className = '',
-    style = {},
-    size = 'default',
-    //
-    modalType = constants.MODAL_TYPE_V2.INFORMATION,
-    modalSubType = null,
-    modalTitle = '',
-    dataTestId = 'ds-modal',
-    centered = false,
-    showRejectButton = false,
-    showClose = true,
-    searchProps = {},
-    // override
-    actionsRef = () => null,
-    additionalFooterCssClass,
-    overridePropsConfirmButton = {},
-    overridePropsRejectButton = {},
-    // react modal
-    children,
-    isOpen = true,
-    onClose = () => null,
-    onAfterOpen = () => null,
-    onConfirm = () => null,
-    onReject = () => null,
-    rejectLabel = 'Discard',
-    confirmLabel = 'Save',
-    shouldCloseOnOverlayClick = false,
-    appElement = '#root',
-    zIndex = 10,
-    removePadding = false
-  } = _ref;
-
-  if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && document && ReactModal__default["default"].setAppElement) {
-    ReactModal__default["default"].setAppElement(appElement);
-  }
-
-  const {
-    cssClassName,
-    classNameBlock,
-    classNameModifier
-  } = dsClassnames.convertPropToCssClassName('modal-v2', className, {
-    size
-  });
-  return /*#__PURE__*/_jsx__default["default"](ReactModal__default["default"], {
-    testId: dataTestId,
-    className: "".concat(cssClassName, " ").concat(classNameBlock("type-".concat(modalType))),
-    contentLabel: modalTitle,
-    isOpen: isOpen,
-    onAfterOpen: onAfterOpen,
-    onRequestClose: onClose,
-    overlayClassName: "".concat(classNameBlock('overlay'), " ").concat(classNameModifier(centered ? 'center' : 'top')),
-    shouldCloseOnOverlayClick: shouldCloseOnOverlayClick,
-    style: {
-      content: _objectSpread({}, style),
-      overlay: {
-        // position: 'absolute', https://jira.elliemae.io/browse/PUI-1471, the overlay should be positioned based on the browser window rather positioned absolute to its parent
-        zIndex
-      }
-    }
-  }, void 0, /*#__PURE__*/_jsx__default["default"](ModalContent.DSModalContent, {
-    actionsRef: actionsRef,
-    additionalFooterCssClass: additionalFooterCssClass,
-    confirmLabel: confirmLabel,
-    containerProps: containerProps,
-    modalSubType: modalSubType,
-    modalTitle: modalTitle,
-    modalType: modalType,
-    onClose: onClose,
-    onConfirm: onConfirm,
-    onReject: onReject,
-    overridePropsConfirmButton: overridePropsConfirmButton,
-    overridePropsRejectButton: overridePropsRejectButton,
-    rejectLabel: rejectLabel,
-    searchProps: searchProps,
-    showClose: showClose,
-    showRejectButton: showRejectButton,
-    removePadding: removePadding
-  }, void 0, children));
-};
-
-const props = {
-  /** inject props to container wrapper */
-  containerProps: reactDesc.PropTypes.object.description('inject props to container wrapper'),
-
-  /** css class */
-  className: reactDesc.PropTypes.string.description('css class'),
-
-  /** style object for container wrapper */
-  style: reactDesc.PropTypes.object.description('style object for container wrapper'),
-
-  /** modal container title */
-  modalTitle: reactDesc.PropTypes.string.description('modal container title'),
-
-  /** center container */
-  centered: reactDesc.PropTypes.bool.description('center container'),
-
-  /** show reject button */
-  showRejectButton: reactDesc.PropTypes.bool.description('show reject button'),
-
-  /** show close button */
-  showClose: reactDesc.PropTypes.bool.description('show close button'),
-
-  /*
-    Props for search component
-  */
-  searchProps: reactDesc.PropTypes.object.description('Props for search component'),
-
-  /** css class for footer */
-  additionalFooterCssClass: reactDesc.PropTypes.string.description('css class for footer'),
-
-  /**  override props confirm button */
-  overridePropsConfirmButton: reactDesc.PropTypes.object.description('override props confirm button'),
-
-  /** override props reject button */
-  overridePropsRejectButton: reactDesc.PropTypes.object.description('override props reject button'),
-
-  /** controlled isOpen flag */
-  isOpen: reactDesc.PropTypes.bool.description('controlled isOpen flag'),
-
-  /** close callback */
-  onClose: reactDesc.PropTypes.func.description('close callback'),
-
-  /** after open callback */
-  onAfterOpen: reactDesc.PropTypes.func.description('after open callback'),
-
-  /** confirm callback */
-  onConfirm: reactDesc.PropTypes.func.description('confirm callback'),
-
-  /** reject callback */
-  onReject: reactDesc.PropTypes.func.description('reject callback'),
-
-  /** reject label */
-  rejectLabel: reactDesc.PropTypes.string.description('reject label'),
-
-  /** confirm text string */
-  confirmLabel: reactDesc.PropTypes.string.description('confirm text string'),
-
-  /** modal container size */
-  size: reactDesc.PropTypes.oneOf(['default', 'xx-large', 'x-large', 'large', 'medium', 'small']).description('modal container size'),
-
-  /** modal sub type */
-  modalSubType: reactDesc.PropTypes.any.description('modal sub type'),
-
-  /** modal type */
-  modalType: reactDesc.PropTypes.any.description('modal type'),
-
-  /** ref for modal footer actions */
-  actionsRef: reactDesc.PropTypes.any.description('ref for modal footer actions'),
-
-  /** modal container children */
-  children: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.element, reactDesc.PropTypes.arrayOf([reactDesc.PropTypes.element])]).description('modal container children'),
-
-  /** close on click outside container */
-  shouldCloseOnOverlayClick: reactDesc.PropTypes.bool.description('close on click outside container'),
-
-  /*
-    App element ID to inject the modal
-  */
-  appElement: reactDesc.PropTypes.string.description('App element ID to inject the modal'),
-
-  /** zindex for modal container */
-  zIndex: reactDesc.PropTypes.number.description('zindex for modal container'),
-
-  /** remove modal builtin padding */
-  removePadding: reactDesc.PropTypes.bool.description('remove modal builtin padding')
-};
-const DSModalWithSchema = reactDesc.describe(DSModal);
-DSModalWithSchema.propTypes = props;
-
-exports.DSModalContent = ModalContent.DSModalContent;
-exports.DSModalWithSchema = DSModalWithSchema;
-exports["default"] = DSModal;

package/cjs/v2/blocks.js

@@ -1,88 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var dsClassnames = require('@elliemae/ds-classnames');
-
-const blockName = 'modal-v2';
-const ModalHeader = dsClassnames.aggregatedClasses('div')(blockName, 'modal-header', _ref => {
-  let {
-    type,
-    showClose
-  } = _ref;
-  return {
-    [type]: type,
-    'with-close': showClose
-  };
-});
-const ModalHeaderTopRight = dsClassnames.aggregatedClasses('div')(blockName, 'modal-header-close', _ref2 => {
-  let {
-    type
-  } = _ref2;
-  return {
-    [type]: type
-  };
-});
-const ModalFeedback = dsClassnames.aggregatedClasses('div')(blockName, 'modal-feedback', _ref3 => {
-  let {
-    type
-  } = _ref3;
-  return {
-    [type]: type
-  };
-});
-const ModalTitle = dsClassnames.aggregatedClasses('h3')(blockName, 'modal-title', _ref4 => {
-  let {
-    type
-  } = _ref4;
-  return {
-    [type]: type
-  };
-});
-const ModalContent = dsClassnames.aggregatedClasses('div')(blockName, 'modal-content', _ref5 => {
-  let {
-    type,
-    removePadding
-  } = _ref5;
-  return {
-    [type]: type,
-    'remove-padding': removePadding
-  };
-});
-const ModalWrapper = dsClassnames.aggregatedClasses('div')(blockName, 'modal-wrapper', _ref6 => {
-  let {
-    type,
-    removePadding
-  } = _ref6;
-  return {
-    [type]: type,
-    'remove-padding': removePadding
-  };
-});
-const ModalFooter = dsClassnames.aggregatedClasses('div')(blockName, 'modal-footer', _ref7 => {
-  let {
-    type,
-    additionalFooterCssClass
-  } = _ref7;
-  return {
-    [type]: type,
-    [additionalFooterCssClass]: additionalFooterCssClass
-  };
-});
-const ModalFooterActions = dsClassnames.aggregatedClasses('div')(blockName, 'modal-footer-actions', _ref8 => {
-  let {
-    type
-  } = _ref8;
-  return {
-    [type]: type
-  };
-});
-
-exports.ModalContent = ModalContent;
-exports.ModalFeedback = ModalFeedback;
-exports.ModalFooter = ModalFooter;
-exports.ModalFooterActions = ModalFooterActions;
-exports.ModalHeader = ModalHeader;
-exports.ModalHeaderTopRight = ModalHeaderTopRight;
-exports.ModalTitle = ModalTitle;
-exports.ModalWrapper = ModalWrapper;

package/cjs/v2/components/DecisionHeader.js

@@ -1,38 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _jsx = require('@babel/runtime/helpers/jsx');
-require('react');
-var dsIcons = require('@elliemae/ds-icons');
-var DSButton = require('@elliemae/ds-button');
-var blocks = require('../blocks.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
-
-var _Close;
-const DecisionHeader = _ref => {
-  let {
-    onClose,
-    showClose
-  } = _ref;
-  return /*#__PURE__*/_jsx__default["default"](blocks.ModalHeader, {
-    classProps: {
-      type: 'decision',
-      showClose
-    }
-  }, void 0, showClose && /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
-    buttonType: "link",
-    containerProps: {
-      'data-testid': 'modal-button-close'
-    },
-    icon: _Close || (_Close = /*#__PURE__*/_jsx__default["default"](dsIcons.Close, {})),
-    onClick: onClose
-  }));
-};
-
-exports.DecisionHeader = DecisionHeader;
-exports["default"] = DecisionHeader;

package/cjs/v2/components/FeedbackIcon.js

@@ -1,64 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _jsx = require('@babel/runtime/helpers/jsx');
-require('react');
-var dsIcons = require('@elliemae/ds-icons');
-var constants = require('../../constants.js');
-var blocks = require('../blocks.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-
-var _WarningTriangle, _ErrorHexegon, _CheckmarkCircle, _InfoCircle, _HelpCircle;
-const feedbackIconSize = 'xxl';
-
-const getIconType = subtype => {
-  switch (subtype) {
-    case constants.MODAL_SUB_TYPE_V2.WARNING:
-      return _WarningTriangle || (_WarningTriangle = /*#__PURE__*/_jsx__default["default"](dsIcons.WarningTriangle, {
-        "data-testid": "icon-waring",
-        size: feedbackIconSize
-      }));
-
-    case constants.MODAL_SUB_TYPE_V2.ERROR:
-      return _ErrorHexegon || (_ErrorHexegon = /*#__PURE__*/_jsx__default["default"](dsIcons.ErrorHexegon, {
-        "data-testid": "icon-error",
-        size: feedbackIconSize
-      }));
-
-    case constants.MODAL_SUB_TYPE_V2.SUCCESS:
-      return _CheckmarkCircle || (_CheckmarkCircle = /*#__PURE__*/_jsx__default["default"](dsIcons.CheckmarkCircle, {
-        "data-testid": "icon-success",
-        size: feedbackIconSize
-      }));
-
-    case constants.MODAL_SUB_TYPE_V2.INFORMATION:
-      return _InfoCircle || (_InfoCircle = /*#__PURE__*/_jsx__default["default"](dsIcons.InfoCircle, {
-        "data-testid": "icon-information",
-        size: feedbackIconSize
-      }));
-
-    default:
-      return _HelpCircle || (_HelpCircle = /*#__PURE__*/_jsx__default["default"](dsIcons.HelpCircle, {
-        "data-testid": "icon-help",
-        size: feedbackIconSize
-      }));
-  }
-};
-
-const FeedbackIcon = _ref => {
-  let {
-    modalSubType
-  } = _ref;
-  return /*#__PURE__*/_jsx__default["default"](blocks.ModalFeedback, {
-    classProps: {
-      type: modalSubType
-    }
-  }, void 0, getIconType(modalSubType));
-};
-
-exports.FeedbackIcon = FeedbackIcon;
-exports["default"] = FeedbackIcon;