@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 • 4.25 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { STYLES_NAME } from '../../constants/stylesName/stylesName';
import { useDeviceHeight } from '../../hooks/useDeviceHeight/useDeviceHeight';
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 { useZoomEffect } from '../../hooks/useZoomEffect/useZoomEffect';
import { ErrorBoundary } from '../../provider/errorBoundary/errorBoundary';
import { FallbackComponent } from '../../provider/errorBoundary/fallbackComponent';
import { Portal } from '../portal/portal';
import { DrawerStandAlone } from './drawerStandAlone';
/* Constants for useScrollEffect */
const SCROLL_DISTANCE = 5;
/* Constants for useZoomEffect */
const MAX_ZOOM = 2.4;
const FOOTER_EDIT_STYLES = [
{ cssPropertyName: 'position', cssPropertyValue: 'static' },
];
const CONTAINER_STYLES_EDIT = [
{ cssPropertyName: 'overflow-y', cssPropertyValue: 'auto' },
];
const CONTENT_STYLES_EDIT = [
{ cssPropertyName: 'overflow-y', cssPropertyValue: 'visible' },
{ cssPropertyName: 'max-height', cssPropertyValue: 'none' },
{ cssPropertyName: 'min-height', cssPropertyValue: 'auto' },
];
const DrawerControlledComponent = React.forwardRef(({ portalId, ...props }, ref) => {
const innerRef = React.useRef(null);
const handleInnerRef = React.useCallback(node => {
innerRef.current = node;
const drawerTitle = innerRef.current?.querySelector('[data-drawer-title]');
const drawerContent = innerRef.current?.querySelector('[data-drawer-content]');
const drawerFooter = innerRef.current?.querySelector('[data-drawer-footer]');
handleDrawerZoomEffect(innerRef.current);
handleTitleShadowEffect(drawerTitle);
handleContentZoomEffect(drawerContent);
handleContentScrollEffect(drawerContent);
handleFooterZoomEffect(drawerFooter);
handleContentScrollDetection(drawerContent);
}, []);
React.useImperativeHandle(ref, () => {
return innerRef?.current;
}, []);
useDeviceHeight();
const handleScroll = (e) => {
props.onContentScroll?.(e);
};
const styles = useStylesV2({
styleName: STYLES_NAME.DRAWER,
variantName: props.variant,
customTokens: props.ctv,
});
const device = useMediaDevice();
const stylesByDevice = styles?.[device];
const { scrollableRef: handleContentScrollEffect, shadowRef: handleTitleShadowEffect } = useScrollEffect({
shadowStyles: stylesByDevice.titleContainer?.box_shadow,
shadowVisible: SCROLL_DISTANCE,
scrollCallback: handleScroll,
});
const handleDrawerZoomEffect = useZoomEffect(CONTAINER_STYLES_EDIT, MAX_ZOOM);
const handleContentZoomEffect = useZoomEffect(CONTENT_STYLES_EDIT, MAX_ZOOM);
const handleFooterZoomEffect = useZoomEffect(FOOTER_EDIT_STYLES, MAX_ZOOM);
const { hasScroll: contentHasScroll, handleScrollDetection: handleContentScrollDetection } = useScrollDetectionWithAutoFocus({
parentElementRef: innerRef,
});
const drawerStructure = (_jsx(DrawerStandAlone, { ...props, ref: handleInnerRef, contentHasScroll: contentHasScroll, device: device, styles: stylesByDevice }));
return portalId ? _jsx(Portal, { wrapperId: portalId, children: drawerStructure }) : drawerStructure;
});
DrawerControlledComponent.displayName = 'DrawerControlledComponent';
const DrawerBoundary = ({ portalId, ...props }, ref) => {
const drawerStructure = (_jsx(DrawerStandAlone, { ...props, ref: ref }));
return (_jsx(ErrorBoundary, { fallBackComponent: _jsxs(FallbackComponent, { children: [portalId ? _jsx(Portal, { wrapperId: portalId, children: drawerStructure }) : drawerStructure, ' '] }), children: _jsx(DrawerControlledComponent, { ...props, ref: ref, portalId: portalId }) }));
};
const DrawerControlled = React.forwardRef(DrawerBoundary);
export { DrawerControlled };
//# sourceMappingURL=drawerControlled.js.map