mirror of https://github.com/grafana/grafana
parent
837beda155
commit
adda84d124
@ -1,67 +0,0 @@ |
|||||||
|
|
||||||
import * as React from 'react'; |
|
||||||
import * as ReactDOM from 'react-dom'; |
|
||||||
import coreModule from '../core_module'; |
|
||||||
|
|
||||||
export interface ICoolButtonProps { |
|
||||||
count: number; |
|
||||||
} |
|
||||||
|
|
||||||
export interface ICoolButtonState { |
|
||||||
count: number; |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
export class CoolButton extends React.Component<ICoolButtonProps, ICoolButtonState> { |
|
||||||
|
|
||||||
constructor(props) { |
|
||||||
super(props); |
|
||||||
|
|
||||||
this.state = {count: 1}; |
|
||||||
} |
|
||||||
|
|
||||||
onClick() { |
|
||||||
this.setState(prevState => ({ |
|
||||||
count: prevState.count + 1 |
|
||||||
})); |
|
||||||
console.log(this.state.count); |
|
||||||
} |
|
||||||
|
|
||||||
render() { |
|
||||||
return ( |
|
||||||
<div> |
|
||||||
<h2 onClick={this.onClick.bind(this)}>Hello</h2> |
|
||||||
<div>{this.state.count}</div> |
|
||||||
<a href="/alerting">Go to alerting</a> |
|
||||||
</div> |
|
||||||
); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
export interface Props { |
|
||||||
fname: string; |
|
||||||
onClick: () => void; |
|
||||||
} |
|
||||||
|
|
||||||
function SecondButton({fname, onClick}: Props) { |
|
||||||
return ( |
|
||||||
<div className="hello"> |
|
||||||
<div className="greeting"> |
|
||||||
Hello {fname} |
|
||||||
</div> |
|
||||||
<div> |
|
||||||
<button onClick={onClick}>button</button> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
); |
|
||||||
} |
|
||||||
|
|
||||||
coreModule.directive('coolButton', function(reactDirective) { |
|
||||||
return reactDirective(CoolButton); |
|
||||||
}); |
|
||||||
|
|
||||||
coreModule.directive('secondButton', function(reactDirective) { |
|
||||||
return reactDirective(SecondButton, [ |
|
||||||
['fname', {watchDepth: 'value'}] |
|
||||||
]); |
|
||||||
}); |
|
Loading…
Reference in new issue