#399

frontend/src/components/dialogues/CommonDialogue.tsx

@@ -0,0 +1,54 @@
+import { Dialog,
+	 DialogContent,
+	 DialogDescription,
+	 DialogFooter,
+	 DialogHeader,
+	 DialogTitle } from '@/components/ui/dialog'
+import { cn } from '@/lib/utils'
+
+import type { FC, ReactNode } from 'react'
+
+type Props = {
+  open:             boolean
+  onOpenChange:     (open: boolean) => void
+  title:            ReactNode
+  description?:     ReactNode
+  className?:       string
+  bodyClassName?:   string
+  footerClassName?: string
+  footer?:          ReactNode
+  children:         ReactNode }
+
+
+const CommonDialogue: FC<Props> = (
+    { open,
+      onOpenChange,
+      title,
+      description,
+      className,
+      bodyClassName,
+      footerClassName,
+      footer,
+      children },
+) => (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className={cn ('px-6 pb-6 pt-7', className)}>
+	<DialogHeader className="pl-8">
+	  <DialogTitle>{title}</DialogTitle>
+
+	  {description != null && (
+	      <DialogDescription asChild>
+		<div>{description}</div>
+	      </DialogDescription>)}
+	</DialogHeader>
+
+	<div className={bodyClassName}>{children}</div>
+
+	{footer != null && (
+	    <DialogFooter className={footerClassName}>
+	      {footer}
+	    </DialogFooter>)}
+      </DialogContent>
+    </Dialog>)
+
+export default CommonDialogue

frontend/src/components/dialogues/DialogueProvider.tsx

@@ -1,12 +1,7 @@
 import { createContext, useCallback, useContext, useMemo, useState } from 'react'
 
+import CommonDialogue from '@/components/dialogues/CommonDialogue'
 import { Button } from '@/components/ui/button'
-import { Dialog,
-	 DialogContent,
-	 DialogDescription,
-	 DialogFooter,
-	 DialogHeader,
-	 DialogTitle } from '@/components/ui/dialog'
 
 import type { FC, ReactNode } from 'react'
 
@@ -111,67 +106,60 @@ const DialogueProvider: FC<Props> = ({ children }) => {
       <DialogueContext.Provider value={api}>
 	{children}
 
-	<Dialog
-	    open={Boolean (active)}
-	    onOpenChange={open => {
-	      if (!(open))
-		closeActive (active?.kind !== 'confirm' && null)
-	    }}>
-	  {active && (
-	      <DialogContent className="px-6 pb-6 pt-7">
-		<DialogHeader className="pl-8">
-		  <DialogTitle>{active.options.title}</DialogTitle>
-
-		  {active.options.description && (
-		      <DialogDescription asChild>
-			<div>{active.options.description}</div>
-		      </DialogDescription>)}
-		</DialogHeader>
-
-		<DialogFooter>
-		  {active.kind === 'confirm' && (
-		      <>
-			<Button
-			    variant="outline"
-			    onClick={() => closeActive (false)}>
-			  {active.options.cancelText ?? '取消'}
-			</Button>
-
-			<Button
-			    variant={(active.options.variant === 'danger')
-				     ? 'destructive'
-				     : 'default'}
-			    onClick={() => closeActive (true)}>
-			  {active.options.confirmText ?? '確定'}
-			</Button>
-		      </>)}
-
-		  {active.kind === 'alert' && (
-		      <Button onClick={() => closeActive ()}>
-			{active.options.okText ?? '確定'}
-		      </Button>)}
-
-		  {active.kind === 'choice' && (
-		      <>
-			<Button
-			    variant="outline"
-			    onClick={() => closeActive (null)}>
-			  {active.options.cancelText ?? '取消'}
-			</Button>
-
-			{active.options.choices.map (choice => (
+	{active && (
+	    <CommonDialogue
+		open={Boolean (active)}
+		onOpenChange={open => {
+		  if (!(open))
+		    closeActive (active.kind !== 'confirm' && null)
+		}}
+		title={active.options.title}
+		description={active.options.description}
+		bodyClassName="hidden"
+		footer={
+		    <>
+		      {active.kind === 'confirm' && (
+			  <>
 			    <Button
-				key={choice.value}
-				variant={(choice.variant === 'danger')
+				variant="outline"
+				onClick={() => closeActive (false)}>
+			      {active.options.cancelText ?? '取消'}
+			    </Button>
+
+			    <Button
+				variant={(active.options.variant === 'danger')
 					 ? 'destructive'
 					 : 'default'}
-				onClick={() => closeActive (choice.value)}>
-			      {choice.label}
-			    </Button>))}
-		      </>)}
-		</DialogFooter>
-	      </DialogContent>)}
-	</Dialog>
+				onClick={() => closeActive (true)}>
+			      {active.options.confirmText ?? '確定'}
+			    </Button>
+			  </>)}
+
+		      {active.kind === 'alert' && (
+			  <Button onClick={() => closeActive ()}>
+			    {active.options.okText ?? '確定'}
+			  </Button>)}
+
+		      {active.kind === 'choice' && (
+			  <>
+			    <Button
+				variant="outline"
+				onClick={() => closeActive (null)}>
+			      {active.options.cancelText ?? '取消'}
+			    </Button>
+
+			    {active.options.choices.map (choice => (
+				<Button
+				    key={choice.value}
+				    variant={(choice.variant === 'danger')
+					     ? 'destructive'
+					     : 'default'}
+				    onClick={() => closeActive (choice.value)}>
+				  {choice.label}
+				</Button>))}
+			  </>)}
+		    </>}/>
+	  )}
       </DialogueContext.Provider>)
 }