From 6c1e83467d984221fe37d65b026c227173c4ed02 Mon Sep 17 00:00:00 2001 From: Jakob Guddas Date: Fri, 8 Sep 2023 17:07:38 +0200 Subject: [PATCH 1/2] fix: pagination issues second try --- .../pagination/src/use-pagination.ts | 66 +++++++++++-------- .../core/theme/src/components/pagination.ts | 26 ++++++-- 2 files changed, 62 insertions(+), 30 deletions(-) diff --git a/packages/components/pagination/src/use-pagination.ts b/packages/components/pagination/src/use-pagination.ts index a694fb6c1a..c9fd5d653a 100644 --- a/packages/components/pagination/src/use-pagination.ts +++ b/packages/components/pagination/src/use-pagination.ts @@ -175,42 +175,51 @@ export function usePagination(originalProps: UsePaginationProps) { } } - function scrollTo(value: number) { + function scrollTo(value: number, skipAnimation: boolean) { const map = getItemsRefMap(); const node = map.get(value); + if (!node || !cursorRef.current) return; + // clean up the previous cursor timer (if any) cursorTimer.current && clearTimeout(cursorTimer.current); - if (node) { - // scroll parent to the item - scrollIntoView(node, { - scrollMode: "always", - behavior: "smooth", - block: "start", - inline: "start", - boundary: domRef.current, - }); - - // get position of the item - const {offsetLeft} = node; - - // move the cursor to the item + // scroll parent to the item + scrollIntoView(node, { + scrollMode: "always", + behavior: "smooth", + block: "start", + inline: "start", + boundary: domRef.current, + }); + + // get position of the item + const {offsetLeft} = node; + + // only shows the animation when the page changes, not on intial render or layout shift + if (skipAnimation) { + cursorRef.current.setAttribute("data-moving", "false"); + cursorRef.current.style.transform = `translateX(${offsetLeft}px) scale(1)`; + + return; + } + + // move the cursor to the item + cursorRef.current.setAttribute("data-moving", "true"); + cursorRef.current.style.transform = `translateX(${offsetLeft}px) scale(1.1)`; + + cursorTimer.current = setTimeout(() => { + // reset the scale of the cursor if (cursorRef.current) { - cursorRef.current.setAttribute("data-moving", "true"); - cursorRef.current.style.transform = `translateX(${offsetLeft}px) scale(1.1)`; + cursorRef.current.style.transform = `translateX(${offsetLeft}px) scale(1)`; } - cursorTimer.current = setTimeout(() => { - // reset the scale of the cursor - if (cursorRef.current) { - cursorRef.current.setAttribute("data-moving", "false"); - cursorRef.current.style.transform = `translateX(${offsetLeft}px) scale(1)`; - } + // remove the data-moving attribute + cursorRef.current?.setAttribute("data-moving", "false"); cursorTimer.current && clearTimeout(cursorTimer.current); }, CURSOR_TRANSITION_TIMEOUT); - } + }, CURSOR_TRANSITION_TIMEOUT); } const {range, activePage, setPage, previous, next, first, last} = useBasePagination({ @@ -223,15 +232,20 @@ export function usePagination(originalProps: UsePaginationProps) { onChange, }); + const activePageRef = useRef(activePage); + useEffect(() => { if (activePage && !originalProps.disableAnimation) { - scrollTo(activePage); + scrollTo(activePage, activePage === activePageRef.current); } + activePageRef.current = activePage; }, [ activePage, originalProps.disableAnimation, - originalProps.isCompact, originalProps.disableCursorAnimation, + originalProps.dotsJump, + originalProps.isCompact, + originalProps.showControls, ]); const slots = useMemo( diff --git a/packages/core/theme/src/components/pagination.ts b/packages/core/theme/src/components/pagination.ts index ba434c1d63..644e6ddccf 100644 --- a/packages/core/theme/src/components/pagination.ts +++ b/packages/core/theme/src/components/pagination.ts @@ -45,6 +45,7 @@ const pagination = tv({ "left-0", "select-none", "touch-none", + "pointer-events-none", "z-20", ], forwardIcon: @@ -135,7 +136,13 @@ const pagination = tv({ }, false: { item: ["data-[pressed=true]:scale-[0.97]", "transition-transform-background"], - cursor: ["transition-transform", "!duration-300"], + cursor: [ + "data-[moving=true]:transition-transform", + "!data-[moving=true]:duration-300", + // this hides the cursor and only shows it once it has been moved to its initial position + "opacity-0", + "data-[moving]:opacity-100", + ], }, }, }, @@ -353,17 +360,28 @@ const pagination = tv({ { slots: ["item", "prev", "next"], variant: "flat", - class: ["bg-default-100", "data-[hover=true]:bg-default-200", "active:bg-default-300"], + class: [ + "bg-default-100", + "[&[data-hover=true]:not([data-active=true])]:bg-default-200", + "active:bg-default-300", + ], }, { slots: ["item", "prev", "next"], variant: "faded", - class: ["bg-default-50", "data-[hover=true]:bg-default-100", "active:bg-default-200"], + class: [ + "bg-default-50", + "[&[data-hover=true]:not([data-active=true])]:bg-default-100", + "active:bg-default-200", + ], }, { slots: ["item", "prev", "next"], variant: "light", - class: ["data-[hover=true]:bg-default-100", "active:bg-default-200"], + class: [ + "[&[data-hover=true]:not([data-active=true])]:bg-default-100", + "active:bg-default-200", + ], }, // size { From 372272eea7c9afbe30a37b9078c084082083a296 Mon Sep 17 00:00:00 2001 From: Jakob Guddas Date: Thu, 5 Oct 2023 20:07:18 +0200 Subject: [PATCH 2/2] Create red-hairs-thank.md --- .changeset/red-hairs-thank.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/red-hairs-thank.md diff --git a/.changeset/red-hairs-thank.md b/.changeset/red-hairs-thank.md new file mode 100644 index 0000000000..f581c8d4b2 --- /dev/null +++ b/.changeset/red-hairs-thank.md @@ -0,0 +1,6 @@ +--- +"@nextui-org/pagination": patch +"@nextui-org/theme": patch +--- + +fix: pagination issues