Skip to content

Commit 0a9d34f

Browse files
HoonBaekHoonBaek
authored
feat: Make a common Header component (#1078)
[CLNP-2869](https://sendbird.atlassian.net/browse/CLNP-2869) ### ChangeLog & Features * Made a common ui Header component & Applied it to the every module header components
1 parent 8681b0d commit 0a9d34f

File tree

17 files changed

+585
-452
lines changed

17 files changed

+585
-452
lines changed

‎rollup.module-exports.mjs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -182,6 +182,7 @@ export default {
182182
'ui/EmojiReactions': 'src/ui/EmojiReactions/index.tsx',
183183
'ui/FileMessageItemBody': 'src/ui/FileMessageItemBody/index.tsx',
184184
'ui/FileViewer': 'src/ui/FileViewer/index.tsx',
185+
'ui/Header': 'src/ui/Header/index.tsx',
185186
'ui/Icon': 'src/ui/Icon/index.tsx',
186187
'ui/IconButton': 'src/ui/IconButton/index.tsx',
187188
'ui/ImageRenderer': 'src/ui/ImageRenderer/index.tsx',

‎src/modules/ChannelSettings/components/ChannelSettingsUI/ChannelSettingsHeader.tsx‎

Lines changed: 26 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -3,37 +3,41 @@ import React, { MouseEvent } from 'react';
33
import { useLocalization } from '../../../../lib/LocalizationContext';
44
import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
55

6-
import Label, { LabelColors, LabelTypography } from '../../../../ui/Label';
7-
import IconButton from '../../../../ui/IconButton';
8-
import Icon, { IconTypes } from '../../../../ui/Icon';
6+
import { IconTypes } from '../../../../ui/Icon';
7+
import Header, { type HeaderCustomProps } from '../../../../ui/Header';
98

10-
export interface ChannelSettingsHeaderProps {
11-
onCloseClick?: (e: MouseEvent<HTMLButtonElement>) => void;
9+
export interface ChannelSettingsHeaderProps extends HeaderCustomProps {
10+
onCloseClick?: (e: MouseEvent) => void;
1211
}
1312
export const ChannelSettingsHeader = ({
1413
onCloseClick,
14+
// Header custom props
15+
renderLeft,
16+
renderMiddle,
17+
renderRight,
1518
}: ChannelSettingsHeaderProps) => {
1619
const { stringSet } = useLocalization();
1720
const { config } = useSendbirdStateContext();
1821
const { logger } = config;
1922

2023
return (
21-
<div className="sendbird-channel-settings__header">
22-
<Label type={LabelTypography.H_2} color={LabelColors.ONBACKGROUND_1}>
23-
{stringSet.CHANNEL_SETTING__HEADER__TITLE}
24-
</Label>
25-
<div className="sendbird-channel-settings__header-icon">
26-
<IconButton
27-
width="32px"
28-
height="32px"
29-
onClick={(e) => {
30-
logger.info('ChannelSettings: Click close');
31-
onCloseClick(e);
32-
}}
33-
>
34-
<Icon className="sendbird-channel-settings__close-icon" type={IconTypes.CLOSE} height="22px" width="22px" />
35-
</IconButton>
36-
</div>
37-
</div>
24+
<Header
25+
className="sendbird-channel-settings__header"
26+
renderLeft={renderLeft}
27+
renderMiddle={renderMiddle ?? (() => (
28+
<Header.Title title={stringSet.CHANNEL_SETTING__HEADER__TITLE} />
29+
))}
30+
renderRight={renderRight ?? (() => (
31+
<div className="sendbird-channel-settings__header-icon">
32+
<Header.IconButton
33+
type={IconTypes.CLOSE}
34+
onClick={(e) => {
35+
logger.info('ChannelSettings: Click close');
36+
onCloseClick(e);
37+
}}
38+
/>
39+
</div>
40+
))}
41+
/>
3842
);
3943
};

‎src/modules/ChannelSettings/components/ChannelSettingsUI/channel-settings-ui.scss‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,6 @@
1515

1616
.sendbird-channel-settings__header-icon {
1717
cursor: pointer;
18-
position: absolute;
19-
top: 16px;
20-
right: 16px;
2118
.sendbird-channel-settings__close-icon {
2219
path {
2320
@include themed() {
@@ -37,7 +34,9 @@
3734
height: 64px;
3835
min-height: 64px;
3936
position: relative;
40-
padding: 20px 24px;
37+
padding-left: 24px;
38+
// padding-right: 24px; including the Icon's padding-right
39+
padding-right: 20px;
4140
box-sizing: border-box;
4241
@include themed() {
4342
border-bottom: solid 1px t(on-bg-4);

‎src/modules/GroupChannel/components/GroupChannelHeader/GroupChannelHeaderView.tsx‎

Lines changed: 50 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,15 @@ import './index.scss';
22
import React from 'react';
33
import type { GroupChannel } from '@sendbird/chat/groupChannel';
44

5-
import IconButton from '../../../../ui/IconButton';
6-
import Icon, { IconColors, IconTypes } from '../../../../ui/Icon';
7-
import Label, { LabelColors, LabelTypography } from '../../../../ui/Label';
5+
import { IconColors, IconTypes } from '../../../../ui/Icon';
86
import ChannelAvatar from '../../../../ui/ChannelAvatar';
97
import { getChannelTitle } from './utils';
108
import { useMediaQueryContext } from '../../../../lib/MediaQueryContext';
119
import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
1210
import { useLocalization } from '../../../../lib/LocalizationContext';
11+
import Header, { type HeaderCustomProps } from '../../../../ui/Header';
1312

14-
export interface GroupChannelHeaderViewProps {
13+
export interface GroupChannelHeaderViewProps extends HeaderCustomProps {
1514
className?: string;
1615
currentChannel: GroupChannel;
1716
showSearchIcon?: boolean;
@@ -27,6 +26,10 @@ export const GroupChannelHeaderView = ({
2726
onBackClick,
2827
onSearchClick,
2928
onChatHeaderActionClick,
29+
// Header custom props
30+
renderLeft,
31+
renderMiddle,
32+
renderRight,
3033
}: GroupChannelHeaderViewProps) => {
3134
const { config } = useSendbirdStateContext();
3235
const { userId, theme } = config;
@@ -35,90 +38,65 @@ export const GroupChannelHeaderView = ({
3538
const { stringSet } = useLocalization();
3639

3740
const isMuted = currentChannel?.myMutedState === 'muted';
38-
const subTitle = (currentChannel?.members
39-
&& currentChannel?.members?.length !== 2);
41+
const channelTitle = getChannelTitle(currentChannel, userId, stringSet);
4042

4143
return (
42-
<div className={`sendbird-chat-header ${className}`}>
43-
<div className="sendbird-chat-header__left">
44-
{
45-
isMobile && (
46-
<Icon
44+
<Header
45+
className={`sendbird-chat-header ${className}`}
46+
renderLeft={renderLeft ?? (() => (
47+
<>
48+
{isMobile && (
49+
<Header.Icon
4750
className="sendbird-chat-header__icon_back"
4851
onClick={onBackClick}
49-
fillColor={IconColors.PRIMARY}
52+
type={IconTypes.ARROW_LEFT}
53+
color={IconColors.PRIMARY}
5054
width="24px"
5155
height="24px"
52-
type={IconTypes.ARROW_LEFT}
5356
/>
54-
)
55-
}
56-
<ChannelAvatar
57-
theme={theme}
58-
channel={currentChannel}
59-
userId={userId}
60-
height={32}
61-
width={32}
62-
/>
63-
<Label
64-
className="sendbird-chat-header__left__title"
65-
type={LabelTypography.H_2}
66-
color={LabelColors.ONBACKGROUND_1}
67-
>
68-
{getChannelTitle(currentChannel, userId, stringSet)}
69-
</Label>
70-
<Label
71-
className="sendbird-chat-header__left__subtitle"
72-
type={LabelTypography.BODY_1}
73-
color={LabelColors.ONBACKGROUND_2}
74-
>
75-
{subTitle}
76-
</Label>
77-
</div>
78-
<div className="sendbird-chat-header__right">
79-
{
80-
isMuted && (
81-
<Icon
57+
)}
58+
<ChannelAvatar
59+
theme={theme}
60+
channel={currentChannel}
61+
userId={userId}
62+
height={32}
63+
width={32}
64+
/>
65+
</>
66+
))}
67+
renderMiddle={renderMiddle ?? (() => (
68+
<Header.Title title={channelTitle} />
69+
))}
70+
renderRight={renderRight ?? (() => (
71+
<>
72+
{isMuted && (
73+
<Header.Icon
8274
className="sendbird-chat-header__right__mute"
8375
type={IconTypes.NOTIFICATIONS_OFF_FILLED}
84-
fillColor={IconColors.ON_BACKGROUND_2}
76+
color={IconColors.ON_BACKGROUND_2}
8577
width="24px"
8678
height="24px"
8779
/>
88-
)
89-
}
90-
{
91-
(showSearchIcon && !currentChannel?.isEphemeral) && (
92-
<IconButton
80+
)}
81+
{(showSearchIcon && !currentChannel?.isEphemeral) && (
82+
<Header.IconButton
9383
className="sendbird-chat-header__right__search"
94-
width="32px"
95-
height="32px"
9684
onClick={onSearchClick}
97-
>
98-
<Icon
99-
type={IconTypes.SEARCH}
100-
fillColor={IconColors.PRIMARY}
101-
width="24px"
102-
height="24px"
103-
/>
104-
</IconButton>
105-
)
106-
}
107-
<IconButton
108-
className="sendbird-chat-header__right__info"
109-
width="32px"
110-
height="32px"
111-
onClick={onChatHeaderActionClick}
112-
>
113-
<Icon
85+
type={IconTypes.SEARCH}
86+
color={IconColors.PRIMARY}
87+
renderIcon={(props) => <Header.Icon {...props} width="24px" height="24px" />}
88+
/>
89+
)}
90+
<Header.IconButton
91+
className="sendbird-chat-header__right__info"
92+
onClick={onChatHeaderActionClick}
11493
type={IconTypes.INFO}
115-
fillColor={IconColors.PRIMARY}
116-
width="24px"
117-
height="24px"
94+
color={IconColors.PRIMARY}
95+
renderIcon={(props) => <Header.Icon {...props} width="24px" height="24px" />}
11896
/>
119-
</IconButton>
120-
</div>
121-
</div>
97+
</>
98+
))}
99+
/>
122100
);
123101
};
124102

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,20 @@
11
import React from 'react';
2+
3+
import type { HeaderCustomProps } from '../../../../ui/Header';
24
import GroupChannelHeaderView from './GroupChannelHeaderView';
35
import { useGroupChannelContext } from '../../context/GroupChannelProvider';
46

5-
export interface GroupChannelHeaderProps {
7+
export interface GroupChannelHeaderProps extends HeaderCustomProps {
68
className?: string;
79
}
810

9-
export const GroupChannelHeader = ({ className }: GroupChannelHeaderProps) => {
11+
export const GroupChannelHeader = (props: GroupChannelHeaderProps) => {
1012
const context = useGroupChannelContext();
1113

1214
return (
1315
<GroupChannelHeaderView
16+
{...props}
1417
{...context}
15-
className={className}
1618
currentChannel={context.currentChannel}
1719
/>
1820
);

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,10 @@
1212
height: 64px;
1313
min-height: 64px;
1414
width: 320px;
15-
padding: 8px 64px 8px 8px;
15+
16+
padding-left: 8px;
17+
padding-right: 16px;
18+
1619
box-sizing: border-box;
1720
@include themed() {
1821
border-bottom: 1px solid t(on-bg-4);
@@ -31,7 +34,6 @@
3134
.sendbird-channel-header__title {
3235
display: flex;
3336
flex-direction: row;
34-
width: 260px;
3537
height: 48px;
3638
border-radius: 4px;
3739

0 commit comments

Comments
 (0)