TeaSpeak/TeaWeb
TeaSpeak/TeaWeb
1
0
Fork 0
Code Issues 1 Pull requests Activity

Avoiding modal double rendering on opening

Browse source
This commit is contained in:
WolverinDEV 2021-01-17 18:47:49 +01:00
parent 3257e90bc1
commit 7918af1b31
1 changed files with 8 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
shared/js/ui/react-elements/internal-modal/Renderer.tsx
View file

@ -2,10 +2,11 @@ import * as React from "react";
import {AbstractModal} from "tc-shared/ui/react-elements/ModalDefinitions"; import {AbstractModal} from "tc-shared/ui/react-elements/ModalDefinitions";
import {ClientIcon} from "svg-sprites/client-icons"; import {ClientIcon} from "svg-sprites/client-icons";
import {ErrorBoundary} from "tc-shared/ui/react-elements/ErrorBoundary"; import {ErrorBoundary} from "tc-shared/ui/react-elements/ErrorBoundary";
import {useMemo} from "react";
const cssStyle = require("./Modal.scss"); const cssStyle = require("./Modal.scss");
export const InternalModalContentRenderer = (props: { export const InternalModalContentRenderer = React.memo((props: {
modal: AbstractModal, modal: AbstractModal,
onClose?: () => void, onClose?: () => void,
@ -18,6 +19,9 @@ export const InternalModalContentRenderer = (props: {
refContent?: React.Ref<HTMLDivElement> refContent?: React.Ref<HTMLDivElement>
}) => { }) => {
const body = useMemo(() => props.modal.renderBody(), [props.modal]);
const title = useMemo(() => props.modal.renderTitle(), [props.modal]);
return ( return (
<div className={cssStyle.content + " " + props.containerClass} ref={props.refContent}> <div className={cssStyle.content + " " + props.containerClass} ref={props.refContent}>
<div className={cssStyle.header + " " + props.headerClass}> <div className={cssStyle.header + " " + props.headerClass}>
@ -26,7 +30,7 @@ export const InternalModalContentRenderer = (props: {
</div> </div>
<div className={cssStyle.title + " " + props.headerTitleClass}> <div className={cssStyle.title + " " + props.headerTitleClass}>
<ErrorBoundary> <ErrorBoundary>
{props.modal.title()} {title}
</ErrorBoundary> </ErrorBoundary>
</div> </div>
{!props.onMinimize ? undefined : ( {!props.onMinimize ? undefined : (
@ -42,12 +46,12 @@ export const InternalModalContentRenderer = (props: {
</div> </div>
<div className={cssStyle.body + " " + props.bodyClass}> <div className={cssStyle.body + " " + props.bodyClass}>
<ErrorBoundary> <ErrorBoundary>
{props.modal.renderBody()} {body}
</ErrorBoundary> </ErrorBoundary>
</div> </div>
</div> </div>
); );
}; });
export class InternalModalRenderer extends React.PureComponent<{ modal: AbstractModal, onClose: () => void }, { show: boolean }> { export class InternalModalRenderer extends React.PureComponent<{ modal: AbstractModal, onClose: () => void }, { show: boolean }> {
private readonly refModal = React.createRef<HTMLDivElement>(); private readonly refModal = React.createRef<HTMLDivElement>();