react-misc-toolbox/dist/ModalDialog.js

'use strict';

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

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

var _extends3 = _interopRequireDefault(_extends2);

var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _recompose = require('recompose');

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _SVGCancel = require('./svg/SVGCancel');

var _SVGCancel2 = _interopRequireDefault(_SVGCancel);

var _helperFunctions = require('./helperFunctions');

var _defaultStyles = require('./defaultStyles');

var _StyledModal = require('./StyledModal');

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

// .attrs(
//   ({
//     theme: {
//       modaldialog: {
//         container: { background, color, margin, border, borderRadius },
//       },
//     },
//   }) => ({
// background,
// color,
// margin,
// border,
// borderRadius
//   })
// )`

var ModalDialog = function ModalDialog(_ref) {
  var closeModal = _ref.closeModal,
      _ref$useStyleTemplate = _ref.useStyleTemplate,
      useStyleTemplate = _ref$useStyleTemplate === undefined ? 'default' : _ref$useStyleTemplate,
      customStyleTemplate = _ref.customStyleTemplate,
      style = _ref.style,
      className = _ref.className,
      _onClick6 = _ref.onClick,
      onMount = _ref.onMount,
      onUnmount = _ref.onUnmount,
      _ref$shouldKeepCount = _ref.shouldKeepCount,
      shouldKeepCount = _ref$shouldKeepCount === undefined ? true : _ref$shouldKeepCount,
      dataTestId = _ref.dataTestId,
      renderBody = _ref.renderBody,
      renderHeader = _ref.renderHeader,
      noCloseModalButton = _ref.noCloseModalButton,
      renderButtons = _ref.renderButtons,
      renderCloseModalButton = _ref.renderCloseModalButton;

  (0, _react.useEffect)(function () {
    document.addEventListener('keydown', function cb(e) {
      if (e.keyCode === 27) {
        e.currentTarget.removeEventListener(e.type, cb);
        closeModal();
      }
    });
    if (typeof window !== 'undefined' && shouldKeepCount) {
      window.modalCount ? window.modalCount++ : window.modalCount = 1;
      console.log('window.modalCount', window.modalCount);
      onMount && onMount();
    }
    return function () {
      if (typeof window !== 'undefined' && shouldKeepCount) {
        window.modalCount ? window.modalCount-- : window.modalCount = 0;
        console.log('window.modalCount', window.modalCount);
        if (window.modalCount === 0) {
          onUnmount && onUnmount();
        }
      }
    };
  }, []);
  var styleTemplate = customStyleTemplate ? customStyleTemplate : useStyleTemplate ? _defaultStyles.modalStyleTemplates[useStyleTemplate] : {};
  var getHeaderProps = function getHeaderProps() {
    var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

    var _onClick = _ref2.onClick,
        className = _ref2.className,
        _ref2$style = _ref2.style,
        style = _ref2$style === undefined ? {} : _ref2$style,
        props = (0, _objectWithoutProperties3.default)(_ref2, ['onClick', 'className', 'style']);
    return (0, _extends3.default)({
      onClick: function onClick(e) {
        for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
          args[_key - 1] = arguments[_key];
        }

        e.stopPropagation();
        _onClick && _onClick.apply(undefined, [e].concat(args));
      },
      className: className ? 'modal__header ' + className : 'modal__header',
      style: (0, _extends3.default)({}, styleTemplate.header, style)
    }, props);
  };
  var getCloseModalButtonProps = function getCloseModalButtonProps() {
    var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

    var _onClick2 = _ref3.onClick,
        className = _ref3.className,
        _ref3$style = _ref3.style,
        style = _ref3$style === undefined ? {} : _ref3$style,
        props = (0, _objectWithoutProperties3.default)(_ref3, ['onClick', 'className', 'style']);
    return (0, _extends3.default)({
      onClick: function onClick(e) {
        for (var _len2 = arguments.length, args = Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
          args[_key2 - 1] = arguments[_key2];
        }

        e.stopPropagation();
        closeModal();
        _onClick2 && _onClick2.apply(undefined, [e].concat(args));
      },
      className: className ? 'modal__closemodalbutton ' + className : 'modal__closemodalbutton',
      style: (0, _extends3.default)({}, styleTemplate.closemodalbutton, style)
    }, props);
  };
  var hasHeader = Boolean(renderHeader) ? 'true' : 'false';
  var hasFooter = Boolean(renderButtons) ? 'true' : 'false';

  var getBodyProps = function getBodyProps() {
    var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

    var _onClick3 = _ref4.onClick,
        className = _ref4.className,
        _ref4$style = _ref4.style,
        style = _ref4$style === undefined ? {} : _ref4$style,
        props = (0, _objectWithoutProperties3.default)(_ref4, ['onClick', 'className', 'style']);
    return (0, _extends3.default)({
      onClick: function onClick(e) {
        for (var _len3 = arguments.length, args = Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
          args[_key3 - 1] = arguments[_key3];
        }

        e.stopPropagation();
        _onClick3 && _onClick3.apply(undefined, [e].concat(args));
      },
      className: className ? 'modal__body ' + className : 'modal__body',
      style: (0, _extends3.default)({}, style),
      hasheader: hasHeader,
      hasfooter: hasFooter
    }, props);
  };
  var getButtonsProps = function getButtonsProps() {
    var _ref5 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

    var _onClick4 = _ref5.onClick,
        className = _ref5.className,
        _ref5$style = _ref5.style,
        style = _ref5$style === undefined ? {} : _ref5$style,
        props = (0, _objectWithoutProperties3.default)(_ref5, ['onClick', 'className', 'style']);
    return (0, _extends3.default)({
      onClick: function onClick(e) {
        for (var _len4 = arguments.length, args = Array(_len4 > 1 ? _len4 - 1 : 0), _key4 = 1; _key4 < _len4; _key4++) {
          args[_key4 - 1] = arguments[_key4];
        }

        e.stopPropagation();
        _onClick4 && _onClick4.apply(undefined, [e].concat(args));
      },
      className: className ? 'modal__buttons ' + className : 'modal__buttons',
      style: (0, _extends3.default)({}, styleTemplate.buttons, style)
    }, props);
  };
  var getButtonProps = function getButtonProps() {
    var _ref6 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

    var _onClick5 = _ref6.onClick,
        className = _ref6.className,
        _ref6$style = _ref6.style,
        style = _ref6$style === undefined ? {} : _ref6$style,
        props = (0, _objectWithoutProperties3.default)(_ref6, ['onClick', 'className', 'style']);
    return (0, _extends3.default)({
      onClick: function onClick(e) {
        for (var _len5 = arguments.length, args = Array(_len5 > 1 ? _len5 - 1 : 0), _key5 = 1; _key5 < _len5; _key5++) {
          args[_key5 - 1] = arguments[_key5];
        }

        e.stopPropagation();
        _onClick5 && _onClick5.apply(undefined, [e].concat(args));
      },
      className: className ? 'modal__button ' + className : 'modal__button',
      style: (0, _extends3.default)({}, styleTemplate.button, style)
    }, props);
  };
  var getContainerProps = function getContainerProps() {
    return {
      'data-testid': dataTestId,
      onClick: function onClick(e) {
        for (var _len6 = arguments.length, args = Array(_len6 > 1 ? _len6 - 1 : 0), _key6 = 1; _key6 < _len6; _key6++) {
          args[_key6 - 1] = arguments[_key6];
        }

        e.stopPropagation();
        _onClick6 && _onClick6.apply(undefined, [e].concat(args));
      },
      className: (0, _helperFunctions.advancedMulti)({ unflattenedBases: [className, 'modal__container'] }),
      style: (0, _extends3.default)({}, styleTemplate.container, style)
    };
  };
  return _react2.default.createElement(
    _StyledModal.CONTAINER,
    (0, _extends3.default)({}, getContainerProps()),
    renderCloseModalButton && renderCloseModalButton({ getCloseModalButtonProps: getCloseModalButtonProps }),
    !noCloseModalButton && !renderCloseModalButton && _react2.default.createElement(
      _StyledModal.EXIT_BUTTON,
      (0, _extends3.default)({}, getCloseModalButtonProps()),
      _react2.default.createElement(_SVGCancel2.default, null)
    ),
    renderHeader && (typeof renderHeader === 'function' ? renderHeader({ getHeaderProps: getHeaderProps }) : _react2.default.createElement(
      _StyledModal.HEADER,
      (0, _extends3.default)({}, getHeaderProps()),
      renderHeader
    )),
    typeof renderBody === 'function' ? renderBody({ getBodyProps: getBodyProps }) : _react2.default.createElement(
      _StyledModal.BODY,
      (0, _extends3.default)({}, getBodyProps()),
      renderBody
    ),
    renderButtons && renderButtons({ getButtonsProps: getButtonsProps, getButtonProps: getButtonProps, closeModal: closeModal })
  );
};

var hideScrollBar = function hideScrollBar() {
  return (0, _helperFunctions.styleElement)('body', {
    overflow: 'hidden'
  });
};
var showScrollBar = function showScrollBar() {
  return (0, _helperFunctions.styleElement)('body', {
    overflow: 'auto'
  });
};

var enhance = (0, _recompose.compose)();

ModalDialog.propTypes = {
  buttons: _propTypes2.default.object
};
ModalDialog.defaultProps = {
  useStyleTemplate: 'default',
  noCloseModalButton: false,
  dataTestId: '',
  classNameAppend: '',
  classNameOverride: '',
  style: {},
  onMount: function onMount() {
    return null;
  },
  onUnmount: function onUnmount() {
    return null;
  }
};

exports.default = enhance(ModalDialog);