Skip to content

Commit 88e09d9

Browse files
layershifterharel
layershifter
authored and
harel
committed
style(List): update typings and remove propTypes (Semantic-Org#1270)
1 parent a4c6b9a commit 88e09d9

15 files changed

+94
-66
lines changed

‎src/elements/Icon/index.d.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import {SemanticCOLORS, SemanticROTATION} from '../..';
33

44
type ICON_SIZES = 'mini' | 'tiny' | 'small' | 'large' | 'big' | 'huge' | 'massive';
55

6-
interface IconProps {
6+
export interface IconProps {
77
[key: string]: any;
88

99
/** An element type to render as (string or function). */

‎src/elements/List/List.js

+7-13
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 {
@@ -21,7 +21,7 @@ import ListItem from './ListItem'
2121
import ListList from './ListList'
2222

2323
/**
24-
* A list groups related content
24+
* A list groups related content.
2525
*/
2626
function List(props) {
2727
const {
@@ -38,8 +38,8 @@ function List(props) {
3838
link,
3939
ordered,
4040
relaxed,
41-
size,
4241
selection,
42+
size,
4343
verticalAlign,
4444
} = props
4545

@@ -78,12 +78,6 @@ function List(props) {
7878
List._meta = {
7979
name: 'List',
8080
type: META.TYPES.ELEMENT,
81-
props: {
82-
floated: SUI.FLOATS,
83-
relaxed: ['very'],
84-
size: SUI.SIZES,
85-
verticalAlign: SUI.VERTICAL_ALIGNMENTS,
86-
},
8781
}
8882

8983
List.propTypes = {
@@ -109,7 +103,7 @@ List.propTypes = {
109103
divided: PropTypes.bool,
110104

111105
/** An list can be floated left or right. */
112-
floated: PropTypes.oneOf(List._meta.props.floated),
106+
floated: PropTypes.oneOf(SUI.FLOATS),
113107

114108
/** A list can be formatted to have items appear horizontally. */
115109
horizontal: PropTypes.bool,
@@ -129,17 +123,17 @@ List.propTypes = {
129123
/** A list can relax its padding to provide more negative space. */
130124
relaxed: PropTypes.oneOfType([
131125
PropTypes.bool,
132-
PropTypes.oneOf(List._meta.props.relaxed),
126+
PropTypes.oneOf(['very']),
133127
]),
134128

135129
/** A selection list formats list items as possible choices. */
136130
selection: PropTypes.bool,
137131

138132
/** A list can vary in size. */
139-
size: PropTypes.oneOf(List._meta.props.size),
133+
size: PropTypes.oneOf(SUI.SIZES),
140134

141135
/** An element inside a list can be vertically aligned. */
142-
verticalAlign: PropTypes.oneOf(List._meta.props.verticalAlign),
136+
verticalAlign: PropTypes.oneOf(SUI.VERTICAL_ALIGNMENTS),
143137
}
144138

145139
List.Content = ListContent

‎src/elements/List/ListContent.js

+6-8
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 {
@@ -12,10 +12,12 @@ import {
1212
useValueAndKey,
1313
useVerticalAlignProp,
1414
} from '../../lib'
15-
1615
import ListDescription from './ListDescription'
1716
import ListHeader from './ListHeader'
1817

18+
/**
19+
* A list item can contain a content.
20+
*/
1921
function ListContent(props) {
2022
const {
2123
children,
@@ -53,10 +55,6 @@ ListContent._meta = {
5355
name: 'ListContent',
5456
parent: 'List',
5557
type: META.TYPES.ELEMENT,
56-
props: {
57-
floated: SUI.FLOATS,
58-
verticalAlign: SUI.VERTICAL_ALIGNMENTS,
59-
},
6058
}
6159

6260
ListContent.propTypes = {
@@ -76,13 +74,13 @@ ListContent.propTypes = {
7674
description: customPropTypes.itemShorthand,
7775

7876
/** An list content can be floated left or right. */
79-
floated: PropTypes.oneOf(ListContent._meta.props.floated),
77+
floated: PropTypes.oneOf(SUI.FLOATS),
8078

8179
/** Shorthand for ListHeader. */
8280
header: customPropTypes.itemShorthand,
8381

8482
/** An element inside a list can be vertically aligned. */
85-
verticalAlign: PropTypes.oneOf(ListContent._meta.props.verticalAlign),
83+
verticalAlign: PropTypes.oneOf(SUI.VERTICAL_ALIGNMENTS),
8684
}
8785

8886
ListContent.create = createShorthandFactory(ListContent, content => ({ content }))

‎src/elements/List/ListDescription.js

+9-2
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 {
@@ -10,13 +10,20 @@ import {
1010
META,
1111
} from '../../lib'
1212

13+
/**
14+
* A list item can contain a description.
15+
*/
1316
function ListDescription(props) {
1417
const { children, className, content } = props
1518
const classes = cx(className, 'description')
1619
const rest = getUnhandledProps(ListDescription, props)
1720
const ElementType = getElementType(ListDescription, props)
1821

19-
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+
)
2027
}
2128

2229
ListDescription._meta = {

‎src/elements/List/ListHeader.js

+10-3
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 {
@@ -10,13 +10,20 @@ import {
1010
META,
1111
} from '../../lib'
1212

13+
/**
14+
* A list item can contain a header.
15+
*/
1316
function ListHeader(props) {
1417
const { children, className, content } = props
15-
const classes = cx(className, 'header')
18+
const classes = cx('header', className)
1619
const rest = getUnhandledProps(ListHeader, props)
1720
const ElementType = getElementType(ListHeader, props)
1821

19-
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+
)
2027
}
2128

2229
ListHeader._meta = {

‎src/elements/List/ListIcon.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,9 @@ import {
1010
} from '../../lib'
1111
import Icon from '../Icon/Icon'
1212

13+
/**
14+
* A list item can contain an icon.
15+
*/
1316
function ListIcon(props) {
1417
const { className, verticalAlign } = props
1518
const classes = cx(
@@ -25,17 +28,14 @@ ListIcon._meta = {
2528
name: 'ListIcon',
2629
parent: 'List',
2730
type: META.TYPES.ELEMENT,
28-
props: {
29-
verticalAlign: SUI.VERTICAL_ALIGNMENTS,
30-
},
3131
}
3232

3333
ListIcon.propTypes = {
3434
/** Additional classes. */
3535
className: PropTypes.string,
3636

3737
/** An element inside a list can be vertically aligned. */
38-
verticalAlign: PropTypes.oneOf(ListIcon._meta.props.verticalAlign),
38+
verticalAlign: PropTypes.oneOf(SUI.VERTICAL_ALIGNMENTS),
3939
}
4040

4141
ListIcon.create = createShorthandFactory(ListIcon, name => ({ name }))

‎src/elements/List/ListItem.js

+8-5
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, { isValidElement, PropTypes } from 'react'
44

55
import {
@@ -17,6 +17,9 @@ import ListDescription from './ListDescription'
1717
import ListHeader from './ListHeader'
1818
import ListIcon from './ListIcon'
1919

20+
/**
21+
* A list item can contain a set of items.
22+
*/
2023
function ListItem(props) {
2124
const {
2225
active,
@@ -42,7 +45,7 @@ function ListItem(props) {
4245
const valueProp = ElementType === 'li' ? { value } : { 'data-value': value }
4346

4447
if (!_.isNil(children)) {
45-
return <ElementType {...rest} role='listitem' className={classes} {...valueProp}>{children}</ElementType>
48+
return <ElementType {...rest} {...valueProp} role='listitem' className={classes}>{children}</ElementType>
4649
}
4750

4851
const iconElement = ListIcon.create(icon)
@@ -51,7 +54,7 @@ function ListItem(props) {
5154
// See description of `content` prop for explanation about why this is necessary.
5255
if (!isValidElement(content) && _.isPlainObject(content)) {
5356
return (
54-
<ElementType {...rest} role='listitem' className={classes} {...valueProp}>
57+
<ElementType {...rest} {...valueProp} role='listitem' className={classes}>
5558
{iconElement || imageElement}
5659
{ListContent.create(content, { header, description })}
5760
</ElementType>
@@ -63,7 +66,7 @@ function ListItem(props) {
6366

6467
if (iconElement || imageElement) {
6568
return (
66-
<ElementType {...rest} role='listitem' className={classes} {...valueProp}>
69+
<ElementType {...rest} {...valueProp} role='listitem' className={classes}>
6770
{iconElement || imageElement}
6871
{(content || headerElement || descriptionElement) && (
6972
<ListContent>
@@ -77,7 +80,7 @@ function ListItem(props) {
7780
}
7881

7982
return (
80-
<ElementType {...rest} role='listitem' className={classes} {...valueProp}>
83+
<ElementType {...rest} {...valueProp} role='listitem' className={classes}>
8184
{headerElement}
8285
{descriptionElement}
8386
{content}

‎src/elements/List/ListList.js

+3
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,9 @@ import {
99
useKeyOnly,
1010
} from '../../lib'
1111

12+
/**
13+
* A list can contain a sub list.
14+
*/
1215
function ListList(props) {
1316
const { children, className } = props
1417

0 commit comments

Comments
 (0)