import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faFileAlt, faFileArchive, faFileImport, faFolder } from '@fortawesome/free-solid-svg-icons'; import { bytesToHuman, encodePathSegments } from '@/helpers'; import { differenceInHours, format, formatDistanceToNow } from 'date-fns'; import React, { memo } from 'react'; import { FileObject } from '@/api/server/files/loadDirectory'; import FileDropdownMenu from '@/components/server/files/FileDropdownMenu'; import { ServerContext } from '@/state/server'; import { NavLink, useRouteMatch } from 'react-router-dom'; import tw, { styled } from 'twin.macro'; import isEqual from 'react-fast-compare'; import SelectFileCheckbox from '@/components/server/files/SelectFileCheckbox'; import { usePermissions } from '@/plugins/usePermissions'; import { join } from 'path'; const Row = styled.div` ${tw`flex bg-neutral-700 rounded-sm mb-px text-sm hover:text-neutral-100 cursor-pointer items-center no-underline hover:bg-neutral-600`}; `; const Clickable: React.FC<{ file: FileObject }> = memo(({ file, children }) => { const [ canReadContents ] = usePermissions([ 'file.read-content' ]); const directory = ServerContext.useStoreState(state => state.files.directory); const match = useRouteMatch(); return ( (!canReadContents || (file.isFile && !file.isEditable())) ?
{children}
: {children} ); }, isEqual); const FileObjectRow = ({ file }: { file: FileObject }) => ( { e.preventDefault(); window.dispatchEvent(new CustomEvent(`pterodactyl:files:ctx:${file.key}`, { detail: e.clientX })); }} >
{file.isFile ? : }
{file.name}
{file.isFile && }
); export default memo(FileObjectRow, (prevProps, nextProps) => { /* eslint-disable @typescript-eslint/no-unused-vars */ const { isArchiveType, isEditable, ...prevFile } = prevProps.file; const { isArchiveType: nextIsArchiveType, isEditable: nextIsEditable, ...nextFile } = nextProps.file; /* eslint-enable @typescript-eslint/no-unused-vars */ return isEqual(prevFile, nextFile); });