1
1
import cx from 'clsx'
2
2
import _ from 'lodash'
3
3
import PropTypes from 'prop-types'
4
- import React , { Component } from 'react'
4
+ import React from 'react'
5
5
6
6
import {
7
7
childrenUtils ,
@@ -12,6 +12,7 @@ import {
12
12
SUI ,
13
13
useKeyOnly ,
14
14
useKeyOrValueAndKey ,
15
+ useEventCallback ,
15
16
} from '../../lib'
16
17
import Icon from '../../elements/Icon'
17
18
import MessageContent from './MessageContent'
@@ -23,86 +24,82 @@ import MessageItem from './MessageItem'
23
24
* A message displays information that explains nearby content.
24
25
* @see Form
25
26
*/
26
- export default class Message extends Component {
27
- handleDismiss = ( e ) => {
28
- const { onDismiss } = this . props
29
-
30
- if ( onDismiss ) onDismiss ( e , this . props )
31
- }
32
-
33
- render ( ) {
34
- const {
35
- attached,
36
- children,
37
- className,
38
- color,
39
- compact,
40
- content,
41
- error,
42
- floating,
43
- header,
44
- hidden,
45
- icon,
46
- info,
47
- list,
48
- negative,
49
- onDismiss,
50
- positive,
51
- size,
52
- success,
53
- visible,
54
- warning,
55
- } = this . props
56
-
57
- const classes = cx (
58
- 'ui' ,
59
- color ,
60
- size ,
61
- useKeyOnly ( compact , 'compact' ) ,
62
- useKeyOnly ( error , 'error' ) ,
63
- useKeyOnly ( floating , 'floating' ) ,
64
- useKeyOnly ( hidden , 'hidden' ) ,
65
- useKeyOnly ( icon , 'icon' ) ,
66
- useKeyOnly ( info , 'info' ) ,
67
- useKeyOnly ( negative , 'negative' ) ,
68
- useKeyOnly ( positive , 'positive' ) ,
69
- useKeyOnly ( success , 'success' ) ,
70
- useKeyOnly ( visible , 'visible' ) ,
71
- useKeyOnly ( warning , 'warning' ) ,
72
- useKeyOrValueAndKey ( attached , 'attached' ) ,
73
- 'message' ,
74
- className ,
75
- )
76
-
77
- const dismissIcon = onDismiss && < Icon name = 'close' onClick = { this . handleDismiss } />
78
- const rest = getUnhandledProps ( Message , this . props )
79
- const ElementType = getElementType ( Message , this . props )
80
-
81
- if ( ! childrenUtils . isNil ( children ) ) {
82
- return (
83
- < ElementType { ...rest } className = { classes } >
84
- { dismissIcon }
85
- { children }
86
- </ ElementType >
87
- )
88
- }
89
-
27
+ const Message = React . forwardRef ( function ( props , ref ) {
28
+ const {
29
+ attached,
30
+ children,
31
+ className,
32
+ color,
33
+ compact,
34
+ content,
35
+ error,
36
+ floating,
37
+ header,
38
+ hidden,
39
+ icon,
40
+ info,
41
+ list,
42
+ negative,
43
+ onDismiss,
44
+ positive,
45
+ size,
46
+ success,
47
+ visible,
48
+ warning,
49
+ } = props
50
+
51
+ const classes = cx (
52
+ 'ui' ,
53
+ color ,
54
+ size ,
55
+ useKeyOnly ( compact , 'compact' ) ,
56
+ useKeyOnly ( error , 'error' ) ,
57
+ useKeyOnly ( floating , 'floating' ) ,
58
+ useKeyOnly ( hidden , 'hidden' ) ,
59
+ useKeyOnly ( icon , 'icon' ) ,
60
+ useKeyOnly ( info , 'info' ) ,
61
+ useKeyOnly ( negative , 'negative' ) ,
62
+ useKeyOnly ( positive , 'positive' ) ,
63
+ useKeyOnly ( success , 'success' ) ,
64
+ useKeyOnly ( visible , 'visible' ) ,
65
+ useKeyOnly ( warning , 'warning' ) ,
66
+ useKeyOrValueAndKey ( attached , 'attached' ) ,
67
+ 'message' ,
68
+ className ,
69
+ )
70
+ const rest = getUnhandledProps ( Message , props )
71
+ const ElementType = getElementType ( Message , props )
72
+
73
+ const handleDismiss = useEventCallback ( ( e ) => {
74
+ _ . invoke ( props , 'onDismiss' , e , props )
75
+ } )
76
+ const dismissIcon = onDismiss && < Icon name = 'close' onClick = { handleDismiss } />
77
+
78
+ if ( ! childrenUtils . isNil ( children ) ) {
90
79
return (
91
- < ElementType { ...rest } className = { classes } >
80
+ < ElementType { ...rest } className = { classes } ref = { ref } >
92
81
{ dismissIcon }
93
- { Icon . create ( icon , { autoGenerateKey : false } ) }
94
- { ( ! _ . isNil ( header ) || ! _ . isNil ( content ) || ! _ . isNil ( list ) ) && (
95
- < MessageContent >
96
- { MessageHeader . create ( header , { autoGenerateKey : false } ) }
97
- { MessageList . create ( list , { autoGenerateKey : false } ) }
98
- { createHTMLParagraph ( content , { autoGenerateKey : false } ) }
99
- </ MessageContent >
100
- ) }
82
+ { children }
101
83
</ ElementType >
102
84
)
103
85
}
104
- }
105
86
87
+ return (
88
+ < ElementType { ...rest } className = { classes } ref = { ref } >
89
+ { dismissIcon }
90
+ { Icon . create ( icon , { autoGenerateKey : false } ) }
91
+ { ( ! _ . isNil ( header ) || ! _ . isNil ( content ) || ! _ . isNil ( list ) ) && (
92
+ < MessageContent >
93
+ { MessageHeader . create ( header , { autoGenerateKey : false } ) }
94
+ { MessageList . create ( list , { autoGenerateKey : false } ) }
95
+ { createHTMLParagraph ( content , { autoGenerateKey : false } ) }
96
+ </ MessageContent >
97
+ ) }
98
+ </ ElementType >
99
+ )
100
+ } )
101
+
102
+ Message . displayName = 'Message'
106
103
Message . propTypes = {
107
104
/** An element type to render as (string or function). */
108
105
as : PropTypes . elementType ,
@@ -178,3 +175,5 @@ Message.Content = MessageContent
178
175
Message . Header = MessageHeader
179
176
Message . List = MessageList
180
177
Message . Item = MessageItem
178
+
179
+ export default Message
0 commit comments