chore(Comment): use React.forwardRef() (#4242)

* chore(Comment): use React.forwardRef() * fix displayName * fix tests
Semantic-Org · Aug 4, 2021 · ae1081f · ae1081f
1 parent 3438217
commit ae1081f
Show file tree

Hide file tree

Showing 18 changed files with 45 additions and 27 deletions.
diff --git a/src/views/Comment/Comment.js b/src/views/Comment/Comment.js
@@ -21,20 +21,21 @@ import CommentText from './CommentText'
 /**
  * A comment displays user feedback to site content.
  */
-function Comment(props) {
+const Comment = React.forwardRef(function (props, ref) {
   const { className, children, collapsed, content } = props
 
   const classes = cx(useKeyOnly(collapsed, 'collapsed'), 'comment', className)
   const rest = getUnhandledProps(Comment, props)
   const ElementType = getElementType(Comment, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+Comment.displayName = 'Comment'
 Comment.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,

diff --git a/src/views/Comment/CommentAction.js b/src/views/Comment/CommentAction.js
@@ -13,24 +13,25 @@ import {
 /**
  * A comment can contain an action.
  */
-function CommentAction(props) {
+const CommentAction = React.forwardRef(function (props, ref) {
   const { active, className, children, content } = props
 
   const classes = cx(useKeyOnly(active, 'active'), className)
   const rest = getUnhandledProps(CommentAction, props)
   const ElementType = getElementType(CommentAction, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
 CommentAction.defaultProps = {
   as: 'a',
 }
 
+CommentAction.displayName = 'CommentAction'
 CommentAction.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,

diff --git a/src/views/Comment/CommentActions.js b/src/views/Comment/CommentActions.js
@@ -7,19 +7,20 @@ import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } fro
 /**
  * A comment can contain an list of actions a user may perform related to this comment.
  */
-function CommentActions(props) {
+const CommentActions = React.forwardRef(function (props, ref) {
   const { className, children, content } = props
   const classes = cx('actions', className)
   const rest = getUnhandledProps(CommentActions, props)
   const ElementType = getElementType(CommentActions, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+CommentActions.displayName = 'CommentActions'
 CommentActions.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,

diff --git a/src/views/Comment/CommentAuthor.js b/src/views/Comment/CommentAuthor.js
@@ -7,19 +7,20 @@ import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } fro
 /**
  * A comment can contain an author.
  */
-function CommentAuthor(props) {
+const CommentAuthor = React.forwardRef(function (props, ref) {
   const { className, children, content } = props
   const classes = cx('author', className)
   const rest = getUnhandledProps(CommentAuthor, props)
   const ElementType = getElementType(CommentAuthor, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+CommentAuthor.displayName = 'CommentAuthor'
 CommentAuthor.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,

diff --git a/src/views/Comment/CommentAvatar.js b/src/views/Comment/CommentAvatar.js
@@ -13,7 +13,7 @@ import {
 /**
  * A comment can contain an image or avatar.
  */
-function CommentAvatar(props) {
+const CommentAvatar = React.forwardRef(function (props, ref) {
   const { className, src } = props
 
   const classes = cx('avatar', className)
@@ -22,12 +22,13 @@ function CommentAvatar(props) {
   const ElementType = getElementType(CommentAvatar, props)
 
   return (
-    <ElementType {...rootProps} className={classes}>
+    <ElementType {...rootProps} className={classes} ref={ref}>
       {createHTMLImage(src, { autoGenerateKey: false, defaultProps: imageProps })}
     </ElementType>
   )
-}
+})
 
+CommentAvatar.displayName = 'CommentAvatar'
 CommentAvatar.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,

diff --git a/src/views/Comment/CommentContent.js b/src/views/Comment/CommentContent.js
@@ -7,19 +7,20 @@ import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } fro
 /**
  * A comment can contain content.
  */
-function CommentContent(props) {
+const CommentContent = React.forwardRef(function (props, ref) {
   const { className, children, content } = props
   const classes = cx(className, 'content')
   const rest = getUnhandledProps(CommentContent, props)
   const ElementType = getElementType(CommentContent, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+CommentContent.displayName = 'CommentContent'
 CommentContent.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,

diff --git a/src/views/Comment/CommentGroup.js b/src/views/Comment/CommentGroup.js
@@ -15,7 +15,7 @@ import {
 /**
  * Comments can be grouped.
  */
-function CommentGroup(props) {
+const CommentGroup = React.forwardRef(function (props, ref) {
   const { className, children, collapsed, content, minimal, size, threaded } = props
 
   const classes = cx(
@@ -31,12 +31,13 @@ function CommentGroup(props) {
   const ElementType = getElementType(CommentGroup, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+CommentGroup.displayName = 'CommentGroup'
 CommentGroup.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,

diff --git a/src/views/Comment/CommentMetadata.js b/src/views/Comment/CommentMetadata.js
@@ -7,19 +7,20 @@ import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } fro
 /**
  * A comment can contain metadata about the comment, an arbitrary amount of metadata may be defined.
  */
-function CommentMetadata(props) {
+const CommentMetadata = React.forwardRef(function (props, ref) {
   const { className, children, content } = props
   const classes = cx('metadata', className)
   const rest = getUnhandledProps(CommentMetadata, props)
   const ElementType = getElementType(CommentMetadata, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+CommentMetadata.displayName = 'CommentMetadata'
 CommentMetadata.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,

diff --git a/src/views/Comment/CommentText.js b/src/views/Comment/CommentText.js
@@ -7,19 +7,20 @@ import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } fro
 /**
  * A comment can contain text.
  */
-function CommentText(props) {
+const CommentText = React.forwardRef(function (props, ref) {
   const { className, children, content } = props
   const classes = cx(className, 'text')
   const rest = getUnhandledProps(CommentText, props)
   const ElementType = getElementType(CommentText, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+CommentText.displayName = 'CommentText'
 CommentText.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,

diff --git a/test/specs/views/Comment/Comment-test.js b/test/specs/views/Comment/Comment-test.js
@@ -11,6 +11,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('Comment', () => {
   common.isConformant(Comment)
+  common.forwardsRef(Comment)
   common.hasSubcomponents(Comment, [
     CommentAction,
     CommentActions,

diff --git a/test/specs/views/Comment/CommentAction-test.js b/test/specs/views/Comment/CommentAction-test.js
@@ -5,6 +5,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('CommentAction', () => {
   common.isConformant(CommentAction)
+  common.forwardsRef(CommentAction, { tagName: 'a' })
   common.rendersChildren(CommentAction)
 
   it('renders an a element by default', () => {

diff --git a/test/specs/views/Comment/CommentActions-test.js b/test/specs/views/Comment/CommentActions-test.js
@@ -3,5 +3,6 @@ import * as common from 'test/specs/commonTests'
 
 describe('CommentActions', () => {
   common.isConformant(CommentActions)
+  common.forwardsRef(CommentActions)
   common.rendersChildren(CommentActions)
 })
diff --git a/test/specs/views/Comment/CommentAuthor-test.js b/test/specs/views/Comment/CommentAuthor-test.js
@@ -3,5 +3,6 @@ import * as common from 'test/specs/commonTests'
 
 describe('CommentAuthor', () => {
   common.isConformant(CommentAuthor)
+  common.forwardsRef(CommentAuthor)
   common.rendersChildren(CommentAuthor)
 })
diff --git a/test/specs/views/Comment/CommentAvatar-test.js b/test/specs/views/Comment/CommentAvatar-test.js
@@ -8,6 +8,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('CommentAvatar', () => {
   common.isConformant(CommentAvatar)
+  common.forwardsRef(CommentAvatar)
 
   describe('src', () => {
     it('passes to the "img" element', () => {

diff --git a/test/specs/views/Comment/CommentContent-test.js b/test/specs/views/Comment/CommentContent-test.js
@@ -3,5 +3,6 @@ import * as common from 'test/specs/commonTests'
 
 describe('CommentContent', () => {
   common.isConformant(CommentContent)
+  common.forwardsRef(CommentContent)
   common.rendersChildren(CommentContent)
 })
diff --git a/test/specs/views/Comment/CommentGroup-test.js b/test/specs/views/Comment/CommentGroup-test.js
@@ -6,6 +6,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('CommentGroup', () => {
   common.isConformant(CommentGroup)
+  common.forwardsRef(CommentGroup)
   common.rendersChildren(CommentGroup)
 
   common.propKeyOnlyToClassName(CommentGroup, 'collapsed')

diff --git a/test/specs/views/Comment/CommentMetadata-test.js b/test/specs/views/Comment/CommentMetadata-test.js
@@ -3,5 +3,6 @@ import * as common from 'test/specs/commonTests'
 
 describe('CommentMetadata', () => {
   common.isConformant(CommentMetadata)
+  common.forwardsRef(CommentMetadata)
   common.rendersChildren(CommentMetadata)
 })
diff --git a/test/specs/views/Comment/CommentText-test.js b/test/specs/views/Comment/CommentText-test.js
@@ -3,5 +3,6 @@ import * as common from 'test/specs/commonTests'
 
 describe('CommentText', () => {
   common.isConformant(CommentText)
+  common.forwardsRef(CommentText)
   common.rendersChildren(CommentText)
 })