misc_pterodactyl-panel/resources/scripts/components/elements/ProgressBar.tsx

73 lines
2.2 KiB
TypeScript
Raw Normal View History

import React, { useEffect, useRef, useState } from 'react';
import { useStoreActions, useStoreState } from 'easy-peasy';
import { randomInt } from '@/helpers';
import { CSSTransition } from 'react-transition-group';
import tw, { styled } from 'twin.macro';
const BarFill = styled.div`
${tw`h-full bg-cyan-400`};
transition: 250ms ease-in-out;
box-shadow: 0 -2px 10px 2px hsl(178, 78%, 57%);
`;
export default () => {
const interval = useRef<NodeJS.Timer>();
const timeout = useRef<NodeJS.Timer>();
const [ visible, setVisible ] = useState(false);
const progress = useStoreState(state => state.progress.progress);
const continuous = useStoreState(state => state.progress.continuous);
const setProgress = useStoreActions(actions => actions.progress.setProgress);
useEffect(() => {
return () => {
timeout.current && clearTimeout(timeout.current);
interval.current && clearInterval(interval.current);
};
}, []);
useEffect(() => {
setVisible((progress || 0) > 0);
if (progress === 100) {
timeout.current = setTimeout(() => setProgress(undefined), 500);
}
}, [ progress ]);
useEffect(() => {
if (!continuous) {
interval.current && clearInterval(interval.current);
return;
}
if (!progress || progress === 0) {
setProgress(randomInt(20, 30));
}
}, [ continuous ]);
useEffect(() => {
if (continuous) {
interval.current && clearInterval(interval.current);
const p = progress || 0;
if (p >= 90) {
setProgress(90);
} else {
interval.current = setTimeout(() => setProgress(p + randomInt(1, 5)), 500);
}
}
}, [ progress, continuous ]);
return (
<div css={tw`w-full h-[2px] fixed z-10`}>
<CSSTransition
timeout={150}
2020-07-05 01:30:50 +00:00
appear
in={visible}
2020-07-05 01:30:50 +00:00
unmountOnExit
classNames={'fade'}
>
<BarFill style={{ width: progress === undefined ? '100%' : `${progress}%` }}/>
</CSSTransition>
</div>
);
};