diff options
author | Kali Kaneko (leap communications) <kali@leap.se> | 2016-09-01 01:44:34 -0400 |
---|---|---|
committer | Kali Kaneko (leap communications) <kali@leap.se> | 2016-09-01 01:44:34 -0400 |
commit | 4728855b40d2d37da8e035c5081fab5819b07fd0 (patch) | |
tree | c8a7c727521fe06a2c4fe9221cb77d30e8f0c3b9 /www/app/components/center.js | |
parent | 4613e74ce4e2c8b125a6a61585a4aec5f5151969 (diff) |
[refactor] move js to top-level folder
Diffstat (limited to 'www/app/components/center.js')
-rw-r--r-- | www/app/components/center.js | 52 |
1 files changed, 52 insertions, 0 deletions
diff --git a/www/app/components/center.js b/www/app/components/center.js new file mode 100644 index 00000000..a3b6409a --- /dev/null +++ b/www/app/components/center.js @@ -0,0 +1,52 @@ +// +// puts a block right in the center of the window +// + +import React from 'react' + +const CONTAINER_CSS = { + position: 'absolute', + display: 'flex', + justifyContent: 'center', + alignContent: 'center', + alignItems: 'center', + top: "0px", + left: "0px", + height: "100%", + width: "100%" +} + +const ITEM_CSS = { + flex: "0 1 auto" +} + +class Center extends React.Component { + + static get defaultProps() {return{ + width: null + }} + + constructor(props) { + super(props) + } + + render() { + let style = this.props.width ? Object.assign({width: this.props.width + 'px'}, ITEM_CSS) : ITEM_CSS + return ( + <div className="center-container" style={CONTAINER_CSS}> + <div className="center-item" style={style}> + {this.props.children} + </div> + </div> + ) + } +} + +Center.propTypes = { + children: React.PropTypes.oneOfType([ + React.PropTypes.element, + React.PropTypes.arrayOf(React.PropTypes.element) + ]) +} + +export default Center |