chore(Statistic): use React.forwardRef() (#4245)

Author: layershifter

src/views/Statistic/Statistic.js

@@ -20,7 +20,7 @@ import StatisticValue from './StatisticValue'
 /**
  * A statistic emphasizes the current value of an attribute.
  */
-function Statistic(props) {
+const Statistic = React.forwardRef(function (props, ref) {
   const {
     children,
     className,
@@ -50,30 +50,31 @@ function Statistic(props) {
 
   if (!childrenUtils.isNil(children)) {
     return (
-      <ElementType {...rest} className={classes}>
+      <ElementType {...rest} className={classes} ref={ref}>
         {children}
       </ElementType>
     )
   }
   if (!childrenUtils.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}>
       {StatisticValue.create(value, {
         defaultProps: { text },
         autoGenerateKey: false,
       })}
       {StatisticLabel.create(label, { autoGenerateKey: false })}
     </ElementType>
   )
-}
+})
 
+Statistic.displayName = 'Statistic'
 Statistic.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,

src/views/Statistic/StatisticGroup.js

@@ -17,7 +17,7 @@ import Statistic from './Statistic'
 /**
  * A group of statistics.
  */
-function StatisticGroup(props) {
+const StatisticGroup = React.forwardRef(function (props, ref) {
   const { children, className, color, content, horizontal, inverted, items, size, widths } = props
 
   const classes = cx(
@@ -35,26 +35,27 @@ function StatisticGroup(props) {
 
   if (!childrenUtils.isNil(children)) {
     return (
-      <ElementType {...rest} className={classes}>
+      <ElementType {...rest} className={classes} ref={ref}>
         {children}
       </ElementType>
     )
   }
   if (!childrenUtils.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}>
       {_.map(items, (item) => Statistic.create(item))}
     </ElementType>
   )
-}
+})
 
+StatisticGroup.displayName = 'StatisticGroup'
 StatisticGroup.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,

src/views/Statistic/StatisticLabel.js

@@ -13,19 +13,20 @@ import {
 /**
  * A statistic can contain a label to help provide context for the presented value.
  */
-function StatisticLabel(props) {
+const StatisticLabel = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
   const classes = cx('label', className)
   const rest = getUnhandledProps(StatisticLabel, props)
   const ElementType = getElementType(StatisticLabel, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+StatisticLabel.displayName = 'StatisticLabel'
 StatisticLabel.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,

src/views/Statistic/StatisticValue.js

@@ -14,20 +14,21 @@ import {
 /**
  * A statistic can contain a numeric, icon, image, or text value.
  */
-function StatisticValue(props) {
+const StatisticValue = React.forwardRef(function (props, ref) {
   const { children, className, content, text } = props
 
   const classes = cx(useKeyOnly(text, 'text'), 'value', className)
   const rest = getUnhandledProps(StatisticValue, props)
   const ElementType = getElementType(StatisticValue, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+StatisticValue.displayName = 'StatisticValue'
 StatisticValue.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,

test/specs/views/Stastistic/Statistic-test.js

@@ -1,3 +1,4 @@
+import faker from 'faker'
 import _ from 'lodash'
 import React from 'react'
 
@@ -10,6 +11,9 @@ import * as common from 'test/specs/commonTests'
 
 describe('Statistic', () => {
   common.isConformant(Statistic)
+  common.forwardsRef(Statistic)
+  common.forwardsRef(Statistic, { requiredProps: { children: <span /> } })
+  common.forwardsRef(Statistic, { requiredProps: { content: faker.lorem.word() } })
   common.implementsCreateMethod(Statistic)
   common.hasSubcomponents(Statistic, [StatisticGroup, StatisticLabel, StatisticValue])
   common.hasUIClassName(Statistic)

test/specs/views/Stastistic/StatisticGroup-test.js

@@ -1,3 +1,4 @@
+import faker from 'faker'
 import _ from 'lodash'
 import React from 'react'
 
@@ -7,6 +8,9 @@ import * as common from 'test/specs/commonTests'
 
 describe('StatisticGroup', () => {
   common.isConformant(StatisticGroup)
+  common.forwardsRef(StatisticGroup)
+  common.forwardsRef(StatisticGroup, { requiredProps: { children: <span /> } })
+  common.forwardsRef(StatisticGroup, { requiredProps: { content: faker.lorem.word() } })
   common.hasUIClassName(StatisticGroup)
   common.rendersChildren(StatisticGroup)
 

test/specs/views/Stastistic/StatisticLabel-test.js

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

test/specs/views/Stastistic/StatisticValue-test.js

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