From 9f28507ade98ac632fc9c1c60ae98af57c1a9bbb Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Mon, 26 Jul 2021 10:32:21 +0200 Subject: [PATCH] chore(Placeholder): use React.forwardRef() (#4236) --- src/elements/Placeholder/Placeholder.js | 7 ++++--- src/elements/Placeholder/PlaceholderHeader.js | 7 ++++--- src/elements/Placeholder/PlaceholderImage.js | 7 ++++--- src/elements/Placeholder/PlaceholderLine.js | 7 ++++--- src/elements/Placeholder/PlaceholderParagraph.js | 7 ++++--- test/specs/commonTests/isConformant.js | 2 +- test/specs/elements/Placeholder/Placeholder-test.js | 1 + test/specs/elements/Placeholder/PlaceholderHeader-test.js | 1 + test/specs/elements/Placeholder/PlaceholderImage-test.js | 1 + test/specs/elements/Placeholder/PlaceholderLine-test.js | 2 ++ .../elements/Placeholder/PlaceholderParagraph-test.js | 1 + 11 files changed, 27 insertions(+), 16 deletions(-) diff --git a/src/elements/Placeholder/Placeholder.js b/src/elements/Placeholder/Placeholder.js index 23f77ac969..52b8a3d23d 100644 --- a/src/elements/Placeholder/Placeholder.js +++ b/src/elements/Placeholder/Placeholder.js @@ -17,7 +17,7 @@ import PlaceholderParagraph from './PlaceholderParagraph' /** * A placeholder is used to reserve space for content that soon will appear in a layout. */ -function Placeholder(props) { +const Placeholder = React.forwardRef(function PlaceholderInner(props, ref) { const { children, className, content, fluid, inverted } = props const classes = cx( 'ui', @@ -30,12 +30,13 @@ function Placeholder(props) { const ElementType = getElementType(Placeholder, props) return ( - + {childrenUtils.isNil(children) ? content : children} ) -} +}) +Placeholder.displayName = 'Placeholder' Placeholder.propTypes = { /** An element type to render as (string or function). */ as: PropTypes.elementType, diff --git a/src/elements/Placeholder/PlaceholderHeader.js b/src/elements/Placeholder/PlaceholderHeader.js index cfc33ea20f..a472528b83 100644 --- a/src/elements/Placeholder/PlaceholderHeader.js +++ b/src/elements/Placeholder/PlaceholderHeader.js @@ -13,19 +13,20 @@ import { /** * A placeholder can contain a header. */ -function PlaceholderHeader(props) { +const PlaceholderHeader = React.forwardRef(function PlaceholderHeaderInner(props, ref) { const { children, className, content, image } = props const classes = cx(useKeyOnly(image, 'image'), 'header', className) const rest = getUnhandledProps(PlaceholderHeader, props) const ElementType = getElementType(PlaceholderHeader, props) return ( - + {childrenUtils.isNil(children) ? content : children} ) -} +}) +PlaceholderHeader.displayName = 'PlaceholderHeader' PlaceholderHeader.propTypes = { /** An element type to render as (string or function). */ as: PropTypes.elementType, diff --git a/src/elements/Placeholder/PlaceholderImage.js b/src/elements/Placeholder/PlaceholderImage.js index 84e9348094..b52cf13c7b 100644 --- a/src/elements/Placeholder/PlaceholderImage.js +++ b/src/elements/Placeholder/PlaceholderImage.js @@ -7,7 +7,7 @@ import { customPropTypes, getElementType, getUnhandledProps, useKeyOnly } from ' /** * A placeholder can contain an image. */ -function PlaceholderImage(props) { +const PlaceholderImage = React.forwardRef(function PlaceholderImageInner(props, ref) { const { className, square, rectangular } = props const classes = cx( useKeyOnly(square, 'square'), @@ -18,9 +18,10 @@ function PlaceholderImage(props) { const rest = getUnhandledProps(PlaceholderImage, props) const ElementType = getElementType(PlaceholderImage, props) - return -} + return +}) +PlaceholderImage.displayName = 'PlaceholderImage' PlaceholderImage.propTypes = { /** An element type to render as (string or function). */ as: PropTypes.elementType, diff --git a/src/elements/Placeholder/PlaceholderLine.js b/src/elements/Placeholder/PlaceholderLine.js index 0682daff9d..746da8450f 100644 --- a/src/elements/Placeholder/PlaceholderLine.js +++ b/src/elements/Placeholder/PlaceholderLine.js @@ -7,15 +7,16 @@ import { getElementType, getUnhandledProps } from '../../lib' /** * A placeholder can contain have lines of text. */ -function PlaceholderLine(props) { +const PlaceholderLine = React.forwardRef(function PlaceholderLineInner(props, ref) { const { className, length } = props const classes = cx('line', length, className) const rest = getUnhandledProps(PlaceholderLine, props) const ElementType = getElementType(PlaceholderLine, props) - return -} + return +}) +PlaceholderLine.displayName = 'PlaceholderLine' PlaceholderLine.propTypes = { /** An element type to render as (string or function). */ as: PropTypes.elementType, diff --git a/src/elements/Placeholder/PlaceholderParagraph.js b/src/elements/Placeholder/PlaceholderParagraph.js index 535a87c26e..66acb2f936 100644 --- a/src/elements/Placeholder/PlaceholderParagraph.js +++ b/src/elements/Placeholder/PlaceholderParagraph.js @@ -7,19 +7,20 @@ import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } fro /** * A placeholder can contain a paragraph. */ -function PlaceholderParagraph(props) { +const PlaceholderParagraph = React.forwardRef(function PlaceholderParagraphInner(props, ref) { const { children, className, content } = props const classes = cx('paragraph', className) const rest = getUnhandledProps(PlaceholderParagraph, props) const ElementType = getElementType(PlaceholderParagraph, props) return ( - + {childrenUtils.isNil(children) ? content : children} ) -} +}) +PlaceholderParagraph.displayName = 'PlaceholderParagraph' PlaceholderParagraph.propTypes = { /** An element type to render as (string or function). */ as: PropTypes.elementType, diff --git a/test/specs/commonTests/isConformant.js b/test/specs/commonTests/isConformant.js index a2969dec91..a07d48ec72 100644 --- a/test/specs/commonTests/isConformant.js +++ b/test/specs/commonTests/isConformant.js @@ -73,7 +73,7 @@ export default function isConformant(Component, options = {}) { const isTopLevelAPIProp = _.has(semanticUIReact, constructorName) // find the apiPath in the semanticUIReact object - const foundAsSubcomponent = _.isFunction(_.get(semanticUIReact, info.apiPath)) + const foundAsSubcomponent = ReactIs.isValidElementType(_.get(semanticUIReact, info.apiPath)) // require all components to be exported at the top level it('is exported at the top level', () => { diff --git a/test/specs/elements/Placeholder/Placeholder-test.js b/test/specs/elements/Placeholder/Placeholder-test.js index 4641f73337..96c10e8a2b 100644 --- a/test/specs/elements/Placeholder/Placeholder-test.js +++ b/test/specs/elements/Placeholder/Placeholder-test.js @@ -7,6 +7,7 @@ import * as common from 'test/specs/commonTests' describe('Placeholder', () => { common.isConformant(Placeholder) + common.forwardsRef(Placeholder) common.hasSubcomponents(Placeholder, [ PlaceholderHeader, PlaceholderImage, diff --git a/test/specs/elements/Placeholder/PlaceholderHeader-test.js b/test/specs/elements/Placeholder/PlaceholderHeader-test.js index a13c09ae55..963ebcf6c0 100644 --- a/test/specs/elements/Placeholder/PlaceholderHeader-test.js +++ b/test/specs/elements/Placeholder/PlaceholderHeader-test.js @@ -3,6 +3,7 @@ import * as common from 'test/specs/commonTests' describe('PlaceholderHeader', () => { common.isConformant(PlaceholderHeader) + common.forwardsRef(PlaceholderHeader) common.rendersChildren(PlaceholderHeader) common.propKeyOnlyToClassName(PlaceholderHeader, 'image') diff --git a/test/specs/elements/Placeholder/PlaceholderImage-test.js b/test/specs/elements/Placeholder/PlaceholderImage-test.js index f57d8b54f6..cb064c2b29 100644 --- a/test/specs/elements/Placeholder/PlaceholderImage-test.js +++ b/test/specs/elements/Placeholder/PlaceholderImage-test.js @@ -3,6 +3,7 @@ import * as common from 'test/specs/commonTests' describe('PlaceholderImage', () => { common.isConformant(PlaceholderImage) + common.forwardsRef(PlaceholderImage) common.propKeyOnlyToClassName(PlaceholderImage, 'square') common.propKeyOnlyToClassName(PlaceholderImage, 'rectangular') diff --git a/test/specs/elements/Placeholder/PlaceholderLine-test.js b/test/specs/elements/Placeholder/PlaceholderLine-test.js index 33d1cae7d6..2751d8a536 100644 --- a/test/specs/elements/Placeholder/PlaceholderLine-test.js +++ b/test/specs/elements/Placeholder/PlaceholderLine-test.js @@ -3,6 +3,8 @@ import * as common from 'test/specs/commonTests' describe('PlaceholderLine', () => { common.isConformant(PlaceholderLine) + common.forwardsRef(PlaceholderLine) + common.propValueOnlyToClassName(PlaceholderLine, 'length', [ 'full', 'very long', diff --git a/test/specs/elements/Placeholder/PlaceholderParagraph-test.js b/test/specs/elements/Placeholder/PlaceholderParagraph-test.js index 110f8be7f8..25dd47b6f6 100644 --- a/test/specs/elements/Placeholder/PlaceholderParagraph-test.js +++ b/test/specs/elements/Placeholder/PlaceholderParagraph-test.js @@ -3,5 +3,6 @@ import * as common from 'test/specs/commonTests' describe('PlaceholderParagraph', () => { common.isConformant(PlaceholderParagraph) + common.forwardsRef(PlaceholderParagraph) common.rendersChildren(PlaceholderParagraph) })