#399

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