@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
110 lines • 4.52 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useScrollEffect = void 0;
const react_1 = require("react");
const changeCssProperty_1 = require("../../utils/changeCssProperty/changeCssProperty");
const scrollPercentage_1 = require("../../utils/scrollPercentage/scrollPercentage");
const MAX_PERCENTAGE = 100;
const proportionLimit = 1.25;
const defaultShadow = 'none';
const useScrollEffect = ({ conditional = true, shadowStyles = defaultShadow, shadowVisible = 1, scrollCallback, }) => {
// the scrollable element ref
const innerScrollableRef = (0, react_1.useRef)(null);
// the element ref to change the height and width
const innerResizeRef = (0, react_1.useRef)(null);
// the element ref to change the shadow
const innerShadowRef = (0, react_1.useRef)(null);
// initial size
const resizeHeight = (0, react_1.useRef)(0);
const resizeWidth = (0, react_1.useRef)(0);
// Function to apply the scroll styles effects
const applyEffect = (0, react_1.useCallback)(() => {
if (!innerScrollableRef.current) {
return;
}
const percentage = (0, scrollPercentage_1.scrollPercentage)(innerScrollableRef.current, proportionLimit);
// Code to resize element
if (innerResizeRef.current) {
const subHeight = (percentage * resizeHeight.current) / MAX_PERCENTAGE;
const subWidth = (percentage * resizeWidth.current) / MAX_PERCENTAGE;
const cssProperties = [
{
cssPropertyName: 'min-height',
cssPropertyValue: `calc(${resizeHeight.current}px - ${subHeight}px)`,
},
{
cssPropertyName: 'height',
cssPropertyValue: `calc(${resizeHeight.current}px - ${subHeight}px)`,
},
{
cssPropertyName: 'min-width',
cssPropertyValue: `calc(${resizeWidth.current}px - ${subWidth}px)`,
},
{
cssPropertyName: 'width',
cssPropertyValue: `calc(${resizeWidth.current}px - ${subWidth}px)`,
},
];
(0, changeCssProperty_1.changeCssProperty)(innerResizeRef.current, cssProperties);
}
// Code to change shadow box
if (innerShadowRef.current) {
if (percentage > shadowVisible) {
const shadow = [{ cssPropertyName: 'box-shadow', cssPropertyValue: shadowStyles }];
(0, changeCssProperty_1.changeCssProperty)(innerShadowRef.current, shadow);
}
else {
const shadow = [{ cssPropertyName: 'box-shadow', cssPropertyValue: defaultShadow }];
(0, changeCssProperty_1.changeCssProperty)(innerShadowRef.current, shadow);
}
}
}, [conditional, shadowStyles]);
const scrollableRef = (0, react_1.useCallback)(node => {
if (node) {
innerScrollableRef.current = node;
applyEffect();
innerScrollableRef.current?.addEventListener('scroll', e => {
applyEffect();
scrollCallback?.(e);
});
}
else {
innerScrollableRef.current?.removeEventListener('scroll', e => {
applyEffect();
scrollCallback?.(e);
});
innerScrollableRef.current = null;
}
}, [applyEffect, scrollCallback]);
const resizeRef = (0, react_1.useCallback)(node => {
const handleLoad = () => {
if (innerResizeRef.current) {
resizeHeight.current = innerResizeRef.current.clientHeight;
resizeWidth.current = innerResizeRef.current.clientWidth;
}
};
if (node) {
innerResizeRef.current = node;
innerResizeRef.current?.addEventListener('load', handleLoad);
}
else {
innerResizeRef.current?.removeEventListener('load', handleLoad);
innerResizeRef.current = null;
}
}, []);
const shadowRef = (0, react_1.useCallback)(node => {
if (node) {
innerShadowRef.current = node;
}
else {
innerShadowRef.current = null;
}
}, []);
return {
scrollableRef,
resizeRef,
shadowRef,
};
};
exports.useScrollEffect = useScrollEffect;
//# sourceMappingURL=useScrollEffect.js.map