Skip to content

fix: Include renderIconButton into the renderHeader range #375

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Dec 7, 2022
Merged

fix: Include renderIconButton into the renderHeader range #375

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
688f803
Include renderIconButton into the renderHeader range
HoonBaek Dec 6, 2022
8fe494a
Apply renderHeader to replace the ChannelListHeader
HoonBaek Dec 7, 2022
15582f5
Rename renderHeader to renderTitle, but keep renderHeader for backward
HoonBaek Dec 7, 2022
aae5078
Add renderTitle props to the type definition files
HoonBaek Dec 7, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions scripts/index_d_ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -369,6 +369,7 @@ declare module "SendbirdUIKitGlobal" {

export interface ChannelListHeaderInterface {
renderHeader?: (props: void) => React.ReactNode | React.ReactElement;
renderTitle?: (props: void) => React.ReactNode | React.ReactElement;
renderIconButton?: (props: void) => React.ReactNode | React.ReactElement;
onEdit?: (props: void) => void;
allowProfileEdit?: boolean;
Expand Down
1 change: 1 addition & 0 deletions src/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -377,6 +377,7 @@ interface ChannelListProps extends ChannelListProviderInterface, ChannelListUIPr

interface ChannelListHeaderInterface {
renderHeader?: (props: void) => React.ReactElement;
renderTitle?: (props: void) => React.ReactElement;
renderIconButton?: (props: void) => React.ReactElement;
onEdit?: (props: void) => void;
allowProfileEdit?: boolean;
Expand Down
87 changes: 47 additions & 40 deletions src/smart-components/ChannelList/components/ChannelListHeader/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,28 +3,37 @@ import React, { useContext } from 'react';
import { LocalizationContext } from '../../../../lib/LocalizationContext';
import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
import Label, { LabelTypography, LabelColors } from '../../../../ui/Label';
import IconButton from '../../../../ui/IconButton';

import './index.scss';
import Avatar from '../../../../ui/Avatar';

interface ChannelListHeaderInterface {
renderHeader?: (props: void) => React.ReactElement;
renderTitle?: () => React.ReactElement;
Copy link
Contributor

@sravan-s sravan-s Dec 7, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

add type definition, and in the file you can comment deprecation

renderIconButton?: (props: void) => React.ReactElement;
onEdit?: (props: void) => void;
allowProfileEdit?: boolean;
}

const ChannelListHeader : React.FC<ChannelListHeaderInterface> = ({
const ChannelListHeader: React.FC<ChannelListHeaderInterface> = ({
renderHeader,
renderTitle,
renderIconButton,
onEdit,
allowProfileEdit,
}: ChannelListHeaderInterface) => {
const sbState = useSendbirdStateContext();
const { user } = sbState?.stores?.userStore;
const { stores, config } = useSendbirdStateContext?.();
const { user } = stores?.userStore;
const { logger } = config;

const { stringSet } = useContext(LocalizationContext);

if (renderHeader) {
logger?.warning('Recomend to use "renderTitle" instead of "renderHeader". It will be deprecated.');
}
// renderTitle should have higher priority
const titleRenderer = renderHeader || renderTitle;

return (
<div
className={[
Expand All @@ -33,45 +42,43 @@ const ChannelListHeader : React.FC<ChannelListHeaderInterface> = ({
].join(' ')}
>
{
renderHeader
? renderHeader()
: (
<div
className="sendbird-channel-header__title"
role="button"
onClick={() => { onEdit() }}
onKeyDown={() => { onEdit() }}
tabIndex={0}
>
<div className="sendbird-channel-header__title__left">
<Avatar
width="32px"
height="32px"
src={user.profileUrl}
alt={user.nickname}
/>
</div>
<div className="sendbird-channel-header__title__right">
<Label
className="sendbird-channel-header__title__right__name"
type={LabelTypography.SUBTITLE_2}
color={LabelColors.ONBACKGROUND_1}
>
{user.nickname || stringSet.NO_NAME}
</Label>
<Label
className="sendbird-channel-header__title__right__user-id"
type={LabelTypography.BODY_2}
color={LabelColors.ONBACKGROUND_2}
>
{user.userId}
</Label>
</div>
titleRenderer?.() || (
<div
className="sendbird-channel-header__title"
role="button"
onClick={() => { onEdit?.() }}
onKeyDown={() => { onEdit?.() }}
tabIndex={0}
>
<div className="sendbird-channel-header__title__left">
<Avatar
width="32px"
height="32px"
src={user.profileUrl}
alt={user.nickname}
/>
</div>
<div className="sendbird-channel-header__title__right">
<Label
className="sendbird-channel-header__title__right__name"
type={LabelTypography.SUBTITLE_2}
color={LabelColors.ONBACKGROUND_1}
>
{user.nickname || stringSet.NO_NAME}
</Label>
<Label
className="sendbird-channel-header__title__right__user-id"
type={LabelTypography.BODY_2}
color={LabelColors.ONBACKGROUND_2}
>
{user.userId}
</Label>
</div>
)
</div>
)
}
<div className="sendbird-channel-header__right-icon">
{renderIconButton() || <IconButton />}
{renderIconButton?.()}
</div>
</div>
);
Expand Down
27 changes: 15 additions & 12 deletions src/smart-components/ChannelList/components/ChannelListUI/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,18 +99,21 @@ const ChannelListUI: React.FC<ChannelListUIProps> = (props: ChannelListUIProps)
return (
<>
<div className="sendbird-channel-list__header">
<ChannelListHeader
renderHeader={renderHeader}
onEdit={() => {
if (allowProfileEdit) {
setShowProfileEdit(true);
}
}}
allowProfileEdit={allowProfileEdit}
renderIconButton={() => (
<AddChannel />
)}
/>
{
renderHeader?.() || (
<ChannelListHeader
onEdit={() => {
if (allowProfileEdit) {
setShowProfileEdit(true);
}
}}
allowProfileEdit={allowProfileEdit}
renderIconButton={() => (
<AddChannel />
)}
/>
)
}
</div>
{
showProfileEdit && (
Expand Down