fix: lightbox focus (#765)

heyxyz · Oct 8, 2022 · fb45de8 · fb45de8 · vercel · Oct 8, 2022
1 parent e80e11c
commit fb45de8
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 51 deletions.
diff --git a/src/components/Shared/Attachments.tsx b/src/components/Shared/Attachments.tsx
@@ -40,7 +40,7 @@ interface Props {
 }
 
 const Attachments: FC<Props> = ({ attachments, setAttachments, isNew = false, hideDelete = false }) => {
-  const [isImageExpanded, setIsImageExpanded] = useState(false);
+  const [expanedImage, setExpandedImage] = useState<string | null>(null);
 
   const removeAttachment = (attachment: any) => {
     const arr = attachments;
@@ -58,61 +58,59 @@ const Attachments: FC<Props> = ({ attachments, setAttachments, isNew = false, hi
     : attachments?.slice(0, 4);
 
   return slicedAttachments?.length !== 0 ? (
-    <div className={clsx(getClass(slicedAttachments?.length)?.row, 'grid grid-flow-col gap-2 pt-3')}>
-      {slicedAttachments?.map((attachment: LensterAttachment & MediaSet) => {
-        const type = isNew ? attachment.type : attachment.original.mimeType;
-        const url = isNew ? getIPFSLink(attachment.item) : getIPFSLink(attachment.original.url);
+    <>
+      <div className={clsx(getClass(slicedAttachments?.length)?.row, 'grid grid-flow-col gap-2 pt-3')}>
+        {slicedAttachments?.map((attachment: LensterAttachment & MediaSet) => {
+          const type = isNew ? attachment.type : attachment.original.mimeType;
+          const url = isNew ? getIPFSLink(attachment.item) : getIPFSLink(attachment.original.url);
 
-        return (
-          <div
-            className={clsx(type === 'video/mp4' ? '' : getClass(slicedAttachments?.length)?.aspect)}
-            key={url}
-            onClick={(event) => {
-              event.stopPropagation();
-            }}
-          >
-            {type === 'image/svg+xml' ? (
-              <Button
-                className="text-sm"
-                variant="primary"
-                icon={<ExternalLinkIcon className="h-4 w-4" />}
-                onClick={() => {
-                  window.open(url, '_blank');
-                }}
-              >
-                <span>Open Image in new tab</span>
-              </Button>
-            ) : type === 'video/mp4' ? (
-              <Video src={url} />
-            ) : (
-              <>
-                {isImageExpanded && (
-                  <LightBox url={url} show={isImageExpanded} onClose={() => setIsImageExpanded(false)} />
-                )}
+          return (
+            <div
+              className={clsx(type === 'video/mp4' ? '' : getClass(slicedAttachments?.length)?.aspect)}
+              key={url}
+              onClick={(event) => {
+                event.stopPropagation();
+              }}
+            >
+              {type === 'image/svg+xml' ? (
+                <Button
+                  className="text-sm"
+                  variant="primary"
+                  icon={<ExternalLinkIcon className="h-4 w-4" />}
+                  onClick={() => {
+                    window.open(url, '_blank');
+                  }}
+                >
+                  <span>Open Image in new tab</span>
+                </Button>
+              ) : type === 'video/mp4' ? (
+                <Video src={url} />
+              ) : (
                 <img
                   className="object-cover bg-gray-100 rounded-lg border cursor-pointer dark:bg-gray-800 dark:border-gray-700/80"
                   loading="lazy"
-                  onClick={() => setIsImageExpanded(true)}
+                  onClick={() => setExpandedImage(url)}
                   src={imagekitURL(url, 'attachment')}
                   alt={imagekitURL(url, 'attachment')}
                 />
-              </>
-            )}
-            {isNew && !hideDelete && (
-              <div className="m-3">
-                <button
-                  type="button"
-                  className="p-1.5 bg-gray-900 rounded-full opacity-75"
-                  onClick={() => removeAttachment(attachment)}
-                >
-                  <XIcon className="w-4 h-4 text-white" />
-                </button>
-              </div>
-            )}
-          </div>
-        );
-      })}
-    </div>
+              )}
+              {isNew && !hideDelete && (
+                <div className="m-3">
+                  <button
+                    type="button"
+                    className="p-1.5 bg-gray-900 rounded-full opacity-75"
+                    onClick={() => removeAttachment(attachment)}
+                  >
+                    <XIcon className="w-4 h-4 text-white" />
+                  </button>
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+      <LightBox show={!!expanedImage} url={expanedImage} onClose={() => setExpandedImage(null)} />
+    </>
   ) : null;
 };
 

diff --git a/src/components/UI/LightBox.tsx b/src/components/UI/LightBox.tsx
@@ -3,7 +3,7 @@ import { FC, Fragment } from 'react';
 
 interface Props {
   show: boolean;
-  url: string;
+  url: string | null;
   onClose: () => void;
 }
 
@@ -34,7 +34,7 @@ export const LightBox: FC<Props> = ({ show, url, onClose }) => {
             leaveFrom="opacity-100 translate-y-0 sm:scale-100"
             leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
           >
-            <img className="max-h-screen p-8" src={url} alt={url} onClick={onClose} />
+            <img className="max-h-screen p-8" src={url ?? ''} alt={url ?? ''} onClick={onClose} />
           </Transition.Child>
         </div>
       </Dialog>