fix(Modal): fix errors with SSR (#2260)

* fix: Modal SSR

Resolve Issue #2259

* Change isBrowser to function

Allow isBrowser to be overridden for SSR tests

src/addons/Portal/Portal.js

@@ -348,7 +348,7 @@ class Portal extends Component {
     this.mountPortal()
 
     // Server side rendering
-    if (!isBrowser) return null
+    if (!isBrowser()) return null
 
     this.rootNode.className = className || ''
 
@@ -372,13 +372,13 @@ class Portal extends Component {
   }
 
   mountPortal = () => {
-    if (!isBrowser || this.rootNode) return
+    if (!isBrowser() || this.rootNode) return
 
     debug('mountPortal()')
 
     const {
       eventPool,
-      mountNode = isBrowser ? document.body : null,
+      mountNode = isBrowser() ? document.body : null,
       prepend,
     } = this.props
 
@@ -396,7 +396,7 @@ class Portal extends Component {
   }
 
   unmountPortal = () => {
-    if (!isBrowser || !this.rootNode) return
+    if (!isBrowser() || !this.rootNode) return
 
     debug('unmountPortal()')
     const { eventPool } = this.props

src/addons/Responsive/Responsive.js

@@ -57,7 +57,7 @@ export default class Responsive extends Component {
   constructor(...args) {
     super(...args)
 
-    this.state = { width: isBrowser ? window.innerWidth : 0 }
+    this.state = { width: isBrowser() ? window.innerWidth : 0 }
   }
 
   componentDidMount() {

src/behaviors/Visibility/Visibility.js

@@ -160,7 +160,7 @@ export default class Visibility extends Component {
   }
 
   static defaultProps = {
-    context: isBrowser ? window : null,
+    context: isBrowser() ? window : null,
     continuous: false,
     offset: [0, 0],
     once: true,
@@ -196,7 +196,7 @@ export default class Visibility extends Component {
   }
 
   componentDidMount() {
-    if (!isBrowser) return
+    if (!isBrowser()) return
     const { context, fireOnMount } = this.props
 
     this.pageYOffset = window.pageYOffset

src/lib/debug.js

@@ -1,7 +1,7 @@
 import _debug from 'debug'
 import isBrowser from './isBrowser'
 
-if (isBrowser && process.env.NODE_ENV !== 'production' && process.env.NODE_ENV !== 'test') {
+if (isBrowser() && process.env.NODE_ENV !== 'production' && process.env.NODE_ENV !== 'test') {
   // Heads Up!
   // https://github.com/visionmedia/debug/pull/331
   //

src/lib/eventStack/eventStack.js

@@ -34,7 +34,7 @@ class EventStack {
   // ------------------------------------
 
   sub = (name, handlers, options = {}) => {
-    if (!isBrowser) return
+    if (!isBrowser()) return
 
     const { target = document, pool = 'default' } = options
     const eventTarget = this._find(target)
@@ -43,7 +43,7 @@ class EventStack {
   }
 
   unsub = (name, handlers, options = {}) => {
-    if (!isBrowser) return
+    if (!isBrowser()) return
 
     const { target = document, pool = 'default' } = options
     const eventTarget = this._find(target, false)

src/lib/isBrowser.js

@@ -1,4 +1,11 @@
+import _ from 'lodash'
+
 const hasDocument = typeof document === 'object' && document !== null
 const hasWindow = typeof window === 'object' && window !== null && window.self === window
 
-export default hasDocument && hasWindow
+// eslint-disable-next-line no-confusing-arrow
+const isBrowser = () => !_.isNil(isBrowser.override)
+  ? isBrowser.override
+  : hasDocument && hasWindow
+
+export default isBrowser

src/modules/Dimmer/Dimmer.js

@@ -72,15 +72,15 @@ export default class Dimmer extends Component {
   static Dimmable = DimmerDimmable
 
   handlePortalMount = () => {
-    if (!isBrowser) return
+    if (!isBrowser()) return
 
     // Heads up, IE doesn't support second argument in add()
     document.body.classList.add('dimmed')
     document.body.classList.add('dimmable')
   }
 
   handlePortalUnmount = () => {
-    if (!isBrowser) return
+    if (!isBrowser()) return
 
     // Heads up, IE doesn't support second argument in add()
     document.body.classList.remove('dimmed')

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.
@@ -161,7 +164,7 @@ class Modal extends Component {
   }
 
   // Do not access document when server side rendering
-  getMountNode = () => (isBrowser ? this.props.mountNode || document.body : null)
+  getMountNode = () => (isBrowser() ? this.props.mountNode || document.body : null)
 
   handleActionsOverrides = predefinedProps => ({
     onActionClick: (e, actionProps) => {
@@ -311,11 +314,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 (!isBrowser()) {
+      return isValidElement(trigger) ? trigger : null
+    }
 
     const unhandled = getUnhandledProps(Modal, this.props)
     const portalPropNames = Portal.handledProps
@@ -352,6 +357,7 @@ class Modal extends Component {
         closeOnDocumentClick={closeOnDocumentClick}
         closeOnRootNodeClick={closeOnDimmerClick}
         {...portalProps}
+        trigger={trigger}
         className={dimmerClasses}
         eventPool={eventPool}
         mountNode={mountNode}

src/modules/Popup/Popup.js

@@ -151,7 +151,7 @@ export default class Popup extends Component {
     const style = { position: 'absolute' }
 
     // Do not access window/document when server side rendering
-    if (!isBrowser) return style
+    if (!isBrowser()) return style
 
     const { offset } = this.props
     const { pageYOffset, pageXOffset } = window

src/modules/Search/Search.js

@@ -472,7 +472,7 @@ export default class Search extends Component {
   scrollSelectedItemIntoView = () => {
     debug('scrollSelectedItemIntoView()')
     // Do not access document when server side rendering
-    if (!isBrowser) return
+    if (!isBrowser()) return
     const menu = document.querySelector('.ui.search.active.visible .results.visible')
     const item = menu.querySelector('.result.active')
     if (!item) return

src/modules/Sticky/Sticky.js

@@ -80,7 +80,7 @@ export default class Sticky extends Component {
     active: true,
     bottomOffset: 0,
     offset: 0,
-    scrollContext: isBrowser ? window : null,
+    scrollContext: isBrowser() ? window : null,
   }
 
   static _meta = {
@@ -93,7 +93,7 @@ export default class Sticky extends Component {
   }
 
   componentDidMount() {
-    if (!isBrowser) return
+    if (!isBrowser()) return
     const { active } = this.props
 
     if (active) {
@@ -117,7 +117,7 @@ export default class Sticky extends Component {
   }
 
   componentWillUnmount() {
-    if (!isBrowser) return
+    if (!isBrowser()) return
     const { active } = this.props
 
     if (active) this.removeListeners()

test/specs/lib/isBrowser-test.js

@@ -1,18 +1,35 @@
 import isBrowser from 'src/lib/isBrowser'
 
 describe('isBrowser', () => {
-  it('should return true in a browser', () => {
-    // tests are run in a browser, this should be true
-    isBrowser.should.be.true()
-  })
+  describe('browser', () => {
+    it('should return true in a browser', () => {
+      // tests are run in a browser, this should be true
+      isBrowser().should.be.true()
+    })
+
+    it('should return false when there is no document', () => {
+      require('imports-loader?document=>undefined!src/lib/isBrowser').default().should.be.false()
+      require('imports-loader?document=>null!src/lib/isBrowser').default().should.be.false()
+    })
 
-  it('should return false when there is no document', () => {
-    require('imports-loader?document=>undefined!src/lib/isBrowser').default.should.be.false()
-    require('imports-loader?document=>null!src/lib/isBrowser').default.should.be.false()
+    it('should return false when there is no window', () => {
+      require('imports-loader?window=>undefined!src/lib/isBrowser').default().should.be.false()
+      require('imports-loader?window=>null!src/lib/isBrowser').default().should.be.false()
+    })
   })
 
-  it('should return false when there is no window', () => {
-    require('imports-loader?window=>undefined!src/lib/isBrowser').default.should.be.false()
-    require('imports-loader?window=>null!src/lib/isBrowser').default.should.be.false()
+  describe('server-side', () => {
+    before(() => {
+      isBrowser.override = false
+    })
+
+    after(() => {
+      isBrowser.override = null
+    })
+
+    it('should return override value', () => {
+      // tests are run in a browser, this should be true
+      isBrowser().should.be.false()
+    })
   })
 })

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'
@@ -9,6 +10,7 @@ import Portal from 'src/addons/Portal/Portal'
 
 import { assertNodeContains, assertBodyClasses, assertBodyContains, domEvent, sandbox } from 'test/utils'
 import * as common from 'test/specs/commonTests'
+import isBrowser from 'src/lib/isBrowser'
 
 // ----------------------------------------
 // Wrapper
@@ -538,4 +540,24 @@ describe('Modal', () => {
       })
     })
   })
+
+  describe('server-side', () => {
+    before(() => {
+      isBrowser.override = false
+    })
+
+    after(() => {
+      isBrowser.override = 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>')
+    })
+  })
 })