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

34
resources/scripts/components/server/files/FileManagerContainer.tsx
View file

@ -1,6 +1,8 @@
import React, { useEffect } from 'react';
import type { ChangeEvent } from 'react';
import { useEffect } from 'react';
import tw from 'twin.macro';
import { httpErrorToHuman } from '@/api/http';
import { CSSTransition } from 'react-transition-group';
import Spinner from '@/components/elements/Spinner';
import FileObjectRow from '@/components/server/files/FileObjectRow';
import FileManagerBreadcrumbs from '@/components/server/files/FileManagerBreadcrumbs';
@ -9,7 +11,6 @@ import NewDirectoryButton from '@/components/server/files/NewDirectoryButton';
import { NavLink, useLocation } from 'react-router-dom';
import Can from '@/components/elements/Can';
import { ServerError } from '@/components/elements/ScreenBlock';
import tw from 'twin.macro';
import { Button } from '@/components/elements/button/index';
import { ServerContext } from '@/state/server';
import useFileManagerSwr from '@/plugins/useFileManagerSwr';
@ -22,24 +23,25 @@ import ErrorBoundary from '@/components/elements/ErrorBoundary';
import { FileActionCheckbox } from '@/components/server/files/SelectFileCheckbox';
import { hashToPath } from '@/helpers';
import style from './style.module.css';
import FadeTransition from '@/components/elements/transitions/FadeTransition';
const sortFiles = (files: FileObject[]): FileObject[] => {
const sortedFiles: FileObject[] = files
.sort((a, b) => a.name.localeCompare(b.name))
.sort((a, b) => (a.isFile === b.isFile ? 0 : a.isFile ? 1 : -1));
return sortedFiles.filter((file, index) => index === 0 || file.name !== sortedFiles[index - 1].name);
return sortedFiles.filter((file, index) => index === 0 || file.name !== sortedFiles[index - 1]?.name);
};
export default () => {
const id = ServerContext.useStoreState((state) => state.server.data!.id);
const id = ServerContext.useStoreState(state => state.server.data!.id);
const { hash } = useLocation();
const { data: files, error, mutate } = useFileManagerSwr();
const directory = ServerContext.useStoreState((state) => state.files.directory);
const clearFlashes = useStoreActions((actions) => actions.flashes.clearFlashes);
const setDirectory = ServerContext.useStoreActions((actions) => actions.files.setDirectory);
const directory = ServerContext.useStoreState(state => state.files.directory);
const clearFlashes = useStoreActions(actions => actions.flashes.clearFlashes);
const setDirectory = ServerContext.useStoreActions(actions => actions.files.setDirectory);
const setSelectedFiles = ServerContext.useStoreActions((actions) => actions.files.setSelectedFiles);
const selectedFilesLength = ServerContext.useStoreState((state) => state.files.selectedFiles.length);
const setSelectedFiles = ServerContext.useStoreActions(actions => actions.files.setSelectedFiles);
const selectedFilesLength = ServerContext.useStoreState(state => state.files.selectedFiles.length);
useEffect(() => {
clearFlashes('files');
@ -48,11 +50,11 @@ export default () => {
}, [hash]);
useEffect(() => {
mutate();
void mutate();
}, [directory]);
const onSelectAllClick = (e: React.ChangeEvent<HTMLInputElement>) => {
setSelectedFiles(e.currentTarget.checked ? files?.map((file) => file.name) || [] : []);
const onSelectAllClick = (e: ChangeEvent<HTMLInputElement>) => {
setSelectedFiles(e.currentTarget.checked ? files?.map(file => file.name) || [] : []);
};
if (error) {
@ -92,7 +94,7 @@ export default () => {
{!files.length ? (
<p css={tw`text-sm text-neutral-400 text-center`}>This directory seems to be empty.</p>
) : (
<CSSTransition classNames={'fade'} timeout={150} appear in>
<FadeTransition duration="duration-150" appear show>
<div>
{files.length > 250 && (
<div css={tw`rounded bg-yellow-400 mb-px p-3`}>
@ -102,12 +104,12 @@ export default () => {
</p>
</div>
)}
{sortFiles(files.slice(0, 250)).map((file) => (
{sortFiles(files.slice(0, 250)).map(file => (
<FileObjectRow key={file.key} file={file} />
))}
<MassActionsBar />
</div>
</CSSTransition>
</FadeTransition>
)}
</>
)}