-
Notifications
You must be signed in to change notification settings - Fork 289
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Removing FixedDataTableCell div #687
base: column-virtualization
Are you sure you want to change the base?
Changes from 23 commits
f7b8628
c4e8c63
fde920c
f475a20
b90f33a
4fe0bc9
4ff2935
51696af
f4af336
31fbf7e
5aabef5
d10313a
a7f6949
9006cbd
f46247d
02ec021
8c90fec
ec226ff
f6dc4a7
77b730b
1fe34ad
eeef456
2cfdf0d
44b9a96
71203f3
505204a
329a443
479796e
31dc976
c419014
1e5dfd8
57cdf03
a813f30
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Large diffs are not rendered by default.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
import React from 'react'; | ||
import FixedDataTableTranslateDOMPosition from './FixedDataTableTranslateDOMPosition'; | ||
import cx from './vendor_upstream/stubs/cx'; | ||
|
||
function CellGroup(props) { | ||
var style = { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. here or every other place, use |
||
height: props.cellGroupWrapperHeight || props.height, | ||
position: 'absolute', | ||
width: props.contentWidth, | ||
zIndex: props.zIndex, | ||
}; | ||
|
||
FixedDataTableTranslateDOMPosition( | ||
style, | ||
-1 * props.left, | ||
0, | ||
props._initialRender, | ||
props.isRTL | ||
); | ||
|
||
if (props.isRTL) { | ||
style.right = props.offsetLeft; | ||
} else { | ||
style.left = props.offsetLeft; | ||
} | ||
return ( | ||
<div | ||
className={cx('fixedDataTableCellGroupLayout/cellGroup')} | ||
style={style} | ||
> | ||
{props.sortedCells} | ||
</div> | ||
); | ||
} | ||
export default CellGroup; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,44 @@ | ||
import React from 'react'; | ||
import FixedDataTableTranslateDOMPosition from './FixedDataTableTranslateDOMPosition'; | ||
import cx from './vendor_upstream/stubs/cx'; | ||
function CellGroupLegacy(props) { | ||
var style1 = { | ||
Archit101967 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
height: props.cellGroupWrapperHeight || props.height, | ||
width: props.width, | ||
}; | ||
|
||
if (props.isRTL) { | ||
style1.right = props.offsetLeft; | ||
} else { | ||
style1.left = props.offsetLeft; | ||
} | ||
|
||
var style2 = { | ||
height: props.height, | ||
position: 'absolute', | ||
width: props.contentWidth, | ||
zIndex: props.zIndex, | ||
}; | ||
FixedDataTableTranslateDOMPosition( | ||
style2, | ||
-1 * props.left, | ||
0, | ||
props._initialRender, | ||
props.isRTL | ||
); | ||
|
||
return ( | ||
<div | ||
style={style1} | ||
className={cx('fixedDataTableCellGroupLayout/cellGroupWrapper')} | ||
> | ||
<div | ||
className={cx('fixedDataTableCellGroupLayout/cellGroup')} | ||
style={style2} | ||
> | ||
{props.sortedCells} | ||
</div> | ||
</div> | ||
); | ||
} | ||
export default CellGroupLegacy; |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -872,6 +872,7 @@ class FixedDataTable extends React.Component { | |
fixedColumnsWidth={this.props.fixedColumnsWidth} | ||
fixedRightColumnsWidth={this.props.fixedRightColumnsWidth} | ||
isGroupHeader={true} | ||
shouldUseLegacyComponents={this.props.shouldUseLegacyComponents} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Declare proptype for There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Done |
||
/> | ||
); | ||
} | ||
|
@@ -923,6 +924,7 @@ class FixedDataTable extends React.Component { | |
endViewportColumnIndex={this.props.endColumnIndex} | ||
fixedColumnsWidth={this.props.fixedColumnsWidth} | ||
fixedRightColumnsWidth={this.props.fixedRightColumnsWidth} | ||
shouldUseLegacyComponents={this.props.shouldUseLegacyComponents} | ||
/> | ||
); | ||
} | ||
|
@@ -976,6 +978,7 @@ class FixedDataTable extends React.Component { | |
fixedRightColumnsWidth={this.props.fixedRightColumnsWidth} | ||
firstViewportColumnIndex={this.props.firstColumnIndex} | ||
endViewportColumnIndex={this.props.endColumnIndex} | ||
shouldUseLegacyComponents={this.props.shouldUseLegacyComponents} | ||
/> | ||
); | ||
|
||
|
@@ -1123,6 +1126,7 @@ class FixedDataTable extends React.Component { | |
fixedRightColumnsWidth={this.props.fixedRightColumnsWidth} | ||
scrollbarYWidth={props.scrollbarYWidth} | ||
isRTL={props.isRTL} | ||
shouldUseLegacyComponents={this.props.shouldUseLegacyComponents} | ||
/> | ||
); | ||
}; | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -20,6 +20,8 @@ import { polyfill as lifecycleCompatibilityPolyfill } from 'react-lifecycles-com | |
import ReorderCell from './plugins/ResizeReorder/ReorderCell'; | ||
import ResizeCell from './plugins/ResizeReorder/ResizeCell'; | ||
import { CellGroupType } from './enums/CellGroup'; | ||
import Cell from './FixedDataTableCellFunction'; | ||
import CellLegacy from './FixedDataTableCellLegacyFunction'; | ||
|
||
class FixedDataTableCell extends React.Component { | ||
/** | ||
|
@@ -223,6 +225,9 @@ class FixedDataTableCell extends React.Component { | |
height: this.props.height, | ||
width: this.props.width, | ||
left: this.props.left, | ||
shouldUseLegacyComponents: this.props.shouldUseLegacyComponents, | ||
style: style, | ||
className: className, | ||
}; | ||
|
||
if (props.rowIndex >= 0) { | ||
|
@@ -286,13 +291,12 @@ class FixedDataTableCell extends React.Component { | |
</FixedDataTableCellDefaultDeprecated> | ||
); | ||
} | ||
|
||
const role = isHeaderOrFooter ? 'columnheader' : 'gridcell'; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. We should not remove There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Done |
||
const CellComponent = this.props.shouldUseLegacyComponents | ||
? CellLegacy | ||
: Cell; | ||
|
||
return ( | ||
<div className={className} style={style} role={role}> | ||
{content} | ||
</div> | ||
<CellComponent className={className} style={style} content={content} /> | ||
); | ||
} | ||
} | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -15,6 +15,8 @@ import PropTypes from 'prop-types'; | |
|
||
import cx from './vendor_upstream/stubs/cx'; | ||
import joinClasses from './vendor_upstream/core/joinClasses'; | ||
import CellDefault from './FixedDataTableCellDefaultFunction'; | ||
import CellDefaultLegacy from './FixedDataTableCellDefaultLegacyFunction'; | ||
|
||
/** | ||
* Component that handles default cell layout and styling. | ||
|
@@ -70,44 +72,12 @@ class FixedDataTableCellDefault extends React.Component { | |
|
||
render() { | ||
//Remove some props which we don't pass into div | ||
var { | ||
height, | ||
width, | ||
style, | ||
className, | ||
children, | ||
columnKey, | ||
columnIndex, | ||
rowIndex, | ||
left, | ||
cellGroupType, | ||
isHeader, | ||
isGroupHeader, | ||
maxWidth, | ||
minWidth, | ||
...props | ||
} = this.props; | ||
|
||
var innerStyle = { | ||
height, | ||
width, | ||
...style, | ||
}; | ||
const CellDefaultComponent = this.props.shouldUseLegacyComponents | ||
? CellDefaultLegacy | ||
: CellDefault; | ||
|
||
return ( | ||
<div | ||
{...props} | ||
className={joinClasses( | ||
cx('fixedDataTableCellLayout/wrap'), | ||
cx('public/fixedDataTableCell/wrap'), | ||
cx('public/fixedDataTableCell/cellContent'), | ||
className | ||
)} | ||
style={innerStyle} | ||
> | ||
{children} | ||
</div> | ||
); | ||
return <CellDefaultComponent {...this.props} />; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. FixedDataTableCellDefault, aka DataCell, is essentially a type of cell that clients can utilize as a cell renderer. Clients have the flexibility to use any valid element or function as a cell renderer, and we have no control over the styles they apply to them. we want to solely apply the necessary styles to the There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. We are passing default styles and default classNames as props from FixedDataTableCell which can be used by client if he don't want to provide any styles to it .And if a client wants to add his own styles he can do that also |
||
} | ||
} | ||
|
||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,47 @@ | ||
import React from 'react'; | ||
import cx from './vendor_upstream/stubs/cx'; | ||
import joinClasses from './vendor_upstream/core/joinClasses'; | ||
|
||
function CellDefault(props) { | ||
var { | ||
height, | ||
width, | ||
style, | ||
className, | ||
children, | ||
columnKey, | ||
columnIndex, | ||
rowIndex, | ||
left, | ||
cellGroupType, | ||
isHeader, | ||
isGroupHeader, | ||
maxWidth, | ||
minWidth, | ||
onColumnReorderStart, | ||
shouldUseLegacyComponents, | ||
...props1 | ||
} = props; | ||
var innerStyle = { | ||
height: props.height, | ||
width: props.width, | ||
...props.style, | ||
}; | ||
if (props.onColumnReorderEnd !== undefined) innerStyle.left = '12px'; | ||
|
||
return ( | ||
<div | ||
{...props1} | ||
className={joinClasses( | ||
cx('fixedDataTableCellLayout/wrap'), | ||
cx('public/fixedDataTableCell/wrap'), | ||
cx('public/fixedDataTableCell/cellContent'), | ||
props.className | ||
)} | ||
style={innerStyle} | ||
> | ||
{props.children} | ||
</div> | ||
); | ||
} | ||
export default CellDefault; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,45 @@ | ||
import React from 'react'; | ||
import cx from './vendor_upstream/stubs/cx'; | ||
import joinClasses from './vendor_upstream/core/joinClasses'; | ||
|
||
function CellDefaultLegacy(props) { | ||
var { | ||
height, | ||
width, | ||
style, | ||
className, | ||
children, | ||
columnKey, | ||
columnIndex, | ||
rowIndex, | ||
left, | ||
cellGroupType, | ||
isHeader, | ||
isGroupHeader, | ||
maxWidth, | ||
minWidth, | ||
shouldUseLegacyComponents, | ||
...props1 | ||
} = props; | ||
var innerStyle = { | ||
height: props.height, | ||
width: props.width, | ||
}; | ||
if (props.onColumnReorderEnd !== undefined) innerStyle.left = '12px'; | ||
|
||
return ( | ||
<div | ||
{...props1} | ||
className={joinClasses( | ||
cx('fixedDataTableCellLayout/wrap'), | ||
cx('public/fixedDataTableCell/wrap'), | ||
cx('public/fixedDataTableCell/cellContent'), | ||
props.className | ||
)} | ||
style={innerStyle} | ||
> | ||
{props.children} | ||
</div> | ||
); | ||
} | ||
export default CellDefaultLegacy; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
import React from 'react'; | ||
|
||
function Cell(props) { | ||
return <>{props.content}</>; | ||
} | ||
export default Cell; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is only supposed to be used for our internal testing, we should remove this.
Also there should not be any change in yarn.lock and package-lock.json should not exist at all.