v3.8.3 (#113)

* modal tab focus fix * Update manifest.json
rossmoody · Aug 26, 2021 · d1fc9bf · d1fc9bf
1 parent 3ac4b0a
commit d1fc9bf
Show file tree

Hide file tree

Showing 7 changed files with 143 additions and 102 deletions.
diff --git a/extension/manifest.json b/extension/manifest.json
@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "SVG Gobbler",
-  "version": "3.8.2",
+  "version": "3.8.3",
   "description": "Download and optimize icons, logos, and vector SVGs.",
   "homepage_url": "https://github.com/rossmoody/svg-gobbler",
   "icons": {
@@ -26,7 +26,7 @@
   "content_security_policy": "script-src 'self' https://feedback.fish/ff.js; object-src",
   "content_scripts": [
     {
-      "matches": ["https://*/*"],
+      "matches": ["https://*/*", "http://*/*"],
       "js": ["./dist/find.js"]
     }
   ]

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "svg-gobbler",
-  "version": "3.8.2",
+  "version": "3.8.3",
   "author": "rossmoody <[email protected]>",
   "description": "Download and optimize icons, logos, and vector SVGs.",
   "license": "apache-2.0",

diff --git a/src/build/components/card/card-action-footer.tsx b/src/build/components/card/card-action-footer.tsx
@@ -1,29 +1,12 @@
 import React, { useState } from 'react'
-import {
-  Button,
-  Grid,
-  Menu,
-  MenuList,
-  MenuButton,
-  MenuItem,
-  IconButton,
-  MenuDivider,
-  useColorModeValue,
-  useToast,
-} from '@chakra-ui/react'
-import {
-  FiChevronDown,
-  FiCode,
-  FiImage,
-  FiDownload,
-  FiCopy,
-} from 'react-icons/fi'
+import { Button, Grid, useColorModeValue, useToast } from '@chakra-ui/react'
 
 import Drawer from '../drawer'
+import FilenameModal from '../modals/filename-modal'
+import ImageModal from '../modals/image-modal'
 import handle from '../utils/actions'
 
-import ImageModal from './image-modal'
-import FilenameModal from './filename-modal'
+import CardActionMenu from './card-action-menu'
 
 interface CardActionFooter {
   svgString: string
@@ -61,15 +44,6 @@ const CardActionFooter = ({
       bg={useColorModeValue('white', 'gray.700')}
     >
       <Button onClick={() => setShowOgModal(true)}>Download</Button>
-      {showOgModal && (
-        <FilenameModal
-          title="Download original"
-          download={handle.downloadOriginal}
-          svgString={svgString}
-          callback={setShowOgModal}
-        />
-      )}
-
       <Button
         onClick={() => {
           handle.copyToClipboard(svgString)
@@ -83,67 +57,43 @@ const CardActionFooter = ({
         Copy
       </Button>
 
-      <Menu placement="top">
-        <MenuButton
-          as={IconButton}
-          icon={<FiChevronDown />}
-          aria-label="Options"
-          borderRadius="md"
-        />
-        <MenuList zIndex={100}>
-          <MenuItem
-            icon={<FiDownload />}
-            onClick={() => setShowOptimizedModal(true)}
-          >
-            Download optimized
-          </MenuItem>
-          {showOptimizedModal && (
-            <FilenameModal
-              title="Download optimized"
-              download={handle.downloadOptimized}
-              svgString={svgString}
-              callback={setShowOptimizedModal}
-            />
-          )}
+      <CardActionMenu
+        setShowOptimizedModal={setShowOptimizedModal}
+        setShowDrawer={setShowDrawer}
+        svgString={svgString}
+        setShowModal={setShowModal}
+      />
 
-          <MenuItem
-            icon={<FiCopy />}
-            onClick={() => {
-              handle.copyOptimized(svgString)
-              toast({
-                title: 'Copied to clipboard',
-                description:
-                  "The SVG has been successfully optimized using SVGO's default settings and is available in your clipboard.",
-              })
-            }}
-          >
-            Copy optimized
-          </MenuItem>
+      <FilenameModal
+        title="Download original"
+        download={handle.downloadOriginal}
+        svgString={svgString}
+        callback={setShowOgModal}
+        showModal={showOgModal}
+      />
 
-          <MenuDivider />
+      <FilenameModal
+        title="Download optimized"
+        download={handle.downloadOptimized}
+        svgString={svgString}
+        callback={setShowOptimizedModal}
+        showModal={showOptimizedModal}
+      />
 
-          <MenuItem icon={<FiImage />} onClick={() => setShowModal(true)}>
-            Export as PNG…
-          </MenuItem>
+      <Drawer
+        svgString={svgString}
+        callback={setShowDrawer}
+        showDrawer={showDrawer}
+      />
 
-          {showModal && (
-            <ImageModal
-              callback={setShowModal}
-              svgString={svgString}
-              height={height}
-              width={width}
-              whiteFill={whiteFill}
-            />
-          )}
-          <MenuDivider />
-          <MenuItem icon={<FiCode />} onClick={() => setShowDrawer(true)}>
-            View code…
-          </MenuItem>
-          {showDrawer && (
-            <Drawer svgString={svgString} callback={setShowDrawer} />
-          )}
-        </MenuList>
-      </Menu>
+      <ImageModal
+        callback={setShowModal}
+        svgString={svgString}
+        height={height}
+        width={width}
+        whiteFill={whiteFill}
+        showModal={showModal}
+      />
     </Grid>
   )
 }

diff --git a/src/build/components/card/card-action-menu.tsx b/src/build/components/card/card-action-menu.tsx
@@ -0,0 +1,85 @@
+import React from 'react'
+import {
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  MenuDivider,
+  IconButton,
+  useToast,
+} from '@chakra-ui/react'
+import {
+  FiChevronDown,
+  FiCode,
+  FiImage,
+  FiDownload,
+  FiCopy,
+} from 'react-icons/fi'
+
+import handle from '../utils/actions'
+
+interface CardActionMenu {
+  setShowOptimizedModal: any
+  setShowDrawer: any
+  svgString: any
+  setShowModal: any
+}
+
+const CardActionMenu = ({
+  setShowOptimizedModal,
+  setShowDrawer,
+  svgString,
+  setShowModal,
+}: CardActionMenu) => {
+  const toast = useToast({
+    status: 'success',
+    duration: 3000,
+    isClosable: true,
+  })
+
+  return (
+    <Menu placement="top" isLazy closeOnSelect={false}>
+      <MenuButton
+        as={IconButton}
+        icon={<FiChevronDown />}
+        aria-label="Options"
+        borderRadius="md"
+      />
+
+      <MenuList width="auto" height="auto">
+        <MenuItem
+          icon={<FiDownload />}
+          onClick={() => setShowOptimizedModal(true)}
+        >
+          Download optimized
+        </MenuItem>
+
+        <MenuItem
+          icon={<FiCopy />}
+          onClick={() => {
+            handle.copyOptimized(svgString)
+            toast({
+              title: 'Copied to clipboard',
+              description:
+                "The SVG has been successfully optimized using SVGO's default settings and is available in your clipboard.",
+            })
+          }}
+        >
+          Copy optimized
+        </MenuItem>
+
+        <MenuDivider />
+
+        <MenuItem icon={<FiImage />} onClick={() => setShowModal(true)}>
+          Export as PNG…
+        </MenuItem>
+
+        <MenuDivider />
+        <MenuItem icon={<FiCode />} onClick={() => setShowDrawer(true)}>
+          View code…
+        </MenuItem>
+      </MenuList>
+    </Menu>
+  )
+}
+export default CardActionMenu
diff --git a/src/build/components/drawer/index.tsx b/src/build/components/drawer/index.tsx
@@ -10,16 +10,16 @@ import {
 
 import { DrawerContent as DrawerCodeContent } from './drawer-content'
 
-function CodeDrawer({
-  callback,
-  svgString,
-}: {
-  callback: any
+interface CodeDrawer {
+  callback: React.Dispatch<React.SetStateAction<boolean>>
   svgString: string
-}) {
+  showDrawer: boolean
+}
+
+function CodeDrawer({ callback, svgString, showDrawer }: CodeDrawer) {
   return (
     <Drawer
-      isOpen
+      isOpen={showDrawer}
       placement="right"
       size="2xl"
       onClose={() => {

diff --git a/src/build/components/card/filename-modal.tsx → ...uild/components/modals/filename-modal.tsx b/src/build/components/card/filename-modal.tsx → ...uild/components/modals/filename-modal.tsx
@@ -19,29 +19,33 @@ interface PopoverFormTypes {
   title: string
   svgString: string
   download: (svg: string, filename: string) => void
-  callback: (arg: boolean) => void
+  callback: React.Dispatch<React.SetStateAction<boolean>>
+  showModal: boolean
 }
 
 const FilenameModal = ({
   title,
   svgString,
   callback,
   download,
+  showModal,
 }: PopoverFormTypes) => {
   const [filename, setFilename] = useState('svg-gobbler')
+
   const firstFieldRef = useRef(null)
 
   return (
     <Modal
       size="xs"
-      isOpen
+      isOpen={showModal}
       onClose={() => callback(false)}
       initialFocusRef={firstFieldRef}
       isCentered
     >
       <ModalOverlay />
       <form
-        onSubmit={() => {
+        onSubmit={(event) => {
+          event.preventDefault()
           download(svgString, filename)
           callback(false)
         }}

diff --git a/src/build/components/card/image-modal.tsx → src/build/components/modals/image-modal.tsx b/src/build/components/card/image-modal.tsx → src/build/components/modals/image-modal.tsx
@@ -25,11 +25,12 @@ import handle from '../utils/actions'
 import { SVGImage } from '../utils/image-class'
 
 interface ImageModalProps {
-  callback: (arg: boolean) => void
+  callback: React.Dispatch<React.SetStateAction<boolean>>
   svgString: string
   height: number
   width: number
   whiteFill: boolean
+  showModal: boolean
 }
 
 const ImageModal = ({
@@ -38,6 +39,7 @@ const ImageModal = ({
   height,
   width,
   whiteFill,
+  showModal,
 }: ImageModalProps) => {
   const [size, setSize] = useState({ height, width })
   const [filename, setFilename] = useState('svg-image')
@@ -48,7 +50,7 @@ const ImageModal = ({
 
   return (
     <Modal
-      isOpen
+      isOpen={showModal}
       onClose={() => callback(false)}
       size="lg"
       initialFocusRef={firstFieldRef}