chore(Modal*|Popup*): use React.forwardRef() (#4261)

Author: layershifter

src/modules/Modal/ModalActions.js

@@ -1,7 +1,7 @@
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React, { Component } from 'react'
+import React from 'react'
 
 import {
   childrenUtils,
@@ -15,45 +15,45 @@ import Button from '../../elements/Button'
 /**
  * A modal can contain a row of actions.
  */
-export default class ModalActions extends Component {
-  handleButtonOverrides = (predefinedProps) => ({
-    onClick: (e, buttonProps) => {
-      _.invoke(predefinedProps, 'onClick', e, buttonProps)
-      _.invoke(this.props, 'onActionClick', e, buttonProps)
-    },
-  })
+const ModalActions = React.forwardRef(function (props, ref) {
+  const { actions, children, className, content } = props
 
-  render() {
-    const { actions, children, className, content } = this.props
-    const classes = cx('actions', className)
-    const rest = getUnhandledProps(ModalActions, this.props)
-    const ElementType = getElementType(ModalActions, this.props)
-
-    if (!childrenUtils.isNil(children)) {
-      return (
-        <ElementType {...rest} className={classes}>
-          {children}
-        </ElementType>
-      )
-    }
-    if (!childrenUtils.isNil(content)) {
-      return (
-        <ElementType {...rest} className={classes}>
-          {content}
-        </ElementType>
-      )
-    }
+  const classes = cx('actions', className)
+  const rest = getUnhandledProps(ModalActions, props)
+  const ElementType = getElementType(ModalActions, props)
 
+  if (!childrenUtils.isNil(children)) {
+    return (
+      <ElementType {...rest} className={classes} ref={ref}>
+        {children}
+      </ElementType>
+    )
+  }
+  if (!childrenUtils.isNil(content)) {
     return (
       <ElementType {...rest} className={classes}>
-        {_.map(actions, (action) =>
-          Button.create(action, { overrideProps: this.handleButtonOverrides }),
-        )}
+        {content}
       </ElementType>
     )
   }
-}
 
+  return (
+    <ElementType {...rest} className={classes} ref={ref}>
+      {_.map(actions, (action) =>
+        Button.create(action, {
+          overrideProps: (predefinedProps) => ({
+            onClick: (e, buttonProps) => {
+              _.invoke(predefinedProps, 'onClick', e, buttonProps)
+              _.invoke(props, 'onActionClick', e, buttonProps)
+            },
+          }),
+        }),
+      )}
+    </ElementType>
+  )
+})
+
+ModalActions.displayName = 'ModalActions'
 ModalActions.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
@@ -80,3 +80,5 @@ ModalActions.propTypes = {
 }
 
 ModalActions.create = createShorthandFactory(ModalActions, (actions) => ({ actions }))
+
+export default ModalActions

src/modules/Modal/ModalContent.js

@@ -14,7 +14,7 @@ import {
 /**
  * A modal can contain content.
  */
-function ModalContent(props) {
+const ModalContent = React.forwardRef(function (props, ref) {
   const { children, className, content, image, scrolling } = props
 
   const classes = cx(
@@ -27,12 +27,13 @@ function ModalContent(props) {
   const ElementType = getElementType(ModalContent, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+ModalContent.displayName = 'ModalContent'
 ModalContent.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,

src/modules/Modal/ModalDescription.js

@@ -7,19 +7,20 @@ import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } fro
 /**
  * A modal can contain a description with one or more paragraphs.
  */
-function ModalDescription(props) {
+const ModalDescription = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
   const classes = cx('description', className)
   const rest = getUnhandledProps(ModalDescription, props)
   const ElementType = getElementType(ModalDescription, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+ModalDescription.displayName = 'ModalDescription'
 ModalDescription.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,

src/modules/Modal/ModalHeader.js

@@ -13,19 +13,20 @@ import {
 /**
  * A modal can have a header.
  */
-function ModalHeader(props) {
+const ModalHeader = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
   const classes = cx('header', className)
   const rest = getUnhandledProps(ModalHeader, props)
   const ElementType = getElementType(ModalHeader, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+ModalHeader.displayName = 'ModalHeader'
 ModalHeader.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,

src/modules/Popup/PopupContent.js

@@ -13,19 +13,20 @@ import {
 /**
  * A PopupContent displays the content body of a Popover.
  */
-export default function PopupContent(props) {
+const PopupContent = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
   const classes = cx('content', className)
   const rest = getUnhandledProps(PopupContent, props)
   const ElementType = getElementType(PopupContent, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+PopupContent.displayName = 'PopupContent'
 PopupContent.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
@@ -41,3 +42,5 @@ PopupContent.propTypes = {
 }
 
 PopupContent.create = createShorthandFactory(PopupContent, (children) => ({ children }))
+
+export default PopupContent

src/modules/Popup/PopupHeader.js

@@ -13,19 +13,21 @@ import {
 /**
  * A PopupHeader displays a header in a Popover.
  */
-export default function PopupHeader(props) {
+const PopupHeader = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
+
   const classes = cx('header', className)
   const rest = getUnhandledProps(PopupHeader, props)
   const ElementType = getElementType(PopupHeader, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+PopupHeader.displayName = 'PopupHeader'
 PopupHeader.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
@@ -41,3 +43,5 @@ PopupHeader.propTypes = {
 }
 
 PopupHeader.create = createShorthandFactory(PopupHeader, (children) => ({ children }))
+
+export default PopupHeader

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

@@ -6,6 +6,8 @@ import { sandbox } from 'test/utils'
 
 describe('ModalActions', () => {
   common.isConformant(ModalActions)
+  common.forwardsRef(ModalActions)
+  common.forwardsRef(ModalActions, { requiredProps: { children: <span /> } })
   common.rendersChildren(ModalActions)
 
   common.implementsCreateMethod(ModalActions)

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

@@ -3,6 +3,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('ModalContent', () => {
   common.isConformant(ModalContent)
+  common.forwardsRef(ModalContent)
   common.rendersChildren(ModalContent)
 
   common.implementsCreateMethod(ModalContent)

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

@@ -3,5 +3,6 @@ import * as common from 'test/specs/commonTests'
 
 describe('ModalDescription', () => {
   common.isConformant(ModalDescription)
+  common.forwardsRef(ModalDescription)
   common.rendersChildren(ModalDescription)
 })

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

@@ -5,6 +5,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('ModalDimmer', () => {
   common.isConformant(ModalDimmer)
+  common.forwardsRef(ModalDimmer)
   common.hasUIClassName(ModalDimmer)
   common.rendersChildren(ModalDimmer)