@crossed/ui/lib/module/overlay/Floating/Overlay.js

A universal & performant styling library for React Native, Next.js & React

import { jsx } from "react/jsx-runtime";
import { composeStyles, createStyles } from "@crossed/styled";
import { useFloatingContext } from "./context";
import Animated, {
  FadeIn,
  FadeOut
} from "react-native-reanimated";
import { Box } from "../../layout/Box";
import { memo } from "react";
const overlayStyles = createStyles(({ colors }) => ({
  root: {
    base: {
      position: "absolute",
      backgroundColor: colors.black,
      opacity: 0.7,
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      zIndex: 1
    },
    web: { base: { position: "fixed" } }
  }
}));
const FloatingOverlay = memo(
  ({ style, animatedProps }) => {
    const { open, onClose, closeOverlayPress } = useFloatingContext();
    return open ? /* @__PURE__ */ jsx(
      Animated.View,
      {
        onPointerUp: closeOverlayPress ? onClose : void 0,
        entering: FadeIn,
        exiting: FadeOut,
        ...animatedProps,
        style: [
          { top: 0, bottom: 0, left: 0, right: 0, position: "absolute" },
          animatedProps == null ? void 0 : animatedProps.style
        ],
        children: /* @__PURE__ */ jsx(Box, { style: composeStyles(overlayStyles.root, style) })
      }
    ) : null;
  }
);
FloatingOverlay.displayName = "Floating.Overlay";
export {
  FloatingOverlay,
  overlayStyles
};
//# sourceMappingURL=Overlay.js.map