michael/cinny
1
0
Fork 0
Code Issues 8 Pull requests Projects Releases Packages Wiki Activity

Fix scroll when switching between home and DM (#243)

Browse source 
Signed-off-by: Ajay Bura <ajbura@gmail.com>
This commit is contained in:
Ajay Bura 2022-01-26 15:54:58 +05:30
parent f4d24420e7
commit f47998a553
1 changed files with 27 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
src/app/organisms/navigation/Drawer.jsx
View file

@ -1,4 +1,4 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import './Drawer.scss'; import './Drawer.scss';
import initMatrix from '../../../client/initMatrix'; import initMatrix from '../../../client/initMatrix';
@ -18,28 +18,21 @@ function Drawer() {
const [systemState, setSystemState] = useState(null); const [systemState, setSystemState] = useState(null);
const [selectedTab, setSelectedTab] = useState(navigation.selectedTab); const [selectedTab, setSelectedTab] = useState(navigation.selectedTab);
const [spaceId, setSpaceId] = useState(navigation.selectedSpaceId); const [spaceId, setSpaceId] = useState(navigation.selectedSpaceId);
const scrollRef = useRef(null);
function onTabSelected(tabId) {
setSelectedTab(tabId);
}
function onSpaceSelected(roomId) {
setSpaceId(roomId);
}
function onRoomLeaved(roomId) {
const lRoomIndex = navigation.selectedSpacePath.indexOf(roomId);
if (lRoomIndex === -1) return;
if (lRoomIndex === 0) selectTab(cons.tabs.HOME);
else selectSpace(navigation.selectedSpacePath[lRoomIndex - 1]);
}
function handleSystemState(state) {
if (state === 'ERROR' || state === 'RECONNECTING' || state === 'STOPPED') {
setSystemState({ status: 'Connection lost!' });
}
if (systemState !== null) setSystemState(null);
}
useEffect(() => { useEffect(() => {
const onTabSelected = (tabId) => {
setSelectedTab(tabId);
};
const onSpaceSelected = (roomId) => {
setSpaceId(roomId);
};
const onRoomLeaved = (roomId) => {
const lRoomIndex = navigation.selectedSpacePath.indexOf(roomId);
if (lRoomIndex === -1) return;
if (lRoomIndex === 0) selectTab(cons.tabs.HOME);
else selectSpace(navigation.selectedSpacePath[lRoomIndex - 1]);
};
navigation.on(cons.events.navigation.TAB_SELECTED, onTabSelected); navigation.on(cons.events.navigation.TAB_SELECTED, onTabSelected);
navigation.on(cons.events.navigation.SPACE_SELECTED, onSpaceSelected); navigation.on(cons.events.navigation.SPACE_SELECTED, onSpaceSelected);
initMatrix.roomList.on(cons.events.roomList.ROOM_LEAVED, onRoomLeaved); initMatrix.roomList.on(cons.events.roomList.ROOM_LEAVED, onRoomLeaved);
@ -50,19 +43,31 @@ function Drawer() {
}; };
}, []); }, []);
useEffect(() => { useEffect(() => {
const handleSystemState = (state) => {
if (state === 'ERROR' || state === 'RECONNECTING' || state === 'STOPPED') {
setSystemState({ status: 'Connection lost!' });
}
if (systemState !== null) setSystemState(null);
};
initMatrix.matrixClient.on('sync', handleSystemState); initMatrix.matrixClient.on('sync', handleSystemState);
return () => { return () => {
initMatrix.matrixClient.removeListener('sync', handleSystemState); initMatrix.matrixClient.removeListener('sync', handleSystemState);
}; };
}, [systemState]); }, [systemState]);
useEffect(() => {
requestAnimationFrame(() => {
scrollRef.current.scrollTop = 0;
});
}, [selectedTab]);
return ( return (
<div className="drawer"> <div className="drawer">
<DrawerHeader selectedTab={selectedTab} spaceId={spaceId} /> <DrawerHeader selectedTab={selectedTab} spaceId={spaceId} />
<div className="drawer__content-wrapper"> <div className="drawer__content-wrapper">
{selectedTab !== cons.tabs.DIRECTS && <DrawerBreadcrumb spaceId={spaceId} />} {selectedTab !== cons.tabs.DIRECTS && <DrawerBreadcrumb spaceId={spaceId} />}
<div className="rooms__wrapper"> <div className="rooms__wrapper">
<ScrollView autoHide> <ScrollView ref={scrollRef} autoHide>
<div className="rooms-container"> <div className="rooms-container">
{ {
selectedTab !== cons.tabs.DIRECTS selectedTab !== cons.tabs.DIRECTS