fix: Modal SSR

Resolve Issue Semantic-Org#2259

src/modules/Modal/Modal.d.ts

@@ -100,6 +100,9 @@ export interface ModalProps extends PortalProps {
 
   /** Custom styles. */
   style?: React.CSSProperties;
+
+  /** Element to be rendered in-place where the portal is defined. */
+  trigger?: React.ReactNode;
 }
 
 interface ModalComponent extends React.ComponentClass<ModalProps> {

src/modules/Modal/Modal.js

@@ -1,7 +1,7 @@
 import cx from 'classnames'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React from 'react'
+import React, { isValidElement } from 'react'
 
 import {
   AutoControlledComponent as Component,
@@ -128,6 +128,9 @@ class Modal extends Component {
     /** Custom styles. */
     style: PropTypes.object,
 
+    /** Element to be rendered in-place where the portal is defined. */
+    trigger: PropTypes.node,
+
     /**
      * NOTE: Any unhandled props that are defined in Portal are passed-through
      * to the wrapping Portal.
@@ -155,13 +158,16 @@ class Modal extends Component {
   static Description = ModalDescription
   static Actions = ModalActions
 
+  // expose for testing
+  static isBrowser = isBrowser
+
   componentWillUnmount() {
     debug('componentWillUnmount()')
     this.handlePortalUnmount()
   }
 
   // Do not access document when server side rendering
-  getMountNode = () => (isBrowser ? this.props.mountNode || document.body : null)
+  getMountNode = () => (Modal.isBrowser ? this.props.mountNode || document.body : null)
 
   handleActionsOverrides = predefinedProps => ({
     onActionClick: (e, actionProps) => {
@@ -317,11 +323,13 @@ class Modal extends Component {
 
   render() {
     const { open } = this.state
-    const { closeOnDimmerClick, closeOnDocumentClick, dimmer, eventPool } = this.props
+    const { closeOnDimmerClick, closeOnDocumentClick, dimmer, eventPool, trigger } = this.props
     const mountNode = this.getMountNode()
 
     // Short circuit when server side rendering
-    if (!isBrowser) return null
+    if (!Modal.isBrowser) {
+      return isValidElement(trigger) ? trigger : null
+    }
 
     const unhandled = getUnhandledProps(Modal, this.props)
     const portalPropNames = Portal.handledProps
@@ -358,6 +366,7 @@ class Modal extends Component {
         closeOnDocumentClick={closeOnDocumentClick}
         closeOnRootNodeClick={closeOnDimmerClick}
         {...portalProps}
+        trigger={trigger}
         className={dimmerClasses}
         eventPool={eventPool}
         mountNode={mountNode}

test/specs/modules/Modal/Modal-test.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import ReactDOMServer from 'react-dom/server'
 
 import Modal from 'src/modules/Modal/Modal'
 import ModalHeader from 'src/modules/Modal/ModalHeader'
@@ -538,4 +539,28 @@ describe('Modal', () => {
       })
     })
   })
+
+  describe('server-side', () => {
+    let modalIsBrowser
+
+    before(() => {
+      modalIsBrowser = Modal.isBrowser
+      Modal.isBrowser = false
+    })
+
+    after(() => {
+      Modal.isBrowser = modalIsBrowser
+      modalIsBrowser = null
+    })
+
+    it('renders empty content when trigger is not a valid component', () => {
+      const markup = ReactDOMServer.renderToStaticMarkup(<Modal />)
+      markup.should.equal('')
+    })
+
+    it('renders a valid trigger component', () => {
+      const markup = ReactDOMServer.renderToStaticMarkup(<Modal trigger={<div id='trigger' />} />)
+      markup.should.equal('<div id="trigger"></div>')
+    })
+  })
 })