fix: scrollbar implementation

italia · Dec 9, 2024 · 3f9ddb3 · 3f9ddb3
1 parent b336d7f
commit 3f9ddb3
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 5 deletions.
diff --git a/src/NavScroll/types.ts b/src/NavScroll/types.ts
@@ -86,6 +86,10 @@ export type useNavScrollResult = {
    * A function to retrieve the reference of the current active element (only the last element, not the elements hierarchy).
    */
   getActiveRef: () => RefObject<Element> | null;
+  /**
+  * A list of active ids (the full hierarchy).
+  */
+  percentage: number;
 };
 
 // @private

diff --git a/src/NavScroll/useNavScroll.ts b/src/NavScroll/useNavScroll.ts
@@ -100,6 +100,7 @@ export function useNavScroll(args: useNavScrollArgs = {}): useNavScrollResult {
   const [counter, setCounter] = useState(0);
   const [forceRecompute, setForceRecompute] = useState(false);
   const [activeId, updateActiveId] = useState<string | null>(null);
+  const [percentageValue, setPercentageValue] = useState(0);
 
   const { targetSize, useViewport } = useSizeDetector({
     root,
@@ -145,11 +146,13 @@ export function useNavScroll(args: useNavScrollArgs = {}): useNavScrollResult {
         if (!min) {
           break;
         }
-        console.log(`Window ${document.scrollingElement?.scrollTop}`);
-        console.log(`RECORD ${entry?.id} TOP ${entry?.getBoundingClientRect().top}`);
         if (min > 0 && k > 0) {
-          intersectionId = els.current[k-1].ref.current?.id;
-          console.log('FOUND');
+          const totEls =
+            root?.previousSibling?.firstChild?.parentNode?.querySelectorAll('.it-navscroll-wrapper .nav-link').length ||
+            1;
+          setPercentageValue((k / (totEls / 2)) * 100);
+          console.log(`PERCENTAGE: ${percentageValue} %`);
+          intersectionId = els.current[k - 1].ref.current?.id;
           break;
         }
       }
@@ -217,13 +220,15 @@ export function useNavScroll(args: useNavScrollArgs = {}): useNavScrollResult {
   );
 
   const isActive = useCallback((id: string) => activeLookups.has(id), [activeLookups]);
+  const percentage = useMemo(() => percentageValue, [percentageValue]);
 
   const getActiveRef = useCallback(() => {
     const entry = els.current.find(({ id }) => id === activeId);
     return entry ? entry.ref : null;
   }, [activeId]);
 
   return {
+    percentage,
     register,
     unregister,
     activeIds,

diff --git a/stories/Components/NavScroll/NavScroll.stories.tsx b/stories/Components/NavScroll/NavScroll.stories.tsx
@@ -360,7 +360,7 @@ const PosizionamentoTestaAltaHooks = () => {
   /* Nota che i componenti Col e Row non inoltrano le ref, 
   /* usare quindi tag div con classi css come nell'esempio */
   const containerRef = useRef(null);
-  const { register, isActive, getActiveRef } = useNavScroll({
+  const { register, isActive, getActiveRef, percentage } = useNavScroll({
     root: containerRef.current || undefined
   });
   const getActiveClass = (id: string) => (isActive(id) ? 'active' : undefined);
@@ -392,6 +392,9 @@ const PosizionamentoTestaAltaHooks = () => {
               <div className='menu-wrapper'>
                 <div className='link-list-wrapper'>
                   <h3>header</h3>
+                  <div className="progress">
+                    <div className="progress-bar it-navscroll-progressbar" role="progressbar" style={{width : `${percentage}%`}}></div>
+                  </div>
                   <LinkList noWrapper>
                     <NavItem>
                       <NavLink onClick={() => toggleNavScroll(!isOpen)} href='#1' className={getActiveClass('1')}>