mirror/seerr
1
0
Fork 0
mirror of https://github.com/seerr-team/seerr.git synced 2026-05-19 06:07:27 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix(slider): add async to spring animation (#2978)

Browse Source
This commit is contained in:
Gauthier
2026-05-04 22:45:36 +02:00
committed by GitHub
parent 20dbc30c37
commit 5267611472
1 changed files with 8 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/Slider/index.tsx
View File

@@ -33,6 +33,7 @@ const Slider = ({
const [scrollPos, setScrollPos] = useState({ isStart: true, isEnd: false });
const handleScroll = useCallback(() => {
const margin = 5;
const scrollWidth = containerRef.current?.scrollWidth ?? 0;
const clientWidth =
containerRef.current?.getBoundingClientRect().width ?? 0;
@@ -44,10 +45,10 @@ const Slider = ({
setScrollPos({ isStart: true, isEnd: true });
} else if (
scrollPosition >=
(containerRef.current?.scrollWidth ?? 0) - clientWidth
(containerRef.current?.scrollWidth ?? 0) - clientWidth - margin
) {
setScrollPos({ isStart: false, isEnd: true });
} else if (scrollPosition > 0) {
} else if (scrollPosition > margin) {
setScrollPos({ isStart: false, isEnd: false });
} else {
setScrollPos({ isStart: true, isEnd: false });
@@ -83,14 +84,9 @@ const Slider = ({
const [, setX] = useSpring(() => ({
from: { x: 0 },
to: { x: 0 },
onChange: (results) => {
if (containerRef.current) {
containerRef.current.scrollLeft = results.value.x;
}
},
}));
const slide = (direction: Direction) => {
const slide = async (direction: Direction) => {
const clientWidth =
containerRef.current?.getBoundingClientRect().width ?? 0;
const cardWidth =
@@ -105,7 +101,7 @@ const Slider = ({
scrollPosition - scrollOffset - visibleItems * cardWidth,
0
);
setX.start({
await setX.start({
from: { x: scrollPosition },
to: { x: newX },
onChange: (results) => {
@@ -115,7 +111,7 @@ const Slider = ({
},
reset: true,
config: { friction: 60, tension: 500, velocity: 20 },
});
})[0];
if (newX === 0) {
setScrollPos({ isStart: true, isEnd: false });
@@ -127,7 +123,7 @@ const Slider = ({
scrollPosition - scrollOffset + visibleItems * cardWidth,
containerRef.current?.scrollWidth ?? 0 - clientWidth
);
setX.start({
await setX.start({
from: { x: scrollPosition },
to: { x: newX },
onChange: (results) => {
@@ -137,7 +133,7 @@ const Slider = ({
},
reset: true,
config: { friction: 60, tension: 500, velocity: 20 },
});
})[0];
if (newX >= (containerRef.current?.scrollWidth ?? 0) - clientWidth) {
setScrollPos({ isStart: false, isEnd: true });