diff --git a/ts/components/stickers/StickerButton.tsx b/ts/components/stickers/StickerButton.tsx index 88830702b4..1f16b0f65a 100644 --- a/ts/components/stickers/StickerButton.tsx +++ b/ts/components/stickers/StickerButton.tsx @@ -81,6 +81,13 @@ export const StickerButton = React.memo( [setOpen, onPickSticker] ); + const handleClose = React.useCallback( + () => { + setOpen(false); + }, + [setOpen] + ); + const handleClickAddPack = React.useCallback( () => { setOpen(false); @@ -253,6 +260,7 @@ export const StickerButton = React.memo( i18n={i18n} style={style} packs={installedPacks} + onClose={handleClose} onClickAddPack={handleClickAddPack} onPickSticker={handlePickSticker} recentStickers={recentStickers} diff --git a/ts/components/stickers/StickerPicker.md b/ts/components/stickers/StickerPicker.md index bd93ecb8d9..d234ddd321 100644 --- a/ts/components/stickers/StickerPicker.md +++ b/ts/components/stickers/StickerPicker.md @@ -156,6 +156,7 @@ const packs = [ sticker3, { ...sticker2, id: 9999 }, ]} + onClose={() => console.log('onClose')} onClickAddPack={() => console.log('onClickAddPack')} onPickSticker={(packId, stickerId) => console.log('onPickSticker', { packId, stickerId }) @@ -206,6 +207,7 @@ const packs = [ i18n={util.i18n} packs={packs} recentStickers={[]} + onClose={() => console.log('onClose')} onClickAddPack={() => console.log('onClickAddPack')} onPickSticker={(packId, stickerId) => console.log('onPickSticker', { packId, stickerId }) @@ -222,6 +224,7 @@ const packs = [ i18n={util.i18n} packs={[]} recentStickers={[]} + onClose={() => console.log('onClose')} onClickAddPack={() => console.log('onClickAddPack')} onPickSticker={(packId, stickerId) => console.log('onPickSticker', { packId, stickerId }) @@ -249,6 +252,7 @@ const packs = [ i18n={util.i18n} packs={packs} recentStickers={[]} + onClose={() => console.log('onClose')} onClickAddPack={() => console.log('onClickAddPack')} onPickSticker={(packId, stickerId) => console.log('onPickSticker', { packId, stickerId }) @@ -277,6 +281,7 @@ const packs = [ i18n={util.i18n} packs={packs} recentStickers={[]} + onClose={() => console.log('onClose')} onClickAddPack={() => console.log('onClickAddPack')} onPickSticker={(packId, stickerId) => console.log('onPickSticker', { packId, stickerId }) @@ -312,6 +317,7 @@ const packs = [ i18n={util.i18n} packs={packs} recentStickers={[]} + onClose={() => console.log('onClose')} onClickAddPack={() => console.log('onClickAddPack')} onPickSticker={(packId, stickerId) => console.log('onPickSticker', { packId, stickerId }) diff --git a/ts/components/stickers/StickerPicker.tsx b/ts/components/stickers/StickerPicker.tsx index 768f2d3331..af050588cb 100644 --- a/ts/components/stickers/StickerPicker.tsx +++ b/ts/components/stickers/StickerPicker.tsx @@ -7,6 +7,7 @@ import { LocalizerType } from '../../types/Util'; export type OwnProps = { readonly i18n: LocalizerType; + readonly onClose: () => unknown; readonly onClickAddPack: () => unknown; readonly onPickSticker: (packId: string, stickerId: number) => unknown; readonly packs: ReadonlyArray; @@ -59,6 +60,7 @@ export const StickerPicker = React.memo( i18n, packs, recentStickers, + onClose, onClickAddPack, onPickSticker, showPickerHint, @@ -96,6 +98,24 @@ export const StickerPicker = React.memo( [setPacksPage] ); + // Handle escape key + React.useEffect( + () => { + const handler = (e: KeyboardEvent) => { + if (e.key === 'Escape') { + onClose(); + } + }; + + document.addEventListener('keyup', handler); + + return () => { + document.removeEventListener('keyup', handler); + }; + }, + [onClose] + ); + const isEmpty = stickers.length === 0; const downloadError = selectedPack &&