Fix dialog closing animation jank

Signed-off-by: Ajay Bura <ajbura@gmail.com>
This commit is contained in:
Ajay Bura 2021-12-14 17:26:32 +05:30
parent 1df4d32d69
commit ba64ba0bd0
3 changed files with 20 additions and 12 deletions

View file

@ -10,14 +10,17 @@ import ScrollView from '../../atoms/scroll/ScrollView';
import RawModal from '../../atoms/modal/RawModal'; import RawModal from '../../atoms/modal/RawModal';
function Dialog({ function Dialog({
className, isOpen, title, className, isOpen, title, onAfterOpen, onAfterClose,
contentOptions, onRequestClose, children, contentOptions, onRequestClose, closeFromOutside, children,
}) { }) {
return ( return (
<RawModal <RawModal
className={`${className === null ? '' : `${className} `}dialog-model`} className={`${className === null ? '' : `${className} `}dialog-model`}
isOpen={isOpen} isOpen={isOpen}
onAfterOpen={onAfterOpen}
onAfterClose={onAfterClose}
onRequestClose={onRequestClose} onRequestClose={onRequestClose}
closeFromOutside={closeFromOutside}
size="small" size="small"
> >
<div className="dialog"> <div className="dialog">
@ -44,7 +47,10 @@ function Dialog({
Dialog.defaultProps = { Dialog.defaultProps = {
className: null, className: null,
contentOptions: null, contentOptions: null,
onAfterOpen: null,
onAfterClose: null,
onRequestClose: null, onRequestClose: null,
closeFromOutside: true,
}; };
Dialog.propTypes = { Dialog.propTypes = {
@ -52,7 +58,10 @@ Dialog.propTypes = {
isOpen: PropTypes.bool.isRequired, isOpen: PropTypes.bool.isRequired,
title: PropTypes.string.isRequired, title: PropTypes.string.isRequired,
contentOptions: PropTypes.node, contentOptions: PropTypes.node,
onAfterOpen: PropTypes.func,
onAfterClose: PropTypes.func,
onRequestClose: PropTypes.func, onRequestClose: PropTypes.func,
closeFromOutside: PropTypes.bool,
children: PropTypes.node.isRequired, children: PropTypes.node.isRequired,
}; };

View file

@ -253,11 +253,10 @@ function ProfileViewer() {
}; };
}, []); }, []);
useEffect(() => { const handleAfterClose = () => {
if (isOpen) return;
setUserId(null); setUserId(null);
setRoomId(null); setRoomId(null);
}, [isOpen]); };
function renderProfile() { function renderProfile() {
const member = room.getMember(userId) || mx.getUser(userId) || {}; const member = room.getMember(userId) || mx.getUser(userId) || {};
@ -298,10 +297,11 @@ function ProfileViewer() {
className="profile-viewer__dialog" className="profile-viewer__dialog"
isOpen={isOpen} isOpen={isOpen}
title={`${username} in ${room?.name ?? ''}`} title={`${username} in ${room?.name ?? ''}`}
onAfterClose={handleAfterClose}
onRequestClose={() => setIsOpen(false)} onRequestClose={() => setIsOpen(false)}
contentOptions={<IconButton src={CrossIC} onClick={() => setIsOpen(false)} tooltip="Close" />} contentOptions={<IconButton src={CrossIC} onClick={() => setIsOpen(false)} tooltip="Close" />}
> >
{isOpen && renderProfile()} {roomId ? renderProfile() : <div />}
</Dialog> </Dialog>
); );
} }

View file

@ -30,12 +30,10 @@ function ReadReceipts() {
}; };
}, []); }, []);
useEffect(() => { const handleAfterClose = () => {
if (isOpen === false) { setReaders([]);
setReaders([]); setRoomId(null);
setRoomId(null); };
}
}, [isOpen]);
function renderPeople(userId) { function renderPeople(userId) {
const room = initMatrix.matrixClient.getRoom(roomId); const room = initMatrix.matrixClient.getRoom(roomId);
@ -62,6 +60,7 @@ function ReadReceipts() {
<Dialog <Dialog
isOpen={isOpen} isOpen={isOpen}
title="Seen by" title="Seen by"
onAfterClose={handleAfterClose}
onRequestClose={() => setIsOpen(false)} onRequestClose={() => setIsOpen(false)}
contentOptions={<IconButton src={CrossIC} onClick={() => setIsOpen(false)} tooltip="Close" />} contentOptions={<IconButton src={CrossIC} onClick={() => setIsOpen(false)} tooltip="Close" />}
> >