@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
84 lines • 5.03 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.DrawerControlled = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const stylesName_1 = require("../../constants/stylesName/stylesName");
const useDeviceHeight_1 = require("../../hooks/useDeviceHeight/useDeviceHeight");
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 useZoomEffect_1 = require("../../hooks/useZoomEffect/useZoomEffect");
const errorBoundary_1 = require("../../provider/errorBoundary/errorBoundary");
const fallbackComponent_1 = require("../../provider/errorBoundary/fallbackComponent");
const portal_1 = require("../portal/portal");
const drawerStandAlone_1 = require("./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_1.default.forwardRef(({ portalId, ...props }, ref) => {
const innerRef = react_1.default.useRef(null);
const handleInnerRef = react_1.default.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_1.default.useImperativeHandle(ref, () => {
return innerRef?.current;
}, []);
(0, useDeviceHeight_1.useDeviceHeight)();
const handleScroll = (e) => {
props.onContentScroll?.(e);
};
const styles = (0, useStylesV2_1.useStylesV2)({
styleName: stylesName_1.STYLES_NAME.DRAWER,
variantName: props.variant,
customTokens: props.ctv,
});
const device = (0, useMediaDevice_1.useMediaDevice)();
const stylesByDevice = styles?.[device];
const { scrollableRef: handleContentScrollEffect, shadowRef: handleTitleShadowEffect } = (0, useScrollEffect_1.useScrollEffect)({
shadowStyles: stylesByDevice.titleContainer?.box_shadow,
shadowVisible: SCROLL_DISTANCE,
scrollCallback: handleScroll,
});
const handleDrawerZoomEffect = (0, useZoomEffect_1.useZoomEffect)(CONTAINER_STYLES_EDIT, MAX_ZOOM);
const handleContentZoomEffect = (0, useZoomEffect_1.useZoomEffect)(CONTENT_STYLES_EDIT, MAX_ZOOM);
const handleFooterZoomEffect = (0, useZoomEffect_1.useZoomEffect)(FOOTER_EDIT_STYLES, MAX_ZOOM);
const { hasScroll: contentHasScroll, handleScrollDetection: handleContentScrollDetection } = (0, useScrollDetectionWithAutoFocus_1.useScrollDetectionWithAutoFocus)({
parentElementRef: innerRef,
});
const drawerStructure = ((0, jsx_runtime_1.jsx)(drawerStandAlone_1.DrawerStandAlone, { ...props, ref: handleInnerRef, contentHasScroll: contentHasScroll, device: device, styles: stylesByDevice }));
return portalId ? (0, jsx_runtime_1.jsx)(portal_1.Portal, { wrapperId: portalId, children: drawerStructure }) : drawerStructure;
});
DrawerControlledComponent.displayName = 'DrawerControlledComponent';
const DrawerBoundary = ({ portalId, ...props }, ref) => {
const drawerStructure = ((0, jsx_runtime_1.jsx)(drawerStandAlone_1.DrawerStandAlone, { ...props, ref: ref }));
return ((0, jsx_runtime_1.jsx)(errorBoundary_1.ErrorBoundary, { fallBackComponent: (0, jsx_runtime_1.jsxs)(fallbackComponent_1.FallbackComponent, { children: [portalId ? (0, jsx_runtime_1.jsx)(portal_1.Portal, { wrapperId: portalId, children: drawerStructure }) : drawerStructure, ' '] }), children: (0, jsx_runtime_1.jsx)(DrawerControlledComponent, { ...props, ref: ref, portalId: portalId }) }));
};
const DrawerControlled = react_1.default.forwardRef(DrawerBoundary);
exports.DrawerControlled = DrawerControlled;
//# sourceMappingURL=drawerControlled.js.map