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

57
resources/scripts/components/server/files/UploadButton.tsx
View file

@ -1,25 +1,26 @@
import { CloudUploadIcon } from '@heroicons/react/outline';
import { useSignal } from '@preact/signals-react';
import axios from 'axios';
import getFileUploadUrl from '@/api/server/files/getFileUploadUrl';
import { useEffect, useRef } from 'react';
import tw from 'twin.macro';
import getFileUploadUrl from '@/api/server/files/getFileUploadUrl';
import { Button } from '@/components/elements/button/index';
import React, { useEffect, useRef } from 'react';
import { ModalMask } from '@/components/elements/Modal';
import Fade from '@/components/elements/Fade';
import Portal from '@/components/elements/Portal';
import FadeTransition from '@/components/elements/transitions/FadeTransition';
import type { WithClassname } from '@/components/types';
import useEventListener from '@/plugins/useEventListener';
import { useFlashKey } from '@/plugins/useFlash';
import useFileManagerSwr from '@/plugins/useFileManagerSwr';
import { ServerContext } from '@/state/server';
import { WithClassname } from '@/components/types';
import Portal from '@/components/elements/Portal';
import { CloudUploadIcon } from '@heroicons/react/outline';
import { useSignal } from '@preact/signals-react';
function isFileOrDirectory(event: DragEvent): boolean {
if (!event.dataTransfer?.types) {
return false;
}
return event.dataTransfer.types.some((value) => value.toLowerCase() === 'files');
return event.dataTransfer.types.some(value => value.toLowerCase() === 'files');
}
export default ({ className }: WithClassname) => {
@ -31,22 +32,22 @@ export default ({ className }: WithClassname) => {
const { mutate } = useFileManagerSwr();
const { addError, clearAndAddHttpError } = useFlashKey('files');
const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
const directory = ServerContext.useStoreState((state) => state.files.directory);
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const directory = ServerContext.useStoreState(state => state.files.directory);
const { clearFileUploads, removeFileUpload, pushFileUpload, setUploadProgress } = ServerContext.useStoreActions(
(actions) => actions.files
actions => actions.files,
);
useEventListener(
'dragenter',
(e) => {
e => {
e.preventDefault();
e.stopPropagation();
if (isFileOrDirectory(e)) {
visible.value = true;
}
},
{ capture: true }
{ capture: true },
);
useEventListener('dragexit', () => (visible.value = false), { capture: true });
@ -67,16 +68,16 @@ export default ({ className }: WithClassname) => {
const onFileSubmission = (files: FileList) => {
clearAndAddHttpError();
const list = Array.from(files);
if (list.some((file) => !file.size || (!file.type && file.size === 4096))) {
if (list.some(file => !file.size || (!file.type && file.size === 4096))) {
return addError('Folder uploads are not supported at this time.', 'Error');
}
const uploads = list.map((file) => {
const uploads = list.map(file => {
const controller = new AbortController();
pushFileUpload({ name: file.name, data: { abort: controller, loaded: 0, total: file.size } });
return () =>
getFileUploadUrl(uuid).then((url) =>
getFileUploadUrl(uuid).then(url =>
axios.post(
url,
{ files: file },
@ -84,15 +85,15 @@ export default ({ className }: WithClassname) => {
signal: controller.signal,
headers: { 'Content-Type': 'multipart/form-data' },
params: { directory },
onUploadProgress: (data) => onUploadProgress(data, file.name),
}
)
onUploadProgress: data => onUploadProgress(data, file.name),
},
),
);
});
Promise.all(uploads.map((fn) => fn()))
Promise.all(uploads.map(fn => fn()))
.then(() => mutate())
.catch((error) => {
.catch(error => {
clearFileUploads();
clearAndAddHttpError(error);
});
@ -101,16 +102,18 @@ export default ({ className }: WithClassname) => {
return (
<>
<Portal>
<Fade appear in={visible.value} timeout={75} key={'upload_modal_mask'} unmountOnExit>
<FadeTransition show={visible.value} duration="duration-75" key="upload_modal_mask" appear unmount>
<ModalMask
onClick={() => (visible.value = false)}
onDragOver={(e) => e.preventDefault()}
onDrop={(e) => {
onDragOver={e => e.preventDefault()}
onDrop={e => {
e.preventDefault();
e.stopPropagation();
visible.value = false;
if (!e.dataTransfer?.files.length) return;
if (!e.dataTransfer?.files.length) {
return;
}
onFileSubmission(e.dataTransfer.files);
}}
@ -128,13 +131,13 @@ export default ({ className }: WithClassname) => {
</div>
</div>
</ModalMask>
</Fade>
</FadeTransition>
</Portal>
<input
type={'file'}
ref={fileUploadInput}
css={tw`hidden`}
onChange={(e) => {
onChange={e => {
if (!e.currentTarget.files) return;
onFileSubmission(e.currentTarget.files);