import * as React from "react"; import {AbstractModal} from "tc-shared/ui/react-elements/ModalDefinitions"; import {ClientIcon} from "svg-sprites/client-icons"; import {ErrorBoundary} from "tc-shared/ui/react-elements/ErrorBoundary"; import {useMemo} from "react"; const cssStyle = require("./Modal.scss"); export const InternalModalContentRenderer = React.memo((props: { modal: AbstractModal, onClose?: () => void, onMinimize?: () => void, containerClass?: string, headerClass?: string, headerTitleClass?: string, bodyClass?: string, refContent?: React.Ref, windowed: boolean, }) => { const body = useMemo(() => props.modal.renderBody({ windowed: props.windowed }), [props.modal]); const title = useMemo(() => props.modal.renderTitle(), [props.modal]); return (
{tr("Modal
{title}
{!props.onMinimize ? undefined : (
)} {!props.onClose ? undefined : (
)}
{body}
); }); export class InternalModalRenderer extends React.PureComponent<{ modal: AbstractModal, onClose: () => void }, { show: boolean }> { private readonly refModal = React.createRef(); constructor(props) { super(props); this.state = { show: false }; } render() { let modalExtraClass = ""; const type = this.props.modal.type(); if(typeof type === "string" && type !== "none") { modalExtraClass = cssStyle["modal-type-" + type]; } const showClass = this.state.show ? cssStyle.shown : ""; return (
this.onBackdropClick(event)} ref={this.refModal} >
); } private onBackdropClick(event: React.MouseEvent) { if(event.target !== this.refModal.current || event.isDefaultPrevented()) return; this.props.onClose(); } }