feat: add Modal component to common ui

packages/app/src/components/Header/index.tsx

@@ -66,11 +66,11 @@ const BrowserWarning = ({ onClose }: { onClose: () => void }) => {
 export const Header = () => {
   const [title, setTitle] = useState('');
   const [isHover, setIsHover] = useState(false);
+  const [showWarning, setShowWarning] = useState(shouldShowWarning());
+
   const { contactModalHandler } = useModal();
   const { editor } = useEditor();
 
-  const [showWarning, setShowWarning] = useState(shouldShowWarning());
-
   useEffect(() => {
     if (editor) {
       setTitle(editor.model.title || '');

packages/app/src/components/contact-modal/index.tsx

@@ -1,5 +1,4 @@
-import { createPortal } from 'react-dom';
+import Modal from '@/ui/modal';
-import Fade from '@mui/material/Fade';
 import CloseIcon from '@mui/icons-material/Close';
 import {
   LogoIcon,
@@ -13,7 +12,6 @@ import {
 } from './icons';
 import logo from './affine-text-logo.png';
 import {
-  StyledModalContainer,
   StyledModalWrapper,
   StyledBigLink,
   StyledSmallLink,
@@ -21,7 +19,6 @@ import {
   StyledLeftContainer,
   StyledRightContainer,
   StyledContent,
-  StyledBackdrop,
   StyledLogo,
   StyledModalHeader,
   StyledModalHeaderLeft,
@@ -77,72 +74,68 @@ type TransitionsModalProps = {
 };
 
 export const ContactModal = ({ open, onClose }: TransitionsModalProps) => {
-  return createPortal(
+  return (
-    <Fade in={open}>
+    <Modal open={open} onClose={onClose}>
-      <StyledModalContainer>
+      <StyledModalWrapper>
-        <StyledBackdrop onClick={onClose} />
+        <StyledModalHeader>
-        <StyledModalWrapper>
+          <StyledModalHeaderLeft>
-          <StyledModalHeader>
+            <StyledLogo src={logo.src} alt="" />
-            <StyledModalHeaderLeft>
+            <span>Alpha</span>
-              <StyledLogo src={logo.src} alt="" />
+          </StyledModalHeaderLeft>
-              <span>Alpha</span>
+          <StyledCloseButton
-            </StyledModalHeaderLeft>
+            onClick={() => {
-            <StyledCloseButton
+              onClose();
-              onClick={() => {
+            }}
-                onClose();
+          >
-              }}
+            <CloseIcon width={12} height={12} />
+          </StyledCloseButton>
+        </StyledModalHeader>
+
+        <StyledContent>
+          <StyledLeftContainer>
+            {rightLinkList.map(({ icon, title, subTitle, link }) => {
+              return (
+                <StyledBigLink key={title} href={link} target="_blank">
+                  {icon}
+                  <p>{title}</p>
+                  <p>
+                    {subTitle}
+                    <LinkIcon />
+                  </p>
+                </StyledBigLink>
+              );
+            })}
+          </StyledLeftContainer>
+          <StyledRightContainer>
+            <StyledSubTitle>
+              Get in touch! <br />
+              Join our community.
+            </StyledSubTitle>
+            {linkList.map(({ icon, title, link }) => {
+              return (
+                <StyledSmallLink key={title} href={link} target="_blank">
+                  {icon}
+                  {title}
+                </StyledSmallLink>
+              );
+            })}
+          </StyledRightContainer>
+        </StyledContent>
+
+        <StyledModalFooter>
+          <p>
+            <a
+              href="https://affine.pro/content/blog/affine-alpha-is-coming/index"
+              target="_blank"
+              rel="noreferrer"
             >
-              <CloseIcon width={12} height={12} />
+              How is AFFiNE Alpha different？
-            </StyledCloseButton>
+            </a>
-          </StyledModalHeader>
+          </p>
-
+          <p>Copyright &copy; 2022 Toeverything</p>
-          <StyledContent>
+        </StyledModalFooter>
-            <StyledLeftContainer>
+      </StyledModalWrapper>
-              {rightLinkList.map(({ icon, title, subTitle, link }) => {
+    </Modal>
-                return (
-                  <StyledBigLink key={title} href={link} target="_blank">
-                    {icon}
-                    <p>{title}</p>
-                    <p>
-                      {subTitle}
-                      <LinkIcon />
-                    </p>
-                  </StyledBigLink>
-                );
-              })}
-            </StyledLeftContainer>
-            <StyledRightContainer>
-              <StyledSubTitle>
-                Get in touch! <br />
-                Join our community.
-              </StyledSubTitle>
-              {linkList.map(({ icon, title, link }) => {
-                return (
-                  <StyledSmallLink key={title} href={link} target="_blank">
-                    {icon}
-                    {title}
-                  </StyledSmallLink>
-                );
-              })}
-            </StyledRightContainer>
-          </StyledContent>
-
-          <StyledModalFooter>
-            <p>
-              <a
-                href="https://affine.pro/content/blog/affine-alpha-is-coming/index"
-                target="_blank"
-                rel="noreferrer"
-              >
-                How is AFFiNE Alpha different？
-              </a>
-            </p>
-            <p>Copyright &copy; 2022 Toeverything</p>
-          </StyledModalFooter>
-        </StyledModalWrapper>
-      </StyledModalContainer>
-    </Fade>,
-    document.body
   );
 };
 

packages/app/src/components/contact-modal/style.ts

@@ -2,17 +2,6 @@ import { absoluteCenter, displayFlex, styled } from '@/styles';
 import bg from './bg.png';
 import CloseIcon from '@mui/icons-material/Close';
 
-export const StyledModalContainer = styled('div')(({ theme }) => {
-  return {
-    width: '100vw',
-    height: '100vh',
-    position: 'fixed',
-    left: '0',
-    top: '0',
-    zIndex: theme.zIndex.modal,
-  };
-});
-
 export const StyledModalWrapper = styled('div')(({ theme }) => {
   return {
     width: '860px',
@@ -143,9 +132,6 @@ export const StyledContent = styled('div')({
   letterSpacing: '0.06em',
 });
 
-export const StyledBackdrop = styled('div')(({ theme }) => {
-  return { width: '100%', height: '100%', background: 'rgba(58, 76, 92, 0.2)' };
-});
 export const StyledLogo = styled('img')({
   height: '18px',
   width: 'auto',

packages/app/src/pages/affine.tsx

@@ -1,7 +1,8 @@
 import { displayFlex, styled } from '@/styles';
 import { ThemeModeSwitch } from '@/components/theme-mode-switch';
 import { Loading } from '@/components/loading';
-
+import Modal from '@/ui/modal';
+import { useState } from 'react';
 export const StyledHeader = styled('div')({
   height: '60px',
   width: '100vw',
@@ -12,11 +13,27 @@ export const StyledHeader = styled('div')({
 });
 
 const Affine = () => {
+  const [show, setShow] = useState(false);
   return (
     <>
       <StyledHeader>
         <ThemeModeSwitch></ThemeModeSwitch>
+        <button
+          onClick={() => {
+            setShow(true);
+          }}
+        >
+          click me!
+        </button>
       </StyledHeader>
+      <Modal
+        open={show}
+        onClose={() => {
+          setShow(false);
+        }}
+      >
+        <div>hi</div>
+      </Modal>
       <Loading />
     </>
   );

packages/app/src/ui/modal/index.tsx

@@ -0,0 +1,4 @@
+import Modal from './modal';
+
+export * from './modal';
+export default Modal;

packages/app/src/ui/modal/modal.tsx

@@ -0,0 +1,32 @@
+import Fade from '@mui/material/Fade';
+import { StyledModal, StyledBackdrop } from './style';
+import { ModalUnstyledOwnProps } from '@mui/base/ModalUnstyled';
+
+const Backdrop = ({
+  open,
+  ...other
+}: {
+  open?: boolean;
+  className: string;
+}) => {
+  return (
+    <Fade in={open}>
+      <StyledBackdrop open={open} {...other} />
+    </Fade>
+  );
+};
+
+export type ModalProps = ModalUnstyledOwnProps;
+
+export const Modal = (props: ModalProps) => {
+  const { components, open, children, ...otherProps } = props;
+  return (
+    <div>
+      <StyledModal {...otherProps} open={open} components={{ Backdrop }}>
+        <Fade in={open}>{children}</Fade>
+      </StyledModal>
+    </div>
+  );
+};
+
+export default Modal;

packages/app/src/ui/modal/style.ts

@@ -0,0 +1,30 @@
+import { displayFlex, fixedCenter, styled } from '@/styles';
+import ModalUnstyled from '@mui/base/ModalUnstyled';
+
+export const StyledBackdrop = styled.div<{ open?: boolean }>(({ open }) => {
+  return {
+    zIndex: '-1',
+    position: 'fixed',
+    right: '0',
+    bottom: '0',
+    top: '0',
+    left: '0',
+    backgroundColor: 'rgba(58, 76, 92, 0.2)',
+  };
+});
+
+export const StyledModal = styled(ModalUnstyled)(({ theme }) => {
+  return {
+    width: '100vw',
+    height: '100vh',
+    position: 'fixed',
+    left: '0',
+    top: '0',
+    zIndex: theme.zIndex.modal,
+    ...displayFlex('center', 'center'),
+    '*': {
+      '-webkit-tap-highlight-color': 'transparent',
+      outline: 'none',
+    },
+  };
+});