@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
56 lines • 3.53 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 { useStylesV2 } from '../../hooks/useStyles/useStylesV2';
import { useSwipeDown } from '../../hooks/useSwipeDown/useSwipeDown';
import { ErrorBoundary } from '../../provider/errorBoundary/errorBoundary';
import { FallbackComponent } from '../../provider/errorBoundary/fallbackComponent';
import { Portal } from '../portal/portal';
import { ModalStandAlone } from './modalStandAlone';
const ModalControlledComponent = React.forwardRef(({ variant, ctv, portalId, ...props }, ref) => {
const styles = useStylesV2({
styleName: STYLES_NAME.MODAL_V2,
variantName: variant,
customTokens: 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]');
handleHeaderShadowEffect(modalHeader);
handleContentScrollEffect(modalContent);
handleContentScrollDetection(modalContent);
handleDraggableIconSwipeDown(modalDraggableIcon);
}, []);
React.useImperativeHandle(ref, () => {
return innerRef?.current;
}, []);
const { scrollableRef: handleContentScrollEffect, shadowRef: handleHeaderShadowEffect } = useScrollEffect({
// The box_shadow token is need for the shadow effect
shadowStyles: styles?.headerContainer?.box_shadow,
});
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 }) }));
};
const ModalControlled = React.forwardRef(ModalBoundary);
export { ModalControlled as ModalControlledV2 };
//# sourceMappingURL=modalControlled.js.map