@kubit-ui-web/react-components
Version:
Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience
78 lines • 5.27 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ModalControlled = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const stylesName_1 = require("../../constants/stylesName/stylesName");
const useMediaDevice_1 = require("../../hooks/useMediaDevice/useMediaDevice");
const useScrollDetectionWithAutoFocus_1 = require("../../hooks/useScrollDetectionWithAutoFocus/useScrollDetectionWithAutoFocus");
const useScrollEffect_1 = require("../../hooks/useScrollEffect/useScrollEffect");
const useStyles_1 = require("../../hooks/useStyles/useStyles");
const useSwipeDown_1 = require("../../hooks/useSwipeDown/useSwipeDown");
const useZoomEffect_1 = require("../../hooks/useZoomEffect/useZoomEffect");
const errorBoundary_1 = require("../../provider/errorBoundary/errorBoundary");
const fallbackComponent_1 = require("../../provider/errorBoundary/fallbackComponent");
const breakpoints_1 = require("../../types/breakpoints/breakpoints");
const portal_1 = require("../portal/portal");
const modalStandAlone_1 = require("./modalStandAlone");
const MAX_ZOOM = 2.9;
const CONTAINER_STYLES_EDIT = [
{ cssPropertyName: 'overflow-y', cssPropertyValue: 'auto' },
];
const CONTENT_STYLES_EDIT = [
{ cssPropertyName: 'overflow-y', cssPropertyValue: 'visible' },
];
const ModalControlledComponent = react_1.default.forwardRef(({ variant, ctv, portalId, ...props }, ref) => {
const styles = (0, useStyles_1.useStyles)(stylesName_1.STYLES_NAME.MODAL, variant, ctv);
const device = (0, useMediaDevice_1.useMediaDevice)();
const innerRef = react_1.default.useRef(null);
const handleInnerRef = react_1.default.useCallback(node => {
innerRef.current = node;
const modalHeader = innerRef.current?.querySelector('[data-modal-header]');
const modalContent = innerRef.current?.querySelector('[data-modal-content]');
const modalDraggableIcon = innerRef.current?.querySelector('[data-modal-draggable-icon]');
const modalIllustration = innerRef.current?.querySelector('[data-modal-ilustration-container]')?.firstElementChild;
handleModalZoomEffect(innerRef.current);
handleHeaderShadowEffect(modalHeader);
handleContentScrollEffect(modalContent);
handleIllustrationResizeEffect(modalIllustration);
handleContentZoomEffect(modalContent);
handleContentScrollDetection(modalContent);
handleDraggableIconSwipeDown(modalDraggableIcon);
}, []);
react_1.default.useImperativeHandle(ref, () => {
return innerRef?.current;
}, []);
const isTabletOrMobile = react_1.default.useMemo(() => device !== breakpoints_1.DeviceBreakpointsType.DESKTOP && device !== breakpoints_1.DeviceBreakpointsType.LARGE_DESKTOP, [device]);
const { scrollableRef: handleContentScrollEffect, resizeRef: handleIllustrationResizeEffect, shadowRef: handleHeaderShadowEffect, } = (0, useScrollEffect_1.useScrollEffect)({
conditional: isTabletOrMobile,
shadowStyles: styles.headerContainer?.box_shadow,
});
const handleModalZoomEffect = (0, useZoomEffect_1.useZoomEffect)(CONTAINER_STYLES_EDIT, MAX_ZOOM);
const handleContentZoomEffect = (0, useZoomEffect_1.useZoomEffect)(CONTENT_STYLES_EDIT, MAX_ZOOM);
const { setPopoverRef: handlePopoverSwipeDown, setDragIconRef: handleDraggableIconSwipeDown } = (0, useSwipeDown_1.useSwipeDown)(props.popover?.animationOptions, () => props.onClose?.());
const { hasScroll: contentHasScroll, handleScrollDetection: handleContentScrollDetection } = (0, useScrollDetectionWithAutoFocus_1.useScrollDetectionWithAutoFocus)({
parentElementRef: innerRef,
});
const handlePopoverCloseInternally = () => {
props.popover?.onCloseInternally?.();
props.onClose?.();
};
const modalStructure = ((0, jsx_runtime_1.jsx)(modalStandAlone_1.ModalStandAlone, { ...props, ref: handleInnerRef, contentHasScroll: contentHasScroll, device: device, popover: { ...props.popover, forwardedRef: handlePopoverSwipeDown }, styles: styles, onPopoverCloseInternally: handlePopoverCloseInternally }));
return portalId ? (0, jsx_runtime_1.jsx)(portal_1.Portal, { wrapperId: portalId, children: modalStructure }) : modalStructure;
});
ModalControlledComponent.displayName = 'ModalControlledComponent';
const ModalBoundary = ({ portalId, ...props }, ref) => {
const modalStructure = (0, jsx_runtime_1.jsx)(modalStandAlone_1.ModalStandAlone, { ...props, ref: ref });
return ((0, jsx_runtime_1.jsx)(errorBoundary_1.ErrorBoundary, { fallBackComponent: (0, jsx_runtime_1.jsx)(fallbackComponent_1.FallbackComponent, { children: portalId ? (0, jsx_runtime_1.jsx)(portal_1.Portal, { wrapperId: portalId, children: modalStructure }) : modalStructure }), children: (0, jsx_runtime_1.jsx)(ModalControlledComponent, { ...props, ref: ref, portalId: portalId }) }));
};
/**
* @deprecated Try the new ModalV2 component
*
**/
const ModalControlled = react_1.default.forwardRef(ModalBoundary);
exports.ModalControlled = ModalControlled;
//# sourceMappingURL=modalControlled.js.map