From bc4603079228da0810331141ac433e7f2b6937e0 Mon Sep 17 00:00:00 2001 From: AtsushiM Date: Thu, 9 Jan 2025 11:43:04 +0900 Subject: [PATCH 1/3] =?UTF-8?q?chore:=20useReelCells=E5=86=85=E3=81=AEcurr?= =?UTF-8?q?entRef=E3=81=AE=E3=83=81=E3=82=A7=E3=83=83=E3=82=AF=E3=82=92?= =?UTF-8?q?=E6=9C=80=E9=81=A9=E5=8C=96=E3=81=99=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Table/useReelCells.ts | 49 +++++++++---------- 1 file changed, 24 insertions(+), 25 deletions(-) diff --git a/packages/smarthr-ui/src/components/Table/useReelCells.ts b/packages/smarthr-ui/src/components/Table/useReelCells.ts index 5927946b8d..812a9435b8 100644 --- a/packages/smarthr-ui/src/components/Table/useReelCells.ts +++ b/packages/smarthr-ui/src/components/Table/useReelCells.ts @@ -7,42 +7,41 @@ export const useReelCells = () => { useEffect(() => { const currentRef = tableWrapperRef.current + if (!currentRef) { + return () => undefined + } + const handleScroll = () => { - if (currentRef) { - const stickyCells = currentRef.querySelectorAll('.fixedElement') || [] - const scrollLeft = currentRef.scrollLeft - const maxScrollLeft = currentRef.scrollWidth - currentRef.clientWidth || 0 - - stickyCells.forEach((cell) => { - const shouldFix = maxScrollLeft > 0 && scrollLeft < maxScrollLeft - - if (shouldFix) { - cell.classList.add('fixed') - setShowShadow(scrollLeft > 0) - } else { - cell.classList.remove('fixed') - setShowShadow(maxScrollLeft === 0 && scrollLeft === 0 ? false : true) - } - }) - } + const stickyCells = currentRef.querySelectorAll('.fixedElement') || [] + const scrollLeft = currentRef.scrollLeft + const maxScrollLeft = currentRef.scrollWidth - currentRef.clientWidth || 0 + + stickyCells.forEach((cell) => { + const shouldFix = maxScrollLeft > 0 && scrollLeft < maxScrollLeft + + if (shouldFix) { + cell.classList.add('fixed') + setShowShadow(scrollLeft > 0) + } else { + cell.classList.remove('fixed') + setShowShadow(maxScrollLeft === 0 && scrollLeft === 0 ? false : true) + } + }) } + handleScroll() - currentRef?.addEventListener('scroll', handleScroll) + currentRef.addEventListener('scroll', handleScroll) const observer = new window.ResizeObserver(() => { handleScroll() }) - if (currentRef) { - observer.observe(currentRef) - } + observer.observe(currentRef) return () => { - if (currentRef) { - currentRef.removeEventListener('scroll', handleScroll) - observer.unobserve(currentRef) - } + currentRef.removeEventListener('scroll', handleScroll) + observer.unobserve(currentRef) } }, [tableWrapperRef, setShowShadow]) From 7a47f28e97d9da7ef796bc045320e528300f2d3a Mon Sep 17 00:00:00 2001 From: AtsushiM Date: Thu, 9 Jan 2025 11:43:59 +0900 Subject: [PATCH 2/3] =?UTF-8?q?chore:=20useReelCells=E5=86=85=E3=81=AEwind?= =?UTF-8?q?ow.ResizeObserver=E3=81=AE=E5=BC=95=E6=95=B0=E3=82=92=E6=9C=80?= =?UTF-8?q?=E9=81=A9=E5=8C=96=E3=81=99=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/smarthr-ui/src/components/Table/useReelCells.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/smarthr-ui/src/components/Table/useReelCells.ts b/packages/smarthr-ui/src/components/Table/useReelCells.ts index 812a9435b8..15cc07413c 100644 --- a/packages/smarthr-ui/src/components/Table/useReelCells.ts +++ b/packages/smarthr-ui/src/components/Table/useReelCells.ts @@ -33,9 +33,7 @@ export const useReelCells = () => { currentRef.addEventListener('scroll', handleScroll) - const observer = new window.ResizeObserver(() => { - handleScroll() - }) + const observer = new window.ResizeObserver(handleScroll) observer.observe(currentRef) From e11b4eac3868a0e254f0b9960eaf06ca1a97f337 Mon Sep 17 00:00:00 2001 From: AtsushiM Date: Thu, 9 Jan 2025 11:47:21 +0900 Subject: [PATCH 3/3] =?UTF-8?q?chore:=20useReelCells=E5=86=85=E3=81=AE?= =?UTF-8?q?=E3=83=AB=E3=83=BC=E3=83=97=E5=87=A6=E7=90=86=E3=82=92=E6=9C=80?= =?UTF-8?q?=E9=81=A9=E5=8C=96=E3=81=99=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Table/useReelCells.ts | 23 ++++++++++--------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/packages/smarthr-ui/src/components/Table/useReelCells.ts b/packages/smarthr-ui/src/components/Table/useReelCells.ts index 15cc07413c..090b86578e 100644 --- a/packages/smarthr-ui/src/components/Table/useReelCells.ts +++ b/packages/smarthr-ui/src/components/Table/useReelCells.ts @@ -12,25 +12,26 @@ export const useReelCells = () => { } const handleScroll = () => { - const stickyCells = currentRef.querySelectorAll('.fixedElement') || [] + const stickyCells = currentRef.querySelectorAll('.fixedElement') + + if (!stickyCells) { + return + } + const scrollLeft = currentRef.scrollLeft const maxScrollLeft = currentRef.scrollWidth - currentRef.clientWidth || 0 + const shouldFix = maxScrollLeft > 0 && scrollLeft < maxScrollLeft + const settableShowShadow = shouldFix + ? scrollLeft > 0 + : maxScrollLeft !== 0 || scrollLeft !== 0 stickyCells.forEach((cell) => { - const shouldFix = maxScrollLeft > 0 && scrollLeft < maxScrollLeft - - if (shouldFix) { - cell.classList.add('fixed') - setShowShadow(scrollLeft > 0) - } else { - cell.classList.remove('fixed') - setShowShadow(maxScrollLeft === 0 && scrollLeft === 0 ? false : true) - } + cell.classList.toggle('fixed', shouldFix) + setShowShadow(settableShowShadow) }) } handleScroll() - currentRef.addEventListener('scroll', handleScroll) const observer = new window.ResizeObserver(handleScroll)