@tamagui/react-native-web-lite/dist/esm/Modal/ModalContent.js

React Native for Web

import * as React from "react";
import { StyleSheet, canUseDOM } from "@tamagui/react-native-web-internals";
import { View } from "../View";
const ModalContent = /* @__PURE__ */ React.forwardRef((props, forwardedRef) => {
  const { active, children, onRequestClose, transparent, ...rest } = props;
  React.useEffect(() => {
    if (canUseDOM) {
      var closeOnEscape = (e) => {
        active && e.key === "Escape" && (e.stopPropagation(), onRequestClose && onRequestClose());
      };
      return document.addEventListener("keyup", closeOnEscape, !1), () => document.removeEventListener("keyup", closeOnEscape, !1);
    }
  }, [active, onRequestClose]);
  var style = React.useMemo(() => [styles.modal, transparent ? styles.modalTransparent : styles.modalOpaque], [transparent]);
  return /* @__PURE__ */ React.createElement(
    View,
    {
      ...rest,
      accessibilityModal: !0,
      accessibilityRole: active ? "dialog" : null,
      ref: forwardedRef,
      style
    },
    /* @__PURE__ */ React.createElement(
      View,
      {
        style: styles.container
      },
      children
    )
  );
});
var styles = StyleSheet.create({
  modal: {
    position: "fixed",
    top: 0,
    right: 0,
    bottom: 0,
    left: 0
  },
  modalTransparent: {
    backgroundColor: "transparent"
  },
  modalOpaque: {
    backgroundColor: "white"
  },
  container: {
    top: 0,
    flex: 1
  }
});
export {
  ModalContent
};
//# sourceMappingURL=ModalContent.js.map