@skygraph/react 0.0.0-placeholder.0 → 0.5.0

package/dist/chunk-SEQI65CF.js

@@ -0,0 +1,61 @@
+// src/hooks/useVirtualScroll.ts
+import { useState, useCallback, useRef, useEffect, useMemo } from "react";
+import { createVirtual } from "@skygraph/core";
+function useVirtualScroll(options) {
+  const containerRef = useRef(null);
+  const engineRef = useRef(null);
+  if (!engineRef.current) {
+    engineRef.current = createVirtual({
+      itemCount: options.itemCount,
+      itemHeight: options.itemHeight,
+      overscan: options.overscan
+    });
+  }
+  const engine = engineRef.current;
+  useEffect(() => {
+    engine.setItemCount(options.itemCount);
+  }, [engine, options.itemCount]);
+  useEffect(() => {
+    engine.setItemHeight(options.itemHeight);
+  }, [engine, options.itemHeight]);
+  const [range, setRange] = useState(
+    () => engine.getRange(0, 0)
+  );
+  const recalc = useCallback(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    setRange(engine.getRange(el.scrollTop, el.clientHeight));
+  }, [engine]);
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    recalc();
+    el.addEventListener("scroll", recalc, { passive: true });
+    const ro = new ResizeObserver(recalc);
+    ro.observe(el);
+    return () => {
+      el.removeEventListener("scroll", recalc);
+      ro.disconnect();
+    };
+  }, [recalc]);
+  useEffect(() => {
+    recalc();
+  }, [options.itemCount, recalc]);
+  const scrollToIndex = useCallback(
+    (index, align = "start") => {
+      const el = containerRef.current;
+      if (!el) return;
+      el.scrollTop = engine.scrollToIndex(index, el.clientHeight, align);
+    },
+    [engine]
+  );
+  return useMemo(
+    () => ({ range, containerRef, scrollToIndex, engine }),
+    [range, scrollToIndex, engine]
+  );
+}
+
+export {
+  useVirtualScroll
+};
+//# sourceMappingURL=chunk-SEQI65CF.js.map

