Add support for table based controls

* if a node table has `controls` they will be rendered in a row
* controls need the to be of the same structure as node-level controls
* control errors are not shown
This commit is contained in:
David Kaltschmidt
2016-08-18 22:28:01 +01:00
parent 0f0c795416
commit 51bb6263bc
3 changed files with 38 additions and 17 deletions

View File

@@ -206,7 +206,7 @@ export class NodeDetails extends React.Component {
<Warning text={getTruncationText(table.truncationCount)} />
</span>}
</div>
<NodeDetailsLabels rows={table.rows}
<NodeDetailsLabels rows={table.rows} controls={table.controls}
matches={nodeMatches.get('tables')} />
</div>
);

View File

@@ -1,7 +1,9 @@
import React from 'react';
import { Map as makeMap } from 'immutable';
import sortBy from 'lodash/sortBy';
import MatchedText from '../matched-text';
import NodeDetailsControlButton from './node-details-control-button';
import ShowMore from '../show-more';
export default class NodeDetailsLabels extends React.Component {
@@ -13,6 +15,7 @@ export default class NodeDetailsLabels extends React.Component {
limit: this.DEFAULT_LIMIT,
};
this.handleLimitClick = this.handleLimitClick.bind(this);
this.renderControls = this.renderControls.bind(this);
}
handleLimitClick() {
@@ -20,8 +23,17 @@ export default class NodeDetailsLabels extends React.Component {
this.setState({limit});
}
renderControls(controls) {
return (
<div className="node-details-labels-controls">
{sortBy(controls, 'rank').map(control => <NodeDetailsControlButton
nodeId={control.nodeId} control={control} key={control.id} />)}
</div>
);
}
render() {
const { matches = makeMap() } = this.props;
const { controls, matches = makeMap() } = this.props;
let rows = this.props.rows;
let notShown = 0;
const limited = rows && this.state.limit > 0 && rows.length > this.state.limit;
@@ -37,6 +49,7 @@ export default class NodeDetailsLabels extends React.Component {
return (
<div className="node-details-labels">
{controls && this.renderControls(controls)}
{rows.map(field => (<div className="node-details-labels-field" key={field.id}>
<div className="node-details-labels-field-label truncate" title={field.label}
key={field.id}>