c461e8b63c
In this case makes more sense to have overlay frame included in every overlay instead of abstract class that implements the overlay frame and have to be extended by every overlay. In addition, mapStateToProps isn't working well with inheritance.
53 lines
1.3 KiB
JavaScript
53 lines
1.3 KiB
JavaScript
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 OverlayFrame extends Component {
|
|
/**
|
|
* OverlayFrame component's property types.
|
|
*
|
|
* @static
|
|
*/
|
|
static propTypes = {
|
|
/**
|
|
* The children components to be displayed into the overlay frame.
|
|
*/
|
|
children: React.PropTypes.node.isRequired,
|
|
|
|
/**
|
|
* Indicates the css style of the overlay. If true, then lighter;
|
|
* darker, otherwise.
|
|
*
|
|
* @type {boolean}
|
|
*/
|
|
isLightOverlay: React.PropTypes.bool
|
|
}
|
|
|
|
/**
|
|
* Implements React's {@link Component#render()}.
|
|
*
|
|
* @inheritdoc
|
|
* @returns {ReactElement|null}
|
|
*/
|
|
render() {
|
|
const containerClass = this.props.isLightOverlay
|
|
? 'overlay__container-light' : 'overlay__container';
|
|
|
|
return (
|
|
<div
|
|
className = { containerClass }
|
|
id = 'overlay'>
|
|
<div className = 'overlay__content'>
|
|
{
|
|
this.props.children
|
|
}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|