feat: added logic to hide desktop toggle

fluid-design-io · Oct 20, 2023 · 3f7ce7a · 3f7ce7a
1 parent 287ac2a
commit 3f7ce7a
Showing 1 changed file with 35 additions and 22 deletions.
diff --git a/apps/web/components/toolbar/plugin/download-base-palette.plugin.tsx b/apps/web/components/toolbar/plugin/download-base-palette.plugin.tsx
@@ -2,7 +2,7 @@
 
 import html2canvas from "html2canvas";
 import { DownloadIcon } from "lucide-react";
-import { Fragment, useEffect, useState } from "react";
+import { Fragment, useEffect, useRef, useState } from "react";
 import { Button } from "ui/components/ui/button";
 import { Switch } from "ui/components/ui/switch";
 import { Skeleton } from "ui/components/ui/skeleton";
@@ -18,7 +18,8 @@ function DownloadBasePalettePlugin({ setOpen }) {
   const [isLoaded, setisLoaded] = useState(false);
   const [imageData, setImageData] = useState(null);
   const [desktopSize, setDesktopSize] = useState(undefined);
-  const [paletteAspectRatio, setPaletteAspectRatio] = useState(1);
+  const [isDesktopSize, setIsDesktopSize] = useState(false);
+  const paletteAspectRatio = useRef(1);
   const { toast } = useToast();
   const handleGenerateImage = (options: GenerateImageOptions) => {
     if (typeof desktopSize === "undefined") return;
@@ -36,7 +37,7 @@ function DownloadBasePalettePlugin({ setOpen }) {
         style.sheet?.insertRule("body { min-width: 1920px }");
       const paletteBodyWidth = paletteBody.clientWidth;
       const paletteBodyHeight = paletteBody.clientHeight;
-      setPaletteAspectRatio(paletteBodyWidth / paletteBodyHeight);
+      paletteAspectRatio.current = paletteBodyWidth / paletteBodyHeight;
       html2canvas(paletteBody, {
         useCORS: true,
         allowTaint: true,
@@ -67,12 +68,20 @@ function DownloadBasePalettePlugin({ setOpen }) {
     handleGenerateImage({ desktopSize });
   }, [desktopSize]);
   useEffect(() => {
-    // check window size is > 1920px, if not, set preserveSize to false
-    if (window.innerWidth < 1920) {
-      setDesktopSize(false);
-    } else {
-      setDesktopSize(true);
-    }
+    const calculateSize = () => {
+      if (window.innerWidth < 1920) {
+        setDesktopSize(false);
+        setIsDesktopSize(false);
+      } else {
+        setDesktopSize(true);
+        setIsDesktopSize(true);
+      }
+    };
+    calculateSize();
+    window.addEventListener("resize", calculateSize);
+    return () => {
+      window.removeEventListener("resize", calculateSize);
+    };
   }, []);
 
   return (
@@ -84,7 +93,7 @@ function DownloadBasePalettePlugin({ setOpen }) {
             "w-[16rem] rounded-md sm:w-[22rem]",
           )}
           style={{
-            aspectRatio: paletteAspectRatio,
+            aspectRatio: paletteAspectRatio.current,
           }}
         >
           {isLoaded ? (
@@ -103,20 +112,24 @@ function DownloadBasePalettePlugin({ setOpen }) {
         </div>
       </div>
       <div className="flex justify-between">
-        <div className="flex items-center justify-center space-x-1">
-          <Switch
-            id="preserve-size"
-            onCheckedChange={setDesktopSize}
-            checked={desktopSize}
-            aria-label="Desktop Size"
-          />
-          <Label htmlFor="preserve-size" className="text-foreground/80">
-            Desktop Size
-          </Label>
-        </div>
+        {!isDesktopSize ? (
+          <div className="flex items-center justify-center space-x-1.5">
+            <Switch
+              id="preserve-size"
+              onCheckedChange={setDesktopSize}
+              checked={desktopSize}
+              aria-label="Desktop Size"
+            />
+            <Label htmlFor="preserve-size" className="text-foreground/80">
+              Desktop Size
+            </Label>
+          </div>
+        ) : (
+          <div />
+        )}
         <Button className="h-8" size="sm" onClick={handleDownload}>
           <DownloadIcon className="h-4 w-4" />
-          <span className="sr-only ms-2 sm:not-sr-only">Download image</span>
+          <span className="sr-only sm:not-sr-only sm:ms-2">Download image</span>
         </Button>
       </div>
     </Fragment>