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
sendbird · May 2, 2024 · 0a9d34f · 0a9d34f
1 parent 8681b0d
commit 0a9d34f
Show file tree

Hide file tree

Showing 17 changed files with 585 additions and 452 deletions.
diff --git a/rollup.module-exports.mjs b/rollup.module-exports.mjs
@@ -182,6 +182,7 @@ export default {
   'ui/EmojiReactions': 'src/ui/EmojiReactions/index.tsx',
   'ui/FileMessageItemBody': 'src/ui/FileMessageItemBody/index.tsx',
   'ui/FileViewer': 'src/ui/FileViewer/index.tsx',
+  'ui/Header': 'src/ui/Header/index.tsx',
   'ui/Icon': 'src/ui/Icon/index.tsx',
   'ui/IconButton': 'src/ui/IconButton/index.tsx',
   'ui/ImageRenderer': 'src/ui/ImageRenderer/index.tsx',

diff --git a/src/modules/ChannelSettings/components/ChannelSettingsUI/ChannelSettingsHeader.tsx b/src/modules/ChannelSettings/components/ChannelSettingsUI/ChannelSettingsHeader.tsx
@@ -3,37 +3,41 @@ import React, { MouseEvent } from 'react';
 import { useLocalization } from '../../../../lib/LocalizationContext';
 import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
 
-import Label, { LabelColors, LabelTypography } from '../../../../ui/Label';
-import IconButton from '../../../../ui/IconButton';
-import Icon, { IconTypes } from '../../../../ui/Icon';
+import { IconTypes } from '../../../../ui/Icon';
+import Header, { type HeaderCustomProps } from '../../../../ui/Header';
 
-export interface ChannelSettingsHeaderProps {
-  onCloseClick?: (e: MouseEvent<HTMLButtonElement>) => void;
+export interface ChannelSettingsHeaderProps extends HeaderCustomProps {
+  onCloseClick?: (e: MouseEvent) => void;
 }
 export const ChannelSettingsHeader = ({
   onCloseClick,
+  // Header custom props
+  renderLeft,
+  renderMiddle,
+  renderRight,
 }: ChannelSettingsHeaderProps) => {
   const { stringSet } = useLocalization();
   const { config } = useSendbirdStateContext();
   const { logger } = config;
 
   return (
-    <div className="sendbird-channel-settings__header">
-      <Label type={LabelTypography.H_2} color={LabelColors.ONBACKGROUND_1}>
-        {stringSet.CHANNEL_SETTING__HEADER__TITLE}
-      </Label>
-      <div className="sendbird-channel-settings__header-icon">
-        <IconButton
-          width="32px"
-          height="32px"
-          onClick={(e) => {
-            logger.info('ChannelSettings: Click close');
-            onCloseClick(e);
-          }}
-        >
-          <Icon className="sendbird-channel-settings__close-icon" type={IconTypes.CLOSE} height="22px" width="22px" />
-        </IconButton>
-      </div>
-    </div>
+    <Header
+      className="sendbird-channel-settings__header"
+      renderLeft={renderLeft}
+      renderMiddle={renderMiddle ?? (() => (
+        <Header.Title title={stringSet.CHANNEL_SETTING__HEADER__TITLE} />
+      ))}
+      renderRight={renderRight ?? (() => (
+        <div className="sendbird-channel-settings__header-icon">
+          <Header.IconButton
+            type={IconTypes.CLOSE}
+            onClick={(e) => {
+              logger.info('ChannelSettings: Click close');
+              onCloseClick(e);
+            }}
+          />
+        </div>
+      ))}
+    />
   );
 };
diff --git a/src/modules/ChannelSettings/components/ChannelSettingsUI/channel-settings-ui.scss b/src/modules/ChannelSettings/components/ChannelSettingsUI/channel-settings-ui.scss
@@ -15,9 +15,6 @@
 
   .sendbird-channel-settings__header-icon {
     cursor: pointer;
-    position: absolute;
-    top: 16px;
-    right: 16px;
     .sendbird-channel-settings__close-icon {
       path {
         @include themed() {
@@ -37,7 +34,9 @@
     height: 64px;
     min-height: 64px;
     position: relative;
-    padding: 20px 24px;
+    padding-left: 24px;
+    // padding-right: 24px; including the Icon's padding-right
+    padding-right: 20px;
     box-sizing: border-box;
     @include themed() {
       border-bottom: solid 1px t(on-bg-4);

diff --git a/src/modules/GroupChannel/components/GroupChannelHeader/GroupChannelHeaderView.tsx b/src/modules/GroupChannel/components/GroupChannelHeader/GroupChannelHeaderView.tsx
@@ -2,16 +2,15 @@ import './index.scss';
 import React from 'react';
 import type { GroupChannel } from '@sendbird/chat/groupChannel';
 
-import IconButton from '../../../../ui/IconButton';
-import Icon, { IconColors, IconTypes } from '../../../../ui/Icon';
-import Label, { LabelColors, LabelTypography } from '../../../../ui/Label';
+import { IconColors, IconTypes } from '../../../../ui/Icon';
 import ChannelAvatar from '../../../../ui/ChannelAvatar';
 import { getChannelTitle } from './utils';
 import { useMediaQueryContext } from '../../../../lib/MediaQueryContext';
 import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
 import { useLocalization } from '../../../../lib/LocalizationContext';
+import Header, { type HeaderCustomProps } from '../../../../ui/Header';
 
-export interface GroupChannelHeaderViewProps {
+export interface GroupChannelHeaderViewProps extends HeaderCustomProps {
   className?: string;
   currentChannel: GroupChannel;
   showSearchIcon?: boolean;
@@ -27,6 +26,10 @@ export const GroupChannelHeaderView = ({
   onBackClick,
   onSearchClick,
   onChatHeaderActionClick,
+  // Header custom props
+  renderLeft,
+  renderMiddle,
+  renderRight,
 }: GroupChannelHeaderViewProps) => {
   const { config } = useSendbirdStateContext();
   const { userId, theme } = config;
@@ -35,90 +38,65 @@ export const GroupChannelHeaderView = ({
   const { stringSet } = useLocalization();
 
   const isMuted = currentChannel?.myMutedState === 'muted';
-  const subTitle = (currentChannel?.members
-    && currentChannel?.members?.length !== 2);
+  const channelTitle = getChannelTitle(currentChannel, userId, stringSet);
 
   return (
-    <div className={`sendbird-chat-header ${className}`}>
-      <div className="sendbird-chat-header__left">
-        {
-          isMobile && (
-            <Icon
+    <Header
+      className={`sendbird-chat-header ${className}`}
+      renderLeft={renderLeft ?? (() => (
+        <>
+          {isMobile && (
+            <Header.Icon
               className="sendbird-chat-header__icon_back"
               onClick={onBackClick}
-              fillColor={IconColors.PRIMARY}
+              type={IconTypes.ARROW_LEFT}
+              color={IconColors.PRIMARY}
               width="24px"
               height="24px"
-              type={IconTypes.ARROW_LEFT}
             />
-          )
-        }
-        <ChannelAvatar
-          theme={theme}
-          channel={currentChannel}
-          userId={userId}
-          height={32}
-          width={32}
-        />
-        <Label
-          className="sendbird-chat-header__left__title"
-          type={LabelTypography.H_2}
-          color={LabelColors.ONBACKGROUND_1}
-        >
-          {getChannelTitle(currentChannel, userId, stringSet)}
-        </Label>
-        <Label
-          className="sendbird-chat-header__left__subtitle"
-          type={LabelTypography.BODY_1}
-          color={LabelColors.ONBACKGROUND_2}
-        >
-          {subTitle}
-        </Label>
-      </div>
-      <div className="sendbird-chat-header__right">
-        {
-          isMuted && (
-            <Icon
+          )}
+          <ChannelAvatar
+            theme={theme}
+            channel={currentChannel}
+            userId={userId}
+            height={32}
+            width={32}
+          />
+        </>
+      ))}
+      renderMiddle={renderMiddle ?? (() => (
+        <Header.Title title={channelTitle} />
+      ))}
+      renderRight={renderRight ?? (() => (
+        <>
+          {isMuted && (
+            <Header.Icon
               className="sendbird-chat-header__right__mute"
               type={IconTypes.NOTIFICATIONS_OFF_FILLED}
-              fillColor={IconColors.ON_BACKGROUND_2}
+              color={IconColors.ON_BACKGROUND_2}
               width="24px"
               height="24px"
             />
-          )
-        }
-        {
-          (showSearchIcon && !currentChannel?.isEphemeral) && (
-            <IconButton
+          )}
+          {(showSearchIcon && !currentChannel?.isEphemeral) && (
+            <Header.IconButton
               className="sendbird-chat-header__right__search"
-              width="32px"
-              height="32px"
               onClick={onSearchClick}
-            >
-              <Icon
-                type={IconTypes.SEARCH}
-                fillColor={IconColors.PRIMARY}
-                width="24px"
-                height="24px"
-              />
-            </IconButton>
-          )
-        }
-        <IconButton
-          className="sendbird-chat-header__right__info"
-          width="32px"
-          height="32px"
-          onClick={onChatHeaderActionClick}
-        >
-          <Icon
+              type={IconTypes.SEARCH}
+              color={IconColors.PRIMARY}
+              renderIcon={(props) => <Header.Icon {...props} width="24px" height="24px" />}
+            />
+          )}
+          <Header.IconButton
+            className="sendbird-chat-header__right__info"
+            onClick={onChatHeaderActionClick}
             type={IconTypes.INFO}
-            fillColor={IconColors.PRIMARY}
-            width="24px"
-            height="24px"
+            color={IconColors.PRIMARY}
+            renderIcon={(props) => <Header.Icon {...props} width="24px" height="24px" />}
           />
-        </IconButton>
-      </div>
-    </div>
+        </>
+      ))}
+    />
   );
 };
 

diff --git a/src/modules/GroupChannel/components/GroupChannelHeader/index.tsx b/src/modules/GroupChannel/components/GroupChannelHeader/index.tsx
@@ -1,18 +1,20 @@
 import React from 'react';
+
+import type { HeaderCustomProps } from '../../../../ui/Header';
 import GroupChannelHeaderView from './GroupChannelHeaderView';
 import { useGroupChannelContext } from '../../context/GroupChannelProvider';
 
-export interface GroupChannelHeaderProps {
+export interface GroupChannelHeaderProps extends HeaderCustomProps {
   className?: string;
 }
 
-export const GroupChannelHeader = ({ className }: GroupChannelHeaderProps) => {
+export const GroupChannelHeader = (props: GroupChannelHeaderProps) => {
   const context = useGroupChannelContext();
 
   return (
     <GroupChannelHeaderView
+      {...props}
       {...context}
-      className={className}
       currentChannel={context.currentChannel}
     />
   );

diff --git a/src/modules/GroupChannelList/components/GroupChannelListHeader/index.scss b/src/modules/GroupChannelList/components/GroupChannelListHeader/index.scss
@@ -12,7 +12,10 @@
   height: 64px;
   min-height: 64px;
   width: 320px;
-  padding: 8px 64px 8px 8px;
+
+  padding-left: 8px;
+  padding-right: 16px;
+
   box-sizing: border-box;
   @include themed() {
     border-bottom: 1px solid t(on-bg-4);
@@ -31,7 +34,6 @@
   .sendbird-channel-header__title {
     display: flex;
     flex-direction: row;
-    width: 260px;
     height: 48px;
     border-radius: 4px;