72 lines
2.2 KiB
TypeScript
72 lines
2.2 KiB
TypeScript
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}
|
|
appear
|
|
in={visible}
|
|
unmountOnExit
|
|
classNames={'fade'}
|
|
>
|
|
<BarFill style={{ width: progress === undefined ? '100%' : `${progress}%` }}/>
|
|
</CSSTransition>
|
|
</div>
|
|
);
|
|
};
|