Skip to content

Commit 013c846

Browse files
HoonBaekHoonBaek
authored
fix: Use util function for the component className (#1083)
1 parent b10b12a commit 013c846

File tree

37 files changed

+119
-109
lines changed

37 files changed

+119
-109
lines changed

‎src/hooks/useModal/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useState, useCallback, ReactElement, createContext, useMemo, useContext } from 'react';
22
import { match } from 'ts-pattern';
33

4-
import { noop } from '../../utils/utils';
4+
import { classnames, noop } from '../../utils/utils';
55
import Modal, { type ModalProps } from '../../ui/Modal';
66

77
export type OpenGlobalModalProps = {
@@ -39,7 +39,7 @@ export const GlobalModalProvider = ({ children }: GlobalModalProviderProps) => {
3939
return (
4040
<Modal
4141
{...modalProps}
42-
className={`sendbird-global-modal ${modalProps?.className}`}
42+
className={classnames('sendbird-global-modal', modalProps?.className)}
4343
onClose={() => {
4444
modalProps?.onClose?.();
4545
closeModal();

‎src/modules/App/DesktopLayout.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import ChannelSettings from '../ChannelSettings';
1212
import MessageSearchPannel from '../MessageSearch';
1313
import Thread from '../Thread';
1414
import { SendableMessageType } from '../../utils';
15+
import { classnames } from '../../utils/utils';
1516

1617
export const DesktopLayout: React.FC<DesktopLayoutProps> = (props: DesktopLayoutProps) => {
1718
const {
@@ -113,11 +114,11 @@ export const DesktopLayout: React.FC<DesktopLayoutProps> = (props: DesktopLayout
113114
{enableLegacyChannelModules ? <ChannelList {...channelListProps} /> : <GroupChannelList {...channelListProps} />}
114115
</div>
115116
<div
116-
className={`
117-
${showSettings ? 'sendbird-app__conversation--settings-open' : ''}
118-
${showSearch ? 'sendbird-app__conversation--search-open' : ''}
119-
sendbird-app__conversation-wrap
120-
`}
117+
className={classnames(
118+
'sendbird-app__conversation-wrap',
119+
showSettings && 'sendbird-app__conversation--settings-open',
120+
showSearch && 'sendbird-app__conversation--search-open',
121+
)}
121122
>
122123
{enableLegacyChannelModules ? <Channel {...channelProps} /> : <GroupChannel {...channelProps} />}
123124
</div>

‎src/modules/GroupChannel/components/FrozenNotification/index.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import React, { useContext } from 'react';
33

44
import { LocalizationContext } from '../../../../lib/LocalizationContext';
55
import Label, { LabelTypography } from '../../../../ui/Label';
6+
import { classnames } from '../../../../utils/utils';
67

78
export interface FrozenNotificationProps {
89
className?: string;
@@ -13,7 +14,7 @@ export const FrozenNotification = ({
1314
}: FrozenNotificationProps): React.ReactElement => {
1415
const { stringSet } = useContext(LocalizationContext);
1516
return (
16-
<div className={`sendbird-notification sendbird-notification--frozen ${className}`}>
17+
<div className={classnames('sendbird-notification', 'sendbird-notification--frozen', className)}>
1718
<Label
1819
className="sendbird-notification__text"
1920
type={LabelTypography.CAPTION_2}

‎src/modules/GroupChannel/components/MessageInputWrapper/MessageInputWrapperView.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -146,7 +146,7 @@ export const MessageInputWrapperView = React.forwardRef((
146146
}
147147
// other conditions
148148
return (
149-
<div className={`sendbird-message-input-wrapper${showVoiceMessageInput ? '--voice-message' : ''}`}>
149+
<div className={showVoiceMessageInput ? 'sendbird-message-input-wrapper--voice-message' : 'sendbird-message-input-wrapper'}>
150150
{showSuggestedMentionList && (
151151
<SuggestedMentionList
152152
currentChannel={currentChannel}

‎src/modules/GroupChannel/components/SuggestedMentionList/SuggestedUserMentionItem.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import Avatar from '../../../../ui/Avatar';
66
import Label, { LabelTypography, LabelColors } from '../../../../ui/Label';
77
import { LocalizationContext } from '../../../../lib/LocalizationContext';
88
import uuidv4 from '../../../../utils/uuid';
9+
import { classnames } from '../../../../utils/utils';
910

1011
type MentionItemUIEvent = {
1112
event: any,
@@ -64,7 +65,7 @@ function SuggestedUserMentionItem(props: SuggestedUserMentionItemProps): JSX.Ele
6465
}
6566
return (
6667
<div
67-
className={`sendbird-mention-suggest-list__user-item ${isFocused ? 'focused' : ''}`}
68+
className={classnames('sendbird-mention-suggest-list__user-item', isFocused && 'focused')}
6869
onClick={(event) => onClick?.({ event, member: (member as Member), itemRef: scrollRef })}
6970
onMouseOver={(event) => onMouseOver?.({ event, member: (member as Member), itemRef: scrollRef })}
7071
onMouseMove={(event) => onMouseMove?.({ event, member: (member as Member), itemRef: scrollRef })}

‎src/modules/GroupChannel/components/UnreadCount/index.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { LocalizationContext } from '../../../../lib/LocalizationContext';
55
import Label, { LabelTypography, LabelColors } from '../../../../ui/Label';
66
import Icon, { IconTypes, IconColors } from '../../../../ui/Icon';
77
import format from 'date-fns/format';
8+
import { classnames } from '../../../../utils/utils';
89

910
export interface UnreadCountProps {
1011
className?: string;
@@ -37,7 +38,7 @@ export const UnreadCount: React.FC<UnreadCountProps> = ({
3738

3839
return (
3940
<div
40-
className={`sendbird-notification${count < 1 ? '--hide' : ''} ${className}`}
41+
className={classnames(count < 1 ? 'sendbird-notification--hide' : 'sendbird-notification', className)}
4142
onClick={onClick}
4243
>
4344
<Label className="sendbird-notification__text" color={LabelColors.ONCONTENT_1} type={LabelTypography.CAPTION_2}>

‎src/modules/GroupChannelList/components/GroupChannelListHeader/index.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { useLocalization } from '../../../../lib/LocalizationContext';
66
import Avatar from '../../../../ui/Avatar';
77
import Label, { LabelColors, LabelTypography } from '../../../../ui/Label';
88
import Header, { HeaderCustomProps } from '../../../../ui/Header';
9+
import { classnames } from '../../../../utils/utils';
910

1011
export interface GroupChannelListHeaderProps extends HeaderCustomProps {
1112
/** @deprecated Use the props `renderMiddle` instead */
@@ -33,7 +34,7 @@ export const GroupChannelListHeader = ({
3334

3435
return (
3536
<Header
36-
className={`sendbird-channel-header ${allowProfileEdit ? 'sendbird-channel-header--allow-edit' : ''}`}
37+
className={classnames('sendbird-channel-header', allowProfileEdit && 'sendbird-channel-header--allow-edit')}
3738
renderLeft={renderLeft}
3839
renderMiddle={() => (
3940
renderProfile?.() ?? (

‎src/modules/MessageSearch/components/MessageSearchUI/index.tsx‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,6 @@ import PlaceHolder, { PlaceHolderTypes } from '../../../../ui/PlaceHolder';
1010
import MessageSearchFileItem from '../../../../ui/MessageSearchFileItem';
1111
import { ClientSentMessages } from '../../../../types';
1212

13-
const COMPONENT_CLASS_NAME = 'sendbird-message-search';
14-
1513
export interface MessageSearchUIProps {
1614
renderPlaceHolderError?: (props: void) => React.ReactElement;
1715
renderPlaceHolderLoading?: (props: void) => React.ReactElement;
@@ -88,7 +86,7 @@ export const MessageSearchUI: React.FC<MessageSearchUIProps> = ({
8886

8987
if (isInvalid && searchString && requestString) {
9088
return renderPlaceHolderError?.() || (
91-
<div className={COMPONENT_CLASS_NAME}>
89+
<div className="sendbird-message-search">
9290
<PlaceHolder
9391
type={PlaceHolderTypes.WRONG}
9492
retryToConnect={handleRetryToConnect}
@@ -99,15 +97,15 @@ export const MessageSearchUI: React.FC<MessageSearchUIProps> = ({
9997

10098
if (loading && searchString && requestString) {
10199
return renderPlaceHolderLoading?.() || (
102-
<div className={COMPONENT_CLASS_NAME}>
100+
<div className="sendbird-message-search">
103101
<PlaceHolder type={PlaceHolderTypes.SEARCHING} />
104102
</div>
105103
);
106104
}
107105

108106
if (!searchString) {
109107
return renderPlaceHolderNoString?.() || (
110-
<div className={COMPONENT_CLASS_NAME}>
108+
<div className="sendbird-message-search">
111109
<PlaceHolder
112110
type={PlaceHolderTypes.SEARCH_IN}
113111
searchInString={getChannelName()}
@@ -118,7 +116,7 @@ export const MessageSearchUI: React.FC<MessageSearchUIProps> = ({
118116

119117
return (
120118
<div
121-
className={COMPONENT_CLASS_NAME}
119+
className="sendbird-message-search"
122120
onScroll={handleOnScroll}
123121
ref={scrollRef}
124122
>
@@ -132,7 +130,7 @@ export const MessageSearchUI: React.FC<MessageSearchUIProps> = ({
132130
if (message.messageType === 'file') {
133131
return (
134132
<MessageSearchFileItem
135-
className={`${COMPONENT_CLASS_NAME}__message-search-item`}
133+
className="sendbird-message-search__message-search-item"
136134
message={message as FileMessage}
137135
key={message.messageId}
138136
selected={(selectedMessageId === message.messageId)}
@@ -145,7 +143,7 @@ export const MessageSearchUI: React.FC<MessageSearchUIProps> = ({
145143
}
146144
return (
147145
<MessageSearchItem
148-
className={`${COMPONENT_CLASS_NAME}__message-search-item`}
146+
className="sendbird-message-search__message-search-item"
149147
message={message as UserMessage}
150148
key={message.messageId}
151149
selected={(selectedMessageId === message.messageId)}

‎src/modules/MessageSearch/index.tsx‎

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,6 @@ export interface MessageSearchPannelProps extends MessageSearchUIProps, MessageS
1212
onCloseClick?: () => void;
1313
}
1414

15-
const COMPONENT_CLASS_NAME = 'sendbird-message-search-pannel';
16-
1715
function MessageSearchPannel(props: MessageSearchPannelProps): JSX.Element {
1816
const {
1917
channelUrl,
@@ -59,40 +57,40 @@ function MessageSearchPannel(props: MessageSearchPannelProps): JSX.Element {
5957
};
6058

6159
return (
62-
<div className={COMPONENT_CLASS_NAME}>
60+
<div className="sendbird-message-search-pannel">
6361
<Header
64-
className={`${COMPONENT_CLASS_NAME}__header`}
62+
className="sendbird-message-search-pannel__header"
6563
renderMiddle={() => (
6664
<Header.Title title={stringSet.SEARCH_IN_CHANNEL} />
6765
)}
6866
renderRight={() => (
6967
<Header.IconButton
70-
className={`${COMPONENT_CLASS_NAME}__header__close-button`}
68+
className="sendbird-message-search-pannel__header__close-button"
7169
onClick={onCloseClick}
7270
type={IconTypes.CLOSE}
7371
color={IconColors.ON_BACKGROUND_1}
7472
/>
7573
)}
7674
/>
77-
<div className={`${COMPONENT_CLASS_NAME}__input`}>
78-
<div className={`${COMPONENT_CLASS_NAME}__input__container`}>
75+
<div className="sendbird-message-search-pannel__input">
76+
<div className="sendbird-message-search-pannel__input__container">
7977
<Icon
80-
className={`${COMPONENT_CLASS_NAME}__input__container__search-icon`}
78+
className="sendbird-message-search-pannel__input__container__search-icon"
8179
type={IconTypes.SEARCH}
8280
fillColor={IconColors.ON_BACKGROUND_3}
8381
width="24px"
8482
height="24px"
8583
/>
8684
<input
87-
className={`${COMPONENT_CLASS_NAME}__input__container__input-area`}
85+
className="sendbird-message-search-pannel__input__container__input-area"
8886
placeholder={stringSet.SEARCH}
8987
value={inputString}
9088
onChange={handleOnChangeInputString}
9189
/>
9290
{
9391
inputString && loading && (
9492
<Loader
95-
className={`${COMPONENT_CLASS_NAME}__input__container__spinner`}
93+
className="sendbird-message-search-pannel__input__container__spinner"
9694
width="20px"
9795
height="20px"
9896
>
@@ -108,7 +106,7 @@ function MessageSearchPannel(props: MessageSearchPannelProps): JSX.Element {
108106
{
109107
!loading && inputString && (
110108
<Icon
111-
className={`${COMPONENT_CLASS_NAME}__input__container__reset-input-button`}
109+
className="sendbird-message-search-pannel__input__container__reset-input-button"
112110
type={IconTypes.REMOVE}
113111
fillColor={IconColors.ON_BACKGROUND_3}
114112
width="20px"
@@ -119,7 +117,7 @@ function MessageSearchPannel(props: MessageSearchPannelProps): JSX.Element {
119117
}
120118
</div>
121119
</div>
122-
<div className={`${COMPONENT_CLASS_NAME}__message-search`}>
120+
<div className="sendbird-message-search-pannel__message-search">
123121
<MessageSearchProvider
124122
channelUrl={channelUrl}
125123
searchString={searchString}

‎src/modules/OpenChannelApp/components/OpenChannelPreview.tsx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { Freeze } from '../assets/Icons';
77
import Avatar from '../../../ui/Avatar';
88
import Icon, { IconTypes, IconColors } from '../../../ui/Icon';
99
import { OpenChannel } from '@sendbird/chat/openChannel';
10+
import { classnames } from '../../../utils/utils';
1011

1112
interface Props {
1213
channel: OpenChannel;
@@ -42,11 +43,7 @@ export default function OpenChannelPreview({
4243
}, [isStreaming]);
4344
return (
4445
<div
45-
className={`
46-
channel-preview
47-
${selected ? 'channel-preview--selected' : null}
48-
${isStreaming ? 'channel-preview--streaming' : null}
49-
`}
46+
className={classnames('channel-preview', selected && 'channel-preview--selected', isStreaming && 'channel-preview--streaming')}
5047
onClick={onClick}
5148
>
5249
<div className="channel-preview__selection" />

0 commit comments

Comments
 (0)