chore(Container|Divider|Loader|Rail): use React.forwardRef() (#4248)

Semantic-Org · Jul 26, 2021 · eadcae8 · eadcae8
1 parent ac694a3
commit eadcae8
Show file tree

Hide file tree

Showing 8 changed files with 20 additions and 12 deletions.
diff --git a/src/elements/Container/Container.js b/src/elements/Container/Container.js
@@ -15,7 +15,7 @@ import {
 /**
  * A container limits content to a maximum width.
  */
-function Container(props) {
+const Container = React.forwardRef(function (props, ref) {
   const { children, className, content, fluid, text, textAlign } = props
   const classes = cx(
     'ui',
@@ -29,12 +29,13 @@ function Container(props) {
   const ElementType = getElementType(Container, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+Container.displayName = 'Container'
 Container.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,

diff --git a/src/elements/Divider/Divider.js b/src/elements/Divider/Divider.js
@@ -13,7 +13,7 @@ import {
 /**
  * A divider visually segments content into groups.
  */
-function Divider(props) {
+const Divider = React.forwardRef(function (props, ref) {
   const {
     children,
     className,
@@ -43,12 +43,13 @@ function Divider(props) {
   const ElementType = getElementType(Divider, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+Divider.displayName = 'Divider'
 Divider.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,

diff --git a/src/elements/Loader/Loader.js b/src/elements/Loader/Loader.js
@@ -16,7 +16,7 @@ import {
  * A loader alerts a user to wait for an activity to complete.
  * @see Dimmer
  */
-function Loader(props) {
+const Loader = React.forwardRef(function (props, ref) {
   const {
     active,
     children,
@@ -45,12 +45,13 @@ function Loader(props) {
   const ElementType = getElementType(Loader, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+Loader.displayName = 'Loader'
 Loader.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,

diff --git a/src/elements/Rail/Rail.js b/src/elements/Rail/Rail.js
@@ -16,7 +16,7 @@ import {
 /**
  * A rail is used to show accompanying content outside the boundaries of the main view of a site.
  */
-function Rail(props) {
+const Rail = React.forwardRef(function (props, ref) {
   const {
     attached,
     children,
@@ -44,12 +44,13 @@ function Rail(props) {
   const ElementType = getElementType(Rail, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+Rail.displayName = 'Rail'
 Rail.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,

diff --git a/test/specs/elements/Container/Container-test.js b/test/specs/elements/Container/Container-test.js
@@ -5,6 +5,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('Container', () => {
   common.isConformant(Container)
+  common.forwardsRef(Container)
   common.rendersChildren(Container)
   common.hasUIClassName(Container)
 

diff --git a/test/specs/elements/Divider/Divider-test.js b/test/specs/elements/Divider/Divider-test.js
@@ -5,6 +5,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('Divider', () => {
   common.isConformant(Divider)
+  common.forwardsRef(Divider)
   common.rendersChildren(Divider)
   common.hasUIClassName(Divider)
 

diff --git a/test/specs/elements/Loader/Loader-test.js b/test/specs/elements/Loader/Loader-test.js
@@ -7,6 +7,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('Loader', () => {
   common.isConformant(Loader)
+  common.forwardsRef(Loader)
   common.hasUIClassName(Loader)
   common.rendersChildren(Loader)
 

diff --git a/test/specs/elements/Rail/Rail-test.js b/test/specs/elements/Rail/Rail-test.js
@@ -9,6 +9,7 @@ const requiredProps = { position: 'left' }
 
 describe('Rail', () => {
   common.isConformant(Rail, { requiredProps })
+  common.forwardsRef(Rail, { requiredProps })
   common.hasUIClassName(Rail, { requiredProps })
   common.rendersChildren(Rail, { requiredProps })