feat: confirm support title (#67)

Author: myNameIsDu

demo/index.jsx

@@ -47,6 +47,7 @@ function App() {
         okButtonText: 'Yes',
         okButtonDangerous: true,
         cancelButtonText: 'No',
+        title: 'Warning',
       })
     ) {
       alert('Rest in pieces.');

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 {

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 && (

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';