Moves panel header into the panel component
This commit is contained in:
parent
0b885d5feb
commit
7d0f94c654
8 changed files with 158 additions and 87 deletions
|
@ -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"
|
||||
>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue