Skip to content

Commit fbee3c3

Browse files
layershifterlayershifter
authored
chore(Feed): use React.forwardRef() (#4244)
1 parent 94491dc commit fbee3c3

21 files changed

+79
-37
lines changed

‎src/views/Feed/Feed.js

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import FeedUser from './FeedUser'
1717
/**
1818
* A feed presents user activity chronologically.
1919
*/
20-
function Feed(props) {
20+
const Feed = React.forwardRef(function (props, ref) {
2121
const { children, className, events, size } = props
2222

2323
const classes = cx('ui', size, 'feed', className)
@@ -26,7 +26,7 @@ function Feed(props) {
2626

2727
if (!childrenUtils.isNil(children)) {
2828
return (
29-
<ElementType {...rest} className={classes}>
29+
<ElementType {...rest} className={classes} ref={ref}>
3030
{children}
3131
</ElementType>
3232
)
@@ -36,16 +36,18 @@ function Feed(props) {
3636
const { childKey, date, meta, summary, ...eventData } = eventProps
3737
const finalKey = childKey ?? [date, meta, summary].join('-')
3838

39+
// TODO: use .create() factory
3940
return <FeedEvent date={date} key={finalKey} meta={meta} summary={summary} {...eventData} />
4041
})
4142

4243
return (
43-
<ElementType {...rest} className={classes}>
44+
<ElementType {...rest} className={classes} ref={ref}>
4445
{eventElements}
4546
</ElementType>
4647
)
47-
}
48+
})
4849

50+
Feed.displayName = 'Feed'
4951
Feed.propTypes = {
5052
/** An element type to render as (string or function). */
5153
as: PropTypes.elementType,

‎src/views/Feed/FeedContent.js

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import FeedExtra from './FeedExtra'
1414
import FeedMeta from './FeedMeta'
1515
import FeedSummary from './FeedSummary'
1616

17-
function FeedContent(props) {
17+
const FeedContent = React.forwardRef(function (props, ref) {
1818
const { children, className, content, extraImages, extraText, date, meta, summary } = props
1919

2020
const classes = cx('content', className)
@@ -23,14 +23,14 @@ function FeedContent(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
{createShorthand(FeedDate, (val) => ({ content: val }), date, { autoGenerateKey: false })}
3535
{createShorthand(FeedSummary, (val) => ({ content: val }), summary, {
3636
autoGenerateKey: false,
@@ -45,8 +45,9 @@ function FeedContent(props) {
4545
{createShorthand(FeedMeta, (val) => ({ content: val }), meta, { autoGenerateKey: false })}
4646
</ElementType>
4747
)
48-
}
48+
})
4949

50+
FeedContent.displayName = 'FeedContent'
5051
FeedContent.propTypes = {
5152
/** An element type to render as (string or function). */
5253
as: PropTypes.elementType,

‎src/views/Feed/FeedDate.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,19 +7,20 @@ import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } fro
77
/**
88
* An event or an event summary can contain a date.
99
*/
10-
function FeedDate(props) {
10+
const FeedDate = React.forwardRef(function (props, ref) {
1111
const { children, className, content } = props
1212
const classes = cx('date', className)
1313
const rest = getUnhandledProps(FeedDate, props)
1414
const ElementType = getElementType(FeedDate, props)
1515

1616
return (
17-
<ElementType {...rest} className={classes}>
17+
<ElementType {...rest} className={classes} ref={ref}>
1818
{childrenUtils.isNil(children) ? content : children}
1919
</ElementType>
2020
)
21-
}
21+
})
2222

23+
FeedDate.displayName = 'FeedDate'
2324
FeedDate.propTypes = {
2425
/** An element type to render as (string or function). */
2526
as: PropTypes.elementType,

‎src/views/Feed/FeedEvent.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import FeedLabel from './FeedLabel'
99
/**
1010
* A feed contains an event.
1111
*/
12-
function FeedEvent(props) {
12+
const FeedEvent = React.forwardRef(function (props, ref) {
1313
const {
1414
content,
1515
children,
@@ -31,15 +31,16 @@ function FeedEvent(props) {
3131
const contentProps = { content, date, extraImages, extraText, meta, summary }
3232

3333
return (
34-
<ElementType {...rest} className={classes}>
34+
<ElementType {...rest} className={classes} ref={ref}>
3535
{createShorthand(FeedLabel, (val) => ({ icon: val }), icon, { autoGenerateKey: false })}
3636
{createShorthand(FeedLabel, (val) => ({ image: val }), image, { autoGenerateKey: false })}
3737
{hasContentProp && <FeedContent {...contentProps} />}
3838
{children}
3939
</ElementType>
4040
)
41-
}
41+
})
4242

43+
FeedEvent.displayName = 'FeedEvent'
4344
FeedEvent.propTypes = {
4445
/** An element type to render as (string or function). */
4546
as: PropTypes.elementType,

‎src/views/Feed/FeedExtra.js

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import {
1515
/**
1616
* A feed can contain an extra content.
1717
*/
18-
function FeedExtra(props) {
18+
const FeedExtra = React.forwardRef(function (props, ref) {
1919
const { children, className, content, images, text } = props
2020

2121
const classes = cx(
@@ -29,7 +29,7 @@ function FeedExtra(props) {
2929

3030
if (!childrenUtils.isNil(children)) {
3131
return (
32-
<ElementType {...rest} className={classes}>
32+
<ElementType {...rest} className={classes} ref={ref}>
3333
{children}
3434
</ElementType>
3535
)
@@ -42,13 +42,14 @@ function FeedExtra(props) {
4242
})
4343

4444
return (
45-
<ElementType {...rest} className={classes}>
45+
<ElementType {...rest} className={classes} ref={ref}>
4646
{content}
4747
{imageElements}
4848
</ElementType>
4949
)
50-
}
50+
})
5151

52+
FeedExtra.displayName = 'FeedExtra'
5253
FeedExtra.propTypes = {
5354
/** An element type to render as (string or function). */
5455
as: PropTypes.elementType,

‎src/views/Feed/FeedLabel.js

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import Icon from '../../elements/Icon'
1414
/**
1515
* An event can contain an image or icon label.
1616
*/
17-
function FeedLabel(props) {
17+
const FeedLabel = React.forwardRef(function (props, ref) {
1818
const { children, className, content, icon, image } = props
1919

2020
const classes = cx('label', className)
@@ -23,21 +23,22 @@ function FeedLabel(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
{content}
3535
{Icon.create(icon, { autoGenerateKey: false })}
3636
{createHTMLImage(image)}
3737
</ElementType>
3838
)
39-
}
39+
})
4040

41+
FeedLabel.displayName = 'FeedLabel'
4142
FeedLabel.propTypes = {
4243
/** An element type to render as (string or function). */
4344
as: PropTypes.elementType,

‎src/views/Feed/FeedLike.js

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import Icon from '../../elements/Icon'
88
/**
99
* A feed can contain a like element.
1010
*/
11-
function FeedLike(props) {
11+
const FeedLike = React.forwardRef(function (props, ref) {
1212
const { children, className, content, icon } = props
1313

1414
const classes = cx('like', className)
@@ -17,24 +17,25 @@ function FeedLike(props) {
1717

1818
if (!childrenUtils.isNil(children)) {
1919
return (
20-
<ElementType {...rest} className={classes}>
20+
<ElementType {...rest} className={classes} ref={ref}>
2121
{children}
2222
</ElementType>
2323
)
2424
}
2525

2626
return (
27-
<ElementType {...rest} className={classes}>
27+
<ElementType {...rest} className={classes} ref={ref}>
2828
{Icon.create(icon, { autoGenerateKey: false })}
2929
{content}
3030
</ElementType>
3131
)
32-
}
32+
})
3333

3434
FeedLike.defaultProps = {
3535
as: 'a',
3636
}
3737

38+
FeedLike.displayName = 'FeedLike'
3839
FeedLike.propTypes = {
3940
/** An element type to render as (string or function). */
4041
as: PropTypes.elementType,

‎src/views/Feed/FeedMeta.js

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import FeedLike from './FeedLike'
1414
/**
1515
* A feed can contain a meta.
1616
*/
17-
function FeedMeta(props) {
17+
const FeedMeta = React.forwardRef(function (props, ref) {
1818
const { children, className, content, like } = props
1919

2020
const classes = cx('meta', className)
@@ -23,20 +23,21 @@ function FeedMeta(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
{createShorthand(FeedLike, (val) => ({ content: val }), like, { autoGenerateKey: false })}
3535
{content}
3636
</ElementType>
3737
)
38-
}
38+
})
3939

40+
FeedMeta.displayName = 'FeedMeta'
4041
FeedMeta.propTypes = {
4142
/** An element type to render as (string or function). */
4243
as: PropTypes.elementType,

‎src/views/Feed/FeedSummary.js

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import FeedUser from './FeedUser'
1515
/**
1616
* A feed can contain a summary.
1717
*/
18-
function FeedSummary(props) {
18+
const FeedSummary = React.forwardRef(function (props, ref) {
1919
const { children, className, content, date, user } = props
2020

2121
const classes = cx('summary', className)
@@ -24,14 +24,14 @@ function FeedSummary(props) {
2424

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

3333
return (
34-
<ElementType {...rest} className={classes}>
34+
<ElementType {...rest} className={classes} ref={ref}>
3535
{createShorthand(FeedUser, (val) => ({ content: val }), user, { autoGenerateKey: false })}
3636
{/*
3737
Content styles require wrapping whitespace
@@ -43,8 +43,9 @@ function FeedSummary(props) {
4343
{createShorthand(FeedDate, (val) => ({ content: val }), date, { autoGenerateKey: false })}
4444
</ElementType>
4545
)
46-
}
46+
})
4747

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

‎src/views/Feed/FeedUser.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,19 +7,20 @@ import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } fro
77
/**
88
* A feed can contain a user element.
99
*/
10-
function FeedUser(props) {
10+
const FeedUser = React.forwardRef(function (props, ref) {
1111
const { children, className, content } = props
1212
const classes = cx('user', className)
1313
const rest = getUnhandledProps(FeedUser, props)
1414
const ElementType = getElementType(FeedUser, props)
1515

1616
return (
17-
<ElementType {...rest} className={classes}>
17+
<ElementType {...rest} className={classes} ref={ref}>
1818
{childrenUtils.isNil(children) ? content : children}
1919
</ElementType>
2020
)
21-
}
21+
})
2222

23+
FeedUser.displayName = 'FeedUser'
2324
FeedUser.propTypes = {
2425
/** An element type to render as (string or function). */
2526
as: PropTypes.elementType,

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,14 @@ describe('Card', () => {
5050

5151
wrapper.should.have.tagName('a')
5252
})
53+
54+
it('is called with (e, data) when clicked', () => {
55+
const onClick = sandbox.spy()
56+
mount(<Card onClick={onClick} />).simulate('click')
57+
58+
onClick.should.have.been.calledOnce()
59+
onClick.should.have.been.calledWithMatch({ type: 'click' }, { onClick })
60+
})
5361
})
5462

5563
describe('extra', () => {

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ import * as common from 'test/specs/commonTests'
88

99
describe('Feed', () => {
1010
common.isConformant(Feed)
11+
common.forwardsRef(Feed)
12+
common.forwardsRef(Feed, { requiredProps: { children: <span /> } })
1113
common.hasUIClassName(Feed)
1214
common.rendersChildren(Feed, {
1315
rendersContent: false,

‎test/specs/views/Feed/FeedContent-test.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import * as React from 'react'
2+
13
import FeedContent from 'src/views/Feed/FeedContent'
24
import FeedDate from 'src/views/Feed/FeedDate'
35
import FeedSummary from 'src/views/Feed/FeedSummary'
@@ -7,6 +9,8 @@ import * as common from 'test/specs/commonTests'
79

810
describe('FeedContent', () => {
911
common.isConformant(FeedContent)
12+
common.forwardsRef(FeedContent)
13+
common.forwardsRef(FeedContent, { requiredProps: { children: <span /> } })
1014
common.rendersChildren(FeedContent)
1115

1216
common.implementsShorthandProp(FeedContent, {

‎test/specs/views/Feed/FeedDate-test.js

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

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

‎test/specs/views/Feed/FeedEvent-test.js

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

99
describe('FeedEvent', () => {
1010
common.isConformant(FeedEvent)
11+
common.forwardsRef(FeedEvent)
1112
common.rendersChildren(FeedEvent, {
1213
rendersContent: false,
1314
})

‎test/specs/views/Feed/FeedExtra-test.js

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

66
describe('FeedExtra', () => {
77
common.isConformant(FeedExtra)
8+
common.forwardsRef(FeedExtra)
9+
common.forwardsRef(FeedExtra, { requiredProps: { children: <span /> } })
810
common.rendersChildren(FeedExtra)
911

1012
common.propKeyOnlyToClassName(FeedExtra, 'images')

0 commit comments

Comments
 (0)