chore(Advertisement|Breadcrumb): use React.forwardRef() (#4250)

Author: layershifter

src/collections/Breadcrumb/Breadcrumb.js

@@ -10,7 +10,7 @@ import BreadcrumbSection from './BreadcrumbSection'
 /**
  * A breadcrumb is used to show hierarchy between content.
  */
-function Breadcrumb(props) {
+const Breadcrumb = React.forwardRef(function (props, ref) {
   const { children, className, divider, icon, sections, size } = props
 
   const classes = cx('ui', size, 'breadcrumb', className)
@@ -19,7 +19,7 @@ function Breadcrumb(props) {
 
   if (!childrenUtils.isNil(children)) {
     return (
-      <ElementType {...rest} className={classes}>
+      <ElementType {...rest} className={classes} ref={ref}>
         {children}
       </ElementType>
     )
@@ -40,12 +40,13 @@ function Breadcrumb(props) {
   })
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childElements}
     </ElementType>
   )
-}
+})
 
+Breadcrumb.displayName = 'Breadcrumb'
 Breadcrumb.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,

src/collections/Breadcrumb/BreadcrumbDivider.js

@@ -15,7 +15,7 @@ import Icon from '../../elements/Icon'
 /**
  * A divider sub-component for Breadcrumb component.
  */
-function BreadcrumbDivider(props) {
+const BreadcrumbDivider = React.forwardRef(function (props, ref) {
   const { children, className, content, icon } = props
 
   const classes = cx('divider', className)
@@ -26,24 +26,26 @@ function BreadcrumbDivider(props) {
     return Icon.create(icon, {
       defaultProps: { ...rest, className: classes },
       autoGenerateKey: false,
+      ref,
     })
   }
 
   if (!_.isNil(content)) {
     return (
-      <ElementType {...rest} className={classes}>
+      <ElementType {...rest} className={classes} ref={ref}>
         {content}
       </ElementType>
     )
   }
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? '/' : children}
     </ElementType>
   )
-}
+})
 
+BreadcrumbDivider.displayName = 'BreadcrumbDivider'
 BreadcrumbDivider.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,

src/collections/Breadcrumb/BreadcrumbSection.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,
@@ -10,35 +10,31 @@ import {
   getUnhandledProps,
   getElementType,
   useKeyOnly,
+  useEventCallback,
 } from '../../lib'
 
 /**
  * A section sub-component for Breadcrumb component.
  */
-export default class BreadcrumbSection extends Component {
-  computeElementType = () => {
-    const { link, onClick } = this.props
+const BreadcrumbSection = React.forwardRef(function (props, ref) {
+  const { active, children, className, content, href, link, onClick } = props
 
+  const classes = cx(useKeyOnly(active, 'active'), 'section', className)
+  const rest = getUnhandledProps(BreadcrumbSection, props)
+  const ElementType = getElementType(BreadcrumbSection, props, () => {
     if (link || onClick) return 'a'
-  }
+  })
 
-  handleClick = (e) => _.invoke(this.props, 'onClick', e, this.props)
+  const handleClick = useEventCallback((e) => _.invoke(props, 'onClick', e, props))
 
-  render() {
-    const { active, children, className, content, href } = this.props
-
-    const classes = cx(useKeyOnly(active, 'active'), 'section', className)
-    const rest = getUnhandledProps(BreadcrumbSection, this.props)
-    const ElementType = getElementType(BreadcrumbSection, this.props, this.computeElementType)
-
-    return (
-      <ElementType {...rest} className={classes} href={href} onClick={this.handleClick}>
-        {childrenUtils.isNil(children) ? content : children}
-      </ElementType>
-    )
-  }
-}
+  return (
+    <ElementType {...rest} className={classes} href={href} onClick={handleClick} ref={ref}>
+      {childrenUtils.isNil(children) ? content : children}
+    </ElementType>
+  )
+})
 
+BreadcrumbSection.displayName = 'BreadcrumbSection'
 BreadcrumbSection.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
@@ -75,3 +71,5 @@ BreadcrumbSection.create = createShorthandFactory(BreadcrumbSection, (content) =
   content,
   link: true,
 }))
+
+export default BreadcrumbSection

src/views/Advertisement/Advertisement.js

@@ -13,7 +13,7 @@ import {
 /**
  * An ad displays third-party promotional content.
  */
-function Advertisement(props) {
+const Advertisement = React.forwardRef(function (props, ref) {
   const { centered, children, className, content, test, unit } = props
 
   const classes = cx(
@@ -28,12 +28,13 @@ function Advertisement(props) {
   const ElementType = getElementType(Advertisement, props)
 
   return (
-    <ElementType {...rest} className={classes} data-text={test}>
+    <ElementType {...rest} className={classes} data-text={test} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+Advertisement.displayName = 'Advertisement'
 Advertisement.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,

test/specs/collections/Breadcrumb/Breadcrumb-test.js

@@ -7,6 +7,8 @@ import * as common from 'test/specs/commonTests'
 
 describe('Breadcrumb', () => {
   common.isConformant(Breadcrumb)
+  common.forwardsRef(Breadcrumb)
+  common.forwardsRef(Breadcrumb, { requiredProps: { children: <span /> } })
   common.hasSubcomponents(Breadcrumb, [BreadcrumbDivider, BreadcrumbSection])
   common.hasUIClassName(Breadcrumb)
   common.rendersChildren(Breadcrumb, {

test/specs/collections/Breadcrumb/BreadcrumbDivider-test.js

@@ -1,10 +1,13 @@
+import faker from 'faker'
 import React from 'react'
 
 import BreadcrumbDivider from 'src/collections/Breadcrumb/BreadcrumbDivider'
 import * as common from 'test/specs/commonTests'
 
 describe('BreadcrumbDivider', () => {
   common.isConformant(BreadcrumbDivider)
+  common.forwardsRef(BreadcrumbDivider)
+  common.forwardsRef(BreadcrumbDivider, { requiredProps: { content: faker.lorem.word() } })
   common.rendersChildren(BreadcrumbDivider)
 
   common.implementsIconProp(BreadcrumbDivider, {

test/specs/collections/Breadcrumb/BreadcrumbSection-test.js

@@ -6,6 +6,7 @@ import { sandbox } from 'test/utils'
 
 describe('BreadcrumbSection', () => {
   common.isConformant(BreadcrumbSection)
+  common.forwardsRef(BreadcrumbSection)
   common.rendersChildren(BreadcrumbSection)
 
   common.propKeyOnlyToClassName(BreadcrumbSection, 'active')
@@ -39,7 +40,7 @@ describe('BreadcrumbSection', () => {
       const event = { target: null }
       const props = { active: true, content: 'home' }
 
-      shallow(<BreadcrumbSection onClick={onClick} {...props} />).simulate('click', event)
+      mount(<BreadcrumbSection onClick={onClick} {...props} />).simulate('click', event)
 
       onClick.should.have.been.calledOnce()
       onClick.should.have.been.calledWithMatch(event, props)