Set expanded state, update via +/− buttons

Test plan: Try clicking on the buttons and see that they toggle between
plus and minus. They don't do anything else.

Paired with @wchargin
This commit is contained in:
Dandelion Mané 2018-05-10 15:43:49 -07:00
parent 6714d4b95e
commit 4bea0133db
1 changed files with 20 additions and 2 deletions

View File

@ -149,7 +149,7 @@ export class PagerankTable extends React.Component<Props, State> {
} }
} }
type RTState = {}; type RTState = {expanded: boolean};
type RTProps = {| type RTProps = {|
+address: Address, +address: Address,
+graph: Graph<any, any>, +graph: Graph<any, any>,
@ -157,12 +157,30 @@ type RTProps = {|
|}; |};
class RecursiveTable extends React.Component<RTProps, RTState> { class RecursiveTable extends React.Component<RTProps, RTState> {
constructor() {
super();
this.state = {expanded: false};
}
render() { render() {
const {address, graph, pagerankResult} = this.props; const {address, graph, pagerankResult} = this.props;
const {expanded} = this.state;
const score = pagerankResult.get(address).probability; const score = pagerankResult.get(address).probability;
return ( return (
<tr key={JSON.stringify(address)}> <tr key={JSON.stringify(address)}>
<td>{nodeDescription(graph, address)}</td> <td>
<button
style={{marginRight: 5}}
onClick={() => {
this.setState(({expanded}) => ({
expanded: !expanded,
}));
}}
>
{expanded ? "\u2212" : "+"}
</button>
{nodeDescription(graph, address)}
</td>
<td>{(score * 100).toPrecision(3)}</td> <td>{(score * 100).toPrecision(3)}</td>
<td>{Math.log(score).toPrecision(3)}</td> <td>{Math.log(score).toPrecision(3)}</td>
</tr> </tr>