Ivan - dev3 deploy implementation fixes
This commit is contained in:
parent
060f1b7a12
commit
bf7513740c
|
@ -87,7 +87,9 @@ let DemoPage = React.createClass({
|
|||
title: 'Tooltip',
|
||||
render: (
|
||||
<div>
|
||||
<Tooltip content="mensaje mensa jemensajemens ajem ensaje nsaje adicionals">hola</Tooltip>
|
||||
<Tooltip content="mensaje mensa jemensajemens ajem ensaje nsaje adicionals" openOnHover={true}>
|
||||
hola
|
||||
</Tooltip>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
|
|
|
@ -5,19 +5,21 @@ class Tooltip extends React.Component {
|
|||
|
||||
static propTypes = {
|
||||
children: React.PropTypes.node,
|
||||
content: React.PropTypes.node
|
||||
content: React.PropTypes.node,
|
||||
openOnHover: React.PropTypes.bool
|
||||
};
|
||||
|
||||
constructor (props){
|
||||
super(props);
|
||||
this.state = {show : false};
|
||||
}
|
||||
state = {
|
||||
show : false
|
||||
};
|
||||
|
||||
render (){
|
||||
return (
|
||||
<div className="tooltip" >
|
||||
<div {...this.getProps()}>
|
||||
{(this.state.show) ? this.renderAnimatedMessage() : null}
|
||||
<div className="tooltip__children" onClick={this.onClick.bind(this)}>{this.props.children}</div>
|
||||
<div {...this.getChildrenProps()}>
|
||||
{this.props.children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -40,6 +42,41 @@ class Tooltip extends React.Component {
|
|||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
getProps(){
|
||||
let props = {};
|
||||
|
||||
props.className = 'tooltip';
|
||||
|
||||
if(this.props.openOnHover) {
|
||||
props.onMouseOver = this.onMouseOver.bind(this);
|
||||
props.onMouseOut = this.onMouseOut.bind(this);
|
||||
}
|
||||
|
||||
return props;
|
||||
}
|
||||
|
||||
getChildrenProps() {
|
||||
let props = {};
|
||||
props.className= 'tooltip__children';
|
||||
|
||||
if (this.props.openOnHover) {
|
||||
props.onClick= this.onClick.bind(this);
|
||||
}
|
||||
return props;
|
||||
}
|
||||
|
||||
onMouseOver() {
|
||||
this.setState({
|
||||
show:true
|
||||
})
|
||||
}
|
||||
onMouseOut() {
|
||||
this.setState({
|
||||
show:false
|
||||
})
|
||||
}
|
||||
|
||||
onClick(){
|
||||
if (this.state.show) {
|
||||
this.setState({show : false});
|
||||
|
|
Loading…
Reference in New Issue