6ec95262af
- Updated .env.example to include configuration for OnlyOffice Document Server. - Modified the workspace configuration to remove the drive-suite path. - Adjusted TypeScript environment imports for consistency. - Enhanced Next.js configuration to disable canvas in Webpack. - Updated package.json to include new dependencies for OnlyOffice and PDF.js. - Added global styles for OnlyOffice theme integration in the CSS. - Created new layout and page components for the Drive feature, including public sharing and editing functionalities. - Updated metadata handling across various layouts to reflect the new app structure.
103 lines
3.3 KiB
TypeScript
103 lines
3.3 KiB
TypeScript
"use client"
|
|
|
|
import { useCallback, useState } from "react"
|
|
import { DriveFileContextMenu } from "@/components/drive/drive-file-context-menu"
|
|
import { DriveFileMenuButton } from "@/components/drive/drive-file-actions-menu"
|
|
import type { useDriveMutations } from "@/lib/api/hooks/use-drive-queries"
|
|
import type { PublicShareThumbContext } from "@/lib/api/hooks/use-public-share-preview-thumb"
|
|
import { DriveFileTypeIcon } from "@/lib/drive/drive-file-icon"
|
|
import type { DriveFileInfo } from "@/lib/api/types"
|
|
import { displayFileName } from "@/lib/drive/display-file-name"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
const FOLDER_TITLE_CLASS =
|
|
"min-w-0 flex-1 truncate text-sm font-medium text-[#3c4043] dark:text-[#e8eaed]"
|
|
|
|
export function DriveFolderGridCard({
|
|
folder,
|
|
allItems,
|
|
inSharedView,
|
|
isSelected,
|
|
isTrash,
|
|
allowShare = true,
|
|
writable = true,
|
|
hideFavorite = false,
|
|
disableDnd = false,
|
|
mutations,
|
|
onDownloadItem,
|
|
publicShare,
|
|
onOpen,
|
|
onItemClick,
|
|
registerRef,
|
|
}: {
|
|
folder: DriveFileInfo
|
|
allItems: DriveFileInfo[]
|
|
inSharedView?: boolean
|
|
isSelected: boolean
|
|
isTrash?: boolean
|
|
allowShare?: boolean
|
|
writable?: boolean
|
|
hideFavorite?: boolean
|
|
disableDnd?: boolean
|
|
mutations?: ReturnType<typeof useDriveMutations>
|
|
onDownloadItem?: (file: DriveFileInfo) => void
|
|
publicShare?: PublicShareThumbContext
|
|
onOpen: () => void
|
|
onItemClick: (file: DriveFileInfo, e: React.MouseEvent) => void
|
|
registerRef?: (path: string, el: HTMLDivElement | null) => void
|
|
}) {
|
|
const [menuActive, setMenuActive] = useState(false)
|
|
const [contextMenuActive, setContextMenuActive] = useState(false)
|
|
const label = displayFileName(folder.name)
|
|
const highlighted = isSelected || menuActive || contextMenuActive
|
|
|
|
const setRef = useCallback(
|
|
(el: HTMLDivElement | null) => registerRef?.(folder.path, el),
|
|
[folder.path, registerRef]
|
|
)
|
|
|
|
return (
|
|
<DriveFileContextMenu
|
|
file={folder}
|
|
allItems={allItems}
|
|
isTrash={isTrash}
|
|
allowShare={allowShare}
|
|
writable={writable}
|
|
hideFavorite={hideFavorite}
|
|
disableDnd={disableDnd}
|
|
mutations={mutations}
|
|
onDownloadRequest={onDownloadItem ? () => onDownloadItem(folder) : undefined}
|
|
onOpen={onOpen}
|
|
variant="grid"
|
|
registerRef={registerRef ? setRef : undefined}
|
|
onItemClick={onItemClick}
|
|
onContextMenuActiveChange={setContextMenuActive}
|
|
className={cn(
|
|
"flex w-full min-w-0 cursor-pointer items-center gap-2 rounded-xl px-3 py-3 transition-colors",
|
|
highlighted
|
|
? "bg-[#c2e7ff] dark:bg-primary/25"
|
|
: "bg-[#f8f9fa] hover:bg-[#f1f3f4] dark:bg-muted/30 dark:hover:bg-muted/45"
|
|
)}
|
|
>
|
|
<div className="flex min-w-0 flex-1 items-center gap-3 text-left">
|
|
<DriveFileTypeIcon file={folder} inSharedView={inSharedView} size="md" />
|
|
<span className={FOLDER_TITLE_CLASS} title={label}>
|
|
{label}
|
|
</span>
|
|
</div>
|
|
<DriveFileMenuButton
|
|
file={folder}
|
|
allItems={allItems}
|
|
isTrash={isTrash}
|
|
allowShare={allowShare}
|
|
writable={writable}
|
|
hideFavorite={hideFavorite}
|
|
mutations={mutations}
|
|
onDownloadRequest={onDownloadItem ? () => onDownloadItem(folder) : undefined}
|
|
onOpen={onOpen}
|
|
onActiveChange={setMenuActive}
|
|
/>
|
|
</DriveFileContextMenu>
|
|
)
|
|
}
|