Control UI visibility in ProfileEditor
This commit is contained in:
parent
0fe797e511
commit
9b98e20a8c
4 changed files with 29 additions and 1 deletions
|
@ -5683,6 +5683,10 @@
|
|||
"messageformat": "Delete",
|
||||
"description": "Shown in dialog button if user has saved an empty string to delete their username"
|
||||
},
|
||||
"icu:ProfileEditor--username--delete-unavailable-notice": {
|
||||
"messageformat": "To delete your username, open Signal on your phone and navigate to Settings > Profile.",
|
||||
"description": "Shown in dialog body if user is trying to delete username, but it is only supported on mobile"
|
||||
},
|
||||
"icu:ProfileEditor--username--context-menu": {
|
||||
"messageformat": "Copy or delete username",
|
||||
"description": "Shown as aria label for context menu next to username"
|
||||
|
|
|
@ -44,6 +44,9 @@ export default {
|
|||
usernameLinkCorrupted: {
|
||||
control: 'boolean',
|
||||
},
|
||||
isUsernameDeletionEnabled: {
|
||||
control: 'boolean',
|
||||
},
|
||||
},
|
||||
args: {
|
||||
aboutEmoji: '',
|
||||
|
@ -60,6 +63,7 @@ export default {
|
|||
usernameLinkColor: Proto.AccountRecord.UsernameLink.Color.PURPLE,
|
||||
usernameEditState: UsernameEditState.Editing,
|
||||
usernameLinkState: UsernameLinkState.Ready,
|
||||
isUsernameDeletionEnabled: true,
|
||||
|
||||
recentEmojis: [],
|
||||
skinTone: 0,
|
||||
|
|
|
@ -88,6 +88,7 @@ export type PropsDataType = {
|
|||
usernameLinkColor?: number;
|
||||
usernameLink?: string;
|
||||
usernameLinkCorrupted: boolean;
|
||||
isUsernameDeletionEnabled: boolean;
|
||||
} & Pick<EmojiButtonProps, 'recentEmojis' | 'skinTone'>;
|
||||
|
||||
type PropsActionType = {
|
||||
|
@ -175,6 +176,7 @@ export function ProfileEditor({
|
|||
usernameLinkColor,
|
||||
usernameLink,
|
||||
usernameLinkCorrupted,
|
||||
isUsernameDeletionEnabled,
|
||||
}: PropsType): JSX.Element {
|
||||
const focusInputRef = useRef<HTMLInputElement | null>(null);
|
||||
const [editState, setEditState] = useState<EditState>(initialEditState);
|
||||
|
@ -208,6 +210,7 @@ export function ProfileEditor({
|
|||
firstName,
|
||||
});
|
||||
const [isResettingUsername, setIsResettingUsername] = useState(false);
|
||||
const [isUsernameNoticeVisible, setIsUsernameNoticeVisible] = useState(false);
|
||||
const [isResettingUsernameLink, setIsResettingUsernameLink] = useState(false);
|
||||
|
||||
// Reset username edit state when leaving
|
||||
|
@ -567,7 +570,11 @@ export function ProfileEditor({
|
|||
icon: 'ProfileEditor__username-menu__trash-icon',
|
||||
label: i18n('icu:ProfileEditor--username--delete'),
|
||||
onClick: () => {
|
||||
setUsernameEditState(UsernameEditState.ConfirmingDelete);
|
||||
if (isUsernameDeletionEnabled) {
|
||||
setUsernameEditState(UsernameEditState.ConfirmingDelete);
|
||||
} else {
|
||||
setIsUsernameNoticeVisible(true);
|
||||
}
|
||||
},
|
||||
},
|
||||
];
|
||||
|
@ -760,6 +767,17 @@ export function ProfileEditor({
|
|||
</ConfirmationDialog>
|
||||
)}
|
||||
|
||||
{isUsernameNoticeVisible && (
|
||||
<ConfirmationDialog
|
||||
dialogName="ProfileEditor.confirmDeleteUsername"
|
||||
i18n={i18n}
|
||||
onClose={() => setIsUsernameNoticeVisible(false)}
|
||||
cancelText={i18n('icu:ok')}
|
||||
>
|
||||
{i18n('icu:ProfileEditor--username--delete-unavailable-notice')}
|
||||
</ConfirmationDialog>
|
||||
)}
|
||||
|
||||
{confirmDiscardAction && (
|
||||
<ConfirmDiscardDialog
|
||||
i18n={i18n}
|
||||
|
|
|
@ -18,6 +18,7 @@ import {
|
|||
getUsernameLinkColor,
|
||||
getUsernameLink,
|
||||
getUsernameLinkCorrupted,
|
||||
isInternalUser,
|
||||
} from '../selectors/items';
|
||||
import { getMe } from '../selectors/conversations';
|
||||
import { selectRecentEmojis } from '../selectors/emojis';
|
||||
|
@ -81,6 +82,7 @@ function mapStateToProps(
|
|||
usernameLinkColor,
|
||||
usernameLinkCorrupted,
|
||||
usernameLink,
|
||||
isUsernameDeletionEnabled: isInternalUser(state),
|
||||
|
||||
renderEditUsernameModalBody,
|
||||
};
|
||||
|
|
Loading…
Reference in a new issue