tycho-components 0.19.10 → 0.19.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -6,13 +6,10 @@ import { Trans, useTranslation } from 'react-i18next';
|
|
|
6
6
|
import { Icon, IconButton } from 'tycho-storybook';
|
|
7
7
|
import './styles.scss';
|
|
8
8
|
const DRAG_THRESHOLD_PX = 6;
|
|
9
|
-
/** 0-based index: center when page 4+ is active (after the 3rd page). */
|
|
10
|
-
const CENTER_SCROLL_FROM_PAGE_INDEX = 3;
|
|
11
9
|
export default function AppPagination({ totalElements, pagination, setPagination, hideItensPage, numItens = [10, 25, 50], size = 'medium', }) {
|
|
12
10
|
const { t } = useTranslation('common');
|
|
13
11
|
const scrollContainerRef = useRef(null);
|
|
14
12
|
const activePageButtonRef = useRef(null);
|
|
15
|
-
const centerAfterClickRef = useRef(false);
|
|
16
13
|
const [stripScrollEdges, setStripScrollEdges] = useState({
|
|
17
14
|
overflow: false,
|
|
18
15
|
canScrollLeft: false,
|
|
@@ -48,21 +45,24 @@ export default function AppPagination({ totalElements, pagination, setPagination
|
|
|
48
45
|
const setPageIndex = (p) => {
|
|
49
46
|
setPagination({ ...pagination, pageIndex: p });
|
|
50
47
|
};
|
|
48
|
+
/** Scroll only the page strip — never `scrollIntoView`, which can scroll the document. */
|
|
51
49
|
const scrollActivePageIntoCenter = useCallback(() => {
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
50
|
+
const container = scrollContainerRef.current;
|
|
51
|
+
const button = activePageButtonRef.current;
|
|
52
|
+
if (!container || !button)
|
|
53
|
+
return;
|
|
54
|
+
const maxScroll = Math.max(0, container.scrollWidth - container.clientWidth);
|
|
55
|
+
if (maxScroll <= 0)
|
|
56
|
+
return;
|
|
57
|
+
const cRect = container.getBoundingClientRect();
|
|
58
|
+
const bRect = button.getBoundingClientRect();
|
|
59
|
+
const buttonLeftInContent = container.scrollLeft + (bRect.left - cRect.left);
|
|
60
|
+
const targetScrollLeft = buttonLeftInContent - container.clientWidth / 2 + button.offsetWidth / 2;
|
|
61
|
+
const clamped = Math.max(0, Math.min(maxScroll, targetScrollLeft));
|
|
62
|
+
container.scrollTo({ left: clamped, behavior: 'smooth' });
|
|
57
63
|
}, []);
|
|
58
64
|
useLayoutEffect(() => {
|
|
59
|
-
|
|
60
|
-
centerAfterClickRef.current = false;
|
|
61
|
-
scrollActivePageIntoCenter();
|
|
62
|
-
}
|
|
63
|
-
else if (pagination.pageIndex >= CENTER_SCROLL_FROM_PAGE_INDEX) {
|
|
64
|
-
scrollActivePageIntoCenter();
|
|
65
|
-
}
|
|
65
|
+
scrollActivePageIntoCenter();
|
|
66
66
|
requestAnimationFrame(() => updateStripScrollEdgeState());
|
|
67
67
|
}, [
|
|
68
68
|
numPages,
|
|
@@ -124,7 +124,6 @@ export default function AppPagination({ totalElements, pagination, setPagination
|
|
|
124
124
|
if (suppressPageClickRef.current) {
|
|
125
125
|
return;
|
|
126
126
|
}
|
|
127
|
-
centerAfterClickRef.current = true;
|
|
128
127
|
setPageIndex(index);
|
|
129
128
|
}, "aria-current": isActive ? 'page' : undefined, children: pageNum }, pageNum));
|
|
130
129
|
}) }), stripScrollEdges.overflow && (_jsx("button", { type: "button", className: "page-strip-nudge", disabled: !stripScrollEdges.canScrollRight, onClick: () => scrollPageStrip(1), "aria-label": t('table.pagination.scroll-strip-right'), title: t('table.pagination.scroll-strip-right'), children: _jsx(Icon, { name: "keyboard_double_arrow_right", size: "x-small" }) })), _jsx(IconButton, { size: size, mode: "tonal", onClick: () => setPageIndex(pagination.pageIndex + 1), disabled: pagination.pageIndex >= numPages - 1, name: "chevron_forward" })] })] }));
|