Merge pull request #53 from adamgiebl/master

Tweaks to useIsScrolled
alirezamirian · Dec 21, 2023 · c1fbb1e · c1fbb1e
2 parents 44acff3 + 10a4abd
commit c1fbb1e
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 17 deletions.
diff --git a/packages/jui/src/Tabs/Tabs.tsx b/packages/jui/src/Tabs/Tabs.tsx
@@ -6,7 +6,7 @@ import { AriaTabListProps } from "@react-types/tabs";
 import { StyledHorizontalOverflowShadows } from "./StyledHorizontalOverflowShadows";
 import { TabsOverflowMenu } from "./TabsOverflowMenu";
 import { useCollectionOverflowObserver } from "./useCollectionOverflowObserver";
-import { useIsScrolled } from "./useIsScrolled";
+import { useHasOverflow } from "./useHasOverflow";
 import { styled, css } from "@intellij-platform/core/styled";
 import { StyledDefaultTab } from "./StyledDefaultTab";
 import { StyledDefaultTabs } from "./StyledDefaultTabs";
@@ -119,7 +119,7 @@ export const Tabs = <T extends object>({
   const ref = React.useRef<HTMLDivElement>(null);
   const { tabListProps } = useTabList(props, state, ref);
 
-  const { scrolledIndicatorProps, isScrolled } = useIsScrolled({ ref });
+  const { scrolledIndicatorProps, hasOverflow } = useHasOverflow({ ref });
   const { overflowedKeys, intersectionObserver } =
     useCollectionOverflowObserver(ref);
 
@@ -145,8 +145,8 @@ export const Tabs = <T extends object>({
   return (
     <TabsComponent noBorders={noBorders} {...filterDOMProps(props)}>
       <StyledHorizontalOverflowShadows
-        hasOverflowAtStart={isScrolled.left}
-        hasOverflowAtEnd={isScrolled.right}
+        hasOverflowAtStart={hasOverflow.left}
+        hasOverflowAtEnd={hasOverflow.right}
         style={{ minWidth: 0 }}
       >
         <StyledTabList

diff --git a/packages/jui/src/Tabs/useIsScrolled.tsx → packages/jui/src/Tabs/useHasOverflow.tsx b/packages/jui/src/Tabs/useIsScrolled.tsx → packages/jui/src/Tabs/useHasOverflow.tsx
@@ -1,13 +1,13 @@
 import { RefObject, UIEventHandler, useEffect, useState } from "react";
 
-export function useIsScrolled<T extends HTMLElement>({
+export function useHasOverflow<T extends HTMLElement>({
   threshold = 5,
   ref,
 }: {
   threshold?: number;
   ref: RefObject<T>;
 }) {
-  const [isScrolled, setIsScrolled] = useState({
+  const [hasOverflow, setHasOverflow] = useState({
     left: false,
     right: false,
     top: false,
@@ -23,19 +23,19 @@ export function useIsScrolled<T extends HTMLElement>({
       const offsetTop = element.scrollTop;
       const offsetBottom =
         element.scrollHeight - (element.offsetHeight + element.scrollTop);
-      const newIsScrolled = {
-        top: offsetTop >= threshold,
-        bottom: offsetBottom >= threshold,
-        left: offsetLeft >= threshold,
-        right: offsetRight >= threshold,
+      const newHasOverflow = {
+        top: offsetTop > threshold,
+        bottom: offsetBottom > threshold,
+        left: offsetLeft > threshold,
+        right: offsetRight > threshold,
       };
       if (
-        isScrolled.top !== isScrolled.top ||
-        isScrolled.bottom !== newIsScrolled.bottom ||
-        isScrolled.left !== newIsScrolled.left ||
-        isScrolled.right !== newIsScrolled.right
+        hasOverflow.top !== newHasOverflow.top ||
+        hasOverflow.bottom !== newHasOverflow.bottom ||
+        hasOverflow.left !== newHasOverflow.left ||
+        hasOverflow.right !== newHasOverflow.right
       ) {
-        setIsScrolled(newIsScrolled);
+        setHasOverflow(newHasOverflow);
       }
     }
   };
@@ -45,6 +45,6 @@ export function useIsScrolled<T extends HTMLElement>({
     scrolledIndicatorProps: {
       onScroll: update as UIEventHandler<T>,
     },
-    isScrolled,
+    hasOverflow,
   };
 }