feat: replace modal with new design (#4324)

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

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

@@ -1,57 +1,24 @@
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
-import { CloseIcon } from '@blocksuite/icons';
-import { Button, IconButton } from '@toeverything/components/button';
+import {
+  ConfirmModal,
+  type ConfirmModalProps,
+} from '@toeverything/components/modal';
 
-import { Modal, ModalWrapper } from '../../..';
-import { ButtonContainer, Content, Header, StyleTips, Title } from './style';
-
-export type PublicLinkDisableProps = {
-  open: boolean;
-  onConfirmDisable: () => void;
-  onClose: () => void;
-};
-
-export const PublicLinkDisableModal = ({
-  open,
-  onConfirmDisable,
-  onClose,
-}: PublicLinkDisableProps) => {
+export const PublicLinkDisableModal = (props: ConfirmModalProps) => {
   const t = useAFFiNEI18N();
+
   return (
-    <Modal open={open} onClose={onClose}>
-      <ModalWrapper width={480}>
-        <Header>
-          <Title>{t['com.affine.publicLinkDisableModal.title']()}</Title>
-          <IconButton onClick={onClose}>
-            <CloseIcon />
-          </IconButton>
-        </Header>
-        <Content>
-          <StyleTips>
-            {t['com.affine.publicLinkDisableModal.description']()}
-          </StyleTips>
-          <ButtonContainer>
-            <div>
-              <Button onClick={onClose} block>
-                {t['com.affine.publicLinkDisableModal.button.cancel']()}
-              </Button>
-            </div>
-            <div>
-              <Button
-                data-testid="confirm-enable-affine-cloud-button"
-                type="error"
-                block
-                onClick={() => {
-                  onConfirmDisable();
-                  onClose();
-                }}
-              >
-                {t['com.affine.publicLinkDisableModal.button.disable']()}
-              </Button>
-            </div>
-          </ButtonContainer>
-        </Content>
-      </ModalWrapper>
-    </Modal>
+    <ConfirmModal
+      width={480}
+      title={t['com.affine.publicLinkDisableModal.title']()}
+      description={t['com.affine.publicLinkDisableModal.description']()}
+      cancelText={t['com.affine.publicLinkDisableModal.button.cancel']()}
+      confirmButtonOptions={{
+        type: 'error',
+        ['data-testid' as string]: 'confirm-enable-affine-cloud-button',
+        children: t['com.affine.publicLinkDisableModal.button.disable'](),
+      }}
+      {...props}
+    />
   );
 };

packages/component/src/components/share-menu/disable-public-link/style.ts

@@ -1,35 +0,0 @@
-import { styled } from '../../..';
-
-export const Header = styled('div')({
-  display: 'flex',
-  justifyContent: 'space-between',
-  paddingRight: '20px',
-  paddingTop: '20px',
-  paddingLeft: '24px',
-  alignItems: 'center',
-});
-
-export const Content = styled('div')({
-  padding: '12px 24px 20px 24px',
-});
-
-export const Title = styled('div')({
-  fontSize: 'var(--affine-font-h6)',
-  lineHeight: '26px',
-  fontWeight: 600,
-});
-
-export const StyleTips = styled('div')(() => {
-  return {
-    userSelect: 'none',
-    marginBottom: '20px',
-  };
-});
-export const ButtonContainer = styled('div')(() => {
-  return {
-    display: 'flex',
-    justifyContent: 'flex-end',
-    gap: '20px',
-    paddingTop: '20px',
-  };
-});

packages/component/src/components/share-menu/share-page.tsx

@@ -208,7 +208,10 @@ export const AffineSharePage = (props: ShareMenuProps) => {
             block
             type="danger"
             className={styles.menuItemStyle}
-            onClick={() => setShowDisable(true)}
+            onSelect={e => {
+              e.preventDefault();
+              setShowDisable(true);
+            }}
           >
             <div className={styles.disableSharePage}>
               {t['Disable Public Link']()}
@@ -216,10 +219,8 @@ export const AffineSharePage = (props: ShareMenuProps) => {
           </MenuItem>
           <PublicLinkDisableModal
             open={showDisable}
-            onConfirmDisable={onDisablePublic}
-            onClose={() => {
-              setShowDisable(false);
-            }}
+            onConfirm={onDisablePublic}
+            onOpenChange={setShowDisable}
           />
         </>
       ) : null}
@@ -231,7 +232,11 @@ export const SharePage = (props: ShareMenuProps) => {
   if (props.workspace.flavour === WorkspaceFlavour.LOCAL) {
     return <LocalSharePage {...props} />;
   } else if (props.workspace.flavour === WorkspaceFlavour.AFFINE_CLOUD) {
-    return <AffineSharePage {...props} />;
+    return (
+      <>
+        <AffineSharePage {...props} />
+      </>
+    );
   }
   throw new Error('Unreachable');
 };