对话框 Dialog

"use client"

import * as React from "react"
import { Dialog as DialogPrimitive } from "radix-ui"
import { XIcon } from "lucide-react"
import {
  AnimatePresence,
  LayoutGroup,
  motion,
  useReducedMotion,
} from "motion/react"

import { cn } from "@/lib/utils"

// The button and the panel each own a text-less background surface that shares
// this spring. Motion morphs the `layoutId` between them — like the tabs
// indicator — so the outline glides from button to panel and back.
const SURFACE_SPRING = {
  type: "spring",
  stiffness: 420,
  damping: 34,
  mass: 0.7,
} as const

// Shared between the parts so the panel can (a) drive its own enter/exit with
// AnimatePresence and (b) emerge from — and return to — the trigger's position.
type DialogContextValue = {
  open: boolean
  triggerRef: React.RefObject<HTMLElement | null>
  variant: "modal" | "inline"
  layoutId: string
  /** Radix modality; a non-modal panel renders without the dimmed overlay. */
  modal: boolean
}

const DialogContext = React.createContext<DialogContextValue | null>(null)

function useDialogContext() {
  const ctx = React.useContext(DialogContext)
  if (!ctx) throw new Error("Dialog parts must be used inside <Dialog>.")
  return ctx
}

const MotionOverlay = motion.create(DialogPrimitive.Overlay)
const MotionContent = motion.create(DialogPrimitive.Content)

export interface DialogProps
  extends React.ComponentProps<typeof DialogPrimitive.Root> {
  /** Render as a centred modal or morph in place inside the document flow. @default "modal" */
  variant?: "modal" | "inline"
}

function Dialog({
  open: openProp,
  defaultOpen,
  onOpenChange,
  modal = true,
  variant = "modal",
  children,
  ...props
}: DialogProps) {
  // Mirror the open state (without taking ownership away from a controlled
  // caller) so the content can run motion enter/exit via AnimatePresence.
  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(
    defaultOpen ?? false
  )
  const open = openProp ?? uncontrolledOpen
  const triggerRef = React.useRef<HTMLElement | null>(null)
  const layoutId = React.useId()

  const handleOpenChange = React.useCallback(
    (next: boolean) => {
      if (openProp === undefined) setUncontrolledOpen(next)
      onOpenChange?.(next)
    },
    [openProp, onOpenChange]
  )

  const root = (
    <DialogPrimitive.Root
      data-slot="dialog"
      open={open}
      modal={variant === "inline" ? false : modal}
      onOpenChange={handleOpenChange}
      {...props}
    >
      {children}
    </DialogPrimitive.Root>
  )

  return (
    <DialogContext.Provider
      value={{ open, triggerRef, variant, layoutId, modal: variant === "modal" && modal }}
    >
      <LayoutGroup id={layoutId}>{root}</LayoutGroup>
    </DialogContext.Provider>
  )
}

