generator-bingo-dig-h5
Version:
Bingo-dig-h5 generator by BINGO.DIG
72 lines (55 loc) • 1.91 kB
JSX
var React = require('react');
var Classable = require('../mixins/classable');
var KeyLine = require('../utils/key-line');
var Paper = require('./paper');
var CssEvent = require('../utils/css-event');
var DropDownContainer = React.createClass({
mixins: [Classable],
propTypes: {
visible: React.PropTypes.bool,
zDepth: React.PropTypes.number,
Width: React.PropTypes.number
},
getDefaultProps: function() {
return {
visible: true,
zDepth: 1
}
},
componentDidMount: function() {
var el = this.getDOMNode();
//this._setKeyWidth(el);
this._initialMenuHeight = el.offsetHeight;
this._initialMenuWidth = this.props.Width ? this.props.Width : el.offsetWidth;
this._renderVisibility();
},
componentDidUpdate: function(prevProps, prevState) {
if (this.props.visible !== prevProps.visible) this._renderVisibility();
},
render: function() {
var classes = this.getClasses('dig-drop-down-container', {
'dig-visible': this.props.visible
});
return (
<Paper ref="paperContainer" zDepth={1} className={classes}>
{this.props.children}
</Paper>
);
},
_renderVisibility: function() {
var el = this.getDOMNode();
var innerContainer = this.refs.paperContainer.getInnerContainer().getDOMNode();
if (this.props.visible) {
el.style.height = this._initialMenuHeight + 'px';
el.style.width = KeyLine.getIncrementalDim(this._initialMenuWidth) + 'px' ;
CssEvent.onTransitionEnd(el, function() {
if (this.props.visible) innerContainer.style.overflow = 'visible';
}.bind(this));
} else {
el.style.height = '0px';
el.style.width = '0px';
innerContainer.style.overflow = 'hidden';
}
},
});
module.exports = DropDownContainer;