chore(Placeholder): use React.forwardRef() (#4236)

Author: layershifter

src/elements/Placeholder/Placeholder.js

@@ -17,7 +17,7 @@ import PlaceholderParagraph from './PlaceholderParagraph'
 /**
  * A placeholder is used to reserve space for content that soon will appear in a layout.
  */
-function Placeholder(props) {
+const Placeholder = React.forwardRef(function PlaceholderInner(props, ref) {
   const { children, className, content, fluid, inverted } = props
   const classes = cx(
     'ui',
@@ -30,12 +30,13 @@ function Placeholder(props) {
   const ElementType = getElementType(Placeholder, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+Placeholder.displayName = 'Placeholder'
 Placeholder.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,

src/elements/Placeholder/PlaceholderHeader.js

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

src/elements/Placeholder/PlaceholderImage.js

@@ -7,7 +7,7 @@ import { customPropTypes, getElementType, getUnhandledProps, useKeyOnly } from '
 /**
  * A placeholder can contain an image.
  */
-function PlaceholderImage(props) {
+const PlaceholderImage = React.forwardRef(function PlaceholderImageInner(props, ref) {
   const { className, square, rectangular } = props
   const classes = cx(
     useKeyOnly(square, 'square'),
@@ -18,9 +18,10 @@ function PlaceholderImage(props) {
   const rest = getUnhandledProps(PlaceholderImage, props)
   const ElementType = getElementType(PlaceholderImage, props)
 
-  return <ElementType {...rest} className={classes} />
-}
+  return <ElementType {...rest} className={classes} ref={ref} />
+})
 
+PlaceholderImage.displayName = 'PlaceholderImage'
 PlaceholderImage.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,

src/elements/Placeholder/PlaceholderLine.js

@@ -7,15 +7,16 @@ import { getElementType, getUnhandledProps } from '../../lib'
 /**
  * A placeholder can contain have lines of text.
  */
-function PlaceholderLine(props) {
+const PlaceholderLine = React.forwardRef(function PlaceholderLineInner(props, ref) {
   const { className, length } = props
   const classes = cx('line', length, className)
   const rest = getUnhandledProps(PlaceholderLine, props)
   const ElementType = getElementType(PlaceholderLine, props)
 
-  return <ElementType {...rest} className={classes} />
-}
+  return <ElementType {...rest} className={classes} ref={ref} />
+})
 
+PlaceholderLine.displayName = 'PlaceholderLine'
 PlaceholderLine.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,

src/elements/Placeholder/PlaceholderParagraph.js

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

test/specs/commonTests/isConformant.js

@@ -73,7 +73,7 @@ export default function isConformant(Component, options = {}) {
   const isTopLevelAPIProp = _.has(semanticUIReact, constructorName)
 
   // find the apiPath in the semanticUIReact object
-  const foundAsSubcomponent = _.isFunction(_.get(semanticUIReact, info.apiPath))
+  const foundAsSubcomponent = ReactIs.isValidElementType(_.get(semanticUIReact, info.apiPath))
 
   // require all components to be exported at the top level
   it('is exported at the top level', () => {

test/specs/elements/Placeholder/Placeholder-test.js

@@ -7,6 +7,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('Placeholder', () => {
   common.isConformant(Placeholder)
+  common.forwardsRef(Placeholder)
   common.hasSubcomponents(Placeholder, [
     PlaceholderHeader,
     PlaceholderImage,

test/specs/elements/Placeholder/PlaceholderHeader-test.js

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

test/specs/elements/Placeholder/PlaceholderImage-test.js

@@ -3,6 +3,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('PlaceholderImage', () => {
   common.isConformant(PlaceholderImage)
+  common.forwardsRef(PlaceholderImage)
 
   common.propKeyOnlyToClassName(PlaceholderImage, 'square')
   common.propKeyOnlyToClassName(PlaceholderImage, 'rectangular')

test/specs/elements/Placeholder/PlaceholderLine-test.js

@@ -3,6 +3,8 @@ import * as common from 'test/specs/commonTests'
 
 describe('PlaceholderLine', () => {
   common.isConformant(PlaceholderLine)
+  common.forwardsRef(PlaceholderLine)
+
   common.propValueOnlyToClassName(PlaceholderLine, 'length', [
     'full',
     'very long',

test/specs/elements/Placeholder/PlaceholderParagraph-test.js

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