Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Don't close sticker picker if shift is pressed when sending stickers #6477

Closed
wants to merge 1 commit into from
Closed

Don't close sticker picker if shift is pressed when sending stickers #6477

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 2 additions & 20 deletions ts/components/stickers/StickerButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,22 +106,6 @@ export const StickerButton = React.memo(function StickerButtonInner({
setOpen,
]);

const handlePickSticker = React.useCallback(
(packId: string, stickerId: number, url: string) => {
setOpen(false);
onPickSticker(packId, stickerId, url);
},
[setOpen, onPickSticker]
);

const handlePickTimeSticker = React.useCallback(
(style: 'analog' | 'digital') => {
setOpen(false);
onPickTimeSticker?.(style);
},
[setOpen, onPickTimeSticker]
);

const handleClose = React.useCallback(() => {
setOpen(false);
}, [setOpen]);
Expand Down Expand Up @@ -367,10 +351,8 @@ export const StickerButton = React.memo(function StickerButtonInner({
onClickAddPack={
onClickAddPack ? handleClickAddPack : undefined
}
onPickSticker={handlePickSticker}
onPickTimeSticker={
onPickTimeSticker ? handlePickTimeSticker : undefined
}
onPickSticker={onPickSticker}
onPickTimeSticker={onPickTimeSticker}
recentStickers={recentStickers}
showPickerHint={showPickerHint}
/>
Expand Down
26 changes: 22 additions & 4 deletions ts/components/stickers/StickerPicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,8 +92,11 @@ export const StickerPicker = React.memo(
tabIds[recentStickers.length > 0 ? 0 : Math.min(1, tabIds.length)]
);
const selectedPack = packs.find(({ id }) => id === currentTab);
// Prevent recent stickers from re-rendering each time the user sends a sticker
// while keeping the sticker picker open (using Shift).
const recentStickersRef = React.useRef(recentStickers);
const {
stickers = recentStickers,
stickers = recentStickersRef.current,
title: packTitle = 'Recent Stickers',
} = selectedPack || {};

Expand Down Expand Up @@ -321,7 +324,12 @@ export const StickerPicker = React.memo(
<button
type="button"
className="module-sticker-picker__body__cell module-sticker-picker__time--digital"
onClick={() => onPickTimeSticker('digital')}
onClick={e => {
if (!e.shiftKey) {
onClose();
}
return onPickTimeSticker('digital');
}}
>
{getDateTimeFormatter({
hour: 'numeric',
Expand All @@ -337,7 +345,12 @@ export const StickerPicker = React.memo(
'icu:stickers__StickerPicker__analog-time'
)}
className="module-sticker-picker__body__cell module-sticker-picker__time--analog"
onClick={() => onPickTimeSticker('analog')}
onClick={e => {
if (!e.shiftKey) {
onClose();
}
return onPickTimeSticker('analog');
}}
type="button"
>
<span
Expand Down Expand Up @@ -378,7 +391,12 @@ export const StickerPicker = React.memo(
ref={maybeFocusRef}
key={`${packId}-${id}`}
className="module-sticker-picker__body__cell"
onClick={() => onPickSticker(packId, id, url)}
onClick={e => {
if (!e.shiftKey) {
onClose();
}
return onPickSticker(packId, id, url);
}}
>
<img
className="module-sticker-picker__body__cell__image"
Expand Down