diff --git a/src/views/Item/Item.d.ts b/src/views/Item/Item.d.ts index 4c1485b0be..6f10edc09f 100644 --- a/src/views/Item/Item.d.ts +++ b/src/views/Item/Item.d.ts @@ -1,7 +1,7 @@ import * as React from 'react' -import { SemanticShorthandContent, SemanticShorthandItem } from '../../generic' -import ItemContent from './ItemContent' +import { SemanticShorthandItem } from '../../generic' +import ItemContent, { ItemContentProps } from './ItemContent' import ItemDescription, { ItemDescriptionProps } from './ItemDescription' import ItemExtra, { ItemExtraProps } from './ItemExtra' import ItemGroup from './ItemGroup' @@ -24,7 +24,7 @@ export interface StrictItemProps { className?: string /** Shorthand for ItemContent component. */ - content?: SemanticShorthandContent + content?: SemanticShorthandItem /** Shorthand for ItemDescription component. */ description?: SemanticShorthandItem diff --git a/src/views/Item/Item.js b/src/views/Item/Item.js index a66d7ce841..08b17d7e8e 100644 --- a/src/views/Item/Item.js +++ b/src/views/Item/Item.js @@ -1,4 +1,5 @@ import cx from 'clsx' +import _ from 'lodash' import PropTypes from 'prop-types' import React from 'react' @@ -29,17 +30,22 @@ function Item(props) { ) } + let contentShorthandValue = content + if ( + contentShorthandValue === undefined && + [description, extra, header, meta].some((prop) => !_.isNil(prop)) + ) { + contentShorthandValue = {} + } + return ( {ItemImage.create(image, { autoGenerateKey: false })} - + {ItemContent.create(contentShorthandValue, { + autoGenerateKey: false, + overrideProps: { description, extra, header, meta }, + })} ) } @@ -63,7 +69,7 @@ Item.propTypes = { className: PropTypes.string, /** Shorthand for ItemContent component. */ - content: customPropTypes.contentShorthand, + content: customPropTypes.itemShorthand, /** Shorthand for ItemDescription component. */ description: customPropTypes.itemShorthand, diff --git a/src/views/Item/ItemContent.js b/src/views/Item/ItemContent.js index ab3df2ec32..404daefa95 100644 --- a/src/views/Item/ItemContent.js +++ b/src/views/Item/ItemContent.js @@ -4,6 +4,7 @@ import React from 'react' import { childrenUtils, + createShorthandFactory, customPropTypes, getElementType, getUnhandledProps, @@ -73,4 +74,6 @@ ItemContent.propTypes = { verticalAlign: PropTypes.oneOf(SUI.VERTICAL_ALIGNMENTS), } +ItemContent.create = createShorthandFactory(ItemContent, (content) => ({ content })) + export default ItemContent diff --git a/test/specs/views/Item/Item-test.js b/test/specs/views/Item/Item-test.js index 00085818f3..57e5947887 100644 --- a/test/specs/views/Item/Item-test.js +++ b/test/specs/views/Item/Item-test.js @@ -33,6 +33,13 @@ describe('Item', () => { mapValueToProps: (val) => ({ src: val }), }) + common.implementsShorthandProp(Item, { + autoGenerateKey: false, + propKey: 'content', + ShorthandComponent: ItemContent, + mapValueToProps: (val) => ({ content: val }), + }) + describe('content prop', () => { it('renders ItemContent component', () => { shallow().should.have.descendants('ItemContent')