@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
72 lines • 4.47 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import React from 'react';
import { STYLES_NAME } from '../../constants/stylesName/stylesName';
import { useMediaDevice } from '../../hooks/useMediaDevice/useMediaDevice';
import { useScrollDetectionWithAutoFocus } from '../../hooks/useScrollDetectionWithAutoFocus/useScrollDetectionWithAutoFocus';
import { useScrollEffect } from '../../hooks/useScrollEffect/useScrollEffect';
import { useStyles } from '../../hooks/useStyles/useStyles';
import { useSwipeDown } from '../../hooks/useSwipeDown/useSwipeDown';
import { useZoomEffect } from '../../hooks/useZoomEffect/useZoomEffect';
import { ErrorBoundary } from '../../provider/errorBoundary/errorBoundary';
import { FallbackComponent } from '../../provider/errorBoundary/fallbackComponent';
import { DeviceBreakpointsType } from '../../types/breakpoints/breakpoints';
import { Portal } from '../portal/portal';
import { ModalStandAlone } from './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.forwardRef(({ variant, ctv, portalId, ...props }, ref) => {
const styles = useStyles(STYLES_NAME.MODAL, variant, ctv);
const device = useMediaDevice();
const innerRef = React.useRef(null);
const handleInnerRef = React.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.useImperativeHandle(ref, () => {
return innerRef?.current;
}, []);
const isTabletOrMobile = React.useMemo(() => device !== DeviceBreakpointsType.DESKTOP && device !== DeviceBreakpointsType.LARGE_DESKTOP, [device]);
const { scrollableRef: handleContentScrollEffect, resizeRef: handleIllustrationResizeEffect, shadowRef: handleHeaderShadowEffect, } = useScrollEffect({
conditional: isTabletOrMobile,
shadowStyles: styles.headerContainer?.box_shadow,
});
const handleModalZoomEffect = useZoomEffect(CONTAINER_STYLES_EDIT, MAX_ZOOM);
const handleContentZoomEffect = useZoomEffect(CONTENT_STYLES_EDIT, MAX_ZOOM);
const { setPopoverRef: handlePopoverSwipeDown, setDragIconRef: handleDraggableIconSwipeDown } = useSwipeDown(props.popover?.animationOptions, () => props.onClose?.());
const { hasScroll: contentHasScroll, handleScrollDetection: handleContentScrollDetection } = useScrollDetectionWithAutoFocus({
parentElementRef: innerRef,
});
const handlePopoverCloseInternally = () => {
props.popover?.onCloseInternally?.();
props.onClose?.();
};
const modalStructure = (_jsx(ModalStandAlone, { ...props, ref: handleInnerRef, contentHasScroll: contentHasScroll, device: device, popover: { ...props.popover, forwardedRef: handlePopoverSwipeDown }, styles: styles, onPopoverCloseInternally: handlePopoverCloseInternally }));
return portalId ? _jsx(Portal, { wrapperId: portalId, children: modalStructure }) : modalStructure;
});
ModalControlledComponent.displayName = 'ModalControlledComponent';
const ModalBoundary = ({ portalId, ...props }, ref) => {
const modalStructure = _jsx(ModalStandAlone, { ...props, ref: ref });
return (_jsx(ErrorBoundary, { fallBackComponent: _jsx(FallbackComponent, { children: portalId ? _jsx(Portal, { wrapperId: portalId, children: modalStructure }) : modalStructure }), children: _jsx(ModalControlledComponent, { ...props, ref: ref, portalId: portalId }) }));
};
/**
* @deprecated Try the new ModalV2 component
*
**/
const ModalControlled = React.forwardRef(ModalBoundary);
export { ModalControlled };
//# sourceMappingURL=modalControlled.js.map