chore(Modal): use createRef() API internally

src/modules/Modal/Modal.js

@@ -1,7 +1,7 @@
 import cx from 'classnames'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React, { isValidElement } from 'react'
+import React, { createRef, Fragment, isValidElement } from 'react'
 
 import {
   AutoControlledComponent as Component,
@@ -151,6 +151,9 @@ class Modal extends Component {
   static Description = ModalDescription
   static Actions = ModalActions
 
+  ref = createRef()
+  dimmerRef = createRef()
+
   componentWillUnmount() {
     debug('componentWillUnmount()')
     this.handlePortalUnmount()
@@ -179,7 +182,7 @@ class Modal extends Component {
     debug('handleDocumentClick()')
     const { closeOnDimmerClick } = this.props
 
-    if (!closeOnDimmerClick || doesNodeContainClick(this.ref, e)) return
+    if (!closeOnDimmerClick || doesNodeContainClick(this.ref.current, e)) return
 
     _.invoke(this.props, 'onClose', e, this.props)
     this.trySetState({ open: false })
@@ -206,7 +209,10 @@ class Modal extends Component {
     this.setState({ scrolling: false })
     this.setPositionAndClassNames()
 
-    eventStack.sub('click', this.handleDocumentClick, { pool: eventPool, target: this.dimmerRef })
+    eventStack.sub('click', this.handleDocumentClick, {
+      pool: eventPool,
+      target: this.dimmerRef.current,
+    })
     _.invoke(this.props, 'onMount', e, this.props)
   }
 
@@ -215,19 +221,18 @@ class Modal extends Component {
     debug('handlePortalUnmount()', { eventPool })
 
     cancelAnimationFrame(this.animationRequestId)
-    eventStack.unsub('click', this.handleDocumentClick, { pool: eventPool, target: this.dimmerRef })
+    eventStack.unsub('click', this.handleDocumentClick, {
+      pool: eventPool,
+      target: this.dimmerRef.current,
+    })
     _.invoke(this.props, 'onUnmount', e, this.props)
   }
 
-  handleRef = c => (this.ref = c)
-
-  handleDimmerRef = c => (this.dimmerRef = c)
-
   setDimmerNodeStyle = () => {
     debug('setDimmerNodeStyle()')
 
-    if (this.dimmerRef) {
-      this.dimmerRef.style.setProperty('display', 'flex', 'important')
+    if (this.dimmerRef.current) {
+      this.dimmerRef.current.style.setProperty('display', 'flex', 'important')
     }
   }
 
@@ -245,8 +250,8 @@ class Modal extends Component {
 
     const newState = {}
 
-    if (this.ref) {
-      const { height } = this.ref.getBoundingClientRect()
+    if (this.ref.current) {
+      const { height } = this.ref.current.getBoundingClientRect()
 
       // Leaving the old calculation here since we may need it as an older browser fallback
       // SEE: https://github.com/Semantic-Org/Semantic-UI/issues/6185#issuecomment-376725956
@@ -301,30 +306,21 @@ class Modal extends Component {
     const closeIconName = closeIcon === true ? 'close' : closeIcon
     const closeIconJSX = Icon.create(closeIconName, { overrideProps: this.handleIconOverrides })
 
-    if (!childrenUtils.isNil(children)) {
-      // TODO: remove when ref with "as" is resolved: PR #2306
-      return (
-        <Ref innerRef={this.handleRef}>
-          <ElementType {...rest} className={classes} style={{ marginTop, ...style }}>
-            <MountNode className={mountClasses} node={mountNode} />
-
-            {closeIconJSX}
-            {children}
-          </ElementType>
-        </Ref>
-      )
-    }
-
-    // TODO: remove when ref with "as" is resolved: PR #2306
     return (
-      <Ref innerRef={this.handleRef}>
+      <Ref innerRef={this.ref}>
         <ElementType {...rest} className={classes} style={{ marginTop, ...style }}>
           <MountNode className={mountClasses} node={mountNode} />
 
           {closeIconJSX}
-          {ModalHeader.create(header, { autoGenerateKey: false })}
-          {ModalContent.create(content, { autoGenerateKey: false })}
-          {ModalActions.create(actions, { overrideProps: this.handleActionsOverrides })}
+          {childrenUtils.isNil(children) ? (
+            <Fragment>
+              {ModalHeader.create(header, { autoGenerateKey: false })}
+              {ModalContent.create(content, { autoGenerateKey: false })}
+              {ModalActions.create(actions, { overrideProps: this.handleActionsOverrides })}
+            </Fragment>
+          ) : (
+            children
+          )}
         </ElementType>
       </Ref>
     )
@@ -386,7 +382,7 @@ class Modal extends Component {
         onOpen={this.handleOpen}
         onUnmount={this.handlePortalUnmount}
       >
-        <div className={dimmerClasses} ref={this.handleDimmerRef}>
+        <div className={dimmerClasses} ref={this.dimmerRef}>
           {this.renderContent(rest)}
         </div>
       </Portal>