@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
54 lines • 5.32 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.OperativeLayoutStandAlone = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const breakpoints_1 = require("../../types/breakpoints/breakpoints");
const grid_styled_1 = require("../grid/grid.styled");
// helper
const getBgColor_1 = require("./helpers/getBgColor");
const getHorizontalMargin_1 = require("./helpers/getHorizontalMargin");
const operativeLayout_styled_1 = require("./operativeLayout.styled");
const operativeLayout_1 = require("./types/operativeLayout");
const OperativeLayoutStandAlone = ({ contentBgColor, contentPosition, contentOverflowColor, contentHeight, asideContent, mainContent, styles, columnsConfig, gridConfig, minMarginRightAndLeft, maxWidthToApply, device, horizontalExternalMargin, }) => {
const columnsConfiguration = columnsConfig ?? styles.defaultColumnsConfig;
const gridConfiguration = gridConfig ?? styles.gridConfig;
const { main, aside } = columnsConfiguration ?? {};
//Allow the user to establish a minimun margin when the user resize the screen.
const marginRightAndLeftContent = minMarginRightAndLeft || gridConfiguration?.[breakpoints_1.DeviceBreakpointsType.DESKTOP]?.gap;
const [mainContainerWidth, setMainContainerWidth] = react_1.default.useState(null);
const [asideContainerPosition, setAsideContainerPosition] = react_1.default.useState(null);
const mainContainerRef = react_1.default.useRef(null);
const timeoutRef = react_1.default.useRef();
// Calculate the width of the parent container
const getMainContainerWidth = react_1.default.useCallback(() => {
clearTimeout(timeoutRef.current);
timeoutRef.current = setTimeout(() => {
if (mainContainerRef.current !== null) {
setMainContainerWidth(mainContainerRef.current.getBoundingClientRect().width);
}
}, 200);
}, []);
// Calculate the position of the element on the right
const asideContainerRef = react_1.default.useCallback(node => {
if (node !== null) {
setAsideContainerPosition(node.offsetLeft);
}
}, [contentPosition, mainContainerWidth]);
// A listener for when the screen size changes
react_1.default.useEffect(() => {
getMainContainerWidth();
window.addEventListener('resize', getMainContainerWidth);
return () => window.removeEventListener('resize', getMainContainerWidth);
}, []);
// Auxiliary function to distribute the colors in the components
const { bgColor, leftBgColor, rightBgColor } = (0, getBgColor_1.getBgColor)(mainContainerWidth, asideContainerPosition, contentBgColor, contentOverflowColor, styles.mainContainerColor, styles.asideContainerColor, device);
const margin = (0, getHorizontalMargin_1.getHorizontalMargin)(horizontalExternalMargin);
const width = (() => (contentOverflowColor ? 'fit-content' : '100%'))();
return ((0, jsx_runtime_1.jsx)(operativeLayout_styled_1.OperativeLayoutColor, { ref: mainContainerRef, "$align": contentPosition, "$color": bgColor, "$contentOverflowColor": contentOverflowColor, "$height": contentHeight, "$margin": margin, "$paddingBottom": styles.paddingBottomSize, "$width": maxWidthToApply, children: (0, jsx_runtime_1.jsx)(operativeLayout_styled_1.OperativeLayoutContainer, { "$width": width, maxWidthParentContainer: maxWidthToApply, children: (0, jsx_runtime_1.jsxs)(grid_styled_1.CustomGridStyled, { addPaddingForLayout: true, config: gridConfiguration, children: [(0, jsx_runtime_1.jsx)(grid_styled_1.CustomGridItem, { as: operativeLayout_1.OperativeLayoutRoleType.main, containerColor: leftBgColor, desktop: asideContent ? main?.[breakpoints_1.DeviceBreakpointsType.DESKTOP] : main?.DESKTOP_FULL, height: contentHeight, mobile: main?.[breakpoints_1.DeviceBreakpointsType.MOBILE], paddingRight: styles.paddingRightGridItem, tablet: main?.[breakpoints_1.DeviceBreakpointsType.TABLET], children: (0, jsx_runtime_1.jsx)(grid_styled_1.ContentCustomGridItem, { isMainContainer: true, marginsContainer: gridConfiguration?.[breakpoints_1.DeviceBreakpointsType.DESKTOP]?.margin, minMarginRightAndLeft: marginRightAndLeftContent, paddingLeft: marginRightAndLeftContent, children: mainContent }) }), asideContent && ((0, jsx_runtime_1.jsx)(grid_styled_1.CustomGridItem, { ref: asideContainerRef, as: operativeLayout_1.OperativeLayoutRoleType.aside, containerColor: rightBgColor, desktop: aside?.[breakpoints_1.DeviceBreakpointsType.DESKTOP], height: contentHeight, mobile: aside?.[breakpoints_1.DeviceBreakpointsType.MOBILE], paddingLeft: styles.paddingLeftGridItem, tablet: aside?.[breakpoints_1.DeviceBreakpointsType.TABLET], children: (0, jsx_runtime_1.jsx)(grid_styled_1.ContentCustomGridItem, { isMainContainer: false, marginsContainer: gridConfiguration?.[breakpoints_1.DeviceBreakpointsType.DESKTOP]?.margin, minMarginRightAndLeft: marginRightAndLeftContent, paddingRight: marginRightAndLeftContent, children: asideContent }) }))] }) }) }));
};
exports.OperativeLayoutStandAlone = OperativeLayoutStandAlone;
//# sourceMappingURL=operativeLayoutStandAlone.js.map