chore(Item): use React.forwardRef() (#4247)

Semantic-Org · Aug 4, 2021 · 1880913 · 1880913
1 parent fccc7e1
commit 1880913
Show file tree

Hide file tree

Showing 17 changed files with 67 additions and 31 deletions.
diff --git a/src/views/Item/Item.js b/src/views/Item/Item.js
@@ -14,7 +14,7 @@ import ItemMeta from './ItemMeta'
 /**
  * An item view presents large collections of site content for display.
  */
-function Item(props) {
+const Item = React.forwardRef(function (props, ref) {
   const { children, className, content, description, extra, header, image, meta } = props
 
   const classes = cx('item', className)
@@ -23,14 +23,14 @@ function Item(props) {
 
   if (!childrenUtils.isNil(children)) {
     return (
-      <ElementType {...rest} className={classes}>
+      <ElementType {...rest} className={classes} ref={ref}>
         {children}
       </ElementType>
     )
   }
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {ItemImage.create(image, { autoGenerateKey: false })}
 
       <ItemContent
@@ -42,7 +42,7 @@ function Item(props) {
       />
     </ElementType>
   )
-}
+})
 
 Item.Content = ItemContent
 Item.Description = ItemDescription
@@ -52,6 +52,7 @@ Item.Header = ItemHeader
 Item.Image = ItemImage
 Item.Meta = ItemMeta
 
+Item.displayName = 'Item'
 Item.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,

diff --git a/src/views/Item/ItemContent.js b/src/views/Item/ItemContent.js
@@ -18,7 +18,7 @@ import ItemMeta from './ItemMeta'
 /**
  * An item can contain content.
  */
-function ItemContent(props) {
+const ItemContent = React.forwardRef(function (props, ref) {
   const { children, className, content, description, extra, header, meta, verticalAlign } = props
 
   const classes = cx(useVerticalAlignProp(verticalAlign), 'content', className)
@@ -27,23 +27,24 @@ function ItemContent(props) {
 
   if (!childrenUtils.isNil(children)) {
     return (
-      <ElementType {...rest} className={classes}>
+      <ElementType {...rest} className={classes} ref={ref}>
         {children}
       </ElementType>
     )
   }
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {ItemHeader.create(header, { autoGenerateKey: false })}
       {ItemMeta.create(meta, { autoGenerateKey: false })}
       {ItemDescription.create(description, { autoGenerateKey: false })}
       {ItemExtra.create(extra, { autoGenerateKey: false })}
       {content}
     </ElementType>
   )
-}
+})
 
+ItemContent.displayName = 'ItemContent'
 ItemContent.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,

diff --git a/src/views/Item/ItemDescription.js b/src/views/Item/ItemDescription.js
@@ -13,19 +13,20 @@ import {
 /**
  * An item can contain a description with a single or multiple paragraphs.
  */
-function ItemDescription(props) {
+const ItemDescription = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
   const classes = cx('description', className)
   const rest = getUnhandledProps(ItemDescription, props)
   const ElementType = getElementType(ItemDescription, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+ItemDescription.displayName = 'ItemDescription'
 ItemDescription.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,

diff --git a/src/views/Item/ItemExtra.js b/src/views/Item/ItemExtra.js
@@ -13,19 +13,20 @@ import {
 /**
  * An item can contain extra content meant to be formatted separately from the main content.
  */
-function ItemExtra(props) {
+const ItemExtra = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
   const classes = cx('extra', className)
   const rest = getUnhandledProps(ItemExtra, props)
   const ElementType = getElementType(ItemExtra, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+ItemExtra.displayName = 'ItemExtra'
 ItemExtra.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,

diff --git a/src/views/Item/ItemGroup.js b/src/views/Item/ItemGroup.js
@@ -16,7 +16,7 @@ import Item from './Item'
 /**
  * A group of items.
  */
-function ItemGroup(props) {
+const ItemGroup = React.forwardRef(function (props, ref) {
   const { children, className, content, divided, items, link, relaxed, unstackable } = props
 
   const classes = cx(
@@ -33,14 +33,14 @@ function ItemGroup(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>
     )
@@ -56,12 +56,13 @@ function ItemGroup(props) {
   })
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {itemsJSX}
     </ElementType>
   )
-}
+})
 
+ItemGroup.displayName = 'ItemGroup'
 ItemGroup.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,

diff --git a/src/views/Item/ItemHeader.js b/src/views/Item/ItemHeader.js
@@ -13,19 +13,20 @@ import {
 /**
  * An item can contain a header.
  */
-function ItemHeader(props) {
+const ItemHeader = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
   const classes = cx('header', className)
   const rest = getUnhandledProps(ItemHeader, props)
   const ElementType = getElementType(ItemHeader, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+ItemHeader.displayName = 'ItemHeader'
 ItemHeader.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,

diff --git a/src/views/Item/ItemImage.d.ts b/src/views/Item/ItemImage.d.ts
@@ -1,9 +1,19 @@
 import * as React from 'react'
+
 import { ImageProps, StrictImageProps } from '../../elements/Image'
+import { SemanticSIZES } from '../../generic'
+
+export interface ItemImageProps extends ImageProps {
+  [key: string]: any
 
-export interface ItemImageProps extends ImageProps {}
+  /** An image may appear at different sizes. */
+  size?: SemanticSIZES
+}
 
-export interface StrictItemImageProps extends StrictImageProps {}
+export interface StrictItemImageProps extends StrictImageProps {
+  /** An image may appear at different sizes. */
+  size?: SemanticSIZES
+}
 
 declare const ItemImage: React.StatelessComponent<ItemImageProps>
 

diff --git a/src/views/Item/ItemImage.js b/src/views/Item/ItemImage.js
@@ -6,13 +6,14 @@ import Image from '../../elements/Image'
 /**
  * An item can contain an image.
  */
-function ItemImage(props) {
+const ItemImage = React.forwardRef(function (props, ref) {
   const { size } = props
   const rest = getUnhandledProps(ItemImage, props)
 
-  return <Image {...rest} size={size} ui={!!size} wrapped />
-}
+  return <Image {...rest} size={size} ui={!!size} wrapped ref={ref} />
+})
 
+ItemImage.displayName = 'ItemImage'
 ItemImage.propTypes = {
   /** An image may appear at different sizes. */
   size: Image.propTypes.size,

diff --git a/src/views/Item/ItemMeta.js b/src/views/Item/ItemMeta.js
@@ -13,19 +13,20 @@ import {
 /**
  * An item can contain content metadata.
  */
-function ItemMeta(props) {
+const ItemMeta = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
   const classes = cx('meta', className)
   const rest = getUnhandledProps(ItemMeta, props)
   const ElementType = getElementType(ItemMeta, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+ItemMeta.displayName = 'ItemMeta'
 ItemMeta.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,

diff --git a/test/specs/views/Item/Item-test.js b/test/specs/views/Item/Item-test.js
@@ -13,6 +13,9 @@ import * as common from 'test/specs/commonTests'
 
 describe('Item', () => {
   common.isConformant(Item)
+  common.forwardsRef(Item)
+  common.forwardsRef(Item, { requiredProps: { children: <span /> } })
+  common.forwardsRef(Item, { requiredProps: { content: faker.lorem.word() } })
   common.hasSubcomponents(Item, [
     ItemContent,
     ItemDescription,

diff --git a/test/specs/views/Item/ItemContent-test.js b/test/specs/views/Item/ItemContent-test.js
@@ -1,3 +1,6 @@
+import faker from 'faker'
+import React from 'react'
+
 import ItemContent from 'src/views/Item/ItemContent'
 import ItemDescription from 'src/views/Item/ItemDescription'
 import ItemExtra from 'src/views/Item/ItemExtra'
@@ -7,6 +10,9 @@ import * as common from 'test/specs/commonTests'
 
 describe('ItemContent', () => {
   common.isConformant(ItemContent)
+  common.forwardsRef(ItemContent)
+  common.forwardsRef(ItemContent, { requiredProps: { children: <span /> } })
+  common.forwardsRef(ItemContent, { requiredProps: { content: faker.lorem.word() } })
   common.rendersChildren(ItemContent)
 
   common.implementsShorthandProp(ItemContent, {

diff --git a/test/specs/views/Item/ItemDescription-test.js b/test/specs/views/Item/ItemDescription-test.js
@@ -3,6 +3,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('ItemDescription', () => {
   common.isConformant(ItemDescription)
+  common.forwardsRef(ItemDescription)
   common.rendersChildren(ItemDescription)
 
   common.implementsCreateMethod(ItemDescription)

diff --git a/test/specs/views/Item/ItemExtra-test.js b/test/specs/views/Item/ItemExtra-test.js
@@ -3,6 +3,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('ItemExtra', () => {
   common.isConformant(ItemExtra)
+  common.forwardsRef(ItemExtra)
   common.rendersChildren(ItemExtra)
 
   common.implementsCreateMethod(ItemExtra)

diff --git a/test/specs/views/Item/ItemGroup-test.js b/test/specs/views/Item/ItemGroup-test.js
@@ -5,8 +5,11 @@ import ItemGroup from 'src/views/Item/ItemGroup'
 import * as common from 'test/specs/commonTests'
 
 describe('ItemGroup', () => {
-  common.hasUIClassName(ItemGroup)
   common.isConformant(ItemGroup)
+  common.forwardsRef(ItemGroup)
+  common.forwardsRef(ItemGroup, { requiredProps: { children: <span /> } })
+  common.forwardsRef(ItemGroup, { requiredProps: { content: faker.lorem.word() } })
+  common.hasUIClassName(ItemGroup)
   common.rendersChildren(ItemGroup)
 
   common.propKeyOnlyToClassName(ItemGroup, 'divided')

diff --git a/test/specs/views/Item/ItemHeader-test.js b/test/specs/views/Item/ItemHeader-test.js
@@ -3,6 +3,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('ItemHeader', () => {
   common.isConformant(ItemHeader)
+  common.forwardsRef(ItemHeader)
   common.rendersChildren(ItemHeader)
 
   common.implementsCreateMethod(ItemHeader)

diff --git a/test/specs/views/Item/ItemImage-test.js b/test/specs/views/Item/ItemImage-test.js
@@ -4,6 +4,8 @@ import ItemImage from 'src/views/Item/ItemImage'
 import * as common from 'test/specs/commonTests'
 
 describe('ItemImage', () => {
+  common.isConformant(ItemImage, { rendersChildren: false })
+  common.forwardsRef(ItemImage, { tagName: 'img' })
   common.implementsCreateMethod(ItemImage)
 
   it('renders Image component', () => {

diff --git a/test/specs/views/Item/ItemMeta-test.js b/test/specs/views/Item/ItemMeta-test.js
@@ -3,6 +3,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('ItemMeta', () => {
   common.isConformant(ItemMeta)
+  common.forwardsRef(ItemMeta)
   common.rendersChildren(ItemMeta)
 
   common.implementsCreateMethod(ItemMeta)