Moves panel header into the panel component

2023-07-10 18:44:32 -04:00
parent 0b885d5feb
commit 7d0f94c654
8 changed files with 158 additions and 87 deletions
--- a/ts/components/conversation/ConversationHeader.tsx
+++ b/ts/components/conversation/ConversationHeader.tsx
@@ -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"
        >
--- a/ts/state/smart/ConversationHeader.tsx
+++ b/ts/state/smart/ConversationHeader.tsx
@@ -14,7 +14,6 @@ import { getPreferredBadgeSelector } from '../selectors/badges';
 import {
  getConversationByUuidSelector,
  getConversationSelector,
-  getConversationTitle,
  isMissingRequiredProfileSharing,
 } from '../selectors/conversations';
 import { CallMode } from '../../types/Calling';
@@ -88,9 +87,8 @@ export function SmartConversationHeader({ id }: OwnProps): JSX.Element {

  const badgeSelector = useSelector(getPreferredBadgeSelector);
  const badge = badgeSelector(conversation.badges);
-  const conversationTitle = useSelector(getConversationTitle);
  const i18n = useSelector(getIntl);
-  const showBackButton = useSelector<StateType, boolean>(
+  const hasPanelShowing = useSelector<StateType, boolean>(
    state => state.conversations.targetedConversationPanels.length > 0
  );
  const outgoingCallButtonStyle = useSelector<
@@ -155,8 +153,8 @@ export function SmartConversationHeader({ id }: OwnProps): JSX.Element {
      ])}
      badge={badge}
      cannotLeaveBecauseYouAreLastAdmin={cannotLeaveBecauseYouAreLastAdmin}
-      conversationTitle={conversationTitle}
      destroyMessages={destroyMessages}
+      hasPanelShowing={hasPanelShowing}
      hasStories={hasStories}
      i18n={i18n}
      id={id}
@@ -178,7 +176,6 @@ export function SmartConversationHeader({ id }: OwnProps): JSX.Element {
      setDisappearingMessages={setDisappearingMessages}
      setMuteExpiration={setMuteExpiration}
      setPinned={setPinned}
-      showBackButton={showBackButton}
      theme={theme}
      toggleSelectMode={toggleSelectMode}
      viewUserStories={viewUserStories}
--- a/ts/state/smart/ConversationPanel.tsx
+++ b/ts/state/smart/ConversationPanel.tsx
@@ -20,7 +20,7 @@ import { SmartMessageDetail } from './MessageDetail';
 import { SmartPendingInvites } from './PendingInvites';
 import { SmartStickerManager } from './StickerManager';
 import { getIntl } from '../selectors/user';
-import { getTopPanel } from '../selectors/conversations';
+import { getConversationTitle, getTopPanel } from '../selectors/conversations';
 import { useConversationsActions } from '../ducks/conversations';
 import { focusableSelectors } from '../../util/focusableSelectors';

@@ -30,10 +30,12 @@ export function ConversationPanel({
  conversationId: string;
 }): JSX.Element | null {
  const i18n = useSelector(getIntl);
-  const { startConversation } = useConversationsActions();
+  const { popPanelForConversation, startConversation } =
+    useConversationsActions();
  const topPanel = useSelector<StateType, PanelRenderType | undefined>(
    getTopPanel
  );
+  const conversationTitle = useSelector(getConversationTitle);

  const selectors = useMemo(() => focusableSelectors.join(','), []);
  const panelRef = useRef<HTMLDivElement | null>(null);
@@ -109,7 +111,25 @@ export function ConversationPanel({
  }

  return (
-    <div className={classNames('panel', panelClassName)} ref={panelRef}>
+    <div
+      className={classNames('ConversationPanel', 'panel', panelClassName)}
+      ref={panelRef}
+    >
+      <div className="ConversationPanel__header">
+        <button
+          aria-label={i18n('icu:goBack')}
+          className="ConversationPanel__header__back-button"
+          onClick={popPanelForConversation}
+          type="button"
+        />
+        {conversationTitle && (
+          <div className="ConversationPanel__header__info">
+            <div className="ConversationPanel__header__info__title">
+              {conversationTitle}
+            </div>
+          </div>
+        )}
+      </div>
      {panelChild}
    </div>
  );