weave-scope/client/app/scripts/components/node-details/node-details-info.js

import React from 'react';

import MatchedText from '../matched-text';
import ShowMore from '../show-more';

export default class NodeDetailsInfo extends React.Component {

  constructor(props, context) {
    super(props, context);
    this.state = {
      expanded: false
    };
    this.handleClickMore = this.handleClickMore.bind(this);
  }

  handleClickMore() {
    const expanded = !this.state.expanded;
    this.setState({expanded});
  }

  render() {
    const { matches } = this.props;
    let rows = (this.props.rows || []);
    let notShown = 0;

    const prime = rows.filter(row => row.priority < 10);
    if (!this.state.expanded && prime.length < rows.length) {
      // check if there is a search match in non-prime fields
      const hasNonPrimeMatch = matches && rows.filter(row => row.priority >= 10
        && matches.has(row.id)).length > 0;
      if (!hasNonPrimeMatch) {
        notShown = rows.length - prime.length;
        rows = prime;
      }
    }

    return (
      <div className="node-details-info">
        {rows.map(field => (<div className="node-details-info-field" key={field.id}>
            <div className="node-details-info-field-label truncate" title={field.label}>
              {field.label}
            </div>
            <div className="node-details-info-field-value truncate" title={field.value}>
              <MatchedText text={field.value} matches={matches} fieldId={field.id} />
            </div>
          </div>
        ))}
        <ShowMore handleClick={this.handleClickMore} collection={this.props.rows}
          expanded={this.state.expanded} notShown={notShown} />
      </div>
    );
  }
}