Hide "leave group" button if you've already left
This commit is contained in:
parent
0cb340fd1e
commit
ce922eed7d
3 changed files with 47 additions and 34 deletions
|
@ -388,6 +388,7 @@ export const ConversationDetails: React.ComponentType<Props> = ({
|
||||||
i18n={i18n}
|
i18n={i18n}
|
||||||
cannotLeaveBecauseYouAreLastAdmin={cannotLeaveBecauseYouAreLastAdmin}
|
cannotLeaveBecauseYouAreLastAdmin={cannotLeaveBecauseYouAreLastAdmin}
|
||||||
conversationTitle={conversation.title}
|
conversationTitle={conversation.title}
|
||||||
|
left={Boolean(conversation.left)}
|
||||||
onLeave={onLeave}
|
onLeave={onLeave}
|
||||||
onBlock={onBlock}
|
onBlock={onBlock}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -28,6 +28,7 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
|
||||||
? overrideProps.cannotLeaveBecauseYouAreLastAdmin
|
? overrideProps.cannotLeaveBecauseYouAreLastAdmin
|
||||||
: false,
|
: false,
|
||||||
conversationTitle: overrideProps.conversationTitle || '',
|
conversationTitle: overrideProps.conversationTitle || '',
|
||||||
|
left: isBoolean(overrideProps.left) ? overrideProps.left : false,
|
||||||
onBlock: action('onBlock'),
|
onBlock: action('onBlock'),
|
||||||
onLeave: action('onLeave'),
|
onLeave: action('onLeave'),
|
||||||
i18n,
|
i18n,
|
||||||
|
@ -39,6 +40,12 @@ story.add('Basic', () => {
|
||||||
return <ConversationDetailsActions {...props} />;
|
return <ConversationDetailsActions {...props} />;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
story.add('Left the group', () => {
|
||||||
|
const props = createProps({ left: true });
|
||||||
|
|
||||||
|
return <ConversationDetailsActions {...props} />;
|
||||||
|
});
|
||||||
|
|
||||||
story.add('Cannot leave because you are the last admin', () => {
|
story.add('Cannot leave because you are the last admin', () => {
|
||||||
const props = createProps({ cannotLeaveBecauseYouAreLastAdmin: true });
|
const props = createProps({ cannotLeaveBecauseYouAreLastAdmin: true });
|
||||||
|
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
// Copyright 2021 Signal Messenger, LLC
|
// Copyright 2021 Signal Messenger, LLC
|
||||||
// SPDX-License-Identifier: AGPL-3.0-only
|
// SPDX-License-Identifier: AGPL-3.0-only
|
||||||
|
|
||||||
import React from 'react';
|
import React, { ReactNode } from 'react';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
|
|
||||||
import { LocalizerType } from '../../../types/Util';
|
import { LocalizerType } from '../../../types/Util';
|
||||||
|
@ -15,6 +15,7 @@ import { ConversationDetailsIcon } from './ConversationDetailsIcon';
|
||||||
export type Props = {
|
export type Props = {
|
||||||
cannotLeaveBecauseYouAreLastAdmin: boolean;
|
cannotLeaveBecauseYouAreLastAdmin: boolean;
|
||||||
conversationTitle: string;
|
conversationTitle: string;
|
||||||
|
left: boolean;
|
||||||
onBlock: () => void;
|
onBlock: () => void;
|
||||||
onLeave: () => void;
|
onLeave: () => void;
|
||||||
i18n: LocalizerType;
|
i18n: LocalizerType;
|
||||||
|
@ -23,6 +24,7 @@ export type Props = {
|
||||||
export const ConversationDetailsActions: React.ComponentType<Props> = ({
|
export const ConversationDetailsActions: React.ComponentType<Props> = ({
|
||||||
cannotLeaveBecauseYouAreLastAdmin,
|
cannotLeaveBecauseYouAreLastAdmin,
|
||||||
conversationTitle,
|
conversationTitle,
|
||||||
|
left,
|
||||||
onBlock,
|
onBlock,
|
||||||
onLeave,
|
onLeave,
|
||||||
i18n,
|
i18n,
|
||||||
|
@ -30,41 +32,44 @@ export const ConversationDetailsActions: React.ComponentType<Props> = ({
|
||||||
const [confirmingLeave, setConfirmingLeave] = React.useState<boolean>(false);
|
const [confirmingLeave, setConfirmingLeave] = React.useState<boolean>(false);
|
||||||
const [confirmingBlock, setConfirmingBlock] = React.useState<boolean>(false);
|
const [confirmingBlock, setConfirmingBlock] = React.useState<boolean>(false);
|
||||||
|
|
||||||
let leaveGroupNode = (
|
let leaveGroupNode: ReactNode;
|
||||||
<PanelRow
|
if (!left) {
|
||||||
disabled={cannotLeaveBecauseYouAreLastAdmin}
|
|
||||||
onClick={() => setConfirmingLeave(true)}
|
|
||||||
icon={
|
|
||||||
<ConversationDetailsIcon
|
|
||||||
ariaLabel={i18n('ConversationDetailsActions--leave-group')}
|
|
||||||
disabled={cannotLeaveBecauseYouAreLastAdmin}
|
|
||||||
icon="leave"
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
label={
|
|
||||||
<div
|
|
||||||
className={classNames(
|
|
||||||
'module-conversation-details__leave-group',
|
|
||||||
cannotLeaveBecauseYouAreLastAdmin &&
|
|
||||||
'module-conversation-details__leave-group--disabled'
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{i18n('ConversationDetailsActions--leave-group')}
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
if (cannotLeaveBecauseYouAreLastAdmin) {
|
|
||||||
leaveGroupNode = (
|
leaveGroupNode = (
|
||||||
<Tooltip
|
<PanelRow
|
||||||
content={i18n(
|
disabled={cannotLeaveBecauseYouAreLastAdmin}
|
||||||
'ConversationDetailsActions--leave-group-must-choose-new-admin'
|
onClick={() => setConfirmingLeave(true)}
|
||||||
)}
|
icon={
|
||||||
direction={TooltipPlacement.Top}
|
<ConversationDetailsIcon
|
||||||
>
|
ariaLabel={i18n('ConversationDetailsActions--leave-group')}
|
||||||
{leaveGroupNode}
|
disabled={cannotLeaveBecauseYouAreLastAdmin}
|
||||||
</Tooltip>
|
icon="leave"
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
label={
|
||||||
|
<div
|
||||||
|
className={classNames(
|
||||||
|
'module-conversation-details__leave-group',
|
||||||
|
cannotLeaveBecauseYouAreLastAdmin &&
|
||||||
|
'module-conversation-details__leave-group--disabled'
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{i18n('ConversationDetailsActions--leave-group')}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
/>
|
||||||
);
|
);
|
||||||
|
if (cannotLeaveBecauseYouAreLastAdmin) {
|
||||||
|
leaveGroupNode = (
|
||||||
|
<Tooltip
|
||||||
|
content={i18n(
|
||||||
|
'ConversationDetailsActions--leave-group-must-choose-new-admin'
|
||||||
|
)}
|
||||||
|
direction={TooltipPlacement.Top}
|
||||||
|
>
|
||||||
|
{leaveGroupNode}
|
||||||
|
</Tooltip>
|
||||||
|
);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue