Add condition to modal

This way we prevent unwanted data loading, invisible updates
and visual artifacts when the modal isn't visible.

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
Tilman Vatteroth 2022-01-06 22:36:28 +01:00
parent 89eac12a38
commit 9500887ee6

View file

@ -48,23 +48,25 @@ export const CommonModal: React.FC<CommonModalProps> = ({
}, [title, titleIsI18nKey]) }, [title, titleIsI18nKey])
return ( return (
<Modal <ShowIf condition={show}>
{...cypressId(props)} <Modal
show={show} {...cypressId(props)}
onHide={onHide} show={show}
animation={true} onHide={onHide}
dialogClassName={`text-dark ${additionalClasses ?? ''}`} animation={true}
size={modalSize}> dialogClassName={`text-dark ${additionalClasses ?? ''}`}
<Modal.Header closeButton={!!showCloseButton}> size={modalSize}>
<Modal.Title> <Modal.Header closeButton={!!showCloseButton}>
<ShowIf condition={!!titleIcon}> <Modal.Title>
<ForkAwesomeIcon icon={titleIcon as IconName} /> <ShowIf condition={!!titleIcon}>
&nbsp; <ForkAwesomeIcon icon={titleIcon as IconName} />
</ShowIf> &nbsp;
{titleElement} </ShowIf>
</Modal.Title> {titleElement}
</Modal.Header> </Modal.Title>
{children} </Modal.Header>
</Modal> {children}
</Modal>
</ShowIf>
) )
} }