Skip to content

Commit f45aa6e

Browse files
layershifterharel
layershifter
authored and
harel
committed
style(Message): update typings and remove propTypes (Semantic-Org#1254)
* style(Message): update typings and remove propTypes * Update MessageItem.js
1 parent 2841ed5 commit f45aa6e

File tree

7 files changed

+220
-175
lines changed

7 files changed

+220
-175
lines changed

‎src/collections/Message/Message.js

+144-141
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import _ from 'lodash'
2-
import React, { PropTypes } from 'react'
31
import cx from 'classnames'
2+
import _ from 'lodash'
3+
import React, { Component, PropTypes } from 'react'
44

55
import {
66
createShorthand,
@@ -13,175 +13,178 @@ import {
1313
useKeyOrValueAndKey,
1414
} from '../../lib'
1515
import Icon from '../../elements/Icon'
16-
1716
import MessageContent from './MessageContent'
1817
import MessageHeader from './MessageHeader'
1918
import MessageList from './MessageList'
2019
import MessageItem from './MessageItem'
2120

2221
/**
23-
* A message displays information that explains nearby content
22+
* A message displays information that explains nearby content.
2423
* @see Form
2524
*/
26-
function Message(props) {
27-
const {
28-
children,
29-
className,
30-
content,
31-
header,
32-
icon,
33-
list,
34-
onDismiss,
35-
hidden,
36-
visible,
37-
floating,
38-
compact,
39-
attached,
40-
warning,
41-
info,
42-
positive,
43-
success,
44-
negative,
45-
error,
46-
color,
47-
size,
48-
} = props
49-
50-
const classes = cx(
51-
'ui',
52-
size,
53-
color,
54-
useKeyOnly(icon, 'icon'),
55-
useKeyOnly(hidden, 'hidden'),
56-
useKeyOnly(visible, 'visible'),
57-
useKeyOnly(floating, 'floating'),
58-
useKeyOnly(compact, 'compact'),
59-
useKeyOrValueAndKey(attached, 'attached'),
60-
useKeyOnly(warning, 'warning'),
61-
useKeyOnly(info, 'info'),
62-
useKeyOnly(positive, 'positive'),
63-
useKeyOnly(success, 'success'),
64-
useKeyOnly(negative, 'negative'),
65-
useKeyOnly(error, 'error'),
66-
'message',
67-
className,
68-
)
69-
70-
const dismissIcon = onDismiss && <Icon name='close' onClick={onDismiss} />
71-
const rest = getUnhandledProps(Message, props)
72-
const ElementType = getElementType(Message, props)
73-
74-
if (!_.isNil(children)) {
75-
return (
76-
<ElementType {...rest} className={classes}>
77-
{dismissIcon}
78-
{children}
79-
</ElementType>
80-
)
81-
}
25+
export default class Message extends Component {
26+
static propTypes = {
27+
/** An element type to render as (string or function). */
28+
as: customPropTypes.as,
8229

83-
return (
84-
<ElementType {...rest} className={classes}>
85-
{dismissIcon}
86-
{Icon.create(icon)}
87-
{(!_.isNil(header) || !_.isNil(content) || !_.isNil(list)) && (
88-
<MessageContent>
89-
{MessageHeader.create(header)}
90-
{MessageList.create(list)}
91-
{createShorthand('p', val => ({ children: val }), content)}
92-
</MessageContent>
93-
)}
94-
</ElementType>
95-
)
96-
}
30+
/** A message can be formatted to attach itself to other content. */
31+
attached: PropTypes.oneOfType([
32+
PropTypes.bool,
33+
PropTypes.oneOf(['bottom']),
34+
]),
9735

98-
Message._meta = {
99-
name: 'Message',
100-
type: META.TYPES.COLLECTION,
101-
props: {
102-
attached: ['bottom'],
103-
color: SUI.COLORS,
104-
size: _.without(SUI.SIZES, 'medium'),
105-
},
106-
}
36+
/** Primary content. */
37+
children: PropTypes.node,
38+
39+
/** Additional classes. */
40+
className: PropTypes.string,
41+
42+
/** A message can be formatted to be different colors. */
43+
color: PropTypes.oneOf(SUI.COLORS),
10744

108-
Message.propTypes = {
109-
/** An element type to render as (string or function). */
110-
as: customPropTypes.as,
45+
/** A message can only take up the width of its content. */
46+
compact: PropTypes.bool,
11147

112-
/** Primary content. */
113-
children: PropTypes.node,
48+
/** Shorthand for primary content. */
49+
content: customPropTypes.contentShorthand,
11450

115-
/** Additional classes. */
116-
className: PropTypes.string,
51+
/** A message may be formatted to display a negative message. Same as `negative`. */
52+
error: PropTypes.bool,
11753

118-
/** Shorthand for primary content. */
119-
content: customPropTypes.contentShorthand,
54+
/** A message can float above content that it is related to. */
55+
floating: PropTypes.bool,
12056

121-
/** Shorthand for MessageHeader. */
122-
header: customPropTypes.itemShorthand,
57+
/** Shorthand for MessageHeader. */
58+
header: customPropTypes.itemShorthand,
12359

124-
/** A message can contain an icon. */
125-
icon: PropTypes.oneOfType([
126-
PropTypes.bool,
127-
customPropTypes.itemShorthand,
128-
]),
60+
/** A message can be hidden. */
61+
hidden: PropTypes.bool,
12962

130-
/** Array shorthand items for the MessageList. Mutually exclusive with children. */
131-
list: customPropTypes.collectionShorthand,
63+
/** A message can contain an icon. */
64+
icon: PropTypes.oneOfType([
65+
customPropTypes.itemShorthand,
66+
PropTypes.bool,
67+
]),
13268

133-
/**
134-
* A message that the user can choose to hide.
135-
* Called when the user clicks the "x" icon. This also adds the "x" icon.
136-
*/
137-
onDismiss: PropTypes.func,
69+
/** A message may be formatted to display information. */
70+
info: PropTypes.bool,
13871

139-
/** A message can be hidden. */
140-
hidden: PropTypes.bool,
72+
/** Array shorthand items for the MessageList. Mutually exclusive with children. */
73+
list: customPropTypes.collectionShorthand,
14174

142-
/** A message can be set to visible to force itself to be shown. */
143-
visible: PropTypes.bool,
75+
/** A message may be formatted to display a negative message. Same as `error`. */
76+
negative: PropTypes.bool,
14477

145-
/** A message can float above content that it is related to. */
146-
floating: PropTypes.bool,
78+
/**
79+
* A message that the user can choose to hide.
80+
* Called when the user clicks the "x" icon. This also adds the "x" icon.
81+
*
82+
* @param {SyntheticEvent} event - React's original SyntheticEvent.
83+
* @param {object} data - All props.
84+
*/
85+
onDismiss: PropTypes.func,
14786

148-
/** A message can only take up the width of its content. */
149-
compact: PropTypes.bool,
87+
/** A message may be formatted to display a positive message. Same as `success`. */
88+
positive: PropTypes.bool,
15089

151-
/** A message can be formatted to attach itself to other content. */
152-
attached: PropTypes.oneOfType([
153-
PropTypes.bool,
154-
PropTypes.oneOf(Message._meta.props.attached),
155-
]),
90+
/** A message may be formatted to display a positive message. Same as `positive`. */
91+
success: PropTypes.bool,
15692

157-
/** A message may be formatted to display warning messages. */
158-
warning: PropTypes.bool,
93+
/** A message can have different sizes. */
94+
size: PropTypes.oneOf(_.without(SUI.SIZES, 'medium')),
15995

160-
/** A message may be formatted to display information. */
161-
info: PropTypes.bool,
96+
/** A message can be set to visible to force itself to be shown. */
97+
visible: PropTypes.bool,
16298

163-
/** A message may be formatted to display a positive message. Same as `success`. */
164-
positive: PropTypes.bool,
99+
/** A message may be formatted to display warning messages. */
100+
warning: PropTypes.bool,
101+
}
165102

166-
/** A message may be formatted to display a positive message. Same as `positive`. */
167-
success: PropTypes.bool,
103+
static _meta = {
104+
name: 'Message',
105+
type: META.TYPES.COLLECTION,
106+
}
168107

169-
/** A message may be formatted to display a negative message. Same as `error`. */
170-
negative: PropTypes.bool,
108+
static Content = MessageContent
109+
static Header = MessageHeader
110+
static List = MessageList
111+
static Item = MessageItem
171112

172-
/** A message may be formatted to display a negative message. Same as `negative`. */
173-
error: PropTypes.bool,
113+
handleDismiss = e => {
114+
const { onDismiss } = this.props
174115

175-
/** A message can be formatted to be different colors. */
176-
color: PropTypes.oneOf(Message._meta.props.color),
116+
if (onDismiss) onDismiss(e, this.props)
117+
}
177118

178-
/** A message can have different sizes. */
179-
size: PropTypes.oneOf(Message._meta.props.size),
180-
}
119+
render() {
120+
const {
121+
attached,
122+
children,
123+
className,
124+
color,
125+
compact,
126+
content,
127+
error,
128+
floating,
129+
header,
130+
hidden,
131+
icon,
132+
info,
133+
list,
134+
negative,
135+
onDismiss,
136+
positive,
137+
size,
138+
success,
139+
visible,
140+
warning,
141+
} = this.props
142+
143+
const classes = cx(
144+
'ui',
145+
color,
146+
size,
147+
useKeyOnly(compact, 'compact'),
148+
useKeyOnly(error, 'error'),
149+
useKeyOnly(floating, 'floating'),
150+
useKeyOnly(hidden, 'hidden'),
151+
useKeyOnly(icon, 'icon'),
152+
useKeyOnly(info, 'info'),
153+
useKeyOnly(negative, 'negative'),
154+
useKeyOnly(positive, 'positive'),
155+
useKeyOnly(success, 'success'),
156+
useKeyOnly(visible, 'visible'),
157+
useKeyOnly(warning, 'warning'),
158+
useKeyOrValueAndKey(attached, 'attached'),
159+
'message',
160+
className,
161+
)
162+
163+
const dismissIcon = onDismiss && <Icon name='close' onClick={this.handleDismiss} />
164+
const rest = getUnhandledProps(Message, this.props)
165+
const ElementType = getElementType(Message, this.props)
181166

182-
Message.Content = MessageContent
183-
Message.Header = MessageHeader
184-
Message.List = MessageList
185-
Message.Item = MessageItem
167+
if (!_.isNil(children)) {
168+
return (
169+
<ElementType {...rest} className={classes}>
170+
{dismissIcon}
171+
{children}
172+
</ElementType>
173+
)
174+
}
186175

187-
export default Message
176+
return (
177+
<ElementType {...rest} className={classes}>
178+
{dismissIcon}
179+
{Icon.create(icon)}
180+
{(!_.isNil(header) || !_.isNil(content) || !_.isNil(list)) && (
181+
<MessageContent>
182+
{MessageHeader.create(header)}
183+
{MessageList.create(list)}
184+
{createShorthand('p', val => ({ children: val }), content)}
185+
</MessageContent>
186+
)}
187+
</ElementType>
188+
)
189+
}
190+
}

‎src/collections/Message/MessageContent.js

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

11+
/**
12+
* A message can contain a content.
13+
*/
1114
function MessageContent(props) {
1215
const { children, className } = props
1316
const classes = cx('content', className)

‎src/collections/Message/MessageHeader.js

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

55
import {
@@ -10,13 +10,20 @@ import {
1010
META,
1111
} from '../../lib'
1212

13+
/**
14+
* A message can contain a header.
15+
*/
1316
function MessageHeader(props) {
1417
const { children, className, content } = props
1518
const classes = cx('header', className)
1619
const rest = getUnhandledProps(MessageHeader, props)
1720
const ElementType = getElementType(MessageHeader, 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
MessageHeader._meta = {
@@ -32,11 +39,11 @@ MessageHeader.propTypes = {
3239
/** Primary content. */
3340
children: PropTypes.node,
3441

35-
/** Shorthand for primary content. */
36-
content: customPropTypes.itemShorthand,
37-
3842
/** Additional classes. */
3943
className: PropTypes.string,
44+
45+
/** Shorthand for primary content. */
46+
content: customPropTypes.itemShorthand,
4047
}
4148

4249
MessageHeader.create = createShorthandFactory(MessageHeader, val => ({ content: val }))

0 commit comments

Comments
 (0)