@@ -10,17 +10,17 @@ import './Messages.styles.scss';
1010
1111import { prependClassName } from '../../helpers/prependClassName' ;
1212import { Tag } from '../Tag' ;
13- import { Divider } from './Divider ' ;
14- import { Metrics } from './Metrics ' ;
15- import { Toolbox } from './Toolbox ' ;
13+ import { MessageDivider } from './MessageDivider ' ;
14+ import { MessageMetrics } from './MessageMetrics ' ;
15+ import { MessageToolbox } from './MessageToolbox ' ;
1616
17- const Container : FC = function Container ( props ) {
17+ export const MessageContainer : FC = function MessageContainer ( props ) {
1818 return (
1919 < div className = 'rcx-box rcx-box--full rcx-message-container' { ...props } />
2020 ) ;
2121} ;
2222
23- const ContainerFixed : FC = function Container ( props ) {
23+ export const MessageContainerFixed : FC = function MessageContainerFixed ( props ) {
2424 return (
2525 < div
2626 className = 'rcx-box rcx-box--full rcx-message-container rcx-message-container--fixed'
@@ -42,7 +42,7 @@ export const MessageLeftContainer = (
4242 />
4343) ;
4444
45- const Header : FC = function Header ( { children } ) {
45+ export const MessageHeader : FC = function MessageHeader ( { children } ) {
4646 return (
4747 < div className = 'rcx-box rcx-box--full rcx-message-header' >
4848 < div className = 'rcx-box rcx-box--full rcx-message-header__wrapper' >
@@ -56,7 +56,7 @@ type MessageBodyProps = AllHTMLAttributes<HTMLDivElement> & {
5656 clamp ?: 2 | 3 | 4 ;
5757} ;
5858
59- const MessageBody = ( {
59+ export const MessageBody = ( {
6060 clamp,
6161 className,
6262 ...props
@@ -99,61 +99,69 @@ type MessageProps = AllHTMLAttributes<HTMLDivElement> & {
9999 sequential ?: boolean ;
100100} ;
101101
102- const Message = forwardRef < HTMLDivElement , MessageProps > ( function Message (
103- {
104- // is: Tag = 'div',
105- className,
106- clickable,
107- sequential,
108- ...props
109- } ,
110- ref
111- ) {
112- return (
113- < div
114- ref = { ref }
115- className = { prependClassName (
116- className ,
117- [
118- 'rcx-message' ,
119- ( clickable || props . onClick ) && 'rcx-message--clickable' ,
120- sequential && 'rcx-message--sequential' ,
121- ]
122- . filter ( Boolean )
123- . join ( ' ' )
124- ) }
125- { ...props }
126- />
127- ) ;
128- } ) ;
129-
130- const Timestamp : FC < { children : string } > = function Timestamp ( props ) {
131- return (
132- < span
133- className = 'rcx-box rcx-box--full rcx-message-header__time'
134- { ...props }
135- />
136- ) ;
137- } ;
102+ export const Message = forwardRef < HTMLDivElement , MessageProps > (
103+ function Message (
104+ {
105+ // is: Tag = 'div',
106+ className,
107+ clickable,
108+ sequential,
109+ ...props
110+ } ,
111+ ref
112+ ) {
113+ return (
114+ < div
115+ ref = { ref }
116+ className = { prependClassName (
117+ className ,
118+ [
119+ 'rcx-message' ,
120+ ( clickable || props . onClick ) && 'rcx-message--clickable' ,
121+ sequential && 'rcx-message--sequential' ,
122+ ]
123+ . filter ( Boolean )
124+ . join ( ' ' )
125+ ) }
126+ { ...props }
127+ />
128+ ) ;
129+ }
130+ ) ;
138131
139- const Name : FC < { children : string } > = function Name ( props ) {
132+ export const MessageTimestamp : FC < { children : string } > =
133+ function MessageTimestamp ( props ) {
134+ return (
135+ < span
136+ className = 'rcx-box rcx-box--full rcx-message-header__time'
137+ { ...props }
138+ />
139+ ) ;
140+ } ;
141+
142+ export const MessageName : FC < { children : string } > = function MessageName (
143+ props
144+ ) {
140145 return (
141146 < span
142147 className = 'rcx-box rcx-box--full rcx-message-header__name'
143148 { ...props }
144149 />
145150 ) ;
146151} ;
147- const Username : FC < { children : string } > = function Name ( props ) {
148- return (
149- < span
150- className = 'rcx-box rcx-box--full rcx-message-header__username'
151- { ...props }
152- />
153- ) ;
154- } ;
155-
156- const Role : FC < { children : string } > = function Role ( props ) {
152+ export const MessageUsername : FC < { children : string } > =
153+ function MessageUsername ( props ) {
154+ return (
155+ < span
156+ className = 'rcx-box rcx-box--full rcx-message-header__username'
157+ { ...props }
158+ />
159+ ) ;
160+ } ;
161+
162+ export const MessageRole : FC < { children : string } > = function MessageRole (
163+ props
164+ ) {
157165 return (
158166 < Tag
159167 onClick = { undefined }
@@ -165,7 +173,7 @@ const Role: FC<{ children: string }> = function Role(props) {
165173 ) ;
166174} ;
167175
168- const Roles : FC = function Role ( props ) {
176+ export const MessageRoles : FC = function MessageRoles ( props ) {
169177 return (
170178 < div
171179 className = 'rcx-box rcx-box--full rcx-message-header__roles'
@@ -175,18 +183,18 @@ const Roles: FC = function Role(props) {
175183} ;
176184
177185export default Object . assign ( Message , {
178- Metrics,
179- Toolbox,
180- Container,
181- ContainerFixed,
186+ Metrics : MessageMetrics ,
187+ Toolbox : MessageToolbox ,
188+ Container : MessageContainer ,
189+ ContainerFixed : MessageContainerFixed ,
182190 LeftContainer : MessageLeftContainer ,
183- Header,
191+ Header : MessageHeader ,
184192 Body : MessageBody ,
185193 Block : MessageBlock ,
186- Timestamp,
187- Name,
188- Username,
189- Roles,
190- Role,
191- Divider,
194+ Timestamp : MessageTimestamp ,
195+ Name : MessageName ,
196+ Username : MessageUsername ,
197+ Roles : MessageRoles ,
198+ Role : MessageRole ,
199+ Divider : MessageDivider ,
192200} ) ;
0 commit comments