Merge pull request #19 from mapcomponents/feature/removeCloseButton

remove close Button, ad open in new tab
mapcomponents · Jul 14, 2023 · 706395e · 706395e
2 parents 0631583 + 7736001
commit 706395e
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 171 deletions.
diff --git a/src/App.css b/src/App.css
@@ -11,22 +11,8 @@ body {
   width: 225px;
   display: block;
 }
-.demoOverlay {
-  opacity: 0;
-}
-.demoOverlay-fadein {
-  opacity: 1;
-  transition: all 200ms linear;
-}
-.demoOverlayBlackscreen-fadein {
-  opacity: 1;
-  transition: all 200ms linear;
-}
-.demoOverlay-fadeout {
-  opacity: 0;
-  transition: all 800ms linear;
-}
-.roundCorners {
+
+.roundCorners{
   border-radius: 30px;
 }
 .cutCorners {
@@ -252,8 +238,6 @@ form button:hover {
 }
 
 @media (max-width: 900px) {
-  .menu {
-  }
   .menu {
     background: #fff;
     position: absolute;

diff --git a/src/components/DemoView.js b/src/components/DemoView.js
@@ -1,40 +1,25 @@
-import React, { useCallback, useState, useContext, useEffect, useMemo } from "react";
-import { useParams, useNavigate } from "react-router-dom";
+import React, { useCallback, useState, useContext, useEffect } from "react";
+import { useParams } from "react-router-dom";
 
 import DemoContext from "./DemoContext";
 
-import IconButton from "@mui/material/IconButton";
-import HighlightOffIcon from "@mui/icons-material/HighlightOff";
-import { useTranslation } from "react-i18next";
-
-function DemoView(props) {
+function DemoView() {
   const { component_name, demo_id } = useParams();
-  const navigate = useNavigate();
 
   const [demoViewerOpen, setDemoViewerOpen] = useState(false);
   const demoContext = useContext(DemoContext);
 
   const [demoUrl, setDemoUrl] = useState("");
-  const [closeButtonPosition, setCloseButtonPosition] = useState("bottom_left");
-  const [fadein, setFadein] = useState(false);
-  const { i18n } = useTranslation();
-
-  const detailViewPath = `/${i18n.resolvedLanguage}/component-detail/${component_name}`;
 
   const init = useCallback(
     (demo_id) => {
       if (!demoContext.componentData?.[component_name] || !demo_id) return;
 
-      setFadein(true);
-
       let _compData = demoContext.componentData?.[component_name];
 
       _compData.demos?.forEach((demo) => {
         if ((demo.id ? demo.id : demo.name) === demo_id) {
           setDemoUrl(demo.url);
-          if (typeof demo.closeButtonPosition !== "undefined") {
-            setCloseButtonPosition(demo.closeButtonPosition);
-          }
           setTimeout(() => {
             setDemoViewerOpen(true);
           }, 500);
@@ -44,39 +29,16 @@ function DemoView(props) {
     [demoContext, component_name]
   );
 
-  const closeButtonCss = useMemo(() => {
-    switch (closeButtonPosition) {
-      case "top_left":
-        return {
-          top: 0,
-          left: 0,
-        };
-      case "top_right":
-        return {
-          top: 0,
-          right: 0,
-        };
-      case "bottom_right":
-        return {
-          bottom: 0,
-          right: 0,
-        };
-      case "bottom_left":
-      default:
-        return {
-          bottom: 0,
-          left: 0,
-        };
-    }
-  }, [closeButtonPosition]);
-
   useEffect(() => {
     init(demo_id);
   }, [init, demo_id]);
 
+  useEffect(() => {
+    init(demo_id);
+  }, [demoContext.storybookData, init, demo_id]);
+
   return (
     <div
-      className={fadein ? "demoOverlay-fadein" : "demoOverlay-fadeout"}
       style={{
         position: "fixed",
         zIndex: 1000,
@@ -87,41 +49,6 @@ function DemoView(props) {
         backgroundColor: "#000",
       }}
     >
-      <div
-        className={fadein ? "" : "demoOverlayBlackscreen-fadein"}
-        style={{
-          position: "fixed",
-          zIndex: 10000000,
-          top: 0,
-          right: 0,
-          left: 0,
-          height: "100vh",
-          backgroundColor: "#000",
-          display: fadein ? "none" : "block",
-        }}
-      ></div>
-      <div
-        className="closeDemo"
-        style={{
-          cursor: "pointer",
-          position: "fixed",
-          zIndex: 1020,
-          ...closeButtonCss,
-        }}
-      >
-        <IconButton
-          onClick={() => {
-            setFadein(false);
-            setTimeout(() => {
-              navigate(detailViewPath);
-            }, 480);
-          }}
-          aria-label="close"
-          size="large"
-        >
-          <HighlightOffIcon style={{ fontSize: "3em" }}></HighlightOffIcon>
-        </IconButton>
-      </div>
       {demoViewerOpen && (
         <iframe
           title="component-demo-viewer"
@@ -146,4 +73,4 @@ function DemoView(props) {
   );
 }
 
-export default DemoView;
+export default DemoView;
diff --git a/src/components/Footer.js b/src/components/Footer.js
@@ -1,38 +1,28 @@
 import React from "react";
+import { useTranslation } from "react-i18next";
+import { Paper, Container } from "@mui/material";
+import makeStyles from "@mui/styles/makeStyles";
 
 import theme from "../theme.js";
-import { Container } from "@mui/material";
-import makeStyles from "@mui/styles/makeStyles";
-import Paper from "@mui/material/Paper";
-import { useTranslation } from "react-i18next";
 
 const useStyles = makeStyles((theme) => ({
   footer: {
-    //backgroundColor: theme.palette.secondary.lighterDarkBackground,
     maxWidth: "100%",
     padding: "40px 0",
   },
   link: {
     color: theme.palette.secondary.greyText,
     textDecoration: "none",
-    /**color: theme.palette.secondary.greyText,
-    "&:hover": {
-      color: theme.palette.secondary.contrastText + " !important",
-    },
-    "&:visited": {
-      color: theme.palette.secondary.greyText,
-    },*/
   },
   logo: {
-    //fill: theme.palette.secondary.greyText,
     width: "230px",
-    //opacity: 0.6,
   },
 }));
 
 function Footer() {
   const classes = useStyles(theme);
-  const { i18n } = useTranslation();
+  // eslint-disable-next-line
+  const { t, i18n } = useTranslation();
 
   return (
     <Paper
@@ -96,4 +86,4 @@ function Footer() {
   );
 }
 
-export default Footer;
+export default Footer;