react-native-multiple-modals/lib/commonjs/ModalView.web.js

Native implementation with the ability to display multiple Modals

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ModalView = exports.DismissalSource = void 0;
var _react = require("react");
var _reactDom = require("react-dom");
var _reactNative = require("react-native");
var _useID = require("./hooks/useID");
var _useModalRegistry = require("./hooks/useModalRegistry");
var _jsxRuntime = require("react/jsx-runtime");
const backdropAccessibilityLabel = 'Backdrop';
const backdropAccessibilityHint = 'Double-tap to close the modal';
const defaultBackdropColor = 'rgba(0, 0, 0, 0.3)';
let DismissalSource = exports.DismissalSource = /*#__PURE__*/function (DismissalSource) {
  DismissalSource["BackButton"] = "BackButton";
  DismissalSource["Backdrop"] = "Backdrop";
  return DismissalSource;
}({});
const ModalView = ({
  modalId,
  children,
  renderBackdrop,
  onRequestDismiss,
  contentContainerStyle,
  showBackdrop = true,
  BackdropPressableComponent = _reactNative.Pressable,
  backdropColor = defaultBackdropColor,
  animationType = 'none'
}) => {
  const currentModalId = (0, _useID.useID)(modalId);
  const {
    modals,
    isBackdropVisible
  } = (0, _useModalRegistry.useModalRegistry)(currentModalId);
  const modalIsOpen = modals.has(currentModalId);
  const animatedStyle = (0, _react.useMemo)(() => {
    if (animationType === 'fade') {
      return {
        opacity: modalIsOpen ? 1 : 0,
        transition: 'opacity 0.3s'
      };
    }
    if (animationType === 'slide') {
      return {
        transform: modalIsOpen ? 'translateY(0)' : 'translateY(100%)',
        opacity: modalIsOpen ? 1 : 0,
        transition: 'transform 0.3s, opacity 0.3s'
      };
    }
    return {};
  }, [animationType, modalIsOpen]);
  return /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
    style: [showBackdrop && styles.backdropContainer],
    children: [showBackdrop && /*#__PURE__*/(0, _jsxRuntime.jsx)(BackdropPressableComponent, {
      accessibilityLabel: backdropAccessibilityLabel,
      accessibilityHint: backdropAccessibilityHint,
      style: [styles.backdropPressable, !isBackdropVisible && styles.backdropHidden],
      onPress: () => onRequestDismiss?.(DismissalSource.Backdrop),
      children: renderBackdrop ? renderBackdrop() : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
        style: [styles.flex, {
          backgroundColor: backdropColor
        }]
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
      role: "dialog",
      pointerEvents: "box-none",
      style: [styles.content, animatedStyle, contentContainerStyle],
      children: children
    })]
  }), document.body);
};
exports.ModalView = ModalView;
const styles = _reactNative.StyleSheet.create({
  backdropPressable: {
    flex: 1,
    opacity: 1,
    alignSelf: 'stretch'
  },
  backdropHidden: {
    opacity: 0
  },
  flex: {
    flex: 1
  },
  content: {
    alignSelf: 'center',
    flex: 1,
    height: '100%',
    position: 'absolute',
    zIndex: 1
  },
  backdropContainer: {
    bottom: 0,
    display: 'flex',
    flexDirection: 'column',
    left: 0,
    position: 'fixed',
    right: 0,
    top: 0,
    zIndex: 0
  }
});
//# sourceMappingURL=ModalView.web.js.map