danvics/openreader
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #56 from RobbyV2/DocSelectLoad

Browse source
This commit is contained in:
Richard Roberson 2025-07-19 21:16:41 -06:00 committed by GitHub
commit f5776e5494
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 19 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/components/doclist/DocumentListItem.tsx
View file

@ -1,7 +1,9 @@
import Link from 'next/link'; import Link from 'next/link';
import { DragEvent } from 'react'; import { DragEvent, useState } from 'react';
import { useRouter } from 'next/navigation';
import { Button } from '@headlessui/react'; import { Button } from '@headlessui/react';
import { PDFIcon, EPUBIcon, FileIcon } from '@/components/icons/Icons'; import { PDFIcon, EPUBIcon, FileIcon } from '@/components/icons/Icons';
import { LoadingSpinner } from '@/components/Spinner';
import { DocumentListDocument } from '@/types/documents'; import { DocumentListDocument } from '@/types/documents';
interface DocumentListItemProps { interface DocumentListItemProps {
@ -27,10 +29,19 @@ export function DocumentListItem({
onDrop, onDrop,
isDropTarget = false, isDropTarget = false,
}: DocumentListItemProps) { }: DocumentListItemProps) {
const [loading, setLoading] = useState(false);
const router = useRouter();
// Only allow drag and drop interactions for documents not in folders // Only allow drag and drop interactions for documents not in folders
const isDraggable = dragEnabled && !doc.folderId; const isDraggable = dragEnabled && !doc.folderId;
const allowDropTarget = !doc.folderId; const allowDropTarget = !doc.folderId;
const handleDocumentClick = (e: React.MouseEvent) => {
e.preventDefault();
setLoading(true);
router.push(`/${doc.type}/${encodeURIComponent(doc.id)}`);
};
return ( return (
<div <div
draggable={isDraggable} draggable={isDraggable}
@ -43,13 +54,20 @@ export function DocumentListItem({
w-full w-full
${allowDropTarget && isDropTarget ? 'ring-2 ring-accent bg-primary/10' : ''} ${allowDropTarget && isDropTarget ? 'ring-2 ring-accent bg-primary/10' : ''}
bg-background rounded-lg p-2 shadow hover:shadow-md transition-shadow bg-background rounded-lg p-2 shadow hover:shadow-md transition-shadow
relative
`} `}
> >
{loading && (
<div className="absolute inset-0 z-20 flex items-center justify-center bg-background/80 rounded-lg">
<LoadingSpinner />
</div>
)}
<div className="flex items-center rounded-lg"> <div className="flex items-center rounded-lg">
<Link <Link
href={`/${doc.type}/${encodeURIComponent(doc.id)}`} href={`/${doc.type}/${encodeURIComponent(doc.id)}`}
draggable={false} draggable={false}
className="document-link flex items-center align-center space-x-4 w-full truncate hover:bg-base rounded-lg p-0.5 sm:p-1 transition-colors" className="document-link flex items-center align-center space-x-4 w-full truncate hover:bg-base rounded-lg p-0.5 sm:p-1 transition-colors"
onClick={handleDocumentClick}
> >
<div className="flex-shrink-0"> <div className="flex-shrink-0">
{doc.type === 'pdf' ? <PDFIcon /> : doc.type === 'epub' ? <EPUBIcon /> : <FileIcon />} {doc.type === 'pdf' ? <PDFIcon /> : doc.type === 'epub' ? <EPUBIcon /> : <FileIcon />}