Skip to content

Commit 98a1bfa

Browse files
layershifterharel
layershifter
authored and
harel
committed
style(Item): update typings and propTypes usage (Semantic-Org#1294)
1 parent e6a1769 commit 98a1bfa

17 files changed

+152
-72
lines changed

‎src/views/Item/Item.js

+15-6
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
import _ from 'lodash'
21
import cx from 'classnames'
2+
import _ from 'lodash'
33
import React, { PropTypes } from 'react'
44

55
import {
6-
createShorthand,
76
customPropTypes,
87
getElementType,
98
getUnhandledProps,
@@ -18,11 +17,21 @@ import ItemImage from './ItemImage'
1817
import ItemMeta from './ItemMeta'
1918

2019
/**
21-
* An item view presents large collections of site content for display
20+
* An item view presents large collections of site content for display.
2221
*/
2322
function Item(props) {
24-
const { children, className, content, description, extra, header, image, meta } = props
25-
const classes = cx(className, 'item')
23+
const {
24+
children,
25+
className,
26+
content,
27+
description,
28+
extra,
29+
header,
30+
image,
31+
meta,
32+
} = props
33+
34+
const classes = cx('item', className)
2635
const rest = getUnhandledProps(Item, props)
2736
const ElementType = getElementType(Item, props)
2837

@@ -32,7 +41,7 @@ function Item(props) {
3241

3342
return (
3443
<ElementType {...rest} className={classes}>
35-
{createShorthand(ItemImage, val => ({ src: val }), image)}
44+
{ItemImage.create(image)}
3645

3746
<ItemContent
3847
content={content}

‎src/views/Item/ItemContent.js

+20-14
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
import _ from 'lodash'
21
import cx from 'classnames'
2+
import _ from 'lodash'
33
import React, { PropTypes } from 'react'
44

55
import {
6-
createShorthand,
76
customPropTypes,
87
getElementType,
98
getUnhandledProps,
@@ -17,14 +16,24 @@ import ItemExtra from './ItemExtra'
1716
import ItemMeta from './ItemMeta'
1817

1918
/**
20-
* An item can contain content
19+
* An item can contain content.
2120
*/
2221
function ItemContent(props) {
23-
const { children, className, content, description, extra, header, meta, verticalAlign } = props
24-
const classes = cx(
22+
const {
23+
children,
2524
className,
25+
content,
26+
description,
27+
extra,
28+
header,
29+
meta,
30+
verticalAlign,
31+
} = props
32+
33+
const classes = cx(
2634
useVerticalAlignProp(verticalAlign),
2735
'content',
36+
className,
2837
)
2938
const rest = getUnhandledProps(ItemContent, props)
3039
const ElementType = getElementType(ItemContent, props)
@@ -35,10 +44,10 @@ function ItemContent(props) {
3544

3645
return (
3746
<ElementType {...rest} className={classes}>
38-
{createShorthand(ItemHeader, val => ({ content: val }), header)}
39-
{createShorthand(ItemMeta, val => ({ content: val }), meta)}
40-
{createShorthand(ItemDescription, val => ({ content: val }), description)}
41-
{createShorthand(ItemExtra, val => ({ content: val }), extra)}
47+
{ItemHeader.create(header)}
48+
{ItemMeta.create(meta)}
49+
{ItemDescription.create(description)}
50+
{ItemExtra.create(extra)}
4251
{content}
4352
</ElementType>
4453
)
@@ -48,9 +57,6 @@ ItemContent._meta = {
4857
name: 'ItemContent',
4958
parent: 'Item',
5059
type: META.TYPES.VIEW,
51-
props: {
52-
verticalAlign: SUI.VERTICAL_ALIGNMENTS,
53-
},
5460
}
5561

5662
ItemContent.propTypes = {
@@ -78,8 +84,8 @@ ItemContent.propTypes = {
7884
/** Shorthand for ItemMeta component. */
7985
meta: customPropTypes.itemShorthand,
8086

81-
/** Content can specify its vertical alignment */
82-
verticalAlign: PropTypes.oneOf(ItemContent._meta.props.verticalAlign),
87+
/** Content can specify its vertical alignment. */
88+
verticalAlign: PropTypes.oneOf(SUI.VERTICAL_ALIGNMENTS),
8389
}
8490

8591
export default ItemContent

‎src/views/Item/ItemDescription.js

+11-4
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,29 @@
1-
import _ from 'lodash'
21
import cx from 'classnames'
2+
import _ from 'lodash'
33
import React, { PropTypes } from 'react'
44

55
import {
6+
createShorthandFactory,
67
customPropTypes,
78
getElementType,
89
getUnhandledProps,
910
META,
1011
} from '../../lib'
1112

1213
/**
13-
* An item can contain a description with a single or multiple paragraphs
14+
* An item can contain a description with a single or multiple paragraphs.
1415
*/
1516
function ItemDescription(props) {
1617
const { children, className, content } = props
17-
const classes = cx(className, 'description')
18+
const classes = cx('description', className)
1819
const rest = getUnhandledProps(ItemDescription, props)
1920
const ElementType = getElementType(ItemDescription, props)
2021

21-
return <ElementType {...rest} className={classes}>{_.isNil(children) ? content : children}</ElementType>
22+
return (
23+
<ElementType {...rest} className={classes}>
24+
{_.isNil(children) ? content : children}
25+
</ElementType>
26+
)
2227
}
2328

2429
ItemDescription._meta = {
@@ -41,4 +46,6 @@ ItemDescription.propTypes = {
4146
content: customPropTypes.contentShorthand,
4247
}
4348

49+
ItemDescription.create = createShorthandFactory(ItemDescription, content => ({ content }))
50+
4451
export default ItemDescription

‎src/views/Item/ItemExtra.js

+11-4
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,29 @@
1-
import _ from 'lodash'
21
import cx from 'classnames'
2+
import _ from 'lodash'
33
import React, { PropTypes } from 'react'
44

55
import {
6+
createShorthandFactory,
67
customPropTypes,
78
getElementType,
89
getUnhandledProps,
910
META,
1011
} from '../../lib'
1112

1213
/**
13-
* An item can contain extra content meant to be formatted separately from the main content
14+
* An item can contain extra content meant to be formatted separately from the main content.
1415
*/
1516
function ItemExtra(props) {
1617
const { children, className, content } = props
17-
const classes = cx(className, 'extra')
18+
const classes = cx('extra', className)
1819
const rest = getUnhandledProps(ItemExtra, props)
1920
const ElementType = getElementType(ItemExtra, props)
2021

21-
return <ElementType {...rest} className={classes}>{_.isNil(children) ? content : children}</ElementType>
22+
return (
23+
<ElementType {...rest} className={classes}>
24+
{_.isNil(children) ? content : children}
25+
</ElementType>
26+
)
2227
}
2328

2429
ItemExtra._meta = {
@@ -41,4 +46,6 @@ ItemExtra.propTypes = {
4146
content: customPropTypes.contentShorthand,
4247
}
4348

49+
ItemExtra.create = createShorthandFactory(ItemExtra, content => ({ content }))
50+
4451
export default ItemExtra

‎src/views/Item/ItemGroup.js

+14-9
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import _ from 'lodash'
21
import cx from 'classnames'
2+
import _ from 'lodash'
33
import React, { PropTypes } from 'react'
44

55
import {
@@ -13,17 +13,25 @@ import {
1313
import Item from './Item'
1414

1515
/**
16-
* A group of items
16+
* A group of items.
1717
*/
1818
function ItemGroup(props) {
19-
const { children, className, divided, items, link, relaxed } = props
19+
const {
20+
children,
21+
className,
22+
divided,
23+
items,
24+
link,
25+
relaxed,
26+
} = props
27+
2028
const classes = cx(
2129
'ui',
22-
className,
2330
useKeyOnly(divided, 'divided'),
2431
useKeyOnly(link, 'link'),
2532
useKeyOrValueAndKey(relaxed, 'relaxed'),
26-
'items'
33+
'items',
34+
className,
2735
)
2836
const rest = getUnhandledProps(ItemGroup, props)
2937
const ElementType = getElementType(ItemGroup, props)
@@ -46,9 +54,6 @@ ItemGroup._meta = {
4654
name: 'ItemGroup',
4755
type: META.TYPES.VIEW,
4856
parent: 'Item',
49-
props: {
50-
relaxed: ['very'],
51-
},
5257
}
5358

5459
ItemGroup.propTypes = {
@@ -73,7 +78,7 @@ ItemGroup.propTypes = {
7378
/** A group of items can relax its padding to provide more negative space. */
7479
relaxed: PropTypes.oneOfType([
7580
PropTypes.bool,
76-
PropTypes.oneOf(ItemGroup._meta.props.relaxed),
81+
PropTypes.oneOf(['very']),
7782
]),
7883
}
7984

‎src/views/Item/ItemHeader.js

+11-4
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,29 @@
1-
import _ from 'lodash'
21
import cx from 'classnames'
2+
import _ from 'lodash'
33
import React, { PropTypes } from 'react'
44

55
import {
6+
createShorthandFactory,
67
customPropTypes,
78
getElementType,
89
getUnhandledProps,
910
META,
1011
} from '../../lib'
1112

1213
/**
13-
* An item can contain a header
14+
* An item can contain a header.
1415
*/
1516
function ItemHeader(props) {
1617
const { children, className, content } = props
17-
const classes = cx(className, 'header')
18+
const classes = cx('header', className)
1819
const rest = getUnhandledProps(ItemHeader, props)
1920
const ElementType = getElementType(ItemHeader, props)
2021

21-
return <ElementType {...rest} className={classes}>{_.isNil(children) ? content : children}</ElementType>
22+
return (
23+
<ElementType {...rest} className={classes}>
24+
{_.isNil(children) ? content : children}
25+
</ElementType>
26+
)
2227
}
2328

2429
ItemHeader._meta = {
@@ -41,4 +46,6 @@ ItemHeader.propTypes = {
4146
content: customPropTypes.contentShorthand,
4247
}
4348

49+
ItemHeader.create = createShorthandFactory(ItemHeader, content => ({ content }))
50+
4451
export default ItemHeader

‎src/views/Item/ItemImage.js

+6-3
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import React from 'react'
22

33
import {
4-
META,
4+
createShorthandFactory,
55
getUnhandledProps,
6+
META,
67
} from '../../lib'
78
import Image from '../../elements/Image'
89

910
/**
10-
* An item can contain an image
11+
* An item can contain an image.
1112
*/
1213
function ItemImage(props) {
1314
const { size } = props
@@ -23,8 +24,10 @@ ItemImage._meta = {
2324
}
2425

2526
ItemImage.propTypes = {
26-
/** An image may appear at different sizes */
27+
/** An image may appear at different sizes. */
2728
size: Image.propTypes.size,
2829
}
2930

31+
ItemImage.create = createShorthandFactory(ItemImage, src => ({ src }))
32+
3033
export default ItemImage

‎src/views/Item/ItemMeta.js

+10-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
import _ from 'lodash'
21
import cx from 'classnames'
2+
import _ from 'lodash'
33
import React, { PropTypes } from 'react'
44

55
import {
6+
createShorthandFactory,
67
customPropTypes,
78
getElementType,
89
getUnhandledProps,
@@ -14,11 +15,15 @@ import {
1415
*/
1516
function ItemMeta(props) {
1617
const { children, className, content } = props
17-
const classes = cx(className, 'meta')
18+
const classes = cx('meta', className)
1819
const rest = getUnhandledProps(ItemMeta, props)
1920
const ElementType = getElementType(ItemMeta, props)
2021

21-
return <ElementType {...rest} className={classes}>{_.isNil(children) ? content : children}</ElementType>
22+
return (
23+
<ElementType {...rest} className={classes}>
24+
{_.isNil(children) ? content : children}
25+
</ElementType>
26+
)
2227
}
2328

2429
ItemMeta._meta = {
@@ -41,4 +46,6 @@ ItemMeta.propTypes = {
4146
content: customPropTypes.contentShorthand,
4247
}
4348

49+
ItemMeta.create = createShorthandFactory(ItemMeta, content => ({ content }))
50+
4451
export default ItemMeta

0 commit comments

Comments
 (0)