@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 • 3.44 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useZoomEffect = void 0;
const react_1 = require("react");
const styled_components_1 = require("styled-components");
const breakpoints_1 = require("../../types/breakpoints/breakpoints");
const changeCssProperty_1 = require("../../utils/changeCssProperty/changeCssProperty");
const MAX_ZOOM = 1.25;
const CONDITION = true;
const MEASURE_REM = 16;
const INIT_ZOOM = 1;
const getOriginalCssProps = (element, cssProps) => {
// to store the original css props
const originalCssProps = [];
// get element styles
const computedStyles = window.getComputedStyle(element);
//get only the modify values
[...Array(cssProps.length)].forEach((_, index) => {
const modifyCssPropName = cssProps[index].cssPropertyName;
const modifyCssPropValue = computedStyles[modifyCssPropName];
originalCssProps.push({
cssPropertyName: modifyCssPropName,
cssPropertyValue: modifyCssPropValue,
});
});
// return the original values
return originalCssProps;
};
const getRealDevice = breakpoints => {
const deviceWidth = window.outerWidth / MEASURE_REM;
if (deviceWidth <= breakpoints.S) {
return breakpoints_1.DeviceBreakpointsType.MOBILE;
}
else if (deviceWidth > breakpoints.S && deviceWidth < breakpoints.M) {
return breakpoints_1.DeviceBreakpointsType.TABLET;
}
return breakpoints_1.DeviceBreakpointsType.DESKTOP;
};
const useZoomEffect = (effect, maxZoom = MAX_ZOOM, condition = CONDITION) => {
// inner element ref
const innerElementRef = (0, react_1.useRef)(null);
// original styles ref
const originalStyles = (0, react_1.useRef)([]);
// control the previous zoom value
const prevZoom = (0, react_1.useRef)(INIT_ZOOM);
// indicate the theme breakpoints
const { BREAKPOINTS } = (0, styled_components_1.useTheme)();
const applyEffects = (0, react_1.useCallback)(() => {
const realDevice = getRealDevice(BREAKPOINTS);
if (!condition || !innerElementRef.current || realDevice !== breakpoints_1.DeviceBreakpointsType.DESKTOP) {
return;
}
// set the element
const element = innerElementRef.current;
// storage the original styles
const zoom = window.devicePixelRatio;
const forwardZoom = prevZoom.current <= zoom;
if (zoom > maxZoom) {
(0, changeCssProperty_1.changeCssProperty)(element, effect);
}
else if (!forwardZoom && zoom <= maxZoom) {
// apply the original styles when returning to normal size after zooming in
(0, changeCssProperty_1.changeCssProperty)(element, originalStyles.current);
}
prevZoom.current = zoom;
}, [condition]);
const elementRef = (0, react_1.useCallback)(node => {
if (node) {
innerElementRef.current = node;
if (!originalStyles.current.length) {
originalStyles.current = getOriginalCssProps(node, effect);
}
applyEffects();
window.addEventListener('resize', applyEffects);
}
else {
window.removeEventListener('resize', applyEffects);
innerElementRef.current = null;
}
}, [applyEffects]);
return elementRef;
};
exports.useZoomEffect = useZoomEffect;
//# sourceMappingURL=useZoomEffect.js.map