Merge pull request #85 from innovation-upstream/chore/fix-modals-close

chore: Fix modals close
ApeSwapFinance · May 27, 2022 · 6eb2bca · 6eb2bca
2 parents 9f66d81 + 64726eb
commit 6eb2bca
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 5 deletions.
diff --git a/src/widgets/LanguageModal/SelectLanguageModal.tsx b/src/widgets/LanguageModal/SelectLanguageModal.tsx
@@ -1,3 +1,4 @@
+/** @jsxImportSource theme-ui */
 import React, { useContext } from "react";
 import { Modal, ModalContext } from "../Modal";
 import { Flex } from "../../components/Flex";
@@ -30,7 +31,7 @@ const SelectLanguageModal: React.FC<Props> = ({ currentLang, langs, setLang, t }
       <Flex sx={{ height: "auto", flexDirection: "column" }}>
         {langs.map((lang) => (
           <Button
-            csx={langButton}
+            sx={langButton}
             fullWidth
             variant={currentLang === lang.language ? "tertiary" : "secondary"}
             onClick={() => {

diff --git a/src/widgets/Modal/Modal.tsx b/src/widgets/Modal/Modal.tsx
@@ -1,11 +1,12 @@
 /** @jsxImportSource theme-ui */
-import React from "react";
+import React, { useContext } from "react";
 import { Box } from "theme-ui";
 import { AnimatePresence, motion } from "framer-motion";
 import { ModalProps } from "./types";
 import style from "./styles";
 import ModalHeader from "./ModalHeader";
 import { Heading } from "../../components/Heading";
+import { Context as ModalContext } from "./ModalContext";
 
 const Modal: React.FC<ModalProps> = ({
   children,
@@ -18,6 +19,9 @@ const Modal: React.FC<ModalProps> = ({
   onAnimationComplete,
   ...props
 }) => {
+  const { handleClose } = useContext(ModalContext);
+  const onClose = onDismiss || handleClose;
+
   return (
     <Box id={title}>
       <AnimatePresence>
@@ -32,7 +36,7 @@ const Modal: React.FC<ModalProps> = ({
             onAnimationComplete={onAnimationComplete}
           >
             {title && (
-              <ModalHeader onDismiss={onDismiss}>
+              <ModalHeader onDismiss={onClose}>
                 <Heading>{title}</Heading>
               </ModalHeader>
             )}
@@ -42,7 +46,7 @@ const Modal: React.FC<ModalProps> = ({
                   ...(child as any)?.props,
                   onDismiss: () => {
                     (child as any)?.props?.onDismiss?.();
-                    onDismiss?.();
+                    onClose();
                   },
                 });
               }
@@ -51,7 +55,7 @@ const Modal: React.FC<ModalProps> = ({
           </motion.div>
         )}
       </AnimatePresence>
-      {open && <Box sx={style.backdrop} onClick={onDismiss} />}
+      {open && <Box sx={style.backdrop} onClick={onClose} />}
     </Box>
   );
 };