Moves panel header into the panel component

This commit is contained in:
Josh Perez 2023-07-10 18:44:32 -04:00 committed by GitHub
parent 0b885d5feb
commit 7d0f94c654
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 158 additions and 87 deletions

View file

@ -51,11 +51,10 @@ export enum OutgoingCallButtonStyle {
export type PropsDataType = {
badge?: BadgeType;
cannotLeaveBecauseYouAreLastAdmin: boolean;
conversationTitle?: string;
hasPanelShowing?: boolean;
hasStories?: HasStories;
isMissingMandatoryProfileSharing?: boolean;
outgoingCallButtonStyle: OutgoingCallButtonStyle;
showBackButton?: boolean;
isSMSOnly?: boolean;
isSignalConversation?: boolean;
theme: ThemeType;
@ -161,23 +160,6 @@ export class ConversationHeader extends React.Component<PropsType, StateType> {
}
}
private renderBackButton(): ReactNode {
const { i18n, popPanelForConversation, showBackButton } = this.props;
return (
<button
type="button"
onClick={popPanelForConversation}
className={classNames(
'module-ConversationHeader__back-icon',
showBackButton ? 'module-ConversationHeader__back-icon--show' : null
)}
disabled={!showBackButton}
aria-label={i18n('icu:goBack')}
/>
);
}
private renderHeaderInfoTitle(): ReactNode {
const { name, title, type, i18n, isMe } = this.props;
@ -304,7 +286,7 @@ export class ConversationHeader extends React.Component<PropsType, StateType> {
}
private renderMoreButton(triggerId: string): ReactNode {
const { i18n, showBackButton } = this.props;
const { i18n } = this.props;
return (
<ContextMenuTrigger id={triggerId} ref={this.menuTriggerRef}>
@ -313,10 +295,8 @@ export class ConversationHeader extends React.Component<PropsType, StateType> {
onClick={this.showMenuBound}
className={classNames(
'module-ConversationHeader__button',
'module-ConversationHeader__button--more',
showBackButton ? null : 'module-ConversationHeader__button--show'
'module-ConversationHeader__button--more'
)}
disabled={showBackButton}
aria-label={i18n('icu:moreInfo')}
/>
</ContextMenuTrigger>
@ -324,7 +304,7 @@ export class ConversationHeader extends React.Component<PropsType, StateType> {
}
private renderSearchButton(): ReactNode {
const { i18n, id, searchInConversation, showBackButton } = this.props;
const { i18n, id, searchInConversation } = this.props;
return (
<button
@ -332,10 +312,8 @@ export class ConversationHeader extends React.Component<PropsType, StateType> {
onClick={() => searchInConversation(id)}
className={classNames(
'module-ConversationHeader__button',
'module-ConversationHeader__button--search',
showBackButton ? null : 'module-ConversationHeader__button--show'
'module-ConversationHeader__button--search'
)}
disabled={showBackButton}
aria-label={i18n('icu:search')}
/>
);
@ -700,20 +678,7 @@ export class ConversationHeader extends React.Component<PropsType, StateType> {
}
private renderHeader(): ReactNode {
const { conversationTitle, groupVersion, pushPanelForConversation, type } =
this.props;
if (conversationTitle !== undefined) {
return (
<div className="module-ConversationHeader__header">
<div className="module-ConversationHeader__header__info">
<div className="module-ConversationHeader__header__info__title">
{conversationTitle}
</div>
</div>
</div>
);
}
const { groupVersion, pushPanelForConversation, type } = this.props;
let onClick: undefined | (() => void);
switch (type) {
@ -775,6 +740,7 @@ export class ConversationHeader extends React.Component<PropsType, StateType> {
announcementsOnly,
areWeAdmin,
expireTimer,
hasPanelShowing,
i18n,
id,
isSMSOnly,
@ -783,8 +749,12 @@ export class ConversationHeader extends React.Component<PropsType, StateType> {
onOutgoingVideoCallInConversation,
outgoingCallButtonStyle,
setDisappearingMessages,
showBackButton,
} = this.props;
if (hasPanelShowing) {
return null;
}
const { isNarrow, modalState } = this.state;
const triggerId = `conversation-${id}`;
@ -829,7 +799,6 @@ export class ConversationHeader extends React.Component<PropsType, StateType> {
})}
ref={measureRef}
>
{this.renderBackButton()}
{this.renderHeader()}
{!isSMSOnly && !isSignalConversation && (
<OutgoingCallButtons
@ -845,7 +814,6 @@ export class ConversationHeader extends React.Component<PropsType, StateType> {
onOutgoingVideoCallInConversation
}
outgoingCallButtonStyle={outgoingCallButtonStyle}
showBackButton={showBackButton}
/>
)}
{this.renderSearchButton()}
@ -868,7 +836,6 @@ function OutgoingCallButtons({
onOutgoingAudioCallInConversation,
onOutgoingVideoCallInConversation,
outgoingCallButtonStyle,
showBackButton,
}: { isNarrow: boolean } & Pick<
PropsType,
| 'announcementsOnly'
@ -878,7 +845,6 @@ function OutgoingCallButtons({
| 'onOutgoingAudioCallInConversation'
| 'onOutgoingVideoCallInConversation'
| 'outgoingCallButtonStyle'
| 'showBackButton'
>): JSX.Element | null {
const videoButton = (
<button
@ -886,12 +852,10 @@ function OutgoingCallButtons({
className={classNames(
'module-ConversationHeader__button',
'module-ConversationHeader__button--video',
showBackButton ? null : 'module-ConversationHeader__button--show',
!showBackButton && announcementsOnly && !areWeAdmin
announcementsOnly && !areWeAdmin
? 'module-ConversationHeader__button--show-disabled'
: undefined
)}
disabled={showBackButton}
onClick={() => onOutgoingVideoCallInConversation(id)}
type="button"
/>
@ -917,10 +881,8 @@ function OutgoingCallButtons({
onClick={() => onOutgoingAudioCallInConversation(id)}
className={classNames(
'module-ConversationHeader__button',
'module-ConversationHeader__button--audio',
showBackButton ? null : 'module-ConversationHeader__button--show'
'module-ConversationHeader__button--audio'
)}
disabled={showBackButton}
aria-label={i18n('icu:makeOutgoingCall')}
/>
</>
@ -932,9 +894,10 @@ function OutgoingCallButtons({
className={classNames(
'module-ConversationHeader__button',
'module-ConversationHeader__button--join-call',
showBackButton ? null : 'module-ConversationHeader__button--show'
announcementsOnly && !areWeAdmin
? 'module-ConversationHeader__button--show-disabled'
: undefined
)}
disabled={showBackButton}
onClick={() => onOutgoingVideoCallInConversation(id)}
type="button"
>