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

View file

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

View file

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