[docs][LinearBuffer] Fix demo

mbrookes · Jul 5, 2024 · 28ce82d · 28ce82d
1 parent e5030ad
commit 28ce82d
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 12 deletions.
diff --git a/docs/data/material/components/progress/LinearBuffer.js b/docs/data/material/components/progress/LinearBuffer.js
@@ -6,25 +6,42 @@ export default function LinearBuffer() {
   const [progress, setProgress] = React.useState(0);
   const [buffer, setBuffer] = React.useState(10);
 
+  const bufferRef = React.useRef(() => {});
+  React.useEffect(() => {
+    bufferRef.current = () => {
+      if (buffer < 100) {
+          const newBuffer = buffer + 1 + Math.random() * 10;
+          setBuffer(newBuffer > 100 ? 100 : newBuffer);
+      }
+    };
+  });
+
   const progressRef = React.useRef(() => {});
   React.useEffect(() => {
     progressRef.current = () => {
-      if (progress > 100) {
+      if (progress === 100) {
         setProgress(0);
         setBuffer(10);
       } else {
-        const diff = Math.random() * 10;
-        const diff2 = Math.random() * 10;
-        setProgress(progress + diff);
-        setBuffer(progress + diff + diff2);
+        setProgress(progress + 1);
       }
     };
   });
 
+    React.useEffect(() => {
+    const timer = setInterval(() => {
+      bufferRef.current();
+    }, 500);
+
+    return () => {
+      clearInterval(timer);
+    };
+  }, []);
+
   React.useEffect(() => {
     const timer = setInterval(() => {
       progressRef.current();
-    }, 500);
+    }, 100);
 
     return () => {
       clearInterval(timer);

diff --git a/docs/data/material/components/progress/LinearBuffer.tsx b/docs/data/material/components/progress/LinearBuffer.tsx
@@ -6,25 +6,42 @@ export default function LinearBuffer() {
   const [progress, setProgress] = React.useState(0);
   const [buffer, setBuffer] = React.useState(10);
 
+  const bufferRef = React.useRef(() => {});  
+  React.useEffect(() => {
+    bufferRef.current = () => {
+      if (buffer < 100) {
+          const newBuffer = buffer + 1 + Math.random() * 10;
+          setBuffer(newBuffer > 100 ? 100 : newBuffer);
+      }
+    };
+  });
+
   const progressRef = React.useRef(() => {});
   React.useEffect(() => {
     progressRef.current = () => {
-      if (progress > 100) {
+      if (progress === 100) {
         setProgress(0);
         setBuffer(10);
       } else {
-        const diff = Math.random() * 10;
-        const diff2 = Math.random() * 10;
-        setProgress(progress + diff);
-        setBuffer(progress + diff + diff2);
+        setProgress(progress + 1);
       }
     };
   });
+
+    React.useEffect(() => {
+    const timer = setInterval(() => {
+      bufferRef.current();
+    }, 500);
+
+    return () => {
+      clearInterval(timer);
+    };
+  }, []);
 
   React.useEffect(() => {
     const timer = setInterval(() => {
       progressRef.current();
-    }, 500);
+    }, 100);
 
     return () => {
       clearInterval(timer);