diff --git a/openbis_ng_ui/src/js/components/common/grid/Grid.jsx b/openbis_ng_ui/src/js/components/common/grid/Grid.jsx index c92e7f64234b5775ad0b2e1fe32e18fdc4fcddae..832911f7e926720434f52cd15bc37bb290de6093 100644 --- a/openbis_ng_ui/src/js/components/common/grid/Grid.jsx +++ b/openbis_ng_ui/src/js/components/common/grid/Grid.jsx @@ -303,7 +303,7 @@ class Grid extends React.PureComponent { renderRow(row) { const { selectable, multiselectable, onRowClick } = this.props - const { selectedRow, multiselectedRows } = this.state + const { selectedRow, multiselectedRows, heights } = this.state const visibleColumns = this.controller.getVisibleColumns() @@ -312,6 +312,7 @@ class Grid extends React.PureComponent { key={row.id} columns={visibleColumns} row={row} + heights={heights[row.id] || {}} clickable={onRowClick ? true : false} selectable={selectable} selected={selectedRow ? selectedRow.id === row.id : false} @@ -320,6 +321,7 @@ class Grid extends React.PureComponent { onClick={this.controller.handleRowClick} onSelect={this.controller.handleRowSelect} onMultiselect={this.controller.handleRowMultiselect} + onMeasured={this.controller.handleMeasured} /> ) } diff --git a/openbis_ng_ui/src/js/components/common/grid/GridCell.jsx b/openbis_ng_ui/src/js/components/common/grid/GridCell.jsx index 8a2fa7e31dcc828955594c96cbaf11e3ffc27404..81ac853a1fd9ec49773a92a0b252af9af10dc1e9 100644 --- a/openbis_ng_ui/src/js/components/common/grid/GridCell.jsx +++ b/openbis_ng_ui/src/js/components/common/grid/GridCell.jsx @@ -33,8 +33,7 @@ class GridCell extends React.PureComponent { super(props) this.state = { - renderMore: false, - moreOpen: false + more: false } this.ref = React.createRef() this.handleMoreClick = this.handleMoreClick.bind(this) @@ -42,12 +41,35 @@ class GridCell extends React.PureComponent { componentDidMount() { this.renderDOMValue() - this.maybeScheduleRenderMore() + + setTimeout(() => { + if (this.ref.current) { + const { column, row, onMeasured } = this.props + const height = this.ref.current.scrollHeight + if (column.truncate && height > TRUNCATE_HEIGHT) { + onMeasured(column, row, height) + } + } + }, 1) + } + + componentDidUpdate() { + this.renderDOMValue() + + setTimeout(() => { + if (this.ref.current) { + const { column, row, onMeasured } = this.props + const height = this.ref.current.scrollHeight + if (column.truncate && height > TRUNCATE_HEIGHT) { + onMeasured(column, row, height) + } + } + }, 1) } handleMoreClick() { this.setState(state => ({ - moreOpen: !state.moreOpen + more: !state.more })) } @@ -55,7 +77,7 @@ class GridCell extends React.PureComponent { logger.log(logger.DEBUG, 'GridCell.render') const { column, className, classes } = this.props - const { moreOpen } = this.state + const { more } = this.state const cellClasses = [classes.cell] if (className) { @@ -66,7 +88,7 @@ class GridCell extends React.PureComponent { if (column.nowrap) { divClasses.push(classes.nowrap) } - if (column.truncate && !moreOpen) { + if (column.truncate && !more) { divClasses.push(classes.truncate) } @@ -116,31 +138,23 @@ class GridCell extends React.PureComponent { } renderMore() { - const { renderMore, moreOpen } = this.state + const { column, height } = this.props + const { more } = this.state - if (!renderMore) { - return null + if (!column.truncate) { + return } - return ( - <div> - <Link onClick={this.handleMoreClick}> - {moreOpen ? messages.get(messages.LESS) : messages.get(messages.MORE)} - </Link> - </div> - ) - } - - maybeScheduleRenderMore() { - const { column } = this.props - if ( - column.truncate && - this.ref.current && - this.ref.current.scrollHeight > TRUNCATE_HEIGHT - ) { - setTimeout(() => { - this.setState({ renderMore: true }) - }, 1) + if (height && height > TRUNCATE_HEIGHT) { + return ( + <div> + <Link onClick={this.handleMoreClick}> + {more ? messages.get(messages.LESS) : messages.get(messages.MORE)} + </Link> + </div> + ) + } else { + return null } } } diff --git a/openbis_ng_ui/src/js/components/common/grid/GridController.js b/openbis_ng_ui/src/js/components/common/grid/GridController.js index 1870d74fd491c657887be90db0b9cbd06dbe1254..80ceac7f42e4e25ee3f5b1d07f7165c51f888f5d 100644 --- a/openbis_ng_ui/src/js/components/common/grid/GridController.js +++ b/openbis_ng_ui/src/js/components/common/grid/GridController.js @@ -60,6 +60,7 @@ export default class GridController { allRows: [], selectedRow: null, multiselectedRows: {}, + heights: {}, sortings: sortings, totalCount: 0, exportOptions: { @@ -1136,6 +1137,26 @@ export default class GridController { await this._saveSettings() } + async handleMeasured(column, row, height) { + if (!this.heights) { + this.heights = {} + } + + const rowHeights = this.heights[row.id] || {} + rowHeights[column.name] = height + this.heights[row.id] = rowHeights + + if (this.heightsTimeout) { + clearTimeout(this.heightsTimeout) + } + + setTimeout(() => { + this.context.setState({ + heights: this.heights + }) + }, 500) + } + getAllColumns() { const { allColumns, columnsSorting } = this.context.getState() diff --git a/openbis_ng_ui/src/js/components/common/grid/GridRow.jsx b/openbis_ng_ui/src/js/components/common/grid/GridRow.jsx index f6b0eb3daf75745644349c26f3d0f528b068cba4..9665d0820cfdde59f84071dc167edf19c704e4df 100644 --- a/openbis_ng_ui/src/js/components/common/grid/GridRow.jsx +++ b/openbis_ng_ui/src/js/components/common/grid/GridRow.jsx @@ -117,7 +117,7 @@ class GridRow extends React.PureComponent { } renderCell(column, columnIndex, row) { - const { classes } = this.props + const { heights, classes } = this.props const cellClasses = [classes.cell] if (columnIndex === 0) { @@ -128,8 +128,10 @@ class GridRow extends React.PureComponent { <GridCell key={column.name} row={row} + height={heights[column.name]} column={column} className={cellClasses.join(' ')} + onMeasured={this.props.onMeasured} /> ) }