@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
62 lines • 4.23 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.ModalControlledV2 = 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 useStylesV2_1 = require("../../hooks/useStyles/useStylesV2");
const useSwipeDown_1 = require("../../hooks/useSwipeDown/useSwipeDown");
const errorBoundary_1 = require("../../provider/errorBoundary/errorBoundary");
const fallbackComponent_1 = require("../../provider/errorBoundary/fallbackComponent");
const portal_1 = require("../portal/portal");
const modalStandAlone_1 = require("./modalStandAlone");
const ModalControlledComponent = react_1.default.forwardRef(({ variant, ctv, portalId, ...props }, ref) => {
const styles = (0, useStylesV2_1.useStylesV2)({
styleName: stylesName_1.STYLES_NAME.MODAL_V2,
variantName: variant,
customTokens: 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]');
handleHeaderShadowEffect(modalHeader);
handleContentScrollEffect(modalContent);
handleContentScrollDetection(modalContent);
handleDraggableIconSwipeDown(modalDraggableIcon);
}, []);
react_1.default.useImperativeHandle(ref, () => {
return innerRef?.current;
}, []);
const { scrollableRef: handleContentScrollEffect, shadowRef: handleHeaderShadowEffect } = (0, useScrollEffect_1.useScrollEffect)({
// The box_shadow token is need for the shadow effect
shadowStyles: styles?.headerContainer?.box_shadow,
});
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 }) }));
};
const ModalControlled = react_1.default.forwardRef(ModalBoundary);
exports.ModalControlledV2 = ModalControlled;
//# sourceMappingURL=modalControlled.js.map