From dfda3e0b0bebb67acf8c1ba60462f18c0ab7cf4f Mon Sep 17 00:00:00 2001 From: Roland Schilter Date: Wed, 5 Jul 2017 14:27:36 +0200 Subject: [PATCH] Show table overflow only if limit exceeded by 2+ Having to toggle a +1 feels weird while that +1 takes up the same vertical space as displaying that row. --- .../node-details/node-details-table.js | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/client/app/scripts/components/node-details/node-details-table.js b/client/app/scripts/components/node-details/node-details-table.js index fc61aa0a2d..6fff5f0495 100644 --- a/client/app/scripts/components/node-details/node-details-table.js +++ b/client/app/scripts/components/node-details/node-details-table.js @@ -132,7 +132,7 @@ class NodeDetailsTable extends React.Component { super(props, context); this.state = { - limit: props.limit || NODE_DETAILS_DATA_ROWS_DEFAULT_LIMIT, + limit: props.limit, sortedDesc: this.props.sortedDesc, sortedBy: this.props.sortedBy }; @@ -155,7 +155,7 @@ class NodeDetailsTable extends React.Component { } handleLimitClick() { - const limit = this.state.limit ? 0 : NODE_DETAILS_DATA_ROWS_DEFAULT_LIMIT; + const limit = this.state.limit ? 0 : this.props.limit; this.setState({ limit }); } @@ -226,11 +226,16 @@ class NodeDetailsTable extends React.Component { } } - const limited = nodes && this.state.limit > 0 && nodes.length > this.state.limit; - const expanded = this.state.limit === 0; - const notShown = nodes.length - this.state.limit; + // If we are 1 over the limit, we still show the row. We never display + // "+1" but only "+2" and up. + const limit = this.state.limit > 0 && nodes.length === this.state.limit + 1 + ? nodes.length + : this.state.limit; + const limited = nodes && limit > 0 && nodes.length > limit; + const expanded = limit === 0; + const notShown = nodes.length - limit; if (nodes && limited) { - nodes = nodes.slice(0, this.state.limit); + nodes = nodes.slice(0, limit); } const className = classNames('node-details-table-wrapper-wrapper', this.props.className); @@ -287,6 +292,7 @@ class NodeDetailsTable extends React.Component { NodeDetailsTable.defaultProps = { nodeIdKey: 'id', // key to identify a node in a row (used for topology links) + limit: NODE_DETAILS_DATA_ROWS_DEFAULT_LIMIT, onSortChange: () => {}, sortedDesc: null, sortedBy: null,