feat(confirm/prompt): add okButtonDangerous option (#53)

README.md

@@ -78,6 +78,7 @@ interface ConfirmModalProps {
 ```
 
 - `okButtonText`: Customize "OK" button text.
+- `okButtonDangerous`: When set `true`, "OK" button is red colored.
 - `cancelButtonText`: Customize "Cancel" button text.
 - `onOk`: Callback function when "OK" is clicked. If `onOk` returns a `Promise`, "OK" button shows loading status until the promise finishes.
 - `onCancel`: Callback function when "Cancel" is clicked. If not provided, "Cancel" is disabled when "OK" is loading.
@@ -117,6 +118,7 @@ interface PromptModalProps {
 ```
 
 - `okButtonText`: Customize "OK" button text.
+- `okButtonDangerous`: When set `true`, "OK" button is red colored.
 - `cancelButtonText`: Customize "Cancel" button text.
 - `validate`: Validate current input value. Disable OK button if validation fails.
 - `onOk`: Callback function when "OK" is clicked, receiving a string representing the user input. If `onOk` returns a `Promise`, "OK" button shows loading status until the promise finishes.

demo/index.jsx

@@ -45,6 +45,7 @@ function App() {
     if (
       await confirm('Are you sure you want to do this?', {
         okButtonText: 'Yes',
+        okButtonDangerous: true,
         cancelButtonText: 'No',
       })
     ) {
@@ -56,6 +57,7 @@ function App() {
     if (
       await confirm('Are you sure you want to do this?', {
         okButtonText: 'Yes',
+        okButtonDangerous: true,
         cancelButtonText: 'No',
         onOk: () => {
           alert('You just clicked Yes');
@@ -70,6 +72,7 @@ function App() {
     if (
       await confirm('Are you sure you want to do this?', {
         okButtonText: 'Yes',
+        okButtonDangerous: true,
         cancelButtonText: 'No',
         onOk: async () => {
           await getNTimeout();
@@ -85,6 +88,7 @@ function App() {
     if (
       await confirm('Are you sure you want to do this?', {
         okButtonText: 'Yes',
+        okButtonDangerous: true,
         cancelButtonText: 'No',
         onOk: async () => {
           await getNTimeout();

index.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { InputProps } from 'rsuite/lib/Input';
+import type { InputProps } from 'rsuite';
 
 interface AlertModalProps {
   okButtonText?: string;
@@ -8,6 +8,7 @@ interface AlertModalProps {
 
 interface ConfirmModalProps {
   okButtonText?: string;
+  okButtonDangerous?: boolean;
   cancelButtonText?: string;
   onOk?: (() => void) | (() => Promise<any>);
   onCancel?: (isSubmitLoading?: boolean) => any;
@@ -16,6 +17,7 @@ interface ConfirmModalProps {
 
 interface PromptModalProps {
   okButtonText?: string;
+  okButtonDangerous?: boolean;
   cancelButtonText?: string;
   validate?: (inputValue: string) => boolean;
   onOk?: ((inputVal?: string) => void) | ((inputVal: string) => Promise<any>);

src/InteractionModal.jsx

@@ -3,7 +3,7 @@ import { Button, Modal } from 'rsuite';
 
 function InteractionModal({
   okButtonText = '确定',
-  okButtonDisabled = false,
+  okButtonProps,
   onOk,
   showCancelButton = true,
   cancelButtonText = '取消',
@@ -100,9 +100,9 @@ function InteractionModal({
         )}
         <Button
           loading={submitLoading}
-          disabled={okButtonDisabled}
           onClick={handleOk}
           appearance="primary"
+          {...okButtonProps}
         >
           {okButtonText}
         </Button>

src/__tests__/InteractionModal.test.js

@@ -56,16 +56,23 @@ it('renders custom button text', () => {
   expect(getByRole('button', { name: okButtonText })).toBeInTheDocument();
 });
 
-it('disables ok button when okButtonDisabled=true', () => {
+it('accepts custom props on ok button via okButtonProps prop', () => {
   const { getByRole } = render(
-    <InteractionModal okButtonDisabled>Hey</InteractionModal>
+    <InteractionModal okButtonProps={{ color: 'red', disabled: true }}>
+      Hey
+    </InteractionModal>
   );
 
   expect(
     within(getByRole('alertdialog')).getByRole('button', {
       name: '确定',
     })
   ).toBeDisabled();
+  expect(
+    within(getByRole('alertdialog')).getByRole('button', {
+      name: '确定',
+    })
+  ).toHaveClass('rs-btn-red');
 });
 
 it('hides dialog on clicking ok button', async () => {

src/__tests__/confirm.test.js

@@ -46,6 +46,16 @@ it('renders custom button text', async () => {
   ).toBeInTheDocument();
 });
 
+it('renders red ok button when okButtonDangerous=true', () => {
+  confirm('Message', {
+    okButtonDangerous: true,
+  });
+
+  expect(screen.getByRole('button', { name: '确定' })).toHaveClass(
+    'rs-btn-red'
+  );
+});
+
 describe('resolves correctly', () => {
   it('hides modal and resolves true on clicking ok button', async () => {
     const promise = confirm('Message');

src/__tests__/prompt.test.js

@@ -68,6 +68,16 @@ it('renders custom button text', async () => {
   ).toBeInTheDocument();
 });
 
+it('renders red ok button when okButtonDangerous=true', () => {
+  prompt('Message', '', {
+    okButtonDangerous: true,
+  });
+
+  expect(screen.getByRole('button', { name: '确定' })).toHaveClass(
+    'rs-btn-red'
+  );
+});
+
 it('disable OK button if validation fails', () => {
   prompt('Message', '', {
     validate: () => false,

src/confirm.jsx

@@ -4,13 +4,19 @@ import InteractionModal from './InteractionModal';
 import getContainerDOM from './getContainerDOM';
 import { isFunction } from './utils';
 
-export default function confirm(message, modalConfig) {
+export default function confirm(
+  message,
+  { okButtonDangerous = false, ...modalConfig } = {}
+) {
   return new Promise((resolve, reject) => {
     ReactDOM.render(
       <InteractionModal
         key={Date.now()}
         canCancelOnLoading={!!modalConfig?.onCancel}
         {...modalConfig}
+        okButtonProps={{
+          color: okButtonDangerous ? 'red' : undefined,
+        }}
         onOk={() => {
           if (!isFunction(modalConfig?.onOk)) {
             resolve(true);

src/prompt.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useState, useMemo } from 'react';
 import ReactDOM from 'react-dom';
 import { Input } from 'rsuite';
 import InteractionModal from './InteractionModal';
@@ -8,6 +8,7 @@ import { isFunction } from './utils';
 function PromptModal({
   message,
   defaultResult = '',
+  okButtonDangerous = false,
   onOk,
   validate,
   inputProps,
@@ -20,10 +21,19 @@ function PromptModal({
 
   const handleOk = useCallback(() => onOk(result), [onOk, result]);
 
+  const okButtonDisabled = useMemo(() => {
+    return validate?.(result) === false;
+  }, [result, validate]);
+
+  const okButtonColor = okButtonDangerous ? 'red' : undefined;
+
   return (
     <InteractionModal
       {...props}
-      okButtonDisabled={validate?.(result) === false}
+      okButtonProps={{
+        color: okButtonColor,
+        disabled: okButtonDisabled,
+      }}
       onOk={handleOk}
     >
       <div style={{ padding: '5px' }} className="modal-content">