feat: replace modal with new design (#4324)

Co-authored-by: Peng Xiao <pengxiao@outlook.com>

packages/component/src/components/page-list/operation-cell.tsx

@@ -10,10 +10,11 @@ import {
 } from '@blocksuite/icons';
 import { IconButton } from '@toeverything/components/button';
 import { Menu, MenuIcon, MenuItem } from '@toeverything/components/menu';
+import { ConfirmModal } from '@toeverything/components/modal';
 import { Tooltip } from '@toeverything/components/tooltip';
 import { useState } from 'react';
 
-import { Confirm, FlexWrapper } from '../../..';
+import { FlexWrapper } from '../../..';
 import { DisablePublicSharing, MoveToTrash } from './operation-menu-items';
 
 export interface OperationCellProps {
@@ -106,19 +107,12 @@ export const OperationCell = ({
           onRemoveToTrash();
           setOpen(false);
         }}
-        onClose={() => {
-          setOpen(false);
-        }}
-        onCancel={() => {
-          setOpen(false);
-        }}
+        onOpenChange={setOpen}
       />
       <DisablePublicSharing.DisablePublicSharingModal
-        onConfirmDisable={onDisablePublicSharing}
+        onConfirm={onDisablePublicSharing}
         open={openDisableShared}
-        onClose={() => {
-          setOpenDisableShared(false);
-        }}
+        onOpenChange={setOpenDisableShared}
       />
     </>
   );
@@ -161,22 +155,20 @@ export const TrashOperationCell = ({
           <DeletePermanentlyIcon />
         </IconButton>
       </Tooltip>
-      <Confirm
+      <ConfirmModal
         title={`${t['com.affine.trashOperation.deletePermanently']()}?`}
-        content={t['com.affine.trashOperation.deleteDescription']()}
-        confirmText={t['com.affine.trashOperation.delete']()}
-        confirmType="error"
+        description={t['com.affine.trashOperation.deleteDescription']()}
+        cancelText={t['com.affine.confirmModal.button.cancel']()}
+        confirmButtonOptions={{
+          type: 'error',
+          children: t['com.affine.trashOperation.delete'](),
+        }}
         open={open}
+        onOpenChange={setOpen}
         onConfirm={() => {
           onPermanentlyDeletePage();
           setOpen(false);
         }}
-        onClose={() => {
-          setOpen(false);
-        }}
-        onCancel={() => {
-          setOpen(false);
-        }}
       />
     </FlexWrapper>
   );

packages/component/src/components/page-list/operation-menu-items/move-to-trash.tsx

@@ -5,9 +5,10 @@ import {
   MenuItem,
   type MenuItemProps,
 } from '@toeverything/components/menu';
-
-import type { ConfirmProps } from '../../..';
-import { Confirm } from '../../..';
+import {
+  ConfirmModal,
+  type ConfirmModalProps,
+} from '@toeverything/components/modal';
 
 export const MoveToTrash = (props: MenuItemProps) => {
   const t = useAFFiNEI18N();
@@ -27,26 +28,29 @@ export const MoveToTrash = (props: MenuItemProps) => {
   );
 };
 
-const ConfirmModal = ({
+const MoveToTrashConfirm = ({
   title,
   ...confirmModalProps
 }: {
   title: string;
-} & ConfirmProps) => {
+} & ConfirmModalProps) => {
   const t = useAFFiNEI18N();
 
   return (
-    <Confirm
+    <ConfirmModal
       title={t['com.affine.moveToTrash.confirmModal.title']()}
-      content={t['com.affine.moveToTrash.confirmModal.description']({
+      description={t['com.affine.moveToTrash.confirmModal.description']({
         title: title || 'Untitled',
       })}
-      confirmButtonTestId="confirm-delete-page"
-      confirmText={t.Delete()}
-      confirmType="error"
+      cancelText={t['com.affine.confirmModal.button.cancel']()}
+      confirmButtonOptions={{
+        ['data-testid' as string]: 'confirm-delete-page',
+        type: 'error',
+        children: t.Delete(),
+      }}
       {...confirmModalProps}
     />
   );
 };
 
-MoveToTrash.ConfirmModal = ConfirmModal;
+MoveToTrash.ConfirmModal = MoveToTrashConfirm;

packages/component/src/components/page-list/view/collection-bar.tsx

@@ -5,14 +5,14 @@ import { ViewLayersIcon } from '@blocksuite/icons';
 import { Button } from '@toeverything/components/button';
 import { Tooltip } from '@toeverything/components/tooltip';
 import clsx from 'clsx';
-import { useCallback, useState } from 'react';
+import { useState } from 'react';
 
 import {
   type CollectionsAtom,
   useCollectionManager,
 } from '../use-collection-manager';
 import * as styles from './collection-bar.css';
-import { EditCollectionModel } from './create-collection';
+import { EditCollectionModal } from './create-collection';
 import { useActions } from './use-action';
 
 interface CollectionBarProps {
@@ -33,21 +33,20 @@ export const CollectionBar = (props: CollectionBarProps) => {
     setting,
     openEdit: () => setOpen(true),
   });
-  const onClose = useCallback(() => setOpen(false), []);
 
   return !setting.isDefault ? (
     <tr style={{ userSelect: 'none' }}>
       <td>
         <div className={styles.view}>
-          <EditCollectionModel
+          <EditCollectionModal
             propertiesMeta={propertiesMeta}
             getPageInfo={getPageInfo}
             init={collection}
             open={open}
-            onClose={onClose}
+            onOpenChange={setOpen}
             // eslint-disable-next-line @typescript-eslint/no-misused-promises
             onConfirm={setting.updateCollection}
-          ></EditCollectionModel>
+          />
           <ViewLayersIcon
             style={{
               height: 20,

packages/component/src/components/page-list/view/collection-list.tsx

@@ -14,7 +14,7 @@ import { useCallback, useRef, useState } from 'react';
 import { CreateFilterMenu } from '../filter/vars';
 import type { useCollectionManager } from '../use-collection-manager';
 import * as styles from './collection-list.css';
-import { EditCollectionModel } from './create-collection';
+import { EditCollectionModal } from './create-collection';
 import { useActions } from './use-action';
 
 const CollectionOption = ({
@@ -126,14 +126,16 @@ export const CollectionList = ({
     },
     [setting]
   );
-  const closeUpdateCollectionModal = useCallback(
-    () => setCollection(undefined),
-    []
-  );
+  const closeUpdateCollectionModal = useCallback((open: boolean) => {
+    if (!open) {
+      setCollection(undefined);
+    }
+  }, []);
+
   const onConfirm = useCallback(
     async (view: Collection) => {
       await setting.updateCollection(view);
-      closeUpdateCollectionModal();
+      closeUpdateCollectionModal(false);
     },
     [closeUpdateCollectionModal, setting]
   );
@@ -214,14 +216,14 @@ export const CollectionList = ({
           {t['com.affine.filter']()}
         </Button>
       </Menu>
-      <EditCollectionModel
+      <EditCollectionModal
         propertiesMeta={propertiesMeta}
         getPageInfo={getPageInfo}
         init={collection}
         open={!!collection}
-        onClose={closeUpdateCollectionModal}
+        onOpenChange={closeUpdateCollectionModal}
         onConfirm={onConfirm}
-      ></EditCollectionModel>
+      />
     </FlexWrapper>
   );
 };

packages/component/src/components/page-list/view/create-collection.tsx

@@ -10,72 +10,69 @@ import {
 } from '@blocksuite/icons';
 import { uuidv4 } from '@blocksuite/store';
 import { Button } from '@toeverything/components/button';
+import { Modal } from '@toeverything/components/modal';
 import { useCallback, useMemo, useState } from 'react';
 
-import {
-  Input,
-  Modal,
-  ModalCloseButton,
-  ModalWrapper,
-  ScrollableContainer,
-} from '../../..';
+import { Input, ScrollableContainer } from '../../..';
 import { FilterList } from '../filter';
 import * as styles from './collection-list.css';
 
-interface EditCollectionModelProps {
+interface EditCollectionModalProps {
   init?: Collection;
   title?: string;
   open: boolean;
   getPageInfo: GetPageInfoById;
   propertiesMeta: PropertiesMeta;
-  onClose: () => void;
+  onOpenChange: (open: boolean) => void;
   onConfirm: (view: Collection) => Promise<void>;
 }
 
-export const EditCollectionModel = ({
+export const EditCollectionModal = ({
   init,
   onConfirm,
   open,
-  onClose,
+  onOpenChange,
   getPageInfo,
   propertiesMeta,
   title,
-}: EditCollectionModelProps) => {
+}: EditCollectionModalProps) => {
   const t = useAFFiNEI18N();
   const onConfirmOnCollection = useCallback(
     (view: Collection) => {
       onConfirm(view)
         .then(() => {
-          onClose();
+          onOpenChange(false);
         })
         .catch(err => {
           console.error(err);
         });
     },
-    [onClose, onConfirm]
+    [onConfirm, onOpenChange]
   );
+  const onCancel = useCallback(() => {
+    onOpenChange(false);
+  }, [onOpenChange]);
+
   return (
-    <Modal open={open} onClose={onClose}>
-      <ModalWrapper
-        width={600}
-        style={{
-          padding: '40px',
-          background: 'var(--affine-background-primary-color)',
-        }}
-      >
-        <ModalCloseButton top={12} right={12} onClick={onClose} />
-        {init ? (
-          <EditCollection
-            propertiesMeta={propertiesMeta}
-            title={title}
-            onConfirmText={t['com.affine.editCollection.save']()}
-            init={init}
-            getPageInfo={getPageInfo}
-            onCancel={onClose}
-            onConfirm={onConfirmOnCollection}
-          />
-        ) : null}
-      </ModalWrapper>
+    <Modal
+      open={open}
+      onOpenChange={onOpenChange}
+      width={600}
+      contentOptions={{
+        style: { padding: '40px' },
+      }}
+    >
+      {init ? (
+        <EditCollection
+          propertiesMeta={propertiesMeta}
+          title={title}
+          onConfirmText={t['com.affine.editCollection.save']()}
+          init={init}
+          getPageInfo={getPageInfo}
+          onCancel={onCancel}
+          onConfirm={onConfirmOnCollection}
+        />
+      ) : null}
     </Modal>
   );
 };
@@ -301,14 +298,14 @@ export const SaveCollectionButton = ({
       >
         {t['com.affine.editCollection.saveCollection']()}
       </Button>
-      <EditCollectionModel
+      <EditCollectionModal
         title={t['com.affine.editCollection.saveCollection']()}
         propertiesMeta={propertiesMeta}
         init={init}
         onConfirm={onConfirm}
         open={show}
         getPageInfo={getPageInfo}
-        onClose={() => changeShow(false)}
+        onOpenChange={changeShow}
       />
     </>
   );