#Adaptive Progress

import AdaptiveModeDemo from "@/shared/adaptiveModeDemo";
import { AdaptiveCircularProgress } from "adaptive-material-ui/components/circularProgress";

export default function () {
  return (
    <AdaptiveModeDemo>
      <AdaptiveCircularProgress />
    </AdaptiveModeDemo>
  );
}

import AdaptiveModeDemo from "@/shared/adaptiveModeDemo";
import { DemoList, DemoListItem } from "@/shared/demoList";
import { AdaptiveCircularProgress } from "adaptive-material-ui/components/circularProgress";
import { useEffect, useState } from "react";

export default function () {
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    const timer = window.setInterval(() => {
      setProgress((v) => (v >= 100 ? 0 : v + 12.5));
    }, 1000);

    return () => window.clearInterval(timer);
  }, []);

  return (
    <AdaptiveModeDemo>
      <DemoList>
        <DemoListItem title="Color">
          <AdaptiveCircularProgress color="primary" />
          <AdaptiveCircularProgress color="secondary" />
          <AdaptiveCircularProgress color="inherit" />
          <AdaptiveCircularProgress color="error" />
          <AdaptiveCircularProgress color="info" />
          <AdaptiveCircularProgress color="success" />
          <AdaptiveCircularProgress color="warning" />
        </DemoListItem>
        <DemoListItem title="Size">
          <AdaptiveCircularProgress size="30px" />
          <AdaptiveCircularProgress size={40} />
          <AdaptiveCircularProgress size="3rem" />
        </DemoListItem>
        <DemoListItem title="Disable Shrink">
          <AdaptiveCircularProgress disableShrink />
        </DemoListItem>
        <DemoListItem title="Variant">
          <AdaptiveCircularProgress variant="determinate" value={progress} />
          <AdaptiveCircularProgress
            variant="indeterminate-alt"
            value={progress}
          />
        </DemoListItem>
      </DemoList>
    </AdaptiveModeDemo>
  );
}

import AdaptiveModeDemo from "@/shared/adaptiveModeDemo";
import { AdaptiveLinearProgress } from "adaptive-material-ui/components/linearProgress";

export default function () {
  return (
    <AdaptiveModeDemo>
      <AdaptiveLinearProgress />
    </AdaptiveModeDemo>
  );
}

import AdaptiveModeDemo from "@/shared/adaptiveModeDemo";
import { DemoList, DemoListItem } from "@/shared/demoList";
import { AdaptiveLinearProgress } from "adaptive-material-ui/components/linearProgress";
import { useEffect, useState } from "react";

export default function () {
  const [progress, setProgress] = useState(0);
  const [buffer, setBuffer] = useState(10);

  useEffect(() => {
    let prevProgress = 0;
    let prevBuffer = 0;

    function updateProgress() {
      if (prevProgress === 100) {
        setProgress(0);
        setBuffer(10);
        prevProgress = 0;
        prevBuffer = 10;
      } else {
        setProgress(prevProgress + 1);

        if (prevBuffer < 100 && prevProgress % 5 === 0) {
          const newBuffer = prevBuffer + 1 + Math.random() * 10;
          setBuffer((prevBuffer = newBuffer > 100 ? 100 : newBuffer));
        }
        prevProgress = prevProgress + 1;
      }
    }

    const timer = window.setInterval(() => updateProgress(), 100);
    return () => window.clearInterval(timer);
  }, []);

  return (
    <AdaptiveModeDemo>
      <DemoList>
        <DemoListItem title="Color">
          <AdaptiveLinearProgress color="primary" />
          <AdaptiveLinearProgress color="secondary" />
          <AdaptiveLinearProgress color="inherit" />
        </DemoListItem>
        <DemoListItem title="Determinate">
          <AdaptiveLinearProgress
            color="primary"
            variant="determinate"
            value={30}
          />
          <AdaptiveLinearProgress
            color="secondary"
            variant="determinate"
            value={45}
          />
          <AdaptiveLinearProgress
            color="inherit"
            variant="determinate"
            value={65}
          />
        </DemoListItem>
        <DemoListItem title="Buffer">
          <AdaptiveLinearProgress
            variant="buffer"
            value={progress}
            valueBuffer={buffer}
          />
        </DemoListItem>
      </DemoList>
    </AdaptiveModeDemo>
  );
}