fix(modal): use radix/dialog instead of semantic-ui-react (#97)

opensquare-network · Mar 27, 2024 · 234f107 · 234f107
1 parent 907ff8b
commit 234f107
Show file tree

Hide file tree

Showing 3 changed files with 1,501 additions and 1,462 deletions.
diff --git a/lib/Modal/index.js b/lib/Modal/index.js
@@ -1,27 +1,10 @@
 import React from "react";
 import styled from "styled-components";
-import { Modal as SemanticModal } from "semantic-ui-react";
-import "semantic-ui-css/components/modal.min.css";
-import "semantic-ui-css/components/dimmer.min.css";
 
 import Button from "../styled/Button";
 import { SystemClose } from "@osn/icons/opensquare";
-
-const Wrapper = styled.div``;
-
-const StyledModal = styled(SemanticModal)`
-  background: var(--fillBgPrimary) !important;
-  width: ${(p) => p.width}px !important;
-  max-width: ${(p) => p.width}px !important;
-  border-radius: 0 !important;
-`;
-
-const ContentWrapper = styled.div`
-  margin: 0 !important;
-  padding: 24px !important;
-  position: relative !important;
-  width: 100% !important;
-`;
+import * as Dialog from "@radix-ui/react-dialog";
+import { cn } from "../utils";
 
 const CloseBar = styled.div`
   display: flex;
@@ -45,7 +28,6 @@ const FooterWrapper = styled.div`
 `;
 
 export default function Modal({
-  width = 400,
   open,
   setOpen = () => {},
   children,
@@ -76,23 +58,30 @@ export default function Modal({
   );
 
   return (
-    <Wrapper>
-      <StyledModal
-        width={width}
-        open={open}
-        onClose={closeModal}
-        dimmer
-        size="tiny"
-        closeOnDimmerClick={closeOnClickOutside}
-      >
-        <ContentWrapper>
+    <Dialog.Root open={open} onOpenChange={closeModal}>
+      <Dialog.Portal>
+        <Dialog.Overlay className={cn("fixed inset-0", "bg-black/85")} />
+
+        <Dialog.Content
+          className={cn(
+            "bg-fillBgPrimary",
+            "w-[400px] max-w-full",
+            "fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2",
+            "p-6",
+          )}
+          onPointerDownOutside={(event) => {
+            if (!closeOnClickOutside) {
+              event.preventDefault();
+            }
+          }}
+        >
           {closeBar && <CloseBar>{closeBar}</CloseBar>}
 
           {children}
 
           {footer && <FooterWrapper>{footer}</FooterWrapper>}
-        </ContentWrapper>
-      </StyledModal>
-    </Wrapper>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
   );
 }
diff --git a/package.json b/package.json
@@ -72,6 +72,7 @@
     "@floating-ui/react": "^0.26.6",
     "@osn/icons": "^1.83.0",
     "@osn/polkadot-react-identicon": "^1.0.10",
+    "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-tooltip": "^1.0.7",
     "d3-selection": "^3.0.0",
     "d3-shape": "^3.1.0",