@crossed/ui/lib/module/overlay/Modal/Content.js

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

import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import {
  memo,
  useCallback,
  useContext,
  useEffect,
  useMemo,
  useRef
} from "react";
import {
  composeStyles,
  inlineStyle,
  isWeb
} from "@crossed/styled";
import { createStyles } from "@crossed/styled";
import { localContext } from "./context";
import { Sheet } from "../Sheet/index";
import { FadeIn, FadeOut } from "react-native-reanimated";
import { Floating, useFloatingContext } from "../Floating";
import { Focus } from "./Focus";
import {
  alignItemsStyle,
  justifyContentStyle,
  positionStyles
} from "../../styles";
import { composeEventHandlers } from "@crossed/core";
const modalStyles = createStyles(({ colors, space }) => ({
  content: {
    base: {
      zIndex: 1e5,
      borderRadius: 16,
      backgroundColor: colors.background.secondary,
      paddingVertical: space["4xl"],
      margin: "auto"
    }
  }
}));
const styles = createStyles(() => ({
  default: {
    base: { maxHeight: "95%" }
  },
  sm: {
    base: { width: "90%", maxHeight: "90%" },
    media: { md: { maxWidth: 560, height: "auto" } }
  },
  md: {
    base: { width: "90%", maxHeight: "90%" },
    media: { md: { maxWidth: 760, height: "auto" } }
  },
  lg: {
    base: { width: "90%", maxHeight: "90%" },
    media: { md: { maxWidth: 1024, height: "auto" } }
  }
}));
const useKeyDown = (keyEvent, { enable }) => {
  const onKeyDown = useCallback(
    (e) => {
      var _a;
      (_a = keyEvent[e.key]) == null ? void 0 : _a.call(keyEvent);
    },
    [keyEvent]
  );
  useEffect(() => {
    if (enable && isWeb) {
      document.addEventListener("keydown", onKeyDown);
      return () => {
        document.removeEventListener("keydown", onKeyDown);
      };
    }
    return () => {
    };
  }, [onKeyDown, enable]);
};
const SheetComponent = ({
  children,
  containerStyle,
  ...sheetProps
}) => {
  const { open, onClose } = useFloatingContext();
  const { showSheet, closable } = useContext(localContext);
  const refSheet = useRef(null);
  useEffect(() => {
    var _a, _b;
    if (showSheet) {
      if (open) {
        (_a = refSheet.current) == null ? void 0 : _a.show();
      } else {
        (_b = refSheet.current) == null ? void 0 : _b.hide();
      }
    }
  }, [open, showSheet]);
  return /* @__PURE__ */ jsx(Sheet, { ref: refSheet, children: /* @__PURE__ */ jsx(
    Sheet.Content,
    {
      closable: typeof closable === "boolean" ? closable : void 0,
      closeOnTouchBackdrop: typeof closable === "boolean" ? void 0 : closable.closeOnTouchBackdrop,
      ...sheetProps,
      onClose: composeEventHandlers(onClose, sheetProps == null ? void 0 : sheetProps.onClose, {
        checkForDefaultPrevented: false
      }),
      containerStyle,
      children
    }
  ) });
};
const ModalContent = memo(
  ({ children, style, sheetProps }) => {
    const localContextInstance = useContext(localContext);
    const { open, onClose } = useFloatingContext();
    const { size, idRef, showSheet } = localContextInstance;
    const PortalComp = useMemo(
      () => showSheet ? Sheet : Floating.Portal,
      [showSheet]
    );
    useKeyDown({ Escape: onClose }, { enable: open });
    return /* @__PURE__ */ jsx(PortalComp, { children: /* @__PURE__ */ jsx(localContext.Provider, { value: localContextInstance, children: showSheet ? /* @__PURE__ */ jsx(
      SheetComponent,
      {
        ...sheetProps,
        containerStyle: composeStyles(style, sheetProps == null ? void 0 : sheetProps.containerStyle),
        children
      }
    ) : /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
      Focus,
      {
        onEscapeKey: onClose,
        onClickOutside: onClose,
        enabled: open,
        style: composeStyles(
          open && positionStyles.absoluteFill,
          open && inlineStyle(() => ({ base: { display: "flex" } })),
          open && justifyContentStyle.center,
          open && alignItemsStyle.center
        ),
        children: [
          /* @__PURE__ */ jsx(Floating.Overlay, {}),
          /* @__PURE__ */ jsx(
            Floating.Content,
            {
              role: "dialog",
              "aria-labelledby": `${idRef}-title`,
              "aria-describedby": `${idRef}-description`,
              "aria-hidden": !open,
              entering: FadeIn,
              exiting: FadeOut,
              style: composeStyles(
                modalStyles.content,
                styles.default,
                styles[size],
                style
              ),
              children
            }
          )
        ]
      }
    ) }) }) });
  }
);
ModalContent.displayName = "Modal.Content";
export {
  ModalContent,
  modalStyles,
  useKeyDown
};
//# sourceMappingURL=Content.js.map