Fix StickerButton

Co-authored-by: Fedor Indutny <79877362+indutny-signal@users.noreply.github.com>
This commit is contained in:
Scott Nonnenberg 2022-06-08 14:40:08 -07:00
parent f1b05afe62
commit 79c52847cd
3 changed files with 44 additions and 28 deletions

View file

@ -61,7 +61,12 @@ export class MainHeader extends React.Component<PropsType, StateType> {
} }
}; };
public showAvatarPopup = (): void => { public showAvatarPopup = (
event: React.MouseEvent<HTMLButtonElement, MouseEvent>
): void => {
event.preventDefault();
event.stopPropagation();
const popperRoot = document.createElement('div'); const popperRoot = document.createElement('div');
document.body.appendChild(popperRoot); document.body.appendChild(popperRoot);

View file

@ -44,13 +44,18 @@ export const EmojiButton = React.memo(
null null
); );
const handleClickButton = React.useCallback(() => { const handleClickButton = React.useCallback(
if (popperRoot) { (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
setOpen(false); event.preventDefault();
} else { event.stopPropagation();
setOpen(true); if (popperRoot) {
} setOpen(false);
}, [popperRoot, setOpen]); } else {
setOpen(true);
}
},
[popperRoot, setOpen]
);
const handleClose = React.useCallback(() => { const handleClose = React.useCallback(() => {
setOpen(false); setOpen(false);

View file

@ -67,27 +67,33 @@ export const StickerButton = React.memo(
null null
); );
const handleClickButton = React.useCallback(() => { const handleClickButton = React.useCallback(
// Clear tooltip state (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
clearInstalledStickerPack(); event.preventDefault();
clearShowIntroduction(); event.stopPropagation();
// Handle button click // Clear tooltip state
if (installedPacks.length === 0) { clearInstalledStickerPack();
onClickAddPack?.(); clearShowIntroduction();
} else if (popperRoot) {
setOpen(false); // Handle button click
} else { if (installedPacks.length === 0) {
setOpen(true); onClickAddPack?.();
} } else if (popperRoot) {
}, [ setOpen(false);
clearInstalledStickerPack, } else {
clearShowIntroduction, setOpen(true);
installedPacks, }
onClickAddPack, },
popperRoot, [
setOpen, clearInstalledStickerPack,
]); clearShowIntroduction,
installedPacks,
onClickAddPack,
popperRoot,
setOpen,
]
);
const handlePickSticker = React.useCallback( const handlePickSticker = React.useCallback(
(packId: string, stickerId: number, url: string) => { (packId: string, stickerId: number, url: string) => {