labo-components/app/components/FlexModal.jsx

B&G UI components

import React from 'react';
import PropTypes from 'prop-types';

import ComponentUtil from '../util/ComponentUtil';
import IDUtil from '../util/IDUtil';
import Draggable from 'react-draggable';

class FlexModal extends React.Component {

	constructor(props) {
		super(props);
		this.CLASS_PREFIX = 'fm';
	}

	handleKey = event => {
		if (event.keyCode === 27) {
			this.close(true);
		}

		if (this.props.onKeyPressed) {
			this.props.onKeyPressed(event.keyCode);
		}
	};

	componentDidMount() {
		const instance = $('#' + this.props.elementId)
			.modal({
				keyboard: true,
				backdrop: true,
				show: true
			})
			.on('hidden.bs.modal', this.close.bind(this, false));
		document.addEventListener('keydown', this.handleKey, false);
	}

	componentWillUnmount() {
		document.removeEventListener('keydown', this.handleKey, false);
	}

	close(manualCloseRequired, e) {
		if (e) {
			e.stopPropagation();
		}
		if (this.props.owner) {
			//let the owner hide the modal
			ComponentUtil.hideModal(
				this.props.owner,
				this.props.stateVariable,
				this.props.elementId,
				manualCloseRequired
			);
		} else if (manualCloseRequired) {
			//otherwise hide it here
			$('#' + this.props.elementId).modal('hide');
		}

		// onClose callback
		if (this.props.onClose) {
			this.props.onClose();
		}
	}

	render() {
		const classNames = ['modal-dialog'];
		if (this.props.size === 'large') {
			classNames.push('modal-xl');
		} else if (this.props.size === 'medium') {
			;  // use default
		}else if (this.props.size === 'small') {
			classNames.push('modal-sm');
		} else {
			// the default is a custom class, which is actually only used in combination with float 'right'
			classNames.push(IDUtil.cssClassName('custom', this.CLASS_PREFIX));
		}

		return (
			<div
				id={this.props.elementId}
				className={[
					'modal',
					'fade',
					IDUtil.cssClassName('flex-modal')
				].join(' ')}
			>
				<Draggable enableUserSelectHack={false}>
					<div
						className={classNames.join(' ')}
						style={{
							float: this.props.float ? this.props.float : 'none'
						}}
					>
						<div className="modal-content">
							<div className="modal-header">
								<h5 className="modal-title">
									{this.props.title}
								</h5>
								<button	type="button" className="close"	onClick={this.close.bind(this, true)}>
									<span aria-hidden="true">&times;</span>
								</button>
							</div>
							<div className="modal-body">
								{this.props.children}
							</div>
						</div>
					</div>
				</Draggable>
			</div>
		);
	}
}

FlexModal.propTypes = {
	children: PropTypes.node.isRequired,
	elementId: PropTypes.string.isRequired,
	owner: PropTypes.object.isRequired,
	size: PropTypes.string,
	stateVariable: PropTypes.string.isRequired,
	onClose: PropTypes.func
};

export default FlexModal;