145 lines
4.5 KiB
TypeScript
145 lines
4.5 KiB
TypeScript
"use client"
|
|
|
|
import type { InputHTMLAttributes } from "react"
|
|
import {
|
|
FileSpreadsheet,
|
|
FileText,
|
|
FolderPlus,
|
|
FolderUp,
|
|
PenLine,
|
|
Plus,
|
|
Presentation,
|
|
Upload,
|
|
} from "lucide-react"
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu"
|
|
import { DriveNameDialog } from "@/components/drive/drive-name-dialog"
|
|
import {
|
|
DRIVE_NEW_MENU_ITEM_CLASS,
|
|
useDriveNewMenu,
|
|
} from "@/lib/hooks/use-drive-new-menu"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
export function DriveNewMenu({ parentPath }: { parentPath: string }) {
|
|
const {
|
|
pendingKind,
|
|
pendingMeta,
|
|
defaultName,
|
|
confirmNew,
|
|
uploadFiles,
|
|
importFolder,
|
|
pickKind,
|
|
closeNameDialog,
|
|
} = useDriveNewMenu(parentPath)
|
|
|
|
return (
|
|
<>
|
|
<DriveNameDialog
|
|
open={pendingKind !== null}
|
|
onOpenChange={(open) => {
|
|
if (!open) closeNameDialog()
|
|
}}
|
|
title={
|
|
pendingKind === "folder"
|
|
? "Nouveau dossier"
|
|
: pendingMeta
|
|
? `Nouveau ${pendingMeta.menuLabel.toLowerCase()}`
|
|
: "Nouveau"
|
|
}
|
|
defaultValue={defaultName}
|
|
confirmLabel="Créer"
|
|
onConfirm={confirmNew}
|
|
/>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<button
|
|
type="button"
|
|
className={cn(
|
|
"inline-flex h-12 w-auto min-w-0 cursor-pointer items-center justify-start gap-3 rounded-2xl border border-border",
|
|
"bg-mail-surface px-5 text-[15px] font-medium text-foreground shadow-sm outline-none transition-[box-shadow,background-color]",
|
|
"hover:bg-accent hover:shadow-md focus-visible:ring-2 focus-visible:ring-ring/50",
|
|
)}
|
|
>
|
|
<Plus className="size-5 shrink-0 opacity-80" />
|
|
Nouveau
|
|
</button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent
|
|
align="start"
|
|
sideOffset={8}
|
|
data-drive-menu-surface
|
|
className="w-64 border-border bg-mail-surface-elevated p-1.5 shadow-lg"
|
|
>
|
|
<DropdownMenuItem
|
|
className={DRIVE_NEW_MENU_ITEM_CLASS}
|
|
onClick={() => pickKind("document")}
|
|
>
|
|
<FileText className="text-blue-600" />
|
|
Document
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem
|
|
className={DRIVE_NEW_MENU_ITEM_CLASS}
|
|
onClick={() => pickKind("spreadsheet")}
|
|
>
|
|
<FileSpreadsheet className="text-green-600" />
|
|
Tableur
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem
|
|
className={DRIVE_NEW_MENU_ITEM_CLASS}
|
|
onClick={() => pickKind("presentation")}
|
|
>
|
|
<Presentation className="text-amber-600" />
|
|
Présentation
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem
|
|
className={DRIVE_NEW_MENU_ITEM_CLASS}
|
|
onClick={() => pickKind("drawing")}
|
|
>
|
|
<PenLine className="text-violet-600" />
|
|
Dessin
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem className={DRIVE_NEW_MENU_ITEM_CLASS} onClick={() => pickKind("folder")}>
|
|
<FolderPlus className="text-amber-500" />
|
|
Dossier
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem className={DRIVE_NEW_MENU_ITEM_CLASS} asChild>
|
|
<label className="flex cursor-pointer items-center">
|
|
<Upload className="text-sky-600" />
|
|
Importer un fichier
|
|
<input
|
|
type="file"
|
|
className="hidden"
|
|
multiple
|
|
onChange={async (e) => {
|
|
await uploadFiles(e.target.files)
|
|
e.target.value = ""
|
|
}}
|
|
/>
|
|
</label>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem className={DRIVE_NEW_MENU_ITEM_CLASS} asChild>
|
|
<label className="flex cursor-pointer items-center">
|
|
<FolderUp className="text-violet-600" />
|
|
Importer un dossier
|
|
<input
|
|
type="file"
|
|
className="hidden"
|
|
multiple
|
|
{...({ webkitdirectory: "", directory: "" } as InputHTMLAttributes<HTMLInputElement>)}
|
|
onChange={async (e) => {
|
|
await importFolder(e.target.files)
|
|
e.target.value = ""
|
|
}}
|
|
/>
|
|
</label>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</>
|
|
)
|
|
}
|