Control UI visibility in ProfileEditor

This commit is contained in:
Fedor Indutny 2024-02-14 12:30:32 -08:00 committed by GitHub
parent 0fe797e511
commit 9b98e20a8c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 29 additions and 1 deletions

View file

@ -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,

View file

@ -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}