Modal -> Portal

Author: inker

src/Metro/Spans.tsx

@@ -6,7 +6,7 @@ import React, {
 import styled from 'styled-components'
 import { Point } from 'leaflet'
 
-import Modal from 'components/Modal'
+import Portal from 'components/Portal'
 import Bezier from 'components/primitives/Bezier'
 
 import * as math from 'utils/math'
@@ -209,7 +209,7 @@ const Spans = ({
         })}
       </PathsOuter>
 
-      <Modal
+      <Portal
         tagName="g"
         modalRoot={pathsInnerWrapper}
       >
@@ -219,7 +219,7 @@ const Spans = ({
             strokeWidth: `${innerStrokeWidth}px`,
           })}
         />
-      </Modal>
+      </Portal>
     </>
   )
 }

src/Metro/Transfers.tsx

@@ -12,7 +12,7 @@ import {
   minBy,
 } from 'lodash'
 
-import Modal from 'components/Modal'
+import Portal from 'components/Portal'
 import TransferReact from 'components/Transfer'
 
 import { getCircumcenter } from 'utils/math'
@@ -201,7 +201,7 @@ const Transfers = ({
           )
         })}
       </TransfersOuter>
-      <Modal
+      <Portal
         tagName="g"
         modalRoot={transfersInnerWrapper}
       >
@@ -212,7 +212,7 @@ const Transfers = ({
             strokeWidth: `${innerStrokeWidth}px`,
           })}
         />
-      </Modal>
+      </Portal>
     </>
   )
 }

src/components/Platform.tsx

@@ -8,7 +8,7 @@ import comparisonLevel from 'utils/comparisonLevel'
 import Circle from './primitives/Circle'
 import Stadium from './primitives/Stadium'
 
-import Modal from './Modal'
+import Portal from './Portal'
 
 interface Props {
   position: Point | Point[],
@@ -69,7 +69,7 @@ class PlatformReact extends Component<Props> {
           display={platforms.every(p => p.type === 'dummy') ? 'none' : undefined}
         />
         {dummyParent &&
-          <Modal
+          <Portal
             tagName="g"
             modalRoot={dummyParent}
           >
@@ -78,7 +78,7 @@ class PlatformReact extends Component<Props> {
               onMouseOver={this.onMouseOver}
               onMouseOut={onMouseOut}
             />
-          </Modal>
+          </Portal>
         }
       </>
     )

src/components/Modal.tsx src/components/Portal.tssrc/components/Modal.tsx renamed to src/components/Portal.ts

@@ -1,4 +1,11 @@
-import React, { PureComponent } from 'react'
+import {
+  useRef,
+  useEffect,
+  useMemo,
+  memo,
+  FC,
+} from 'react'
+
 import ReactDOM from 'react-dom'
 import htmlTags from 'html-tags'
 
@@ -12,16 +19,19 @@ interface Props {
   modalRoot: Element,
 }
 
-class Modal extends PureComponent<Props> {
-  el: HTMLElement
+const Portal: FC<Props> = ({
+  tagName,
+  modalRoot,
+  children,
+}) => {
+  const el = useMemo(() => {
+    const ns = htmlTags.includes(tagName) && tagName !== 'svg' ? HTML_NAMESPACE : SVG_NAMESPACE
+    return document.createElementNS(ns, tagName) as HTMLElement
+  }, [tagName, modalRoot])
 
-  constructor(props) {
-    super(props)
-    const ns = htmlTags.includes(props.tagName) && props.tagName !== 'svg' ? HTML_NAMESPACE : SVG_NAMESPACE
-    this.el = document.createElementNS(ns, props.tagName) as HTMLElement
-  }
+  const elRef = useRef<Element>(el)
 
-  componentDidMount() {
+  useEffect(() => {
     // The portal element is inserted in the DOM tree after
     // the Modal's children are mounted, meaning that children
     // will be mounted on a detached DOM node. If a child
@@ -30,19 +40,16 @@ class Modal extends PureComponent<Props> {
     // DOM node, or uses 'autoFocus' in a descendant, add
     // state to Modal and only render the children when Modal
     // is inserted in the DOM tree.
-    this.props.modalRoot.appendChild(this.el)
-  }
-
-  componentWillUnmount() {
-    this.props.modalRoot.removeChild(this.el)
-  }
-
-  render() {
-    return ReactDOM.createPortal(
-      this.props.children,
-      this.el, // this.props.modalRoot is possible
-    )
-  }
+    modalRoot.appendChild(el)
+    return () => {
+      modalRoot.removeChild(el)
+    }
+  }, [])
+
+  return ReactDOM.createPortal(
+    children,
+    elRef.current!, // this.props.modalRoot is possible
+  )
 }
 
-export default Modal
+export default memo(Portal) as typeof Portal

src/components/Transfer/index.tsx

@@ -12,7 +12,7 @@ import Platform from '../../network/Platform'
 import Line from '../primitives/Line'
 import Arc from '../primitives/Arc'
 
-import Modal from '../Modal'
+import Portal from '../Portal'
 
 import Gradient from './Gradient'
 
@@ -86,7 +86,7 @@ const TransferReact = ({
         })}
       />
       {innerParent && transfer.type !== 'osi' &&
-        <Modal
+        <Portal
           tagName="g"
           modalRoot={innerParent}
         >
@@ -96,10 +96,10 @@ const TransferReact = ({
             b={newEnd}
             third={third}
           />
-        </Modal>
+        </Portal>
       }
       {defs &&
-        <Modal
+        <Portal
           tagName="g"
           modalRoot={defs}
         >
@@ -111,10 +111,10 @@ const TransferReact = ({
             endColor={getPlatformColor(transfer.target)}
             fullCircleRadius={fullCircleRadius}
           />
-        </Modal>
+        </Portal>
       }
       {dummyParent &&
-        <Modal
+        <Portal
           tagName="g"
           modalRoot={dummyParent}
         >
@@ -126,7 +126,7 @@ const TransferReact = ({
             onMouseOver={onMouseOverMem}
             onMouseOut={onMouseOut}
           />
-        </Modal>
+        </Portal>
       }
     </>
   )