Hide call buttons when on call
This commit is contained in:
Evan Hahn
Evan Hahn
parent
a7854c6083
commit
decc93532b
18 changed files with 622 additions and 366 deletions
|
|
@ -1,16 +1,11 @@
|
|||
import * as React from 'react';
|
||||
import React, { ComponentProps } from 'react';
|
||||
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
import { setup as setupI18n } from '../../../js/modules/i18n';
|
||||
import enMessages from '../../../_locales/en/messages.json';
|
||||
import {
|
||||
ConversationHeader,
|
||||
PropsActionsType,
|
||||
PropsHousekeepingType,
|
||||
PropsType,
|
||||
} from './ConversationHeader';
|
||||
import { ConversationHeader } from './ConversationHeader';
|
||||
import { gifUrl } from '../../storybook/Fixtures';
|
||||
|
||||
const book = storiesOf('Components/Conversation/ConversationHeader', module);
|
||||
|
|
@ -21,11 +16,17 @@ type ConversationHeaderStory = {
|
|||
description: string;
|
||||
items: Array<{
|
||||
title: string;
|
||||
props: PropsType;
|
||||
props: ComponentProps<typeof ConversationHeader>;
|
||||
}>;
|
||||
};
|
||||
|
||||
const actionProps: PropsActionsType = {
|
||||
const commonProps = {
|
||||
showBackButton: false,
|
||||
showCallButtons: true,
|
||||
markedUnread: false,
|
||||
|
||||
i18n,
|
||||
|
||||
onSetDisappearingMessages: action('onSetDisappearingMessages'),
|
||||
onDeleteMessages: action('onDeleteMessages'),
|
||||
onResetSession: action('onResetSession'),
|
||||
|
|
@ -49,10 +50,6 @@ const actionProps: PropsActionsType = {
|
|||
onSetPin: action('onSetPin'),
|
||||
};
|
||||
|
||||
const housekeepingProps: PropsHousekeepingType = {
|
||||
i18n,
|
||||
};
|
||||
|
||||
const stories: Array<ConversationHeaderStory> = [
|
||||
{
|
||||
title: '1:1 conversation',
|
||||
|
|
@ -62,6 +59,7 @@ const stories: Array<ConversationHeaderStory> = [
|
|||
{
|
||||
title: 'With name and profile, verified',
|
||||
props: {
|
||||
...commonProps,
|
||||
color: 'red',
|
||||
isVerified: true,
|
||||
avatarPath: gifUrl,
|
||||
|
|
@ -72,13 +70,12 @@ const stories: Array<ConversationHeaderStory> = [
|
|||
id: '1',
|
||||
profileName: '🔥Flames🔥',
|
||||
acceptedMessageRequest: true,
|
||||
...actionProps,
|
||||
...housekeepingProps,
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'With name, not verified, no avatar',
|
||||
props: {
|
||||
...commonProps,
|
||||
color: 'blue',
|
||||
isVerified: false,
|
||||
title: 'Someone 🔥 Somewhere',
|
||||
|
|
@ -87,13 +84,12 @@ const stories: Array<ConversationHeaderStory> = [
|
|||
type: 'direct',
|
||||
id: '2',
|
||||
acceptedMessageRequest: true,
|
||||
...actionProps,
|
||||
...housekeepingProps,
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'With name, not verified, descenders',
|
||||
props: {
|
||||
...commonProps,
|
||||
color: 'blue',
|
||||
isVerified: false,
|
||||
title: 'Joyrey 🔥 Leppey',
|
||||
|
|
@ -102,13 +98,12 @@ const stories: Array<ConversationHeaderStory> = [
|
|||
type: 'direct',
|
||||
id: '2',
|
||||
acceptedMessageRequest: true,
|
||||
...actionProps,
|
||||
...housekeepingProps,
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Profile, no name',
|
||||
props: {
|
||||
...commonProps,
|
||||
color: 'teal',
|
||||
isVerified: false,
|
||||
phoneNumber: '(202) 555-0003',
|
||||
|
|
@ -117,25 +112,23 @@ const stories: Array<ConversationHeaderStory> = [
|
|||
title: '🔥Flames🔥',
|
||||
profileName: '🔥Flames🔥',
|
||||
acceptedMessageRequest: true,
|
||||
...actionProps,
|
||||
...housekeepingProps,
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'No name, no profile, no color',
|
||||
props: {
|
||||
...commonProps,
|
||||
title: '(202) 555-0011',
|
||||
phoneNumber: '(202) 555-0011',
|
||||
type: 'direct',
|
||||
id: '11',
|
||||
acceptedMessageRequest: true,
|
||||
...actionProps,
|
||||
...housekeepingProps,
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'With back button',
|
||||
props: {
|
||||
...commonProps,
|
||||
showBackButton: true,
|
||||
color: 'deep_orange',
|
||||
phoneNumber: '(202) 555-0004',
|
||||
|
|
@ -143,46 +136,32 @@ const stories: Array<ConversationHeaderStory> = [
|
|||
type: 'direct',
|
||||
id: '4',
|
||||
acceptedMessageRequest: true,
|
||||
...actionProps,
|
||||
...housekeepingProps,
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Disappearing messages set',
|
||||
props: {
|
||||
...commonProps,
|
||||
color: 'indigo',
|
||||
title: '(202) 555-0005',
|
||||
phoneNumber: '(202) 555-0005',
|
||||
type: 'direct',
|
||||
id: '5',
|
||||
expirationSettingName: '10 seconds',
|
||||
timerOptions: [
|
||||
{
|
||||
name: 'off',
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
name: '10 seconds',
|
||||
value: 10,
|
||||
},
|
||||
],
|
||||
expireTimer: 10,
|
||||
acceptedMessageRequest: true,
|
||||
...actionProps,
|
||||
...housekeepingProps,
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Muting Conversation',
|
||||
props: {
|
||||
...commonProps,
|
||||
color: 'ultramarine',
|
||||
title: '(202) 555-0006',
|
||||
phoneNumber: '(202) 555-0006',
|
||||
type: 'direct',
|
||||
id: '6',
|
||||
muteExpirationLabel: '10/18/3000, 11:11 AM',
|
||||
acceptedMessageRequest: true,
|
||||
...actionProps,
|
||||
...housekeepingProps,
|
||||
muteExpiresAt: new Date('3000-10-18T11:11:11Z').valueOf(),
|
||||
},
|
||||
},
|
||||
],
|
||||
|
|
@ -195,52 +174,30 @@ const stories: Array<ConversationHeaderStory> = [
|
|||
{
|
||||
title: 'Basic',
|
||||
props: {
|
||||
...commonProps,
|
||||
color: 'signal-blue',
|
||||
title: 'Typescript support group',
|
||||
name: 'Typescript support group',
|
||||
phoneNumber: '',
|
||||
id: '1',
|
||||
type: 'group',
|
||||
expirationSettingName: '10 seconds',
|
||||
timerOptions: [
|
||||
{
|
||||
name: 'off',
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
name: '10 seconds',
|
||||
value: 10,
|
||||
},
|
||||
],
|
||||
expireTimer: 10,
|
||||
acceptedMessageRequest: true,
|
||||
...actionProps,
|
||||
...housekeepingProps,
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'In a group you left - no disappearing messages',
|
||||
props: {
|
||||
...commonProps,
|
||||
color: 'signal-blue',
|
||||
title: 'Typescript support group',
|
||||
name: 'Typescript support group',
|
||||
phoneNumber: '',
|
||||
id: '2',
|
||||
type: 'group',
|
||||
disableTimerChanges: true,
|
||||
expirationSettingName: '10 seconds',
|
||||
timerOptions: [
|
||||
{
|
||||
name: 'off',
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
name: '10 seconds',
|
||||
value: 10,
|
||||
},
|
||||
],
|
||||
left: true,
|
||||
expireTimer: 10,
|
||||
acceptedMessageRequest: true,
|
||||
...actionProps,
|
||||
...housekeepingProps,
|
||||
},
|
||||
},
|
||||
],
|
||||
|
|
@ -252,6 +209,7 @@ const stories: Array<ConversationHeaderStory> = [
|
|||
{
|
||||
title: 'In chat with yourself',
|
||||
props: {
|
||||
...commonProps,
|
||||
color: 'blue',
|
||||
title: '(202) 555-0007',
|
||||
phoneNumber: '(202) 555-0007',
|
||||
|
|
@ -259,8 +217,6 @@ const stories: Array<ConversationHeaderStory> = [
|
|||
type: 'direct',
|
||||
isMe: true,
|
||||
acceptedMessageRequest: true,
|
||||
...actionProps,
|
||||
...housekeepingProps,
|
||||
},
|
||||
},
|
||||
],
|
||||
|
|
@ -272,6 +228,7 @@ const stories: Array<ConversationHeaderStory> = [
|
|||
{
|
||||
title: '1:1 conversation',
|
||||
props: {
|
||||
...commonProps,
|
||||
color: 'blue',
|
||||
title: '(202) 555-0007',
|
||||
phoneNumber: '(202) 555-0007',
|
||||
|
|
@ -279,8 +236,6 @@ const stories: Array<ConversationHeaderStory> = [
|
|||
type: 'direct',
|
||||
isMe: false,
|
||||
acceptedMessageRequest: false,
|
||||
...actionProps,
|
||||
...housekeepingProps,
|
||||
},
|
||||
},
|
||||
],
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import React from 'react';
|
||||
import moment from 'moment';
|
||||
import classNames from 'classnames';
|
||||
import {
|
||||
ContextMenu,
|
||||
|
|
@ -14,11 +15,11 @@ import { InContactsIcon } from '../InContactsIcon';
|
|||
import { LocalizerType } from '../../types/Util';
|
||||
import { ColorType } from '../../types/Colors';
|
||||
import { getMuteOptions } from '../../util/getMuteOptions';
|
||||
|
||||
interface TimerOption {
|
||||
name: string;
|
||||
value: number;
|
||||
}
|
||||
import {
|
||||
ExpirationTimerOptions,
|
||||
TimerOption,
|
||||
} from '../../util/ExpirationTimerOptions';
|
||||
import { isMuted } from '../../util/isMuted';
|
||||
|
||||
export interface PropsDataType {
|
||||
id: string;
|
||||
|
|
@ -36,13 +37,16 @@ export interface PropsDataType {
|
|||
isMe?: boolean;
|
||||
isArchived?: boolean;
|
||||
isPinned?: boolean;
|
||||
isMissingMandatoryProfileSharing?: boolean;
|
||||
left?: boolean;
|
||||
markedUnread?: boolean;
|
||||
|
||||
disableTimerChanges?: boolean;
|
||||
expirationSettingName?: string;
|
||||
muteExpirationLabel?: string;
|
||||
canChangeTimer?: boolean;
|
||||
expireTimer?: number;
|
||||
muteExpiresAt?: number;
|
||||
|
||||
showBackButton?: boolean;
|
||||
timerOptions?: Array<TimerOption>;
|
||||
showCallButtons?: boolean;
|
||||
}
|
||||
|
||||
export interface PropsActionsType {
|
||||
|
|
@ -186,8 +190,11 @@ export class ConversationHeader extends React.Component<PropsType> {
|
|||
}
|
||||
|
||||
public renderExpirationLength(): JSX.Element | null {
|
||||
const { expirationSettingName, showBackButton } = this.props;
|
||||
const { i18n, expireTimer, showBackButton } = this.props;
|
||||
|
||||
const expirationSettingName = expireTimer
|
||||
? ExpirationTimerOptions.getName(i18n, expireTimer)
|
||||
: undefined;
|
||||
if (!expirationSettingName) {
|
||||
return null;
|
||||
}
|
||||
|
|
@ -249,71 +256,62 @@ export class ConversationHeader extends React.Component<PropsType> {
|
|||
);
|
||||
}
|
||||
|
||||
public renderOutgoingAudioCallButton(): JSX.Element | null {
|
||||
private renderOutgoingCallButtons(): JSX.Element | null {
|
||||
const {
|
||||
i18n,
|
||||
isMe,
|
||||
onOutgoingAudioCallInConversation,
|
||||
onOutgoingVideoCallInConversation,
|
||||
showCallButtons,
|
||||
showBackButton,
|
||||
type,
|
||||
} = this.props;
|
||||
|
||||
if (type === 'group' || isMe) {
|
||||
if (!showCallButtons) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onOutgoingAudioCallInConversation}
|
||||
className={classNames(
|
||||
'module-conversation-header__audio-calling-button',
|
||||
showBackButton
|
||||
? null
|
||||
: 'module-conversation-header__audio-calling-button--show'
|
||||
)}
|
||||
disabled={showBackButton}
|
||||
aria-label={i18n('makeOutgoingCall')}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
public renderOutgoingVideoCallButton(): JSX.Element | null {
|
||||
const { i18n, isMe, type } = this.props;
|
||||
|
||||
if (type === 'group' || isMe) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const { onOutgoingVideoCallInConversation, showBackButton } = this.props;
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onOutgoingVideoCallInConversation}
|
||||
className={classNames(
|
||||
'module-conversation-header__video-calling-button',
|
||||
showBackButton
|
||||
? null
|
||||
: 'module-conversation-header__video-calling-button--show'
|
||||
)}
|
||||
disabled={showBackButton}
|
||||
aria-label={i18n('makeOutgoingVideoCall')}
|
||||
/>
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onOutgoingVideoCallInConversation}
|
||||
className={classNames(
|
||||
'module-conversation-header__video-calling-button',
|
||||
showBackButton
|
||||
? null
|
||||
: 'module-conversation-header__video-calling-button--show'
|
||||
)}
|
||||
disabled={showBackButton}
|
||||
aria-label={i18n('makeOutgoingVideoCall')}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onOutgoingAudioCallInConversation}
|
||||
className={classNames(
|
||||
'module-conversation-header__audio-calling-button',
|
||||
showBackButton
|
||||
? null
|
||||
: 'module-conversation-header__audio-calling-button--show'
|
||||
)}
|
||||
disabled={showBackButton}
|
||||
aria-label={i18n('makeOutgoingCall')}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
public renderMenu(triggerId: string): JSX.Element {
|
||||
const {
|
||||
disableTimerChanges,
|
||||
i18n,
|
||||
acceptedMessageRequest,
|
||||
canChangeTimer,
|
||||
isArchived,
|
||||
isMe,
|
||||
isPinned,
|
||||
type,
|
||||
isArchived,
|
||||
markedUnread,
|
||||
muteExpirationLabel,
|
||||
muteExpiresAt,
|
||||
isMissingMandatoryProfileSharing,
|
||||
left,
|
||||
onDeleteMessages,
|
||||
onResetSession,
|
||||
onSetDisappearingMessages,
|
||||
|
|
@ -325,11 +323,15 @@ export class ConversationHeader extends React.Component<PropsType> {
|
|||
onMarkUnread,
|
||||
onSetPin,
|
||||
onMoveToInbox,
|
||||
timerOptions,
|
||||
} = this.props;
|
||||
|
||||
const muteOptions = [];
|
||||
if (muteExpirationLabel) {
|
||||
if (isMuted(muteExpiresAt)) {
|
||||
const expires = moment(muteExpiresAt);
|
||||
const muteExpirationLabel = moment().isSame(expires, 'day')
|
||||
? expires.format('hh:mm A')
|
||||
: expires.format('M/D/YY, hh:mm A');
|
||||
|
||||
muteOptions.push(
|
||||
...[
|
||||
{
|
||||
|
|
@ -352,18 +354,25 @@ export class ConversationHeader extends React.Component<PropsType> {
|
|||
const muteTitle = i18n('muteNotificationsTitle') as any;
|
||||
const isGroup = type === 'group';
|
||||
|
||||
const disableTimerChanges = Boolean(
|
||||
!canChangeTimer ||
|
||||
!acceptedMessageRequest ||
|
||||
left ||
|
||||
isMissingMandatoryProfileSharing
|
||||
);
|
||||
|
||||
return (
|
||||
<ContextMenu id={triggerId}>
|
||||
{disableTimerChanges ? null : (
|
||||
<SubMenu title={disappearingTitle}>
|
||||
{(timerOptions || []).map(item => (
|
||||
{ExpirationTimerOptions.map((item: typeof TimerOption) => (
|
||||
<MenuItem
|
||||
key={item.value}
|
||||
key={item.get('seconds')}
|
||||
onClick={() => {
|
||||
onSetDisappearingMessages(item.value);
|
||||
onSetDisappearingMessages(item.get('seconds'));
|
||||
}}
|
||||
>
|
||||
{item.name}
|
||||
{item.getName(i18n)}
|
||||
</MenuItem>
|
||||
))}
|
||||
</SubMenu>
|
||||
|
|
@ -435,8 +444,7 @@ export class ConversationHeader extends React.Component<PropsType> {
|
|||
</div>
|
||||
{this.renderExpirationLength()}
|
||||
{this.renderSearchButton()}
|
||||
{this.renderOutgoingVideoCallButton()}
|
||||
{this.renderOutgoingAudioCallButton()}
|
||||
{this.renderOutgoingCallButtons()}
|
||||
{this.renderMoreButton(triggerId)}
|
||||
{this.renderMenu(triggerId)}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue