diff --git a/client/src/components/Test/FloorItem.tsx b/client/src/components/Test/FloorItem.tsx index c881dd2..bc24243 100644 --- a/client/src/components/Test/FloorItem.tsx +++ b/client/src/components/Test/FloorItem.tsx @@ -26,7 +26,7 @@ function FloorItem({ floor, onSelected }: Props) { } else { setSelected(false); } - }, 50); + }, 0); }, []); return ( diff --git a/client/src/pages/ComplexWingPage.tsx b/client/src/pages/ComplexWingPage.tsx index 7c7dac6..ef64642 100644 --- a/client/src/pages/ComplexWingPage.tsx +++ b/client/src/pages/ComplexWingPage.tsx @@ -59,6 +59,7 @@ function ComplexWingPage() { const [selectedFloor, setSelectedFloor] = useState(); // const [showFloorPlanSidebar, setShowFloorPlanSidebar] = useState(false); const refFloors = useRef(null); + const [scrolled, setScrolled] = useState(false); function handleResize() { if (window.innerHeight > window.innerWidth) { @@ -97,6 +98,32 @@ function ComplexWingPage() { setImageHeight(ref.current!.naturalHeight); } + function scrollNext() { + setScrolled(true); + + refFloors.current?.scrollBy({ + left: 84, + behavior: "smooth", + }); + + setTimeout(() => { + setScrolled(false); + }, 250); + } + + function scrollPrev() { + setScrolled(true); + + refFloors.current?.scrollBy({ + left: -84, + behavior: "smooth", + }); + + setTimeout(() => { + setScrolled(false); + }, 250); + } + useEffect(() => { handleResize(); @@ -109,7 +136,7 @@ function ComplexWingPage() { return (
@@ -535,24 +562,14 @@ function ComplexWingPage() { icon={} onlyIcon className="absolute top-0 left-0 ring-0 w-9 h-9" - onClick={() => - refFloors.current?.scrollBy({ - left: -32, - behavior: "smooth", - }) - } + onClick={() => !scrolled && scrollPrev()} /> } onlyIcon className="absolute top-0 right-0 ring-0 w-9 h-9" - onClick={() => - refFloors.current?.scrollBy({ - left: 32, - behavior: "smooth", - }) - } + onClick={() => !scrolled && scrollNext()} />