@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";
const modalStyles = createStyles(({ colors, space }) => ({
  content: {
    base: {
      zIndex: 1e5,
      borderRadius: 16,
      backgroundColor: colors.background.secondary,
      paddingVertical: space.xl,
      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,
  style
}) => {
  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,
    {
      onClose,
      containerStyle: style,
      closable: typeof closable === "boolean" ? closable : void 0,
      closeOnTouchBackdrop: typeof closable === "boolean" ? void 0 : closable.closeOnTouchBackdrop,
      children
    }
  ) });
};
const ModalContent = memo(({ children, style }) => {
  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, { style, 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