feat(media): extract workspace package

2026-09-20 16:44:15 +08:00
parent 2a6284d1b0
commit c519d4e74b
29 changed files with 112 additions and 16 deletions
@@ -0,0 +1,112 @@
+import * as React from "react"
+import { useTranslate } from "@workspace/i18n"
+import { Button } from "@workspace/ui/components/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@workspace/ui/components/dialog"
+import { Input } from "@workspace/ui/components/input"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+  InputGroupText,
+} from "@workspace/ui/components/input-group"
+
+import { mediaMessages } from "./messages"
+
+export interface MediaFolderDialogProps {
+  description: string
+  initialName?: string
+  lockedSuffix?: string
+  maxLength?: number
+  open: boolean
+  pending?: boolean
+  title: string
+  onOpenChange: (open: boolean) => void
+  onSubmit: (name: string) => void
+}
+
+export function MediaFolderDialog({
+  description,
+  initialName = "",
+  lockedSuffix,
+  maxLength = 50,
+  open,
+  pending,
+  title,
+  onOpenChange,
+  onSubmit,
+}: MediaFolderDialogProps) {
+  const t = useTranslate()
+  const [name, setName] = React.useState(initialName)
+
+  React.useEffect(() => {
+    if (open) setName(initialName)
+  }, [initialName, open])
+
+  const normalizedName = name.trim()
+  const input = (
+    <Input
+      autoFocus
+      value={name}
+      maxLength={maxLength}
+      placeholder={t(mediaMessages.folderNamePlaceholder)}
+      aria-label={t(mediaMessages.folderName)}
+      onChange={(event) => setName(event.target.value)}
+    />
+  )
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <form
+          className="contents"
+          onSubmit={(event) => {
+            event.preventDefault()
+            if (normalizedName) onSubmit(normalizedName)
+          }}
+        >
+          <DialogHeader>
+            <DialogTitle>{title}</DialogTitle>
+            <DialogDescription>{description}</DialogDescription>
+          </DialogHeader>
+          {lockedSuffix ? (
+            <InputGroup>
+              <InputGroupInput
+                autoFocus
+                value={name}
+                maxLength={maxLength}
+                placeholder={t(mediaMessages.folderNamePlaceholder)}
+                aria-label={t(mediaMessages.folderName)}
+                onChange={(event) => setName(event.target.value)}
+              />
+              <InputGroupAddon align="inline-end">
+                <InputGroupText>{lockedSuffix}</InputGroupText>
+              </InputGroupAddon>
+            </InputGroup>
+          ) : (
+            input
+          )}
+          <DialogFooter>
+            <Button
+              type="button"
+              variant="outline"
+              disabled={pending}
+              onClick={() => onOpenChange(false)}
+            >
+              {t(mediaMessages.cancel)}
+            </Button>
+            <Button type="submit" disabled={!normalizedName || pending}>
+              {pending ? t(mediaMessages.saving) : t(mediaMessages.save)}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}