@r3l/app/lib/modules/ui/modals/modal.component.js

Relevant App

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _typeof = require("@babel/runtime/helpers/typeof");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireWildcard(require("react"));

var _reactRedux = require("react-redux");

var _propTypes = _interopRequireDefault(require("prop-types"));

var _reactDom = _interopRequireDefault(require("react-dom"));

var _styled = require("../../styled");

var _navigation = require("../../navigation/navigation.actions");

var _bodyScrollLock = require("body-scroll-lock");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

var DEFAULT_WIDTH = 95;
var DEFAULT_PADDING = 6;
var ModalParent = (0, _styled.styled)(_styled.View)({
  position: 'fixed',
  top: 0,
  left: 0,
  width: '100vw',
  maxWidth: '100vw',
  height: '100vh',
  bg: 'modalBackground',
  zIndex: 100,
  display: 'flex',
  justifyContent: 'flex-start',
  alignItems: 'center',
  willChainge: 'transform',
  overflowY: 'scroll',
  overflowX: 'hidden',
  webkitOverflowScrolling: 'touch'
});
var ModalScroll = (0, _styled.styled)(_styled.View)({
  position: 'relative',
  display: 'flex',
  alignItems: 'center',
  minHeight: '100vh',
  justifyContent: 'center'
});
ModalComponent.propTypes = {
  header: _propTypes.default.object,
  title: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.string]),
  hideX: _propTypes.default.bool,
  children: _propTypes.default.node,
  footer: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
  maxWidth: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.array]),
  padding: _propTypes.default.number,
  close: _propTypes.default.func
};

function ModalComponent(props) {
  var footer = props.footer,
      children = props.children,
      hideX = props.hideX,
      maxWidth = props.maxWidth,
      padding = props.padding,
      header = props.header,
      title = props.title;
  var dispatch = (0, _reactRedux.useDispatch)();

  var close = props.close || function () {
    return dispatch((0, _navigation.hideModal)());
  };

  var modalElement = (0, _react.useRef)(null);
  var headerEl = header || title;
  var footerEl = typeof footer === 'function' ? footer(props) : footer;
  (0, _react.useEffect)(function () {
    var el = modalElement.current;
    (0, _bodyScrollLock.disableBodyScroll)(el);
    return function () {
      return (0, _bodyScrollLock.enableBodyScroll)(el);
    };
  }, [modalElement]);
  var closeModal = (0, _react.useCallback)(function () {
    return close();
  }, [close]);
  (0, _react.useEffect)(function () {
    var escFunction = function escFunction(e) {
      return e.keyCode === 27 ? closeModal() : null;
    };

    document.addEventListener('keydown', escFunction, false);
    return function () {
      return document.removeEventListener('keydown', escFunction, false);
    };
  }, [closeModal]);
  return /*#__PURE__*/_react.default.createElement(ModalParent, {
    onClick: closeModal,
    ref: modalElement
  }, /*#__PURE__*/_react.default.createElement(ModalScroll, {
    ignoreScrollLock: true
  }, /*#__PURE__*/_react.default.createElement(_styled.View, {
    ignoreScrollLock: true,
    sx: {
      px: padding || [3, DEFAULT_PADDING],
      py: padding || DEFAULT_PADDING,
      zIndex: 10,
      maxWidth: '100vw',
      width: (maxWidth === null || maxWidth === void 0 ? void 0 : maxWidth.map(function (w) {
        return w * 8;
      })) || ['100vw', DEFAULT_WIDTH * 8],
      bg: 'white',
      minHeight: [maxWidth !== null && maxWidth !== void 0 && maxWidth.map(function (w) {
        return w * 8;
      }) ? 'auto' : '100vh', 'auto'],
      variant: 'borders.popupBorder',
      my: [0, 6],
      flexDirection: 'column',
      justifyContent: ['center', 'space-between']
    },
    onClick: function onClick(e) {
      return e.stopPropagation();
    }
  }, hideX ? null : /*#__PURE__*/_react.default.createElement(_styled.Touchable, {
    onPress: closeModal,
    style: {
      zIndex: 10,
      position: 'absolute',
      top: 0,
      right: 0
    }
  }, /*#__PURE__*/_react.default.createElement(_styled.CloseX, {
    sx: {
      width: 20.01,
      height: 20.01,
      top: [4, 6],
      right: [3, 6]
    },
    resizeMode: 'contain',
    source: require("../../../../public/img/x.png")
  })), headerEl ? /*#__PURE__*/_react.default.createElement(_styled.Header, {
    sx: {
      pr: 5,
      mb: 3,
      flexShrink: 1
    }
  }, headerEl) : null, children, footerEl && /*#__PURE__*/_react.default.createElement(_styled.View, {
    sx: {
      mt: 6
    }
  }, footerEl))));
}

var _default = function _default(props) {
  var modal = (0, _reactRedux.useSelector)(function (state) {
    return state.navigation.modal;
  });
  var name = props.name;
  var visible = name && name === modal;
  return visible && document ? /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/_react.default.createElement(ModalComponent, props), document.body) : null;
};

exports.default = _default;
//# sourceMappingURL=modal.component.js.map