@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
62 lines • 3.15 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import React from 'react';
import { STYLES_NAME } from '../../constants/stylesName/stylesName';
import { useManageState } from '../../hooks/useManageState/useManageState';
import { useStyles } from '../../hooks/useStyles/useStyles';
import { ErrorBoundary } from '../../provider/errorBoundary/errorBoundary';
import { FallbackComponent } from '../../provider/errorBoundary/fallbackComponent';
import { BackToTopStandAlone } from './backToTopStandAlone';
import { BackToTopStateType } from './types/state';
const BackToTopControlledComponent = React.forwardRef(({ variant, ctv, stopElement, visibilityScrollOffset = 1, bottomPosition = 40, ...props }, ref) => {
const styles = useStyles(STYLES_NAME.BACK_TO_TOP, variant, ctv);
const innerRef = React.useRef(null);
React.useImperativeHandle(ref, () => {
return innerRef?.current;
}, []);
const { state, setRef } = useManageState({
states: Object.values(BackToTopStateType),
ref: innerRef,
});
const handleScrollListener = React.useCallback(() => {
const stop = stopElement?.current ?? document.querySelector('footer');
const button = innerRef?.current;
if (!button) {
return;
}
// set bottom position to 0 to calc the distance between the posible footer
button.style.bottom = '0px';
let newBottomPosition = bottomPosition;
// update button bottom position when stop is present
if (stop) {
const buttonBottom = button.getBoundingClientRect().bottom;
const stopTop = stop.getBoundingClientRect().top;
const distance = buttonBottom - stopTop;
if (distance > 0) {
newBottomPosition += distance;
}
}
// update the distance and set the visibility
button.style.bottom = `${newBottomPosition}px`;
const display = window.scrollY >= visibilityScrollOffset;
button.style.display = display ? 'flex' : 'none';
}, [bottomPosition, stopElement, visibilityScrollOffset]);
React.useEffect(() => {
handleScrollListener();
window.addEventListener('scroll', handleScrollListener);
return () => {
window.removeEventListener('scroll', handleScrollListener);
};
}, [handleScrollListener]);
return (_jsx(BackToTopStandAlone, { ...props, ref: setRef, state: state, styles: styles }));
});
BackToTopControlledComponent.displayName = 'BackToTopControlledComponent';
const BackToTopBoundary = (props, ref) => (_jsx(ErrorBoundary, { fallBackComponent: _jsx(FallbackComponent, { children: _jsx(BackToTopStandAlone, { ...props, ref: ref }) }), children: _jsx(BackToTopControlledComponent, { ...props, ref: ref }) }));
/**
* @description
* BackToTop component is a component that shows a button to scroll to the top of the page.
* @param {React.PropsWithChildren<IBackToTopControlled<V>>} props
* @returns {JSX.Element}
*/
const BackToTopControlled = React.forwardRef(BackToTopBoundary);
export { BackToTopControlled };
//# sourceMappingURL=backToTopControlled.js.map