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 832911f7e926720434f52cd15bc37bb290de6093..c54e15a602de2c59d7b21585c2cdead9801a711f 100644 --- a/openbis_ng_ui/src/js/components/common/grid/Grid.jsx +++ b/openbis_ng_ui/src/js/components/common/grid/Grid.jsx @@ -312,7 +312,7 @@ class Grid extends React.PureComponent { key={row.id} columns={visibleColumns} row={row} - heights={heights[row.id] || {}} + heights={heights[row.id]} clickable={onRowClick ? true : false} selectable={selectable} selected={selectedRow ? selectedRow.id === row.id : false} 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 81ac853a1fd9ec49773a92a0b252af9af10dc1e9..7baa768d78c8d14aa08a1c80e8dc154f27428157 100644 --- a/openbis_ng_ui/src/js/components/common/grid/GridCell.jsx +++ b/openbis_ng_ui/src/js/components/common/grid/GridCell.jsx @@ -6,7 +6,7 @@ import Link from '@material-ui/core/Link' import messages from '@src/js/common/messages.js' import logger from '@src/js/common/logger.js' -const TRUNCATE_HEIGHT = 50 +const TRUNCATE_HEIGHT = 100 const styles = theme => ({ cell: { @@ -40,31 +40,16 @@ class GridCell extends React.PureComponent { } componentDidMount() { - 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) + this.componentDidUpdate() } 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) + if (this.ref.current) { + const { column, row, onMeasured } = this.props + onMeasured(this.ref, column, row) + } } handleMoreClick() { 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 80ceac7f42e4e25ee3f5b1d07f7165c51f888f5d..cefaa229feda1f9ab9c268217938fbf3332855f4 100644 --- a/openbis_ng_ui/src/js/components/common/grid/GridController.js +++ b/openbis_ng_ui/src/js/components/common/grid/GridController.js @@ -97,6 +97,7 @@ export default class GridController { const state = this.context.getState() const newState = { ...state, + heights: {}, loading: false, loaded: true } @@ -207,6 +208,8 @@ export default class GridController { newState.columnsSorting = newColumnsSorting } + this.cellRefs = null + // do not update filters (this would override filter changes that a user could do while grid was loading) delete newState.filters delete newState.globalFilter @@ -1137,24 +1140,41 @@ export default class GridController { await this._saveSettings() } - async handleMeasured(column, row, height) { - if (!this.heights) { - this.heights = {} + async handleMeasured(cellRef, column, row) { + if (!this.cellRefs) { + this.cellRefs = {} } - const rowHeights = this.heights[row.id] || {} - rowHeights[column.name] = height - this.heights[row.id] = rowHeights + const rowCellRefs = this.cellRefs[row.id] || {} + rowCellRefs[column.name] = cellRef + this.cellRefs[row.id] = rowCellRefs - if (this.heightsTimeout) { - clearTimeout(this.heightsTimeout) + if (this.heightsTimeoutId) { + clearTimeout(this.heightsTimeoutId) } - setTimeout(() => { - this.context.setState({ - heights: this.heights + this.heightsTimeoutId = setTimeout(() => { + this.context.setState(state => { + const heights = {} + + Object.keys(this.cellRefs).forEach(rowId => { + const rowCellRefs = this.cellRefs[rowId] + heights[rowId] = {} + Object.keys(rowCellRefs).forEach(columnName => { + const cellRef = rowCellRefs[columnName] + if (cellRef.current) { + heights[rowId][columnName] = cellRef.current.scrollHeight + } + }) + }) + + const mergedHeights = _.merge({}, state.heights, heights) + + return { + heights: mergedHeights + } }) - }, 500) + }, 100) } getAllColumns() { 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 9665d0820cfdde59f84071dc167edf19c704e4df..1108b27dbd24cd6f3f868d8b64385d6684098bb6 100644 --- a/openbis_ng_ui/src/js/components/common/grid/GridRow.jsx +++ b/openbis_ng_ui/src/js/components/common/grid/GridRow.jsx @@ -128,7 +128,7 @@ class GridRow extends React.PureComponent { <GridCell key={column.name} row={row} - height={heights[column.name]} + height={heights ? heights[column.name] : undefined} column={column} className={cellClasses.join(' ')} onMeasured={this.props.onMeasured}