@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
39 lines • 2.37 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import React from 'react';
import { STYLES_NAME } from '../../constants/stylesName/stylesName';
// custom hook
import { useStyles } from '../../hooks/useStyles/useStyles';
import { ErrorBoundary } from '../../provider/errorBoundary/errorBoundary';
import { FallbackComponent } from '../../provider/errorBoundary/fallbackComponent';
import { calcFirstLastVisiblePosition, getPositionWithIn } from './helper/positions';
import { PageControlStandAlone } from './pageControlStandAlone';
import { PageControlDirectionType } from './types/pageControlStates';
const PageControlComponent = React.forwardRef(({ variant, arrowsControlVariant, maxDots = 5, currentPosition: propsCurrentPosition, ctv, extraCt, ...props }, ref) => {
const styles = useStyles(STYLES_NAME.PAGE_CONTROL, variant, ctv);
const arrowsControlStyles = useStyles(STYLES_NAME.PAGE_CONTROL, arrowsControlVariant, extraCt);
const lastPosition = React.useRef(0);
const direction = React.useMemo(() => {
let res = PageControlDirectionType.FORTH;
if (propsCurrentPosition < lastPosition.current) {
res = PageControlDirectionType.BACK;
}
lastPosition.current = propsCurrentPosition;
return res;
}, [propsCurrentPosition]);
const isBullet = !!styles.isBullet;
const dots = props.pages > maxDots ? maxDots : props.pages;
const currentPosition = getPositionWithIn(propsCurrentPosition, props.pages);
const { firstVisiblePosition, lastVisiblePosition } = calcFirstLastVisiblePosition({
isBullet,
direction,
currentPosition,
pages: props.pages,
dots,
});
return (_jsx(PageControlStandAlone, { ref: ref, arrowsControlStyles: arrowsControlStyles, currentPosition: currentPosition, dots: dots, firstVisiblePosition: firstVisiblePosition, lastVisiblePosition: lastVisiblePosition, styles: styles, ...props }));
});
PageControlComponent.displayName = 'PageControlComponent';
const PageControlBoundary = (props, ref) => (_jsx(ErrorBoundary, { fallBackComponent: _jsx(FallbackComponent, { children: _jsx(PageControlStandAlone, { ...props, ref: ref }) }), children: _jsx(PageControlComponent, { ...props, ref: ref }) }));
const PageControl = React.forwardRef(PageControlBoundary);
export { PageControl };
//# sourceMappingURL=pageControl.js.map