Improve Members Right Panel (#1286)

* fix room members hook

* fix resize observer hook

* add intersection observer hook

* install react-virtual lib

* improve right panel - WIP

* add filters for members

* fix bug in async search

* categories members and add search

* show spinner on room member fetch

* make invite member btn clickable

* so no member text

* add line between room view and member drawer

* fix imports

* add screen size hook

* fix set setting hook

* make member drawer responsive

* extract power level tags hook

* fix room members hook

* fix use async search api

* produce search result on filter change
This commit is contained in:
Ajay Bura 2023-06-22 09:14:50 +10:00 committed by GitHub
parent da32d0d9e7
commit c07905c360
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
19 changed files with 984 additions and 79 deletions

View file

@ -60,12 +60,13 @@ export function EmoticonAutocomplete({
);
}, [imagePacks]);
const [result, search] = useAsyncSearch(searchList, getEmoticonStr, SEARCH_OPTIONS);
const [result, search, resetSearch] = useAsyncSearch(searchList, getEmoticonStr, SEARCH_OPTIONS);
const autoCompleteEmoticon = result ? result.items : recentEmoji;
useEffect(() => {
search(query.text);
}, [query.text, search]);
if (query.text) search(query.text);
else resetSearch();
}, [query.text, search, resetSearch]);
const handleAutocomplete: EmoticonCompleteHandler = (key, shortcode) => {
const emoticonEl = createEmoticonElement(key, shortcode);

View file

@ -81,7 +81,7 @@ export function RoomMentionAutocomplete({
return [...spaces, ...rooms, ...directs].sort(roomIdByActivity);
}, []);
const [result, search] = useAsyncSearch(
const [result, search, resetSearch] = useAsyncSearch(
allRoomId,
useCallback(
(rId) => {
@ -99,8 +99,9 @@ export function RoomMentionAutocomplete({
const autoCompleteRoomIds = result ? result.items : allRoomId.slice(0, 20);
useEffect(() => {
search(query.text);
}, [query.text, search]);
if (query.text) search(query.text);
else resetSearch();
}, [query.text, search, resetSearch]);
const handleAutocomplete: MentionAutoCompleteHandler = (roomAliasOrId, name) => {
const mentionEl = createMentionElement(

View file

@ -94,12 +94,13 @@ export function UserMentionAutocomplete({
const roomAliasOrId = room?.getCanonicalAlias() || roomId;
const members = useRoomMembers(mx, roomId);
const [result, search] = useAsyncSearch(members, getRoomMemberStr, SEARCH_OPTIONS);
const [result, search, resetSearch] = useAsyncSearch(members, getRoomMemberStr, SEARCH_OPTIONS);
const autoCompleteMembers = result ? result.items : members.slice(0, 20);
useEffect(() => {
search(query.text);
}, [query.text, search]);
if (query.text) search(query.text);
else resetSearch();
}, [query.text, search, resetSearch]);
const handleAutocomplete: MentionAutoCompleteHandler = (uId, name) => {
const mentionEl = createMentionElement(