Render gallery to portal

x3388638 · Sep 5, 2020 · 73fa917 · 73fa917
1 parent 15b0f42
commit 73fa917
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 23 deletions.
diff --git a/__e2e__/functional.test.js b/__e2e__/functional.test.js
@@ -18,19 +18,15 @@ Scenario('Click the BrowseBtn to open Gallery', I => {
   I.amOnSamplePageAndInjectJS()
   I.click(locate(el.root).find(el.BrowseBtn))
   I.wait(2)
-  I.seeElement(locate(el.root).find(el.CloseBtn))
-  I.seeElement(locate(el.root).find(el.Grid))
+  I.seeElement(el.CloseBtn)
+  I.seeElement(el.Grid)
   I.saveScreenshot('Gallery.png')
 })
 
 Scenario('Click Gallery image to open Carousel', I => {
   I.amOnSamplePageAndInjectJS()
   I.click(locate(el.root).find(el.BrowseBtn))
   I.wait(2)
-  I.click(locate(el.root).find(el.Grid))
-  I.seeElement(
-    locate(el.root)
-      .find(el.Carousel)
-      .find('img')
-  )
+  I.click(el.Grid)
+  I.seeElement(locate(el.Carousel).find('img'))
 })
diff --git a/components/Gallery.js b/components/Gallery.js
@@ -1,4 +1,5 @@
 import React, { useState, useCallback } from 'react'
+import ReactDOM from 'react-dom'
 import styled, { keyframes } from 'styled-components'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faTimesCircle } from '@fortawesome/free-solid-svg-icons'
@@ -99,7 +100,7 @@ const Gallery = ({
 
   const itemAmount = images.length + (isFetching ? 1 : 0)
 
-  return (
+  return ReactDOM.createPortal(
     <Transition
       in={isOpen}
       timeout={{ enter: 0, exit: 225 }}
@@ -161,7 +162,8 @@ const Gallery = ({
           )}
         </Backdrop>
       )}
-    </Transition>
+    </Transition>,
+    document.body
   )
 }
 

diff --git a/index.user.js b/index.user.js
diff --git a/meta.js b/meta.js
@@ -1,7 +1,7 @@
 // ==UserScript==
 // @name         dcard-images
 // @namespace    https://2yc.tw
-// @version      1.0.7
+// @version      1.1.0
 // @description  Dcard gallery to browse all images in both article and comments
 // @author       Y.Y.
 // @match        https://www.dcard.tw/*

diff --git a/package.json b/package.json
@@ -1,10 +1,9 @@
 {
   "name": "dcard-images",
-  "version": "1.0.7",
+  "version": "1.1.0",
   "description": "Dcard gallery for all images in the article and comments",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
     "build": "webpack && cat meta.js index.user.js > temp && mv temp index.user.js",
     "prettier:check": "prettier --check './**/*.{js,json,css}' && echo \"✅ Prettier validated\"",
     "prettier:write": "prettier --write './**/*.{js,json,css}'",