bigbluebutton-Github/bigbluebutton-html5/imports/ui/components/common/modal/base/component.jsx

92 lines
2.0 KiB
React
Raw Normal View History

import React, { Component } from 'react';
import PropTypes from 'prop-types';
2021-11-11 03:10:35 +08:00
import Styled from './styles';
2021-09-05 06:36:48 +08:00
import { registerTitleView, unregisterTitleView } from '/imports/utils/dom-utils';
2016-09-01 03:52:17 +08:00
const propTypes = {
overlayClassName: PropTypes.string.isRequired,
portalClassName: PropTypes.string.isRequired,
contentLabel: PropTypes.string.isRequired,
2016-09-01 03:52:17 +08:00
isOpen: PropTypes.bool.isRequired,
};
const defaultProps = {
overlayClassName: 'modalOverlay',
contentLabel: 'Modal',
2017-04-19 03:06:51 +08:00
isOpen: true,
2016-09-01 03:52:17 +08:00
};
export default class ModalBase extends Component {
2021-09-05 06:36:48 +08:00
componentDidMount() {
registerTitleView(this.props.contentLabel);
}
componentWillUnmount() {
unregisterTitleView();
}
2016-09-01 03:52:17 +08:00
render() {
2022-01-20 21:03:18 +08:00
const {
isOpen,
'data-test': dataTest,
2022-01-20 21:03:18 +08:00
} = this.props;
if (!isOpen) return null;
2017-01-27 22:32:54 +08:00
return (
2021-11-11 03:10:35 +08:00
<Styled.BaseModal
2021-02-22 17:30:33 +08:00
{...this.props}
parentSelector={() => {
if (document.fullscreenElement &&
2021-09-05 06:36:48 +08:00
document.fullscreenElement.nodeName &&
document.fullscreenElement.nodeName.toLowerCase() === 'div')
2021-02-22 17:30:33 +08:00
return document.fullscreenElement;
else return document.body;
}}
2022-01-20 21:03:18 +08:00
data={{
test: dataTest ?? null,
2022-01-20 21:03:18 +08:00
}}
2021-02-22 17:30:33 +08:00
>
2017-01-27 22:32:54 +08:00
{this.props.children}
2021-11-11 03:10:35 +08:00
</Styled.BaseModal>
2017-01-27 22:32:54 +08:00
);
2016-09-01 03:52:17 +08:00
}
2017-06-03 03:25:02 +08:00
}
2016-09-01 03:52:17 +08:00
ModalBase.propTypes = propTypes;
ModalBase.defaultProps = defaultProps;
2017-06-03 03:25:02 +08:00
export const withModalState = ComponentToWrap =>
class ModalStateWrapper extends Component {
constructor(props) {
super(props);
this.state = {
2017-04-19 03:06:51 +08:00
isOpen: true,
};
this.hide = this.hide.bind(this);
2017-04-19 03:06:51 +08:00
this.show = this.show.bind(this);
}
2021-09-05 06:36:48 +08:00
hide(cb = () => { }) {
Promise.resolve(cb())
.then(() => this.setState({ isOpen: false }));
}
2021-09-05 06:36:48 +08:00
show(cb = () => { }) {
Promise.resolve(cb())
.then(() => this.setState({ isOpen: true }));
}
render() {
2017-06-03 03:25:02 +08:00
return (<ComponentToWrap
2017-04-19 03:06:51 +08:00
{...this.props}
modalHide={this.hide}
modalShow={this.show}
modalisOpen={this.state.isOpen}
2017-06-03 03:25:02 +08:00
/>);
}
};