Reduce dom elements - Approach #1 #680
Conversation
| @@ -171,7 +171,7 @@ | |||
| .exampleTitle { | |||
| margin-bottom: 0; | |||
| overflow: hidden; | |||
| white-space: nowrap; | |||
| white-space: normal; | |||
There was a problem hiding this comment.
Change this style so that the content should not overflow from a particular cell .The text wraps to the next line when needed.
|
|
||
| class FixedDataTableCellGroupImpl extends React.Component { | ||
| class FixedDataTableCellGroup extends React.Component { |
There was a problem hiding this comment.
We will pass all the props from FixedDataTableRow to FixedDataTableCellGroup .So, I changed the name of FixedDataTableCellGroupImpl to FixedDataTableCellGroup
| @@ -59,6 +59,8 @@ class FixedDataTableCellGroupImpl extends React.Component { | |||
|
|
|||
| isHeaderOrFooter: PropTypes.bool, | |||
|
|
|||
| offsetLeft: PropTypes.number, | |||
|
|
|||
There was a problem hiding this comment.
To remove the wrapper div of CellGroup, we have to place the groups (fixed,scrollable,fixedright) according to the offsetLeft. Earlier we were seperating offsetLeft in below FixedDataTableCellGroup class component and adding one div to position the groups there .
| this.props.offsetLeft === nextProps.offsetLeft | ||
| ); | ||
| } | ||
|
|
There was a problem hiding this comment.
This LifeCycleMethod of React will check if there is changes in any of the following props than it will re-render the class component .
| static defaultProps = /*object*/ { | ||
| left: 0, | ||
| offsetLeft: 0, | ||
| }; | ||
|
|
There was a problem hiding this comment.
To place any particular cell we need these two thing one is left and the other one is offsetLeft . The left will be relative to the cell group and offsetLeft will be the position of that group from the left .
| @@ -201,17 +221,29 @@ class FixedDataTableRowImpl extends React.Component { | |||
| var style = { | |||
| width: this.props.width, | |||
| height: this.props.height + subRowHeight, | |||
| zIndex: this.props.zIndex ? this.props.zIndex : 0, | |||
| position: 'absolute', | |||
| }; | |||
There was a problem hiding this comment.
To differentiate the header or group header from the other rows we are using zIndex here .We will provide the styling for the row in this div only .
| this._initialRender, | ||
| this.props.isRTL | ||
| ); | ||
|
|
There was a problem hiding this comment.
FixedDataTableTranslateDOMPosition is used to set the position of the row from the top according to its offsetTop
| this.props.className, | ||
| cx('fixedDataTableRowLayout/body'), | ||
| cx('fixedDataTableRowLayout/rowWrapper') | ||
| )} |
There was a problem hiding this comment.
We have to join the wrapper class with the class of this div .One more div was used for fixedDataTableRowLayout also .We can join that class also to maintain the styling and removing one div also .
| @@ -15,7 +15,7 @@ | |||
| overflow: hidden; | |||
| position: absolute; | |||
| top: 0; | |||
| white-space: nowrap; | |||
| white-space: normal; | |||
| } | |||
|
|
|||
There was a problem hiding this comment.
Change this style so that the content should not overflow from a particular cell .The text wraps to the next line when needed.
| ); | ||
| } | ||
| } | ||
|
|
||
| export default FixedDataTableRow; |
There was a problem hiding this comment.
Now there is no need of this wrapper div .We have provided the styling and the className to the corresponding div .So we can remove this FixedDataTableRow class component and rename FixedDataTableRowImpl to FixedDataTableRow as we are passing all the props from FixedDataTable to FixedDataTableRow.
Description
Remove three div from FixedDataTableCellGroup and FixedDataTableRow
-> The first div was the wrapper div for the Cell group .
-> The second div was the wrapper div for the Row .
-> The third div was for row layout
Motivation and Context
-> For optimising the performance of fixed-data-table-2
How Has This Been Tested?
-> Tested using our local examples and performance dev tools
Screenshots (if appropriate):
-> Second screenshot is of column_virtualization
Types of changes
Checklist: