chore: update examples

TanStack · May 11, 2020 · 789da38 · 789da38
1 parent 2fb37d1
commit 789da38
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 47 deletions.
diff --git a/examples/sandbox/src/Dynamic.js b/examples/sandbox/src/Dynamic.js
@@ -147,23 +147,24 @@ function GridVirtualizerDynamic({ rows, columns }) {
   const rowVirtualizer = useVirtual({
     size: rows.length,
     parentRef,
-    estimateSize: React.useCallback(() => 35, []), // This is just a best guess
-    overscan: 5
+    overscan: 0
   });
 
   const columnVirtualizer = useVirtual({
     horizontal: true,
     size: columns.length,
     parentRef,
-    estimateSize: React.useCallback(() => 100, []), // This is just a best guess
     overscan: 5
   });
 
   const [show, setShow] = React.useState(true);
 
   return (
     <>
-      {/* <button onClick={() => setShow(old => !old)}>Toggle</button> */}
+      <button onClick={() => setShow(old => !old)}>Toggle</button>
+      <button onClick={() => rowVirtualizer.scrollToIndex(5000)}>
+        Scroll to 5000
+      </button>
       {show ? (
         <div
           ref={parentRef}

diff --git a/examples/sandbox/src/SmoothScroll.js b/examples/sandbox/src/SmoothScroll.js
@@ -6,43 +6,32 @@ function easeInOutQuint(t) {
   return t < 0.5 ? 16 * t * t * t * t * t : 1 + 16 * --t * t * t * t * t;
 }
 
-const timeout = fn => setTimeout(fn, 16);
-
-const raf = fn => requestAnimationFrame(fn);
-
 export default function() {
   const parentRef = React.useRef();
   const scrollingRef = React.useRef();
 
-  const [animationType, setAnimationType] = React.useState("setTimeout");
-
-  const animationFn = animationType === "setTimeout" ? timeout : raf;
-
-  const scrollToFn = React.useCallback(
-    offset => {
-      const duration = 1000;
-      const start = parentRef.current.scrollTop;
-      const startTime = (scrollingRef.current = Date.now());
-
-      const run = () => {
-        if (scrollingRef.current !== startTime) return;
-        const now = Date.now();
-        const elapsed = now - startTime;
-        const progress = easeInOutQuint(Math.min(elapsed / duration, 1));
-        const interpolated = start + (offset - start) * progress;
-
-        if (elapsed < duration) {
-          parentRef.current.scrollTop = interpolated;
-          animationFn(run);
-        } else {
-          parentRef.current.scrollTop = interpolated;
-        }
-      };
-
-      animationFn(run);
-    },
-    [animationFn]
-  );
+  const scrollToFn = React.useCallback((offset, defaultScrollTo) => {
+    const duration = 1000;
+    const start = parentRef.current.scrollTop;
+    const startTime = (scrollingRef.current = Date.now());
+
+    const run = () => {
+      if (scrollingRef.current !== startTime) return;
+      const now = Date.now();
+      const elapsed = now - startTime;
+      const progress = easeInOutQuint(Math.min(elapsed / duration, 1));
+      const interpolated = start + (offset - start) * progress;
+
+      if (elapsed < duration) {
+        defaultScrollTo(interpolated);
+        requestAnimationFrame(run);
+      } else {
+        defaultScrollTo(interpolated);
+      }
+    };
+
+    requestAnimationFrame(run);
+  }, []);
 
   const rowVirtualizer = useVirtual({
     size: 10000,
@@ -59,19 +48,10 @@ export default function() {
         implement a custom scrolling function for the methods like{" "}
         <code>`scrollToIndex`</code> and <code>`scrollToOffset`</code>
       </p>
+
       <br />
       <br />
 
-      <label>
-        Animation Type:
-        <select
-          value={animationType}
-          onChange={e => setAnimationType(e.target.value)}
-        >
-          <option value="setTimeout">setTimeout</option>
-          <option value="raf">requestAnimationFram</option>
-        </select>
-      </label>
       <div>
         <button
           onClick={() =>