chore: add demo

anubra266 · Dec 24, 2024 · 025e72b · 025e72b
1 parent 00f6009
commit 025e72b
Show file tree

Hide file tree

Showing 23 changed files with 3,117 additions and 98 deletions.
diff --git a/packages/zag-scrollspy/src/scrollspy.machine.ts b/packages/zag-scrollspy/src/scrollspy.machine.ts
@@ -27,7 +27,6 @@ export function machine<V extends string>(userContext: UserDefinedContext<V>) {
       },
 
       activities: ["trackItemsPresence"],
-
       states: {
         idle: {
           on: {
@@ -43,48 +42,44 @@ export function machine<V extends string>(userContext: UserDefinedContext<V>) {
         trackItemsPresence: (ctx) => {
           const win = dom.getWin(ctx);
 
-          const observer = new win.IntersectionObserver(
-            (entries) => {
-              entries.forEach((entry) => {
-                const id = entry.target.getAttribute("id");
-                const el = ctx.elements.find((el) => el.id === id);
-                if (el) {
-                  const ratio = entry.isIntersecting
-                    ? entry.intersectionRatio
-                    : 0;
-                  ctx.elements = ctx.elements.map((el) =>
-                    el.id === id ? { ...el, ratio } : el
-                  );
-                }
-              });
+          const handleIntersect = (entries: IntersectionObserverEntry[]) => {
+            entries.forEach((entry) => {
+              const id = entry.target.getAttribute("id");
+              const el = ctx.elements.find((el) => el.id === id);
 
-              const maxRatio = Math.max(
-                ...ctx.elements.map((el) => el.ratio),
-                0.1
-              );
-              const entry = ctx.elements.find((el) => el.ratio === maxRatio);
+              if (el)
+                el.ratio = entry.isIntersecting ? entry.intersectionRatio : 0;
+            });
 
-              if (ctx.activeId !== entry?.id) {
-                ctx.activeId = entry ? entry.id : null;
-                ctx.onChangeActiveId?.(ctx.activeId);
-              }
-            },
-            {
-              root: ctx.root,
-              rootMargin: ctx.rootMargin,
-              threshold: ctx.threshold,
-            }
+            const maxRatio = Math.max(
+              ...ctx.elements.map((el) => el.ratio),
+              0.1
+            );
+
+            const entry = ctx.elements.find((el) => el.ratio === maxRatio);
+
+            ctx.activeId = entry ? entry.id : null;
+            ctx.onChangeActiveId?.(ctx.activeId);
+          };
+
+          const observerOpts = {
+            root: ctx.root,
+            threshold: ctx.threshold,
+            rootMargin: ctx.rootMargin,
+          };
+          const observer = new win.IntersectionObserver(
+            handleIntersect,
+            observerOpts
           );
 
-          ctx.elements.forEach(({ id }) => {
-            const content = dom.getById(ctx, id);
-            if (content) observer.observe(content);
-          });
+          for (const { id } of ctx.elements) {
+            const content = document.getElementById(id);
+            content && observer.observe(content);
+          }
 
           return () => observer.disconnect();
         },
       },
-      guards: {},
       actions: {
         handleClick: (ctx, e) => {
           const content = dom.getById(ctx, e.id);

diff --git a/packages/zag-scrollspy/src/scrollspy.types.ts b/packages/zag-scrollspy/src/scrollspy.types.ts
@@ -18,7 +18,7 @@ interface PublicContext<V extends string>
    */
   ids?: ElementIds | undefined;
   /**
-   * The ids of items to be used as the scrollspy targets
+   * The ids of items to be used as the scrollspy targets.
    */
   items: V[];
   /**
@@ -60,6 +60,7 @@ interface PublicContext<V extends string>
 }
 
 interface PrivateContext<V extends string = string> {
+  // elements: Record<string, number>;
   elements: { id: V; ratio: number }[];
   activeId: V | null;
 }