From 7e0cc4be7c8628c88cc6bae97fe0ee32d2dc6c1d Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <olfedias@microsoft.com>
Date: Mon, 26 Jul 2021 14:44:35 +0200
Subject: [PATCH] chore(Statistic): use React.forwardRef()
---
src/views/Statistic/Statistic.js | 11 ++++++-----
src/views/Statistic/StatisticGroup.js | 11 ++++++-----
src/views/Statistic/StatisticLabel.js | 7 ++++---
src/views/Statistic/StatisticValue.js | 7 ++++---
test/specs/views/Stastistic/Statistic-test.js | 4 ++++
test/specs/views/Stastistic/StatisticGroup-test.js | 4 ++++
test/specs/views/Stastistic/StatisticLabel-test.js | 1 +
test/specs/views/Stastistic/StatisticValue-test.js | 1 +
8 files changed, 30 insertions(+), 16 deletions(-)
diff --git a/src/views/Statistic/Statistic.js b/src/views/Statistic/Statistic.js
index 4fcfeedf7f..e11df59393 100644
--- a/src/views/Statistic/Statistic.js
+++ b/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,21 +50,21 @@ 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,
@@ -72,8 +72,9 @@ function Statistic(props) {
{StatisticLabel.create(label, { autoGenerateKey: false })}
</ElementType>
)
-}
+})
+Statistic.displayName = 'Statistic'
Statistic.propTypes = {
/** An element type to render as (string or function). */
as: PropTypes.elementType,
diff --git a/src/views/Statistic/StatisticGroup.js b/src/views/Statistic/StatisticGroup.js
index d6106d4d9b..eac360d23b 100644
--- a/src/views/Statistic/StatisticGroup.js
+++ b/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,
diff --git a/src/views/Statistic/StatisticLabel.js b/src/views/Statistic/StatisticLabel.js
index 19f116812c..efc01ab9bc 100644
--- a/src/views/Statistic/StatisticLabel.js
+++ b/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,
diff --git a/src/views/Statistic/StatisticValue.js b/src/views/Statistic/StatisticValue.js
index 0e84115220..78ac615220 100644
--- a/src/views/Statistic/StatisticValue.js
+++ b/src/views/Statistic/StatisticValue.js
@@ -14,7 +14,7 @@ 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)
@@ -22,12 +22,13 @@ function 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,
diff --git a/test/specs/views/Stastistic/Statistic-test.js b/test/specs/views/Stastistic/Statistic-test.js
index 68db729433..cbaa0f5d49 100644
--- a/test/specs/views/Stastistic/Statistic-test.js
+++ b/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)
diff --git a/test/specs/views/Stastistic/StatisticGroup-test.js b/test/specs/views/Stastistic/StatisticGroup-test.js
index f6ac62ecd8..681b5865b2 100644
--- a/test/specs/views/Stastistic/StatisticGroup-test.js
+++ b/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)
diff --git a/test/specs/views/Stastistic/StatisticLabel-test.js b/test/specs/views/Stastistic/StatisticLabel-test.js
index 0991a92ed4..052f7629ac 100644
--- a/test/specs/views/Stastistic/StatisticLabel-test.js
+++ b/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)
})
diff --git a/test/specs/views/Stastistic/StatisticValue-test.js b/test/specs/views/Stastistic/StatisticValue-test.js
index 490ee27006..ec239da302 100644
--- a/test/specs/views/Stastistic/StatisticValue-test.js
+++ b/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)