Skynet/misc_pterodactyl-panel
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

React 18 and Vite (#4510)

Browse source
This commit is contained in:
Matthew Penner 2022-11-25 13:25:03 -07:00 • committed by GitHub
parent 1bb1b13f6d
commit 21613fa602
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
244 changed files with 4547 additions and 8933 deletions
Download patch file Download diff file Expand all files Collapse all files

52
resources/scripts/components/elements/ProgressBar.tsx
View file

@ -1,25 +1,19 @@
import React, { useEffect, useRef, useState } from 'react';
import styled from 'styled-components/macro';
import { Transition } from '@headlessui/react';
import { useStoreActions, useStoreState } from 'easy-peasy';
import { randomInt } from '@/helpers';
import { CSSTransition } from 'react-transition-group';
import tw from 'twin.macro';
import { Fragment, useEffect, useRef, useState } from 'react';
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%);
`;
import { randomInt } from '@/helpers';
type Timer = ReturnType<typeof setTimeout>;
export default () => {
const interval = useRef<Timer>(null) as React.MutableRefObject<Timer>;
const timeout = useRef<Timer>(null) as React.MutableRefObject<Timer>;
function ProgressBar() {
const interval = useRef<Timer>();
const timeout = useRef<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);
const continuous = useStoreState(state => state.progress.continuous);
const progress = useStoreState(state => state.progress.progress);
const setProgress = useStoreActions(actions => actions.progress.setProgress);
useEffect(() => {
return () => {
@ -59,10 +53,26 @@ export default () => {
}, [progress, continuous]);
return (
<div css={tw`w-full fixed`} style={{ height: '2px' }}>
<CSSTransition timeout={150} appear in={visible} unmountOnExit classNames={'fade'}>
<BarFill style={{ width: progress === undefined ? '100%' : `${progress}%` }} />
</CSSTransition>
<div className="fixed h-[2px] w-full">
<Transition
as={Fragment}
show={visible}
enter="transition-opacity duration-150"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="transition-opacity duration-150"
leaveFrom="opacity-100"
leaveTo="opacity-0"
appear
unmount
>
<div
className="h-full bg-cyan-400 shadow-[0_-2px_10px_2px] shadow-[#3CE7E1] transition-all duration-[250ms] ease-in-out"
style={{ width: progress === undefined ? '100%' : `${progress}%` }}
/>
</Transition>
</div>
);
};
}
export default ProgressBar;