simple-react-app-kit/packages/media/src/folder-dialog.tsx

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>
  )
}