87 lines
2.1 KiB
JavaScript
87 lines
2.1 KiB
JavaScript
|
/* global $, APP */
|
||
|
|
|
||
|
|
import React, { Component } from 'react';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Implements an abstract React Component for overlay - the components which
|
||
|
|
* are displayed on top of the application covering the whole screen.
|
||
|
|
*
|
||
|
|
* @abstract
|
||
|
|
*/
|
||
|
|
export default class AbstractOverlay extends Component {
|
||
|
|
/**
|
||
|
|
* Initializes a new AbstractOverlay instance.
|
||
|
|
*
|
||
|
|
* @param {Object} props - The read-only properties with which the new
|
||
|
|
* instance is to be initialized.
|
||
|
|
* @public
|
||
|
|
*/
|
||
|
|
constructor(props) {
|
||
|
|
super(props);
|
||
|
|
|
||
|
|
this.state = {
|
||
|
|
/**
|
||
|
|
* Indicates the css style of the overlay. if true - lighter and
|
||
|
|
* darker otherwise.
|
||
|
|
* @type {boolean}
|
||
|
|
*/
|
||
|
|
isLightOverlay: false
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Abstract method which should be used by subclasses to provide the overlay
|
||
|
|
* content.
|
||
|
|
*
|
||
|
|
* @returns {ReactElement|null}
|
||
|
|
* @protected
|
||
|
|
*/
|
||
|
|
_renderOverlayContent() {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* This method is executed when comonent is mounted.
|
||
|
|
*
|
||
|
|
* @inheritdoc
|
||
|
|
* @returns {void}
|
||
|
|
*/
|
||
|
|
componentDidMount() {
|
||
|
|
// XXX Temporary solution until we add React translation.
|
||
|
|
APP.translation.translateElement($('#overlay'));
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Reloads the page.
|
||
|
|
*
|
||
|
|
* @returns {void}
|
||
|
|
* @protected
|
||
|
|
*/
|
||
|
|
_reconnectNow() {
|
||
|
|
// FIXME: In future we should dispatch an action here that will result
|
||
|
|
// in reload.
|
||
|
|
APP.ConferenceUrl.reload();
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Implements React's {@link Component#render()}.
|
||
|
|
*
|
||
|
|
* @inheritdoc
|
||
|
|
* @returns {ReactElement|null}
|
||
|
|
*/
|
||
|
|
render() {
|
||
|
|
const containerClass = this.state.isLightOverlay
|
||
|
|
? 'overlay__container-light' : 'overlay__container';
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className = { containerClass }
|
||
|
|
id = 'overlay'>
|
||
|
|
<div className = 'overlay__content'>
|
||
|
|
{ this._renderOverlayContent() }
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|