refactor(component): adjust confirm modal api (#7589)

packages/frontend/component/src/components/disable-public-link/index.tsx

@@ -11,10 +11,10 @@ export const PublicLinkDisableModal = (props: ConfirmModalProps) => {
       title={t['com.affine.publicLinkDisableModal.title']()}
       description={t['com.affine.publicLinkDisableModal.description']()}
       cancelText={t['com.affine.publicLinkDisableModal.button.cancel']()}
+      confirmText={t['com.affine.publicLinkDisableModal.button.disable']()}
       confirmButtonOptions={{
         type: 'error',
         ['data-testid' as string]: 'confirm-enable-affine-cloud-button',
-        children: t['com.affine.publicLinkDisableModal.button.disable'](),
       }}
       {...props}
     />

packages/frontend/component/src/components/member-components/invite-modal.tsx

@@ -57,11 +57,11 @@ export const InviteModal = ({
           padding: '20px 26px',
         },
       }}
+      confirmText={t['Invite']()}
       confirmButtonOptions={{
         loading: isMutating,
         type: 'primary',
         ['data-testid' as string]: 'confirm-enable-affine-cloud-button',
-        children: t['Invite'](),
       }}
       onConfirm={handleConfirm}
     >

packages/frontend/component/src/components/member-components/member-limit-modal.tsx

@@ -38,14 +38,13 @@ export const MemberLimitModal = ({
           : 'com.affine.payment.member-limit.pro.description'
       ]({ planName: plan, quota: quota })}
       cancelButtonOptions={{ style: { display: isFreePlan ? '' : 'none' } }}
+      confirmText={t[
+        isFreePlan
+          ? 'com.affine.payment.member-limit.free.confirm'
+          : 'com.affine.payment.member-limit.pro.confirm'
+      ]()}
       confirmButtonOptions={{
         type: 'primary',
-        children:
-          t[
-            isFreePlan
-              ? 'com.affine.payment.member-limit.free.confirm'
-              : 'com.affine.payment.member-limit.pro.confirm'
-          ](),
       }}
       onConfirm={handleConfirm}
     ></ConfirmModal>

packages/frontend/component/src/ui/modal/confirm-modal.stories.tsx

@@ -22,9 +22,7 @@ export const UsingHook = () => {
   const showConfirm = () => {
     openConfirmModal({
       cancelText: 'Cancel',
-      confirmButtonOptions: {
-        children: 'Confirm',
-      },
+      confirmText: 'Confirm',
       title: 'Confirm Modal',
       children: 'Are you sure you want to confirm?',
       onConfirm,
@@ -43,9 +41,7 @@ export const AutoClose = () => {
   const onConfirm = () => {
     openConfirmModal({
       cancelText: 'Cancel',
-      confirmButtonOptions: {
-        children: 'Confirm',
-      },
+      confirmText: 'Confirm',
       title: 'Confirm Modal',
       children: 'Are you sure you want to confirm?',
       onConfirm: () => console.log('Confirmed'),

packages/frontend/component/src/ui/modal/confirm-modal.tsx

@@ -10,11 +10,12 @@ import { Modal } from './modal';
 import * as styles from './styles.css';
 
 export interface ConfirmModalProps extends ModalProps {
-  confirmButtonOptions?: ButtonProps;
+  confirmButtonOptions?: Omit<ButtonProps, 'children'>;
   onConfirm?: (() => void) | (() => Promise<void>);
   onCancel?: () => void;
-  cancelText?: string;
-  cancelButtonOptions?: ButtonProps;
+  confirmText?: React.ReactNode;
+  cancelText?: React.ReactNode;
+  cancelButtonOptions?: Omit<ButtonProps, 'children'>;
   reverseFooter?: boolean;
 }
 
@@ -22,6 +23,7 @@ export const ConfirmModal = ({
   children,
   confirmButtonOptions,
   // FIXME: we need i18n
+  confirmText,
   cancelText = 'Cancel',
   cancelButtonOptions,
   reverseFooter,
@@ -64,7 +66,9 @@ export const ConfirmModal = ({
             {cancelText}
           </Button>
         </DialogTrigger>
-        <Button onClick={onConfirmClick} {...confirmButtonOptions}></Button>
+        <Button onClick={onConfirmClick} {...confirmButtonOptions}>
+          {confirmText}
+        </Button>
       </div>
     </Modal>
   );

packages/frontend/component/src/ui/modal/modal.stories.tsx

@@ -58,10 +58,10 @@ const ConfirmModalTemplate: StoryFn<ConfirmModalProps> = () => {
         onConfirm={handleConfirm}
         title="Modal Title"
         description="Modal description"
+        confirmText="Confirm"
         confirmButtonOptions={{
           loading: loading,
           type: 'primary',
-          children: 'Confirm',
         }}
       >
         <Input placeholder="input someting" status={inputStatus} />