Fix dialog closing animation jank
Signed-off-by: Ajay Bura <ajbura@gmail.com>
This commit is contained in:
parent
1df4d32d69
commit
ba64ba0bd0
3 changed files with 20 additions and 12 deletions
|
@ -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,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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" />}
|
||||||
>
|
>
|
||||||
|
|
Loading…
Reference in a new issue