44 lines
1.4 KiB
TypeScript
44 lines
1.4 KiB
TypeScript
// Copyright 2024 Signal Messenger, LLC
|
|
// SPDX-License-Identifier: AGPL-3.0-only
|
|
|
|
import * as React from 'react';
|
|
|
|
import { ProgressCircle } from './ProgressCircle';
|
|
import type { ComponentMeta } from '../storybook/types';
|
|
|
|
type Props = React.ComponentProps<typeof ProgressCircle>;
|
|
export default {
|
|
title: 'Components/ProgressCircle',
|
|
component: ProgressCircle,
|
|
args: { fractionComplete: 0, width: undefined, strokeWidth: undefined },
|
|
} satisfies ComponentMeta<Props>;
|
|
|
|
export function Zero(args: Props): JSX.Element {
|
|
return <ProgressCircle {...args} />;
|
|
}
|
|
|
|
export function Thirty(args: Props): JSX.Element {
|
|
return <ProgressCircle {...args} fractionComplete={0.3} />;
|
|
}
|
|
|
|
export function Done(args: Props): JSX.Element {
|
|
return <ProgressCircle {...args} fractionComplete={1} />;
|
|
}
|
|
export function Increasing(args: Props): JSX.Element {
|
|
const fractionComplete = useIncreasingFractionComplete();
|
|
return <ProgressCircle {...args} fractionComplete={fractionComplete} />;
|
|
}
|
|
|
|
function useIncreasingFractionComplete() {
|
|
const [fractionComplete, setFractionComplete] = React.useState(0);
|
|
React.useEffect(() => {
|
|
if (fractionComplete >= 1) {
|
|
return;
|
|
}
|
|
const timeout = setTimeout(() => {
|
|
setFractionComplete(cur => Math.min(1, cur + 0.1));
|
|
}, 300);
|
|
return () => clearTimeout(timeout);
|
|
}, [fractionComplete]);
|
|
return fractionComplete;
|
|
}
|