react-misc-toolbox/dist/SinglePageModal.js

'use strict';

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

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

var _typeof3 = _interopRequireDefault(_typeof2);

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

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

var _regenerator = require('babel-runtime/regenerator');

var _regenerator2 = _interopRequireDefault(_regenerator);

var _asyncToGenerator2 = require('babel-runtime/helpers/asyncToGenerator');

var _asyncToGenerator3 = _interopRequireDefault(_asyncToGenerator2);

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

var _extends3 = _interopRequireDefault(_extends2);

var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');

var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _RTGTransition = require('./RTGTransition');

var _RTGTransition2 = _interopRequireDefault(_RTGTransition);

var _ModalDialog = require('./ModalDialog');

var _ModalDialog2 = _interopRequireDefault(_ModalDialog);

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

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _recompose = require('recompose');

var _Button = require('./Button');

var _Button2 = _interopRequireDefault(_Button);

var _sharedHandlers = require('./sharedHandlers');

var _styledComponents = require('styled-components');

var _styledComponents2 = _interopRequireDefault(_styledComponents);

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

var SinglePageModal = function SinglePageModal(_ref) {
  var _ref$demoModeIsOn = _ref.demoModeIsOn,
      demoModeIsOn = _ref$demoModeIsOn === undefined ? false : _ref$demoModeIsOn,
      noCloseModalButton = _ref.noCloseModalButton,
      style = _ref.style,
      className = _ref.className,
      onClick = _ref.onClick,
      onMount = _ref.onMount,
      onUnmount = _ref.onUnmount,
      children = _ref.children,
      renderTrigger = _ref.renderTrigger,
      renderCloseModalButton = _ref.renderCloseModalButton,
      renderHeader = _ref.renderHeader,
      dataTestId = _ref.dataTestId,
      renderBody = _ref.renderBody,
      renderButtons = _ref.renderButtons,
      useStyleTemplate = _ref.useStyleTemplate,
      backgroundProps = _ref.backgroundProps,
      externalModalIsOpen = _ref.externalModalIsOpen,
      setExternalModalIsOpenTo = _ref.setExternalModalIsOpenTo,
      onCloseModal = _ref.onCloseModal,
      onOpenModal = _ref.onOpenModal,
      customStyleTemplate = _ref.customStyleTemplate;

  var styleTemplate = customStyleTemplate ? customStyleTemplate : useStyleTemplate ? _defaultStyles.modalStyleTemplates[useStyleTemplate] : {};

  var _useReducer = (0, _react.useReducer)(function (state, newState) {
    return (0, _extends3.default)({}, state, newState);
  }, {
    modalIsOpen: false
  }),
      _useReducer2 = (0, _slicedToArray3.default)(_useReducer, 2),
      state = _useReducer2[0],
      setState = _useReducer2[1];

  var closeModal = function () {
    var _ref2 = (0, _asyncToGenerator3.default)( /*#__PURE__*/_regenerator2.default.mark(function _callee() {
      return _regenerator2.default.wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              _context.next = 2;
              return setState({
                modalIsOpen: false
              });

            case 2:
              setExternalModalIsOpenTo && setExternalModalIsOpenTo(false);
              onCloseModal && onCloseModal();

            case 4:
            case 'end':
              return _context.stop();
          }
        }
      }, _callee, undefined);
    }));

    return function closeModal() {
      return _ref2.apply(this, arguments);
    };
  }();

  var openModal = function () {
    var _ref3 = (0, _asyncToGenerator3.default)( /*#__PURE__*/_regenerator2.default.mark(function _callee2() {
      return _regenerator2.default.wrap(function _callee2$(_context2) {
        while (1) {
          switch (_context2.prev = _context2.next) {
            case 0:
              _context2.next = 2;
              return setState({
                modalIsOpen: true
              });

            case 2:
              setExternalModalIsOpenTo && setExternalModalIsOpenTo(true);
              onOpenModal && onOpenModal();

            case 4:
            case 'end':
              return _context2.stop();
          }
        }
      }, _callee2, undefined);
    }));

    return function openModal() {
      return _ref3.apply(this, arguments);
    };
  }();
  var toggleModalIsOpen = function () {
    var _ref4 = (0, _asyncToGenerator3.default)( /*#__PURE__*/_regenerator2.default.mark(function _callee3() {
      return _regenerator2.default.wrap(function _callee3$(_context3) {
        while (1) {
          switch (_context3.prev = _context3.next) {
            case 0:
              _context3.next = 2;
              return setState({ modalIsOpen: !modalIsOpen });

            case 2:
              _context3.t0 = setExternalModalIsOpenTo;

              if (!_context3.t0) {
                _context3.next = 6;
                break;
              }

              _context3.next = 6;
              return setExternalModalIsOpenTo(externalModalIsOpen);

            case 6:
              _context3.t1 = onOpenModal && modalIsOpen;

              if (!_context3.t1) {
                _context3.next = 10;
                break;
              }

              _context3.next = 10;
              return onOpenModal();

            case 10:
              _context3.t2 = onCloseModal && !modalIsOpen;

              if (!_context3.t2) {
                _context3.next = 14;
                break;
              }

              _context3.next = 14;
              return onCloseModal();

            case 14:
            case 'end':
              return _context3.stop();
          }
        }
      }, _callee3, undefined);
    }));

    return function toggleModalIsOpen() {
      return _ref4.apply(this, arguments);
    };
  }();

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

    var style = _ref5.style,
        _onClick = _ref5.onClick,
        className = _ref5.className,
        props = (0, _objectWithoutProperties3.default)(_ref5, ['style', 'onClick', 'className']);
    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();
        openModal();
        _onClick && _onClick.apply(undefined, [e].concat(args));
      },
      className: className ? 'modal__trigger ' + className : 'modal__trigger',
      style: style
    }, props);
  };
  var getBackgroundProps = function getBackgroundProps() {
    var _ref6 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

    var _onClick2 = _ref6.onClick,
        style = _ref6.style,
        className = _ref6.className,
        props = (0, _objectWithoutProperties3.default)(_ref6, ['onClick', 'style', 'className']);
    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__background ' + className : 'modal__background',
      style: (0, _extends3.default)({}, styleTemplate.background, style)
    }, props);
  };
  var renderModalDialog = function renderModalDialog() {
    var _ref7 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
        noCloseModalButtonInternal = _ref7.noCloseModalButtonInternal,
        isExposed = _ref7.isExposed;

    return _react2.default.createElement(_ModalDialog2.default, {
      isExposed: isExposed,

      useStyleTemplate: useStyleTemplate,
      customStyleTemplate: customStyleTemplate,
      style: style,
      className: className,
      closeModal: closeModal,
      dataTestId: dataTestId,
      onClick: onClick,
      renderBody: renderBody ? renderBody : children,
      renderHeader: renderHeader,
      renderButtons: renderButtons,
      renderCloseModalButton: renderCloseModalButton,
      noCloseModalButton: noCloseModalButtonInternal,
      onMount: onMount,
      onUnmount: onUnmount
    });
  };
  var renderTriggerFork = function renderTriggerFork(typeofRenderTrigger) {
    switch (typeofRenderTrigger) {
      case 'function':
        return renderTrigger({
          getTriggerProps: getTriggerProps
        });
      case 'string':
        return _react2.default.createElement(
          'div',
          (0, _extends3.default)({}, getTriggerProps()),
          renderTrigger
        );
      default:
        return null;
    }
  };
  return _react2.default.createElement(
    _react.Fragment,
    null,
    renderTriggerFork(typeof renderTrigger === 'undefined' ? 'undefined' : (0, _typeof3.default)(renderTrigger)),
    demoModeIsOn && renderModalDialog({ noCloseModalButtonInternal: true, isExposed: true }),
    _react2.default.createElement(
      _RTGTransition2.default,
      {
        in: typeof externalModalIsOpen !== 'undefined' ? externalModalIsOpen : state.modalIsOpen
      },
      function (_ref8) {
        var style = _ref8.style;
        return _react2.default.createElement(
          _StyledModal.USHIRO,
          (0, _extends3.default)({}, getBackgroundProps({
            style: (0, _extends3.default)({}, style, backgroundProps.style),
            className: backgroundProps.className
          })),
          renderModalDialog()
        );
      }
    )
  );
};

SinglePageModal.defaultProps = {
  noCloseModalButton: false,
  onCloseModal: function onCloseModal() {
    return null;
  },
  onOpenModal: function onOpenModal() {
    return null;
  },
  onMount: function onMount() {
    return null;
  },
  onUnmount: function onUnmount() {
    return null;
  },
  useStyleTemplate: 'default',
  backgroundProps: {}
};

exports.default = SinglePageModal;