@xk2800/nextjs-template 0.7.1-beta.2 → 0.7.1-beta.3

package/components/ui/file-upload.tsx

@@ -4,6 +4,8 @@ import * as React from "react"
 import { Camera, ImagePlus, Upload, X } from "lucide-react"
 
 import { Button } from "./button"
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "./dialog"
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "./sheet"
 import { cn } from "../../lib/utils"
 
 type FileUploadProps = {
@@ -13,6 +15,13 @@ type FileUploadProps = {
   gallery?: boolean
   /** Drop files onto the component. */
   dragDrop?: boolean
+  /**
+   * Pressing the drop zone opens the picker instead of showing separate buttons. With both
+   * `camera` and `gallery` the user is asked which one; with one, it opens directly. Needs `dragDrop`.
+   */
+  clickable?: boolean
+  /** How a touch-screen user is asked "camera or gallery" with `clickable`: a bottom sheet or a centered modal. */
+  chooser?: "sheet" | "modal"
   /** Same format as `<input accept>`. Also enforced on dropped files. */
   accept?: string
   multiple?: boolean
@@ -49,6 +58,8 @@ function FileUpload({
   camera = false,
   gallery = false,
   dragDrop = false,
+  clickable = false,
+  chooser = "sheet",
   accept = "image/*",
   multiple = true,
   maxFiles,
@@ -68,6 +79,8 @@ function FileUpload({
   const [dragging, setDragging] = React.useState(false)
   const cameraRef = React.useRef<HTMLInputElement>(null)
   const galleryRef = React.useRef<HTMLInputElement>(null)
+  const [askOpen, setAskOpen] = React.useState(false)
+  const pointerType = React.useRef("")
 
   // Created and revoked in the same effect: with useMemo, Strict Mode's
   // simulated unmount revoked the URLs and the remount reused the dead ones.
@@ -112,6 +125,37 @@ function FileUpload({
 
   if (!camera && !gallery && !dragDrop) return null
 
+  // Pressing the drop zone only does something if there's a picker to open.
+  const pickable = clickable && !disabled && (camera || gallery)
+  // The camera only means something on touch devices, so mouse and keyboard skip the
+  // question and open the gallery (or the only source there is).
+  const openDefault = () => (gallery ? galleryRef : cameraRef).current?.click()
+  const units = multiple ? "files" : "a file"
+
+  const askTitle = `Add ${multiple ? "photos" : "a photo"}`
+  const askDescription = "Take a new photo or pick from your gallery."
+  const askButtons = (
+    <div className="grid gap-2">
+      {[
+        { ref: cameraRef, Icon: Camera, text: "Take photo" },
+        { ref: galleryRef, Icon: ImagePlus, text: "Choose from gallery" },
+      ].map(({ ref, Icon, text }) => (
+        <Button
+          key={text}
+          type="button"
+          variant="outline"
+          className="h-12 justify-start"
+          onClick={() => {
+            setAskOpen(false)
+            ref.current?.click()
+          }}
+        >
+          <Icon /> {text}
+        </Button>
+      ))}
+    </div>
+  )
+
   const buttons = (
     <div className="flex flex-wrap justify-center gap-2">
       {camera && (
@@ -138,6 +182,28 @@ function FileUpload({
 
       {dragDrop ? (
         <div
+          role={pickable ? "button" : undefined}
+          tabIndex={pickable ? 0 : undefined}
+          onPointerDown={pickable ? (e) => (pointerType.current = e.pointerType) : undefined}
+          onClick={
+            pickable
+              ? () => {
+                  if (camera && gallery && pointerType.current !== "mouse") setAskOpen(true)
+                  else openDefault()
+                  pointerType.current = ""
+                }
+              : undefined
+          }
+          onKeyDown={
+            pickable
+              ? (e) => {
+                  if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault()
+                    openDefault()
+                  }
+                }
+              : undefined
+          }
           onDragOver={(e) => {
             e.preventDefault()
             if (!disabled) setDragging(true)
@@ -151,6 +217,7 @@ function FileUpload({
           aria-disabled={disabled}
           className={cn(
             "flex flex-col items-center gap-3 rounded-lg border-2 border-dashed p-6 text-center text-sm text-muted-foreground transition-colors",
+            pickable && "cursor-pointer outline-none hover:bg-muted/50 focus-visible:ring-2 focus-visible:ring-ring",
             // Before the state classes so a custom border can't hide the drag highlight.
             dropzoneClassName,
             dragging && "border-primary bg-primary/5",
@@ -159,15 +226,49 @@ function FileUpload({
         >
           {icon}
           <div className="space-y-1">
-            <p className={labelClassName}>{label ?? `Drag and drop ${multiple ? "files" : "a file"} here`}</p>
+            <p className={labelClassName}>
+              {label ??
+                (pickable ? (
+                  <>
+                    <span className="pointer-coarse:hidden">Drag and drop {units} here, or click to browse</span>
+                    <span className="hidden pointer-coarse:inline">Tap to add {units}</span>
+                  </>
+                ) : (
+                  `Drag and drop ${units} here`
+                ))}
+            </p>
             {description && <p className={cn("text-xs", descriptionClassName)}>{description}</p>}
           </div>
-          {buttons}
+          {!pickable && buttons}
         </div>
       ) : (
         buttons
       )}
 
+      {pickable && camera && gallery && (
+        chooser === "modal" ? (
+          <Dialog open={askOpen} onOpenChange={setAskOpen}>
+            <DialogContent className="sm:max-w-sm">
+              <DialogHeader>
+                <DialogTitle>{askTitle}</DialogTitle>
+                <DialogDescription>{askDescription}</DialogDescription>
+              </DialogHeader>
+              {askButtons}
+            </DialogContent>
+          </Dialog>
+        ) : (
+          <Sheet open={askOpen} onOpenChange={setAskOpen}>
+            <SheetContent side="bottom" className="mx-auto max-w-lg rounded-t-xl pb-[max(1rem,env(safe-area-inset-bottom))]">
+              <SheetHeader className="pb-0">
+                <SheetTitle>{askTitle}</SheetTitle>
+                <SheetDescription>{askDescription}</SheetDescription>
+              </SheetHeader>
+              <div className="px-4">{askButtons}</div>
+            </SheetContent>
+          </Sheet>
+        )
+      )}
+
       {error && (
         <p role="alert" className="text-sm text-destructive">
           {error}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xk2800/nextjs-template",
-  "version": "0.7.1-beta.2",
+  "version": "0.7.1-beta.3",
   "private": false,
   "repository": {
     "type": "git",