diff --git a/res/css/views/rooms/_2545Stickers.scss b/res/css/views/rooms/_2545Stickers.scss index a58bdb676be8..bbc32b39b50f 100644 --- a/res/css/views/rooms/_2545Stickers.scss +++ b/res/css/views/rooms/_2545Stickers.scss @@ -7,6 +7,9 @@ // grrr height: unset !important; } + .mx_EmojiPicker_search { + margin: 0px 0px 8px 0px; + } } .mx_2545Stickers_grid { @@ -28,7 +31,5 @@ } .mx_2545Stickers_label { - padding-left: 1em; - padding-right: 1em; margin-top: 0px; } diff --git a/src/components/views/rooms/MSC2545StickerPicker.tsx b/src/components/views/rooms/MSC2545StickerPicker.tsx index d7b7bcb79010..2c03b5323749 100644 --- a/src/components/views/rooms/MSC2545StickerPicker.tsx +++ b/src/components/views/rooms/MSC2545StickerPicker.tsx @@ -18,13 +18,14 @@ limitations under the License. */ import { IImageInfo, Room } from 'matrix-js-sdk/src/matrix'; -import React, { useContext } from 'react'; +import React, { useCallback, useContext, useEffect, useState } from 'react'; import MatrixClientContext from '../../../contexts/MatrixClientContext'; import { mediaFromMxc } from '../../../customisations/Media'; import ContextMenu, { ChevronFace } from '../../structures/ContextMenu'; import ScrollPanel from '../../structures/ScrollPanel'; import GenericElementContextMenu from '../context_menus/GenericElementContextMenu'; +import Search from '../emojipicker/Search'; const EMOTE_ROOMS_EVENT_TYPE = "im.ponies.emote_rooms"; const ROOM_EMOTES_EVENT_TYPE = "im.ponies.room_emotes"; @@ -58,22 +59,12 @@ export const MSC2545StickerPicker: React.FC<{ setStickerPickerOpen: (isStickerPickerOpen: boolean) => void; }> = ({ room, threadId, menuPosition, isStickerPickerOpen, setStickerPickerOpen }) => { const cli = useContext(MatrixClientContext); + const [searchFilter, setSearchFilter] = useState(""); if (!isStickerPickerOpen) return null; const evt = cli.getAccountData(EMOTE_ROOMS_EVENT_TYPE); const evtContent = evt.event.content as { rooms: { [roomId: string]: { [packName: string]: {} } } }; - const packs = Object.keys(evtContent.rooms) - .map(roomId => { - const room = cli.getRoom(roomId); - return Object.keys(evtContent.rooms[roomId]) - .map(name => { - const pack = room.currentState.getStateEvents(ROOM_EMOTES_EVENT_TYPE, name) - .event.content as I2545Pack; - return { room, pack, packName: name }; - }); - }).flat(1); - const packImage = (image: I2545Image) => { const media = mediaFromMxc(image.url, cli); // noinspection JSIgnoredPromiseFromCall @@ -85,20 +76,21 @@ export const MSC2545StickerPicker: React.FC<{ }; // eslint-disable-next-line new-cap - return
+ return
; }; - const renderedPacks = packs.map(({ room, pack, packName }) => { - const images = Object.values(pack.images).map(packImage); - return
-

{ pack.pack.display_name }

-
- { images } -
-
; - }); + const packs = Object.keys(evtContent.rooms) + .map(roomId => { + const room = cli.getRoom(roomId); + return Object.keys(evtContent.rooms[roomId]) + .map(name => { + const pack = room.currentState.getStateEvents(ROOM_EMOTES_EVENT_TYPE, name) + .event.content as I2545Pack; + return { room, pack, packName: name }; + }); + }).flat(1); const finished = () => { if (isStickerPickerOpen) { @@ -106,6 +98,22 @@ export const MSC2545StickerPicker: React.FC<{ } }; + const renderedPacks = packs.map(({ pack, packName }) => { + const lcFilter = searchFilter.toLowerCase().trim(); // filter is case insensitive + const images = Object.values(pack.images) + .filter(im => im.body.toLowerCase().includes(lcFilter)); + + if (images.length == 0) return; + + return
+

{pack.pack.display_name}

+
+ {images.map(packImage)} +
+
; + }); + + return - { renderedPacks } + { }} /> + {renderedPacks} } - onResize={finished} /> + onResize={finished} /> ; };