From 2943b77cce189888091cd52c3ba88158cb4f7172 Mon Sep 17 00:00:00 2001
From: ahamelers <audrey@ahamelers.com>
Date: Tue, 5 Mar 2019 14:13:52 +0000
Subject: [PATCH] portal improvements

---
 app/components/ui/atoms/Cover.jsx | 36 ++++++++++++++++++++++
 app/components/ui/atoms/Modal.jsx | 50 +++++++------------------------
 app/components/ui/atoms/index.js  |  3 +-
 3 files changed, 48 insertions(+), 41 deletions(-)
 create mode 100644 app/components/ui/atoms/Cover.jsx

diff --git a/app/components/ui/atoms/Cover.jsx b/app/components/ui/atoms/Cover.jsx
new file mode 100644
index 000000000..75c05d435
--- /dev/null
+++ b/app/components/ui/atoms/Cover.jsx
@@ -0,0 +1,36 @@
+import React from 'react'
+import { th } from '@pubsweet/ui-toolkit'
+import styled, { createGlobalStyle } from 'styled-components'
+
+const Limit = createGlobalStyle`
+  #root > div > div {
+    overflow: hidden;
+  }
+`
+const Screen = styled.div`
+  position: fixed;
+  right: 0;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  background-color: ${props =>
+    props.transparent ? 'rgba(255, 255, 255, 0.6)' : th('colorTextReverse')};
+  z-index: 3;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`
+const Scroll = styled.div`
+  margin: auto;
+  width: 100%;
+  max-height: 100%;
+  overflow: auto;
+`
+export const Cover = React.forwardRef(({ children, ...props }, ref) => (
+  <Screen {...props}>
+    <Limit />
+    <Scroll ref={ref}>{children}</Scroll>
+  </Screen>
+))
diff --git a/app/components/ui/atoms/Modal.jsx b/app/components/ui/atoms/Modal.jsx
index 2883c90d6..d2691ca72 100644
--- a/app/components/ui/atoms/Modal.jsx
+++ b/app/components/ui/atoms/Modal.jsx
@@ -1,34 +1,9 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 import { th } from '@pubsweet/ui-toolkit'
-import styled, { createGlobalStyle } from 'styled-components'
+import styled from 'styled-components'
+import { Cover } from './'
 
-const Limit = createGlobalStyle`
-  #root > div > div {
-    overflow: hidden;
-  }
-`
-const Screen = styled.div`
-  position: fixed;
-  right: 0;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  width: 100%;
-  height: 100%;
-  background-color: ${props =>
-    props.transparent ? 'rgba(255, 255, 255, 0.6)' : th('colorTextReverse')};
-  z-index: 3;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`
-const Scroll = styled.div`
-  margin: auto;
-  width: 100%;
-  max-height: 100%;
-  overflow: auto;
-`
 export const Modal = styled.div`
   box-shadow: 0 0 8px ${th('colorBorder')};
   background-color: ${props =>
@@ -49,17 +24,12 @@ export const Modal = styled.div`
     margin-top: 0;
   }
 `
-export const Cover = ({ children, ...props }) => (
-  <Screen {...props}>
-    <Limit />
-    <Scroll>{children}</Scroll>
-  </Screen>
+export const Portal = React.forwardRef(
+  ({ children, transparent, ...props }, ref) =>
+    ReactDOM.createPortal(
+      <Cover ref={ref} transparent={transparent}>
+        <Modal {...props}>{children}</Modal>
+      </Cover>,
+      document.getElementById('root').firstChild,
+    ),
 )
-
-export const Portal = ({ children, transparent, ...props }) =>
-  ReactDOM.createPortal(
-    <Cover transparent={transparent}>
-      <Modal {...props}>{children}</Modal>
-    </Cover>,
-    document.getElementById('root').firstChild,
-  )
diff --git a/app/components/ui/atoms/index.js b/app/components/ui/atoms/index.js
index 8cff452fb..c1dbace28 100755
--- a/app/components/ui/atoms/index.js
+++ b/app/components/ui/atoms/index.js
@@ -4,7 +4,8 @@ export { default as HTMLString } from './HTMLString'
 export { default as Select } from './Select'
 export { default as TextArea } from './TextArea'
 export { Page, Header, Center, A, B } from './Page'
-export { Cover, Modal, Portal } from './Modal'
+export { Modal, Portal } from './Modal'
+export { Cover } from './Cover'
 export {
   PreviewPage,
   PreviewPanel,
-- 
GitLab