55 lines
1.9 KiB
JavaScript
55 lines
1.9 KiB
JavaScript
// - Import react components
|
|
import React, {Component} from 'react'
|
|
|
|
// - Import components
|
|
|
|
// - Import actions
|
|
|
|
// - Create component class
|
|
export default class SidebarContent extends Component {
|
|
|
|
static qcName= 'SidebarContent'
|
|
|
|
/**
|
|
* Component constructor
|
|
* @param {object} props is an object properties of component
|
|
*/
|
|
constructor(props) {
|
|
super(props)
|
|
|
|
// Default state
|
|
this.state = {}
|
|
|
|
// Binding function to `this`
|
|
this.handleClickCover = this.handleClickCover.bind(this)
|
|
}
|
|
|
|
/**
|
|
* Handle click on cover of sidebar
|
|
* @param {event} evt is a click event passed to funciton
|
|
*/
|
|
handleClickCover = (evt) => {
|
|
this.props.sidebar(false,'overlay')
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
* Reneder component DOM
|
|
* @return {react element} return the DOM which rendered by component
|
|
*/
|
|
render() {
|
|
let showCoverStyle = {position: "fixed", height: "100%", width: "100%", top: "0px", left: "0px", opacity: "1", backgroundColor: "rgba(255, 255, 255, 0.54)", WebkitTapHighlightColor: "rgba(0, 0, 0, 0)", willChange: "opacity", transform: "translateZ(0px)", transition: "left 0ms cubic-bezier(0.23, 1, 0.32, 1) 0ms, opacity 400ms cubic-bezier(0.23, 1, 0.32, 1) 0ms", zIndex: "1111", pointerEvents: "auto"}
|
|
let hideCoverStyle = {position: "fixed", height: "100%", width: "100%", top: "0px", left: "-100%", opacity: "0", backgroundColor: "rgba(255, 255, 255, 0.54)", WebkitTapHighlightColor: "rgba(0, 0, 0, 0)", willChange: "opacity", transform: "translateZ(0px)", transition: "left 0ms cubic-bezier(0.23, 1, 0.32, 1) 400ms, opacity 400ms cubic-bezier(0.23, 1, 0.32, 1) 0ms", zIndex: "1111", pointerEvents: "none"}
|
|
return (
|
|
<div id='sidebar-content'>
|
|
<div style={this.props.overlay ? showCoverStyle : hideCoverStyle} style={{overflow:'hidden'}} onClick={this.handleClickCover}></div>
|
|
<div className={this.props.className} style={this.props.cstyle}>
|
|
{this.props.children}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
}
|