TogglePanelWidget

Source

index.js
import React from 'react';
import PropTypes from 'prop-types';

import style from 'PVWStyle/ReactWidgets/TogglePanelWidget.mcss';

export default class TogglePanelWidget extends React.Component {
constructor(props) {
super(props);
this.state = {
panelVisible: props.panelVisible,
};

// Bind callback
this.togglePanel = this.togglePanel.bind(this);
}

componentWillReceiveProps(nextProps) {
if (nextProps.value !== this.state.enabled) {
this.setState({ enabled: nextProps.value });
}
if (nextProps.panelVisible !== this.state.panelVisible) {
this.setState({ panelVisible: nextProps.panelVisible });
}
}

togglePanel() {
const panelVisible = !this.state.panelVisible;
this.setState({ panelVisible });
}

render() {
const buttonAnchor = this.props.anchor.join(' ');
const panelAnchor = this.props.position.join(' ');

return (
<div
className={style.container}
style={{
width: this.props.size.button[0],
height: this.props.size.button[1],
lineHeight: this.props.size.button[1],
}}
>
<span
className={
this.state.panelVisible ? style.panelVisible : style.panelHidden
}
style={{
width: this.props.size.button[0],
height: this.props.size.button[1],
lineHeight: this.props.size.button[1],
}}
onClick={this.togglePanel}
/>
<div className={[style.button, buttonAnchor].join(' ')}>
<div
className={[style.content, panelAnchor].join(' ')}
style={{
display: this.state.panelVisible ? 'block' : 'none',
width: this.props.size.panel[0],
}}
>
{this.props.children}
</div>
</div>
</div>
);
}
}

TogglePanelWidget.propTypes = {
anchor: PropTypes.array,
children: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
panelVisible: PropTypes.bool,
position: PropTypes.array,
size: PropTypes.object,
value: PropTypes.bool,
};

TogglePanelWidget.defaultProps = {
anchor: ['top', 'right'],
children: [],
panelVisible: false,
position: ['top', 'left'],
size: {
button: ['2em', '2em'],
panel: ['400px'],
},
value: false,
};