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

signalapp · Dec 7, 2023 · bdec880 · bdec880
1 parent 313a26f
commit bdec880
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 24 deletions.
diff --git a/ts/components/stickers/StickerButton.tsx b/ts/components/stickers/StickerButton.tsx
@@ -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]);
@@ -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}
                   />

diff --git a/ts/components/stickers/StickerPicker.tsx b/ts/components/stickers/StickerPicker.tsx
@@ -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 || {};
 
@@ -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',
@@ -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
@@ -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"