From 1d939c0392545e3ff160aefcd917775a4d8bc98c Mon Sep 17 00:00:00 2001
From: myNameIsDu <sunbohaoddd@gmail.com>
Date: Mon, 31 Mar 2025 16:18:48 +0800
Subject: [PATCH] feat: confirm support title

---
 demo/index.jsx                |  1 +
 index.d.ts                    |  1 +
 src/InteractionModal.jsx      |  6 ++++++
 src/__tests__/confirm.test.js | 15 +++++++++++++++
 4 files changed, 23 insertions(+)

diff --git a/demo/index.jsx b/demo/index.jsx
index e9b8850..810be57 100644
--- a/demo/index.jsx
+++ b/demo/index.jsx
@@ -47,6 +47,7 @@ function App() {
         okButtonText: 'Yes',
         okButtonDangerous: true,
         cancelButtonText: 'No',
+        title: 'Warning',
       })
     ) {
       alert('Rest in pieces.');
diff --git a/index.d.ts b/index.d.ts
index 865c1d5..05d8882 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -17,6 +17,7 @@ interface ConfirmModalProps extends WrappedModalProps {
   onOk?: (() => void) | (() => Promise<any>);
   onCancel?: (isSubmitLoading?: boolean) => any;
   canCancelOnLoading?: boolean;
+  title?: React.ReactNode;
 }
 
 interface PromptModalProps extends WrappedModalProps {
diff --git a/src/InteractionModal.jsx b/src/InteractionModal.jsx
index 5adf3b8..1ea62e8 100644
--- a/src/InteractionModal.jsx
+++ b/src/InteractionModal.jsx
@@ -11,6 +11,7 @@ function InteractionModal({
   children,
   canCancelOnLoading = false,
   modalProps: extraModalProps = {},
+  title,
 }) {
   const [shouldShowModal, setShouldShowModal] = useState(true);
   const [submitLoading, setSubmitLoading] = useState(false);
@@ -90,6 +91,11 @@ function InteractionModal({
       aria-describedby="alertdialog-description"
       {...modalProps}
     >
+      {title && (
+        <Modal.Header>
+          <Modal.Title>{title}</Modal.Title>
+        </Modal.Header>
+      )}
       <Modal.Body id="alertdialog-description">{children}</Modal.Body>
       <Modal.Footer>
         {showCancelButton && (
diff --git a/src/__tests__/confirm.test.js b/src/__tests__/confirm.test.js
index 1622138..32f981e 100644
--- a/src/__tests__/confirm.test.js
+++ b/src/__tests__/confirm.test.js
@@ -29,6 +29,21 @@ it('shows dialog with given message and two buttons', async () => {
   ).toBeInTheDocument();
 });
 
+it('show dialog with custom title', async () => {
+  const title = 'Custom Title';
+  confirm('Message', {
+    title,
+  });
+
+  expect(screen.getByRole('alertdialog')).toHaveTextContent(title);
+  expect(screen.queryByLabelText('Close')).toBeInTheDocument();
+});
+it('show dialog without custom title', async () => {
+  confirm('Message');
+
+  expect(screen.queryByLabelText('Close')).not.toBeInTheDocument();
+});
+
 it('renders custom button text', async () => {
   const okButtonText = 'Okay';
   const cancelButtonText = 'Nah';