feat: modify pivot operation menu (#1786)

Co-authored-by: Himself65 <himself65@outlook.com>

packages/component/src/ui/confirm/Confirm.tsx

@@ -10,6 +10,7 @@ import {
   StyledModalWrapper,
   StyledRowButtonWrapper,
 } from './styles';
+
 export type ConfirmProps = {
   title?: string;
   content?: string;
@@ -20,6 +21,8 @@ export type ConfirmProps = {
   buttonDirection?: 'row' | 'column';
   onConfirm?: () => void;
   onCancel?: () => void;
+  cancelButtonTestId?: string;
+  confirmButtonTestId?: string;
 } & Omit<ModalProps, 'children'>;
 
 export const Confirm = ({
@@ -32,10 +35,12 @@ export const Confirm = ({
   buttonDirection = 'row',
   cancelText = 'Cancel',
   open,
+  cancelButtonTestId = '',
+  confirmButtonTestId = '',
 }: ConfirmProps) => {
   const { t } = useTranslation();
   return (
-    <Modal open={open}>
+    <Modal open={open} disablePortal={false}>
       <StyledModalWrapper>
         <ModalCloseButton
           onClick={() => {
@@ -53,6 +58,7 @@ export const Confirm = ({
                 onCancel?.();
               }}
               style={{ marginRight: '24px' }}
+              data-testid={cancelButtonTestId}
             >
               {cancelText === 'Cancel' ? t('Cancel') : cancelText}
             </Button>
@@ -63,6 +69,7 @@ export const Confirm = ({
               onClick={() => {
                 onConfirm?.();
               }}
+              data-testid={confirmButtonTestId}
             >
               {confirmText}
             </Button>
@@ -77,6 +84,7 @@ export const Confirm = ({
                 onConfirm?.();
               }}
               style={{ width: '284px', height: '38px', textAlign: 'center' }}
+              data-testid={confirmButtonTestId}
             >
               {confirmText}
             </Button>
@@ -92,6 +100,7 @@ export const Confirm = ({
                 height: '38px',
                 textAlign: 'center',
               }}
+              data-testid={cancelButtonTestId}
             >
               {cancelText === 'Cancel' ? t('Cancel') : cancelText}
             </Button>

packages/component/src/ui/toast/toast.ts

@@ -103,9 +103,12 @@ export const toast = (
     easing: 'cubic-bezier(0.21, 1.02, 0.73, 1)',
     fill: 'forwards' as const,
   }; // satisfies KeyframeAnimationOptions;
-  element.animate(fadeIn, options);
+  // FIXME: Vitest not support element.animate,
+  //  can try it in `apps/web/src/components/__tests__/PinBoard.spec.tsx` `delete pivot`
+  typeof element.animate === 'function' && element.animate(fadeIn, options);
 
   setTimeout(async () => {
+    if (typeof element.animate !== 'function') return;
     const fadeOut = fadeIn.reverse();
     const animation = element.animate(fadeOut, options);
     await animation.finished;