function DialogTrigger(
  props: React.ComponentProps<typeof DialogPrimitive.Trigger>
) {
  const { open, triggerRef, variant, layoutId } = useDialogContext()
  const reduceMotion = useReducedMotion()

  if (variant === "inline") {
    // While the panel is open the button is gone; its surface has already
    // handed its `layoutId` off to the panel. Conditional render (no
    // AnimatePresence/popLayout) keeps the hand-off in a single commit so the
    // shared-layout morph fires — the same pattern as the tabs indicator.
    if (open) return null
    return (
      <div className="relative inline-block [&_[data-slot=dialog-trigger]]:border-transparent [&_[data-slot=dialog-trigger]]:bg-transparent [&_[data-slot=dialog-trigger]]:shadow-none">
        <motion.div
          aria-hidden
          data-slot="dialog-layout-surface"
          layoutId={`${layoutId}-surface`}
          className="pointer-events-none absolute inset-0 rounded-md border bg-background shadow-xs"
          transition={reduceMotion ? { duration: 0 } : SURFACE_SPRING}
        />
        <motion.div
          className="relative z-10"
          initial={reduceMotion ? false : { opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={
            reduceMotion
              ? { duration: 0 }
              : { duration: 0.14, delay: 0.05, ease: "easeOut" }
          }
        >
          <DialogPrimitive.Trigger
            ref={triggerRef as React.Ref<HTMLButtonElement>}
            data-slot="dialog-trigger"
            {...props}
          />
        </motion.div>
      </div>
    )
  }

  return (
    <DialogPrimitive.Trigger
      ref={triggerRef as React.Ref<HTMLButtonElement>}
      data-slot="dialog-trigger"
      {...props}
    />
  )
}

function DialogPortal(
  props: React.ComponentProps<typeof DialogPrimitive.Portal>
) {
  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
}

function DialogClose(props: React.ComponentProps<typeof DialogPrimitive.Close>) {
  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
}

function DialogOverlay({
  className,
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
  return (
    <DialogPrimitive.Overlay
      data-slot="dialog-overlay"
      className={cn("fixed inset-0 z-50 bg-overlay", className)}
      {...props}
    />
  )
}

function DialogContent({
  className,
  children,
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Content>) {
  const { open, triggerRef, variant, layoutId, modal } = useDialogContext()
  const reduceMotion = useReducedMotion()

  // The panel rests at the viewport centre (flex container below). Express the
  // trigger's centre as an offset from there, so the panel can grow out of the
  // button on open and shrink back into it on close.
  const origin = React.useMemo(() => {
    if (!open || reduceMotion || variant === "inline") return { x: 0, y: 0 }
    const el = triggerRef.current
    if (!el || typeof window === "undefined") return { x: 0, y: 0 }
    const rect = el.getBoundingClientRect()
    return {
      x: rect.left + rect.width / 2 - window.innerWidth / 2,
      y: rect.top + rect.height / 2 - window.innerHeight / 2,
    }
    // Recompute each time the panel opens.
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [open, reduceMotion])

  if (variant === "inline") {
    // Mirror of DialogTrigger: render only while open, so the panel's surface
    // adopts the `layoutId` in the same commit the button's surface releases it
    // and Motion morphs the outline between the two boxes. `forceMount` stops
    // Radix from re-animating the mount/unmount on top of the layout morph.
    if (!open) return null
    return (
      <MotionContent
        forceMount
        data-slot="dialog-content"
        className={cn(
          "relative w-[min(32rem,calc(100vw-2rem))] overflow-hidden rounded-lg outline-none",
          className
        )}
        initial={false}
        {...(props as unknown as React.ComponentProps<typeof MotionContent>)}
      >
        <motion.div
          aria-hidden
          data-slot="dialog-layout-surface"
          layoutId={`${layoutId}-surface`}
          className="pointer-events-none absolute inset-0 rounded-lg border bg-background shadow-sm"
          transition={reduceMotion ? { duration: 0 } : SURFACE_SPRING}
        />
        <motion.div
          data-slot="dialog-layout-content"
          className="relative z-10 grid gap-4 p-6"
          initial={reduceMotion ? false : { opacity: 0, y: 4 }}
          animate={{ opacity: 1, y: 0 }}
          transition={
            reduceMotion
              ? { duration: 0 }
              : { duration: 0.18, delay: 0.05, ease: "easeOut" }
          }
        >
          {children}
          <DialogContentClose />
        </motion.div>
      </MotionContent>
    )
  }

  const hidden = reduceMotion
    ? { opacity: 0 }
    : { opacity: 0, scale: 0.78, x: origin.x, y: origin.y }
  const shown = reduceMotion
    ? { opacity: 1 }
    : { opacity: 1, scale: 1, x: 0, y: 0 }

  const panel = (
    <MotionContent
      data-slot="dialog-content"
      forceMount
      className={cn(
        "pointer-events-auto relative grid w-full max-w-[calc(100%-2rem)] gap-4 rounded-lg border bg-background p-6 shadow-lg sm:max-w-lg",
        className
      )}
      initial={hidden}
      animate={shown}
      // Leave faster than we arrive: a short ease-in back towards the trigger
      // reads as "put away" instead of a second, slower spring.
      exit={{
        ...hidden,
        transition: reduceMotion
          ? { duration: 0.12 }
          : { duration: 0.2, ease: [0.4, 0, 1, 1] },
      }}
      transition={
        reduceMotion
          ? { duration: 0.15 }
          : {
              type: "spring",
              stiffness: 440,
              damping: 34,
              mass: 0.65,
              opacity: { duration: 0.16, ease: "easeOut" },
            }
      }
      {...(props as unknown as React.ComponentProps<typeof MotionContent>)}
    >
      {children}
      <DialogContentClose />
    </MotionContent>
  )

  return (
    <AnimatePresence>
      {open ? (
        <DialogPortal key="dialog" forceMount>
          {modal ? (
            /*
              Overlay must own the content in the React tree. Radix locks page
              scrolling from the overlay; nesting lets portalled controls inside
              the dialog (popover, select, date picker) remain scrollable.
              Centre with flex (not a translate on the panel) so the motion
              transform is free to drive the button→dialog morph.
            */
            <MotionOverlay
              data-slot="dialog-overlay"
              forceMount
              className="fixed inset-0 z-50 flex items-center justify-center overflow-y-auto bg-overlay p-4"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0, transition: { duration: 0.18, ease: "easeIn" } }}
              transition={{ duration: 0.16, ease: "easeOut" }}
            >
              {panel}
            </MotionOverlay>
          ) : (
            // Radix renders no overlay for non-modal dialogs; keep the same
            // centring without blocking the page behind.
            <div className="pointer-events-none fixed inset-0 z-50 flex items-center justify-center p-4">
              {panel}
            </div>
          )}
        </DialogPortal>
      ) : null}
    </AnimatePresence>
  )
}

function DialogContentClose() {
  return (
    <DialogPrimitive.Close
      data-slot="dialog-close-button"
      className="absolute right-4 top-4 flex size-7 items-center justify-center rounded-md text-muted-foreground outline-none transition-colors hover:bg-accent hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/40 disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
    >
      <XIcon />
      <span className="sr-only">关闭</span>
    </DialogPrimitive.Close>
  )
}

function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="dialog-header"
      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
      {...props}
    />
  )
}

function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="dialog-footer"
      className={cn(
        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
        className
      )}
      {...props}
    />
  )
}

function DialogTitle({
  className,
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Title>) {
  return (
    <DialogPrimitive.Title
      data-slot="dialog-title"
      className={cn("text-lg font-semibold leading-none", className)}
      {...props}
    />
  )
}

function DialogDescription({
  className,
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Description>) {
  return (
    <DialogPrimitive.Description
      data-slot="dialog-description"
      className={cn("text-sm text-muted-foreground", className)}
      {...props}
    />
  )
}

export {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogOverlay,
  DialogPortal,
  DialogTitle,
  DialogTrigger,
}