Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Commit

Permalink
Implement <Search>'s onEnter callback
Browse files Browse the repository at this point in the history
  • Loading branch information
ckiee committed Jun 29, 2022
1 parent 8d48e52 commit b74d103
Showing 1 changed file with 16 additions and 9 deletions.
25 changes: 16 additions & 9 deletions src/components/views/rooms/MSC2545StickerPicker.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ limitations under the License.
*/

import { IImageInfo, Room } from 'matrix-js-sdk/src/matrix';
import React, { useCallback, useContext, useEffect, useState } from 'react';
import React, { useContext, useState } from 'react';

import MatrixClientContext from '../../../contexts/MatrixClientContext';
import { mediaFromMxc } from '../../../customisations/Media';
Expand Down Expand Up @@ -57,8 +57,9 @@ const PackImage: React.FC<{
image: I2545Image,
roomId: string,
threadId: string,
setStickerPickerOpen: (isStickerPickerOpen: boolean) => void;
}> = ({ image, roomId, threadId, setStickerPickerOpen }) => {
setStickerPickerOpen: (isStickerPickerOpen: boolean) => void,
innerRef: React.RefObject<HTMLImageElement> | null
}> = ({ image, roomId, threadId, setStickerPickerOpen, innerRef }) => {
const cli = useContext(MatrixClientContext);
const media = mediaFromMxc(image.url, cli);
// noinspection JSIgnoredPromiseFromCall
Expand All @@ -74,7 +75,7 @@ const PackImage: React.FC<{

// eslint-disable-next-line new-cap
return <div className={cc("imageContainer")}>
<img src={media.srcHttp} onClick={onImageClick} alt={image.body} />
<img ref={innerRef} src={media.srcHttp} onClick={onImageClick} alt={image.body} />
</div>;
};

Expand Down Expand Up @@ -104,13 +105,18 @@ export const MSC2545StickerPicker: React.FC<{
});
}).flat(1);

const finished = () => {
const topStickerRef = React.createRef<HTMLImageElement>();

const finished = (send: boolean) => () => {
if (isStickerPickerOpen) {
if (send) topStickerRef.current.click();
setStickerPickerOpen(false);
setSearchFilter("");
}
};

const renderedPacks = packs.map(({ pack, packName }) => {

const renderedPacks = packs.map(({ pack, packName }, packIdx) => {
const lcFilter = searchFilter.toLowerCase().trim(); // filter is case insensitive
const images = Object.values(pack.images)
.filter(im => im.body.toLowerCase().includes(lcFilter));
Expand All @@ -121,6 +127,7 @@ export const MSC2545StickerPicker: React.FC<{
<h3 className={cc("label")}>{pack.pack.display_name}</h3>
<div className={cc("grid")}>
{images.map((im, idx) => <PackImage
innerRef={(!packIdx && !idx) ? topStickerRef : null}
key={idx}
image={im}
roomId={room.roomId}
Expand All @@ -135,7 +142,7 @@ export const MSC2545StickerPicker: React.FC<{
chevronFace={ChevronFace.Bottom}
menuWidth={300}
menuHeight={500}
onFinished={finished}
onFinished={finished(false)}
menuPaddingTop={0}
menuPaddingLeft={0}
menuPaddingRight={0}
Expand All @@ -144,10 +151,10 @@ export const MSC2545StickerPicker: React.FC<{
>
<GenericElementContextMenu element={
<ScrollPanel startAtBottom={false} className={cc("root")}>
<Search query={searchFilter} onChange={setSearchFilter} onEnter={() => { }} />
<Search query={searchFilter} onChange={setSearchFilter} onEnter={finished(true)} />
{renderedPacks}
</ScrollPanel>}
onResize={finished} />
onResize={finished(false)} />
</ContextMenu>;
};

Expand Down

0 comments on commit b74d103

Please sign in to comment.