Untitled

export class WindowModal extends React.Component {
    state = { display: '', overideStyle: { width: '70vw', height: '70vh' }, isZoomIn: false };
    _data = {};

    componentWillUnmount() {
        this.hide();
    }

    disabledClickOutside = () => {
        $(this.modal).modal({ backdrop: 'static', keyboard: false, show: false });
    };

    onShown = (modalShown) => {
        $(this.modal).on('shown.bs.modal', () => modalShown());
    }

    onHidden = (modalHidden) => {
        $(this.modal).on('hidden.bs.modal', () => modalHidden());
    }

    show = (item) => {
        this.onShow && this.onShow(item);
        $(this.modal).modal('show');
    }

    hide = () => {
        this.onHide && this.onHide();
        $(this.modal).modal('hide');
    }

    onZoomIn = () => {
        this.setState({ overideStyle: { width: '100vw', height: '100vh' }, isZoomIn: true });
    }
    onZoomOut = () => {
        this.setState({ overideStyle: { width: '70vw', height: '70vh' }, isZoomIn: false });
    }

    renderModal = ({ body, size, style = {} }) => {
        return (
            <div className='modal fade m-0 p-0' tabIndex='-1' role='dialog' ref={e => this.modal = e}>
                <form style={{ ...style, width: '100vw', maxWidth: 'unset', height: '100vh', overflow: 'hidden' }} className={'modal-dialog p-0 d-flex justify-content-center align-items-center m-0 ' + (size == 'large' ? ' modal-lg' : (size == 'extra-large' ? ' modal-xl' : ''))} role='document' onSubmit={e => { e.preventDefault() || this.onSubmit && this.submit(e); }}>
                    <div id='modal' className='modal-content m-0 p-0' style={this.state.overideStyle}>
                        <div className='modal-header p-2'>
                            <div className='d-flex' style={{ gap: 5 }}>

                                <button type='button' className='btn btn-danger m-0 p-0 d-flex justify-content-center align-items-center' style={{
                                    width: '1.5rem', height: '1.5rem', borderRadius: '50%'
                                }} onClick={() => this.hide()}>
                                    <i className='fa fa-times m-0 p-0' style={{ transform: 'scale(0.7)' }} />
                                </button>
                                <button type='button' className='btn btn-success m-0 p-0 d-flex justify-content-center align-items-center' style={{
                                    width: '1.5rem', height: '1.5rem', borderRadius: '50%'
                                }} onClick={() => this.state.isZoomIn ? this.onZoomOut() : this.onZoomIn()}>
                                    <i className='fa fa-arrows-alt m-0 p-0' style={{ transform: 'scale(0.7)' }} />
                                </button>
                            </div>
                        </div>
                        <div className='modal-body m-0 p-0'>{body}</div>
                    </div>
                </form>
            </div>);
    }

    render = () => null;
}