bigbluebutton-Github/bigbluebutton-html5/imports/ui/components/modal/base/component.jsx
2016-08-31 19:52:17 +00:00

62 lines
1.3 KiB
JavaScript

import React, { Component, PropTypes } from 'react';
import ReactModal from 'react-modal';
import styles from './styles.scss';
import cx from 'classnames';
const propTypes = {
isOpen: PropTypes.bool.isRequired,
onShow: PropTypes.func,
onHide: PropTypes.func,
};
const defaultProps = {
isOpen: false,
};
export default class ModalBase extends Component {
constructor(props) {
super(props);
this.handleAfterOpen = this.handleAfterOpen.bind(this);
this.handleRequestClose = this.handleRequestClose.bind(this);
}
handleAfterOpen() {
const { onShow } = this.props;
if (onShow) {
onShow.call(this, ...arguments);
}
}
handleRequestClose() {
const { onHide } = this.props;
if (onHide) {
onHide.call(this, ...arguments);
}
}
render() {
const {
isOpen,
onShow,
onHide,
className,
} = this.props;
return (
<ReactModal
className={cx(styles.modal, className)}
overlayClassName={styles.overlay}
portalClassName={styles.portal}
isOpen={isOpen}
onAfterOpen={this.handleAfterOpen}
onRequestClose={this.handleRequestClose}>
{this.props.children}
</ReactModal>
);
}
};
ModalBase.propTypes = propTypes;
ModalBase.defaultProps = defaultProps;