Skip to content

Commit 3ebeb3d

Browse files
layershifterlayershifter
committed
chore(Item): use React.forwardRef()
1 parent 94491dc commit 3ebeb3d

17 files changed

+67
-31
lines changed

‎src/views/Item/Item.js

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import ItemMeta from './ItemMeta'
1414
/**
1515
* An item view presents large collections of site content for display.
1616
*/
17-
function Item(props) {
17+
const Item = React.forwardRef(function (props, ref) {
1818
const { children, className, content, description, extra, header, image, meta } = props
1919

2020
const classes = cx('item', className)
@@ -23,14 +23,14 @@ function Item(props) {
2323

2424
if (!childrenUtils.isNil(children)) {
2525
return (
26-
<ElementType {...rest} className={classes}>
26+
<ElementType {...rest} className={classes} ref={ref}>
2727
{children}
2828
</ElementType>
2929
)
3030
}
3131

3232
return (
33-
<ElementType {...rest} className={classes}>
33+
<ElementType {...rest} className={classes} ref={ref}>
3434
{ItemImage.create(image, { autoGenerateKey: false })}
3535

3636
<ItemContent
@@ -42,7 +42,7 @@ function Item(props) {
4242
/>
4343
</ElementType>
4444
)
45-
}
45+
})
4646

4747
Item.Content = ItemContent
4848
Item.Description = ItemDescription
@@ -52,6 +52,7 @@ Item.Header = ItemHeader
5252
Item.Image = ItemImage
5353
Item.Meta = ItemMeta
5454

55+
Item.displayName = 'Item'
5556
Item.propTypes = {
5657
/** An element type to render as (string or function). */
5758
as: PropTypes.elementType,

‎src/views/Item/ItemContent.js

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import ItemMeta from './ItemMeta'
1818
/**
1919
* An item can contain content.
2020
*/
21-
function ItemContent(props) {
21+
const ItemContent = React.forwardRef(function (props, ref) {
2222
const { children, className, content, description, extra, header, meta, verticalAlign } = props
2323

2424
const classes = cx(useVerticalAlignProp(verticalAlign), 'content', className)
@@ -27,23 +27,24 @@ function ItemContent(props) {
2727

2828
if (!childrenUtils.isNil(children)) {
2929
return (
30-
<ElementType {...rest} className={classes}>
30+
<ElementType {...rest} className={classes} ref={ref}>
3131
{children}
3232
</ElementType>
3333
)
3434
}
3535

3636
return (
37-
<ElementType {...rest} className={classes}>
37+
<ElementType {...rest} className={classes} ref={ref}>
3838
{ItemHeader.create(header, { autoGenerateKey: false })}
3939
{ItemMeta.create(meta, { autoGenerateKey: false })}
4040
{ItemDescription.create(description, { autoGenerateKey: false })}
4141
{ItemExtra.create(extra, { autoGenerateKey: false })}
4242
{content}
4343
</ElementType>
4444
)
45-
}
45+
})
4646

47+
ItemContent.displayName = 'ItemContent'
4748
ItemContent.propTypes = {
4849
/** An element type to render as (string or function). */
4950
as: PropTypes.elementType,

‎src/views/Item/ItemDescription.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,19 +13,20 @@ import {
1313
/**
1414
* An item can contain a description with a single or multiple paragraphs.
1515
*/
16-
function ItemDescription(props) {
16+
const ItemDescription = React.forwardRef(function (props, ref) {
1717
const { children, className, content } = props
1818
const classes = cx('description', className)
1919
const rest = getUnhandledProps(ItemDescription, props)
2020
const ElementType = getElementType(ItemDescription, props)
2121

2222
return (
23-
<ElementType {...rest} className={classes}>
23+
<ElementType {...rest} className={classes} ref={ref}>
2424
{childrenUtils.isNil(children) ? content : children}
2525
</ElementType>
2626
)
27-
}
27+
})
2828

29+
ItemDescription.displayName = 'ItemDescription'
2930
ItemDescription.propTypes = {
3031
/** An element type to render as (string or function). */
3132
as: PropTypes.elementType,

‎src/views/Item/ItemExtra.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,19 +13,20 @@ import {
1313
/**
1414
* An item can contain extra content meant to be formatted separately from the main content.
1515
*/
16-
function ItemExtra(props) {
16+
const ItemExtra = React.forwardRef(function (props, ref) {
1717
const { children, className, content } = props
1818
const classes = cx('extra', className)
1919
const rest = getUnhandledProps(ItemExtra, props)
2020
const ElementType = getElementType(ItemExtra, props)
2121

2222
return (
23-
<ElementType {...rest} className={classes}>
23+
<ElementType {...rest} className={classes} ref={ref}>
2424
{childrenUtils.isNil(children) ? content : children}
2525
</ElementType>
2626
)
27-
}
27+
})
2828

29+
ItemExtra.displayName = 'ItemExtra'
2930
ItemExtra.propTypes = {
3031
/** An element type to render as (string or function). */
3132
as: PropTypes.elementType,

‎src/views/Item/ItemGroup.js

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import Item from './Item'
1616
/**
1717
* A group of items.
1818
*/
19-
function ItemGroup(props) {
19+
const ItemGroup = React.forwardRef(function (props, ref) {
2020
const { children, className, content, divided, items, link, relaxed, unstackable } = props
2121

2222
const classes = cx(
@@ -33,14 +33,14 @@ function ItemGroup(props) {
3333

3434
if (!childrenUtils.isNil(children)) {
3535
return (
36-
<ElementType {...rest} className={classes}>
36+
<ElementType {...rest} className={classes} ref={ref}>
3737
{children}
3838
</ElementType>
3939
)
4040
}
4141
if (!childrenUtils.isNil(content)) {
4242
return (
43-
<ElementType {...rest} className={classes}>
43+
<ElementType {...rest} className={classes} ref={ref}>
4444
{content}
4545
</ElementType>
4646
)
@@ -56,12 +56,13 @@ function ItemGroup(props) {
5656
})
5757

5858
return (
59-
<ElementType {...rest} className={classes}>
59+
<ElementType {...rest} className={classes} ref={ref}>
6060
{itemsJSX}
6161
</ElementType>
6262
)
63-
}
63+
})
6464

65+
ItemGroup.displayName = 'ItemGroup'
6566
ItemGroup.propTypes = {
6667
/** An element type to render as (string or function). */
6768
as: PropTypes.elementType,

‎src/views/Item/ItemHeader.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,19 +13,20 @@ import {
1313
/**
1414
* An item can contain a header.
1515
*/
16-
function ItemHeader(props) {
16+
const ItemHeader = React.forwardRef(function (props, ref) {
1717
const { children, className, content } = props
1818
const classes = cx('header', className)
1919
const rest = getUnhandledProps(ItemHeader, props)
2020
const ElementType = getElementType(ItemHeader, props)
2121

2222
return (
23-
<ElementType {...rest} className={classes}>
23+
<ElementType {...rest} className={classes} ref={ref}>
2424
{childrenUtils.isNil(children) ? content : children}
2525
</ElementType>
2626
)
27-
}
27+
})
2828

29+
ItemHeader.displayName = 'ItemHeader'
2930
ItemHeader.propTypes = {
3031
/** An element type to render as (string or function). */
3132
as: PropTypes.elementType,

‎src/views/Item/ItemImage.d.ts

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,19 @@
11
import * as React from 'react'
2+
23
import { ImageProps, StrictImageProps } from '../../elements/Image'
4+
import { SemanticSIZES } from '../../generic'
5+
6+
export interface ItemImageProps extends ImageProps {
7+
[key: string]: any
38

4-
export interface ItemImageProps extends ImageProps {}
9+
/** An image may appear at different sizes. */
10+
size?: SemanticSIZES
11+
}
512

6-
export interface StrictItemImageProps extends StrictImageProps {}
13+
export interface StrictItemImageProps extends StrictImageProps {
14+
/** An image may appear at different sizes. */
15+
size?: SemanticSIZES
16+
}
717

818
declare const ItemImage: React.StatelessComponent<ItemImageProps>
919

‎src/views/Item/ItemImage.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,14 @@ import Image from '../../elements/Image'
66
/**
77
* An item can contain an image.
88
*/
9-
function ItemImage(props) {
9+
const ItemImage = React.forwardRef(function (props, ref) {
1010
const { size } = props
1111
const rest = getUnhandledProps(ItemImage, props)
1212

13-
return <Image {...rest} size={size} ui={!!size} wrapped />
14-
}
13+
return <Image {...rest} size={size} ui={!!size} wrapped ref={ref} />
14+
})
1515

16+
ItemImage.displayName = 'ItemImage'
1617
ItemImage.propTypes = {
1718
/** An image may appear at different sizes. */
1819
size: Image.propTypes.size,

‎src/views/Item/ItemMeta.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,19 +13,20 @@ import {
1313
/**
1414
* An item can contain content metadata.
1515
*/
16-
function ItemMeta(props) {
16+
const ItemMeta = React.forwardRef(function (props, ref) {
1717
const { children, className, content } = props
1818
const classes = cx('meta', className)
1919
const rest = getUnhandledProps(ItemMeta, props)
2020
const ElementType = getElementType(ItemMeta, props)
2121

2222
return (
23-
<ElementType {...rest} className={classes}>
23+
<ElementType {...rest} className={classes} ref={ref}>
2424
{childrenUtils.isNil(children) ? content : children}
2525
</ElementType>
2626
)
27-
}
27+
})
2828

29+
ItemMeta.displayName = 'ItemMeta'
2930
ItemMeta.propTypes = {
3031
/** An element type to render as (string or function). */
3132
as: PropTypes.elementType,

‎test/specs/views/Item/Item-test.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,9 @@ import * as common from 'test/specs/commonTests'
1313

1414
describe('Item', () => {
1515
common.isConformant(Item)
16+
common.forwardsRef(Item)
17+
common.forwardsRef(Item, { requiredProps: { children: <span /> } })
18+
common.forwardsRef(Item, { requiredProps: { content: faker.lorem.word() } })
1619
common.hasSubcomponents(Item, [
1720
ItemContent,
1821
ItemDescription,

‎test/specs/views/Item/ItemContent-test.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
import faker from 'faker'
2+
import React from 'react'
3+
14
import ItemContent from 'src/views/Item/ItemContent'
25
import ItemDescription from 'src/views/Item/ItemDescription'
36
import ItemExtra from 'src/views/Item/ItemExtra'
@@ -7,6 +10,9 @@ import * as common from 'test/specs/commonTests'
710

811
describe('ItemContent', () => {
912
common.isConformant(ItemContent)
13+
common.forwardsRef(ItemContent)
14+
common.forwardsRef(ItemContent, { requiredProps: { children: <span /> } })
15+
common.forwardsRef(ItemContent, { requiredProps: { content: faker.lorem.word() } })
1016
common.rendersChildren(ItemContent)
1117

1218
common.implementsShorthandProp(ItemContent, {

‎test/specs/views/Item/ItemDescription-test.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import * as common from 'test/specs/commonTests'
33

44
describe('ItemDescription', () => {
55
common.isConformant(ItemDescription)
6+
common.forwardsRef(ItemDescription)
67
common.rendersChildren(ItemDescription)
78

89
common.implementsCreateMethod(ItemDescription)

‎test/specs/views/Item/ItemExtra-test.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import * as common from 'test/specs/commonTests'
33

44
describe('ItemExtra', () => {
55
common.isConformant(ItemExtra)
6+
common.forwardsRef(ItemExtra)
67
common.rendersChildren(ItemExtra)
78

89
common.implementsCreateMethod(ItemExtra)

‎test/specs/views/Item/ItemGroup-test.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,11 @@ import ItemGroup from 'src/views/Item/ItemGroup'
55
import * as common from 'test/specs/commonTests'
66

77
describe('ItemGroup', () => {
8-
common.hasUIClassName(ItemGroup)
98
common.isConformant(ItemGroup)
9+
common.forwardsRef(ItemGroup)
10+
common.forwardsRef(ItemGroup, { requiredProps: { children: <span /> } })
11+
common.forwardsRef(ItemGroup, { requiredProps: { content: faker.lorem.word() } })
12+
common.hasUIClassName(ItemGroup)
1013
common.rendersChildren(ItemGroup)
1114

1215
common.propKeyOnlyToClassName(ItemGroup, 'divided')

‎test/specs/views/Item/ItemHeader-test.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import * as common from 'test/specs/commonTests'
33

44
describe('ItemHeader', () => {
55
common.isConformant(ItemHeader)
6+
common.forwardsRef(ItemHeader)
67
common.rendersChildren(ItemHeader)
78

89
common.implementsCreateMethod(ItemHeader)

‎test/specs/views/Item/ItemImage-test.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import ItemImage from 'src/views/Item/ItemImage'
44
import * as common from 'test/specs/commonTests'
55

66
describe('ItemImage', () => {
7+
common.isConformant(ItemImage, { rendersChildren: false })
8+
common.forwardsRef(ItemImage, { tagName: 'img' })
79
common.implementsCreateMethod(ItemImage)
810

911
it('renders Image component', () => {

‎test/specs/views/Item/ItemMeta-test.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import * as common from 'test/specs/commonTests'
33

44
describe('ItemMeta', () => {
55
common.isConformant(ItemMeta)
6+
common.forwardsRef(ItemMeta)
67
common.rendersChildren(ItemMeta)
78

89
common.implementsCreateMethod(ItemMeta)

0 commit comments

Comments
 (0)