refactor: extracted header title to its own component
William Grant
2 years ago
parent
46a88990a3
commit
c3b09578a1
@ -0,0 +1,263 @@
|
|||||||
|
import React, { useEffect, useState } from 'react';
|
||||||
|
import { useDispatch, useSelector } from 'react-redux';
|
||||||
|
import styled, { CSSProperties } from 'styled-components';
|
||||||
|
import { useConversationUsername } from '../../hooks/useParamSelector';
|
||||||
|
import { ConversationNotificationSettingType } from '../../models/conversationAttributes';
|
||||||
|
import { closeRightPanel, openRightPanel } from '../../state/ducks/conversations';
|
||||||
|
import { setRightOverlayMode } from '../../state/ducks/section';
|
||||||
|
import {
|
||||||
|
getConversationHeaderTitleProps,
|
||||||
|
getCurrentNotificationSettingText,
|
||||||
|
isRightPanelShowing,
|
||||||
|
} from '../../state/selectors/conversations';
|
||||||
|
import {
|
||||||
|
DisappearingMessageConversationType,
|
||||||
|
ExpirationTimerOptions,
|
||||||
|
} from '../../util/expiringMessages';
|
||||||
|
import { Flex } from '../basic/Flex';
|
||||||
|
import { SessionIconButton } from '../icon';
|
||||||
|
|
||||||
|
export const StyledSubtitleContainer = styled.div`
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 0 auto;
|
||||||
|
min-width: 230px;
|
||||||
|
|
||||||
|
div:first-child {
|
||||||
|
span:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const StyledSubtitleDot = styled.span<{ active: boolean }>`
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: ${props =>
|
||||||
|
props.active ? 'var(--text-primary-color)' : 'var(--text-secondary-color)'};
|
||||||
|
|
||||||
|
height: 5px;
|
||||||
|
width: 5px;
|
||||||
|
margin: 0 2px;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const SubtitleDotMenu = ({
|
||||||
|
options,
|
||||||
|
selectedOptionIndex,
|
||||||
|
style,
|
||||||
|
}: {
|
||||||
|
options: Array<string | null>;
|
||||||
|
selectedOptionIndex: number;
|
||||||
|
style: CSSProperties;
|
||||||
|
}) => (
|
||||||
|
<Flex container={true} alignItems={'center'} style={style}>
|
||||||
|
{options.map((option, index) => {
|
||||||
|
if (!option) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<StyledSubtitleDot
|
||||||
|
key={`subtitleDotMenu-${index}`}
|
||||||
|
active={selectedOptionIndex === index}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</Flex>
|
||||||
|
);
|
||||||
|
|
||||||
|
export type ConversationHeaderTitleProps = {
|
||||||
|
conversationKey: string;
|
||||||
|
isMe: boolean;
|
||||||
|
isGroup: boolean;
|
||||||
|
isPublic: boolean;
|
||||||
|
members: Array<any>;
|
||||||
|
subscriberCount?: number;
|
||||||
|
isKickedFromGroup: boolean;
|
||||||
|
currentNotificationSetting?: ConversationNotificationSettingType;
|
||||||
|
expirationType?: DisappearingMessageConversationType;
|
||||||
|
expireTimer?: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const ConversationHeaderTitle = () => {
|
||||||
|
const headerTitleProps = useSelector(getConversationHeaderTitleProps);
|
||||||
|
const notificationSetting = useSelector(getCurrentNotificationSettingText);
|
||||||
|
const isRightPanelOn = useSelector(isRightPanelShowing);
|
||||||
|
|
||||||
|
const convoName = useConversationUsername(headerTitleProps?.conversationKey);
|
||||||
|
const dispatch = useDispatch();
|
||||||
|
|
||||||
|
const [visibleTitleIndex, setVisibleTitleIndex] = useState(0);
|
||||||
|
|
||||||
|
if (!headerTitleProps) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const {
|
||||||
|
isGroup,
|
||||||
|
isPublic,
|
||||||
|
members,
|
||||||
|
subscriberCount,
|
||||||
|
isMe,
|
||||||
|
isKickedFromGroup,
|
||||||
|
expirationType,
|
||||||
|
expireTimer,
|
||||||
|
} = headerTitleProps;
|
||||||
|
|
||||||
|
const { i18n } = window;
|
||||||
|
|
||||||
|
const subtitles: Array<string> = [];
|
||||||
|
const notificationSubtitle = notificationSetting
|
||||||
|
? i18n('notificationSubtitle', [notificationSetting])
|
||||||
|
: null;
|
||||||
|
|
||||||
|
let memberCount = 0;
|
||||||
|
if (isGroup) {
|
||||||
|
if (isPublic) {
|
||||||
|
memberCount = subscriberCount || 0;
|
||||||
|
} else {
|
||||||
|
memberCount = members.length;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (notificationSubtitle) {
|
||||||
|
subtitles.push(notificationSubtitle);
|
||||||
|
}
|
||||||
|
|
||||||
|
let memberCountSubtitle = null;
|
||||||
|
if (isGroup && memberCount > 0 && !isKickedFromGroup) {
|
||||||
|
const count = String(memberCount);
|
||||||
|
memberCountSubtitle = isPublic ? i18n('activeMembers', [count]) : i18n('members', [count]);
|
||||||
|
}
|
||||||
|
if (memberCountSubtitle) {
|
||||||
|
subtitles.push(memberCountSubtitle);
|
||||||
|
}
|
||||||
|
|
||||||
|
const disappearingMessageSettingText =
|
||||||
|
expirationType === 'off'
|
||||||
|
? null
|
||||||
|
: expirationType === 'deleteAfterRead'
|
||||||
|
? window.i18n('disappearingMessagesModeAfterRead')
|
||||||
|
: window.i18n('disappearingMessagesModeAfterSend');
|
||||||
|
const abbreviatedExpireTime = Boolean(expireTimer)
|
||||||
|
? ExpirationTimerOptions.getAbbreviated(expireTimer)
|
||||||
|
: null;
|
||||||
|
const disappearingMessageSubtitle = disappearingMessageSettingText
|
||||||
|
? `${disappearingMessageSettingText}${
|
||||||
|
abbreviatedExpireTime ? ` - ${abbreviatedExpireTime}` : ''
|
||||||
|
}`
|
||||||
|
: null;
|
||||||
|
if (disappearingMessageSubtitle) {
|
||||||
|
subtitles.push(disappearingMessageSubtitle);
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleTitleCycle = (direction: 1 | -1) => {
|
||||||
|
let newIndex = visibleTitleIndex + direction;
|
||||||
|
if (newIndex > subtitles.length - 1) {
|
||||||
|
newIndex = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (newIndex < 0) {
|
||||||
|
newIndex = subtitles.length - 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (subtitles[newIndex]) {
|
||||||
|
setVisibleTitleIndex(newIndex);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setVisibleTitleIndex(0);
|
||||||
|
}, [convoName]);
|
||||||
|
|
||||||
|
if (isMe) {
|
||||||
|
// TODO customise for new disappearing message system
|
||||||
|
return <div className="module-conversation-header__title">{i18n('noteToSelf')}</div>;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="module-conversation-header__title-container">
|
||||||
|
<div className="module-conversation-header__title-flex">
|
||||||
|
<div
|
||||||
|
className="module-conversation-header__title"
|
||||||
|
onClick={() => {
|
||||||
|
if (isRightPanelOn) {
|
||||||
|
dispatch(closeRightPanel());
|
||||||
|
} else {
|
||||||
|
if (visibleTitleIndex === 2) {
|
||||||
|
dispatch(setRightOverlayMode('disappearing-messages'));
|
||||||
|
} else {
|
||||||
|
dispatch(setRightOverlayMode('panel-settings'));
|
||||||
|
}
|
||||||
|
dispatch(openRightPanel());
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
role="button"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
className="module-contact-name__profile-name"
|
||||||
|
data-testid="header-conversation-name"
|
||||||
|
style={{
|
||||||
|
marginBottom:
|
||||||
|
subtitles && subtitles[visibleTitleIndex] && subtitles.length > 1
|
||||||
|
? '-5px'
|
||||||
|
: undefined,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{convoName}
|
||||||
|
</span>
|
||||||
|
{subtitles && subtitles[visibleTitleIndex] && (
|
||||||
|
<StyledSubtitleContainer>
|
||||||
|
<Flex
|
||||||
|
container={true}
|
||||||
|
flexDirection={'row'}
|
||||||
|
justifyContent={subtitles.length < 2 ? 'center' : 'space-between'}
|
||||||
|
alignItems={'center'}
|
||||||
|
width={'100%'}
|
||||||
|
>
|
||||||
|
<SessionIconButton
|
||||||
|
iconColor={'var(--button-icon-stroke-selected-color)'}
|
||||||
|
iconSize={'medium'}
|
||||||
|
iconType="chevron"
|
||||||
|
iconRotation={90}
|
||||||
|
margin={'0 var(--margins-xs) 0 0'}
|
||||||
|
onClick={() => {
|
||||||
|
handleTitleCycle(-1);
|
||||||
|
}}
|
||||||
|
isHidden={subtitles.length < 2}
|
||||||
|
/>
|
||||||
|
{visibleTitleIndex === 2 && expirationType !== 'off' && (
|
||||||
|
<SessionIconButton
|
||||||
|
iconColor={'var(--button-icon-stroke-selected-color)'}
|
||||||
|
iconSize={'tiny'}
|
||||||
|
iconType="timer50"
|
||||||
|
margin={'0 var(--margins-xs) 0 0'}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<span className="module-conversation-header__title-text">
|
||||||
|
{subtitles[visibleTitleIndex]}
|
||||||
|
</span>
|
||||||
|
<SessionIconButton
|
||||||
|
iconColor={'var(--button-icon-stroke-selected-color)'}
|
||||||
|
iconSize={'medium'}
|
||||||
|
iconType="chevron"
|
||||||
|
iconRotation={270}
|
||||||
|
margin={'0 0 0 var(--margins-xs)'}
|
||||||
|
onClick={() => {
|
||||||
|
handleTitleCycle(1);
|
||||||
|
}}
|
||||||
|
isHidden={subtitles.length < 2}
|
||||||
|
/>
|
||||||
|
</Flex>
|
||||||
|
<SubtitleDotMenu
|
||||||
|
options={subtitles}
|
||||||
|
selectedOptionIndex={visibleTitleIndex}
|
||||||
|
style={{ visibility: subtitles.length < 2 ? 'hidden' : undefined, margin: '3px 0' }}
|
||||||
|
/>
|
||||||
|
</StyledSubtitleContainer>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
Loading…
Reference in New Issue