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