chore: modify code style (#3914)

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

@@ -1,5 +1,6 @@
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { Button } from '@toeverything/components/button';
+import { useCallback, useMemo } from 'react';
 
 import type { ModalProps } from '../modal';
 import { Modal, ModalCloseButton } from '../modal';
@@ -39,33 +40,36 @@ export const Confirm = ({
   confirmButtonTestId = '',
 }: ConfirmProps) => {
   const t = useAFFiNEI18N();
+  const cancelText_ = useMemo<string>(() => {
+    return cancelText === 'Cancel' ? t['Cancel']() : cancelText;
+  }, [cancelText, t]);
+
+  const handleCancel = useCallback(() => {
+    onCancel?.();
+  }, [onCancel]);
+  const handleConfirm = useCallback(() => {
+    onConfirm?.();
+  }, [onConfirm]);
+
   return (
     <Modal open={open} disablePortal={false}>
       <StyledModalWrapper>
-        <ModalCloseButton
-          onClick={() => {
-            onCancel?.();
-          }}
-        />
+        <ModalCloseButton onClick={handleCancel} />
         <StyledConfirmTitle>{title}</StyledConfirmTitle>
         <StyledConfirmContent>{content}</StyledConfirmContent>
         {buttonDirection === 'row' ? (
           <StyledRowButtonWrapper>
             <Button
-              onClick={() => {
-                onCancel?.();
-              }}
+              onClick={handleCancel}
               size="large"
               style={{ marginRight: '24px' }}
               data-testid={cancelButtonTestId}
             >
-              {cancelText === 'Cancel' ? t['Cancel']() : cancelText}
+              {cancelText_}
             </Button>
             <Button
               type={confirmType}
-              onClick={() => {
-                onConfirm?.();
-              }}
+              onClick={handleConfirm}
               size="large"
               data-testid={confirmButtonTestId}
             >
@@ -76,18 +80,14 @@ export const Confirm = ({
           <StyledColumnButtonWrapper>
             <Button
               type={confirmType}
-              onClick={() => {
-                onConfirm?.();
-              }}
+              onClick={handleConfirm}
               style={{ width: '284px', height: '38px', textAlign: 'center' }}
               data-testid={confirmButtonTestId}
             >
               {confirmText}
             </Button>
             <Button
-              onClick={() => {
-                onCancel?.();
-              }}
+              onClick={handleCancel}
               style={{
                 marginTop: '16px',
                 width: '284px',
@@ -96,7 +96,7 @@ export const Confirm = ({
               }}
               data-testid={cancelButtonTestId}
             >
-              {cancelText === 'Cancel' ? t['Cancel']() : cancelText}
+              {cancelText_}
             </Button>
           </StyledColumnButtonWrapper>
         )}