package/dist/chunk-SEQI65CF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/useVirtualScroll.ts"],"sourcesContent":["import { useState, useCallback, useRef, useEffect, useMemo } from 'react'\nimport { createVirtual } from '@skygraph/core'\nimport type { VirtualEngine, VirtualRange } from '@skygraph/core'\n\nexport interface UseVirtualScrollOptions {\n  itemCount: number\n  itemHeight: number | ((index: number) => number)\n  overscan?: number\n}\n\nexport interface UseVirtualScrollReturn {\n  range: VirtualRange\n  containerRef: React.RefObject<HTMLElement | null>\n  scrollToIndex: (index: number, align?: 'start' | 'center' | 'end') => void\n  engine: VirtualEngine\n}\n\nexport function useVirtualScroll(options: UseVirtualScrollOptions): UseVirtualScrollReturn {\n  const containerRef = useRef<HTMLElement | null>(null)\n  const engineRef = useRef<VirtualEngine | null>(null)\n\n  if (!engineRef.current) {\n    engineRef.current = createVirtual({\n      itemCount: options.itemCount,\n      itemHeight: options.itemHeight,\n      overscan: options.overscan,\n    })\n  }\n\n  const engine = engineRef.current\n\n  useEffect(() => {\n    engine.setItemCount(options.itemCount)\n  }, [engine, options.itemCount])\n\n  useEffect(() => {\n    engine.setItemHeight(options.itemHeight)\n  }, [engine, options.itemHeight])\n\n  const [range, setRange] = useState<VirtualRange>(() =>\n    engine.getRange(0, 0),\n  )\n\n  const recalc = useCallback(() => {\n    const el = containerRef.current\n    if (!el) return\n    setRange(engine.getRange(el.scrollTop, el.clientHeight))\n  }, [engine])\n\n  useEffect(() => {\n    const el = containerRef.current\n    if (!el) return\n\n    recalc()\n\n    el.addEventListener('scroll', recalc, { passive: true })\n    const ro = new ResizeObserver(recalc)\n    ro.observe(el)\n\n    return () => {\n      el.removeEventListener('scroll', recalc)\n      ro.disconnect()\n    }\n  }, [recalc])\n\n  useEffect(() => {\n    recalc()\n  }, [options.itemCount, recalc])\n\n  const scrollToIndex = useCallback(\n    (index: number, align: 'start' | 'center' | 'end' = 'start') => {\n      const el = containerRef.current\n      if (!el) return\n      el.scrollTop = engine.scrollToIndex(index, el.clientHeight, align)\n    },\n    [engine],\n  )\n\n  return useMemo(\n    () => ({ range, containerRef, scrollToIndex, engine }),\n    [range, scrollToIndex, engine],\n  )\n}\n"],"mappings":";AAAA,SAAS,UAAU,aAAa,QAAQ,WAAW,eAAe;AAClE,SAAS,qBAAqB;AAgBvB,SAAS,iBAAiB,SAA0D;AACzF,QAAM,eAAe,OAA2B,IAAI;AACpD,QAAM,YAAY,OAA6B,IAAI;AAEnD,MAAI,CAAC,UAAU,SAAS;AACtB,cAAU,UAAU,cAAc;AAAA,MAChC,WAAW,QAAQ;AAAA,MACnB,YAAY,QAAQ;AAAA,MACpB,UAAU,QAAQ;AAAA,IACpB,CAAC;AAAA,EACH;AAEA,QAAM,SAAS,UAAU;AAEzB,YAAU,MAAM;AACd,WAAO,aAAa,QAAQ,SAAS;AAAA,EACvC,GAAG,CAAC,QAAQ,QAAQ,SAAS,CAAC;AAE9B,YAAU,MAAM;AACd,WAAO,cAAc,QAAQ,UAAU;AAAA,EACzC,GAAG,CAAC,QAAQ,QAAQ,UAAU,CAAC;AAE/B,QAAM,CAAC,OAAO,QAAQ,IAAI;AAAA,IAAuB,MAC/C,OAAO,SAAS,GAAG,CAAC;AAAA,EACtB;AAEA,QAAM,SAAS,YAAY,MAAM;AAC/B,UAAM,KAAK,aAAa;AACxB,QAAI,CAAC,GAAI;AACT,aAAS,OAAO,SAAS,GAAG,WAAW,GAAG,YAAY,CAAC;AAAA,EACzD,GAAG,CAAC,MAAM,CAAC;AAEX,YAAU,MAAM;AACd,UAAM,KAAK,aAAa;AACxB,QAAI,CAAC,GAAI;AAET,WAAO;AAEP,OAAG,iBAAiB,UAAU,QAAQ,EAAE,SAAS,KAAK,CAAC;AACvD,UAAM,KAAK,IAAI,eAAe,MAAM;AACpC,OAAG,QAAQ,EAAE;AAEb,WAAO,MAAM;AACX,SAAG,oBAAoB,UAAU,MAAM;AACvC,SAAG,WAAW;AAAA,IAChB;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AAEX,YAAU,MAAM;AACd,WAAO;AAAA,EACT,GAAG,CAAC,QAAQ,WAAW,MAAM,CAAC;AAE9B,QAAM,gBAAgB;AAAA,IACpB,CAAC,OAAe,QAAoC,YAAY;AAC9D,YAAM,KAAK,aAAa;AACxB,UAAI,CAAC,GAAI;AACT,SAAG,YAAY,OAAO,cAAc,OAAO,GAAG,cAAc,KAAK;AAAA,IACnE;AAAA,IACA,CAAC,MAAM;AAAA,EACT;AAEA,SAAO;AAAA,IACL,OAAO,EAAE,OAAO,cAAc,eAAe,OAAO;AAAA,IACpD,CAAC,OAAO,eAAe,MAAM;AAAA,EAC/B;AACF;","names":[]}