@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
34 lines • 1.89 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.getBgColor = void 0;
const breakpoints_1 = require("../../../types/breakpoints/breakpoints");
const MAX_PERCENTAGE = 100;
const getBgColor = (mainContainerWidth, asideContainerPosition, contentBgColor, contentOverflowColor, themeLeftColor, themeRightColor, device) => {
// If the width of the content does not exist, it does not execute the function
if (!mainContainerWidth) {
return {};
}
// The contentBgColor can be a string, in which case it returns the following object
if (typeof contentBgColor === 'string') {
return contentOverflowColor
? { bgColor: contentBgColor }
: { leftBgColor: contentBgColor, rightBgColor: contentBgColor };
}
const isObject = typeof contentBgColor === 'object';
const leftColor = isObject ? contentBgColor.leftContainerColor : themeLeftColor;
const rightColor = isObject ? contentBgColor.rightContainerColor : themeRightColor;
// When the content does not overflow the color, it just paints the color in the left and right containers
if (!contentOverflowColor || device !== breakpoints_1.DeviceBreakpointsType.DESKTOP) {
return { leftBgColor: leftColor, rightBgColor: rightColor };
}
// If the side content does not exist, the color on the left will be the main color of the component
if (!asideContainerPosition) {
return { bgColor: leftColor };
}
// If the component is two-color, it will return this string for the styled component
const sidePercentage = (asideContainerPosition * MAX_PERCENTAGE) / mainContainerWidth;
const color = `linear-gradient(to right, ${leftColor} ${sidePercentage}%, ${rightColor} ${sidePercentage}% 100%)`;
return { bgColor: color };
};
exports.getBgColor = getBgColor;
//# sourceMappingURL=getBgColor.js.map