Skip to content
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

Open
wants to merge 33 commits into
base: column-virtualization
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 23 commits
Commits
Show all changes
33 commits
Select commit Hold shift + click to select a range
f7b8628
Impl
Jun 10, 2023
c4e8c63
changes
Jun 12, 2023
fde920c
Remove cell group div checking of code for different examples is pending
Archit101967 Jun 14, 2023
f475a20
Final code after removing CellGroup div
Archit101967 Jun 14, 2023
b90f33a
Choice on user whether to use new or old version
Archit101967 Jun 17, 2023
4fe0bc9
added if conditions at some places
Archit101967 Jun 19, 2023
4ff2935
Made legacy components for each component
Archit101967 Jun 21, 2023
51696af
Converted the code to use HOC components
Archit101967 Jun 21, 2023
f4af336
Updated some part of the code
Archit101967 Jun 21, 2023
31fbf7e
after removing unnecessary changes
Archit101967 Jun 21, 2023
5aabef5
Rebuild the node modules
Archit101967 Jun 21, 2023
d10313a
react-fps added
Archit101967 Jun 22, 2023
a7f6949
added CSS
Archit101967 Jun 22, 2023
9006cbd
Resize and reorder cell not fixed
Archit101967 Jun 24, 2023
f46247d
some changes
Archit101967 Jun 25, 2023
02ec021
Fixed resize example
Archit101967 Jun 26, 2023
8c90fec
working on reorder cell
Archit101967 Jun 26, 2023
ec226ff
working on dragging feature of reorder still remaining
Archit101967 Jun 26, 2023
f6dc4a7
container coming to right position
Archit101967 Jun 27, 2023
77b730b
reorder cell resolved
Archit101967 Jun 27, 2023
1fe34ad
HOC components made
Archit101967 Jun 27, 2023
eeef456
updated the auto scroll example
Archit101967 Jun 28, 2023
2cfdf0d
removed extra spaces
Archit101967 Jun 28, 2023
44b9a96
Updated the auto scroll example
Archit101967 Jun 28, 2023
71203f3
removed package-lock.json and tools used for internal testing
Archit101967 Jun 29, 2023
505204a
removed internal testing from autoscrollexample_changed.js
Archit101967 Jun 29, 2023
329a443
changed variable names and will fix autoscroll example
Archit101967 Jun 29, 2023
479796e
fixed auto scroll example
Archit101967 Jun 30, 2023
31dc976
seperated the HOC components into different folder
Archit101967 Jun 30, 2023
c419014
Checking performance
Archit101967 Jul 2, 2023
1e5dfd8
correcting reorder cell
Archit101967 Jul 4, 2023
57cdf03
corrected reorder cell rendering issue
Archit101967 Jul 4, 2023
a813f30
corrected variable names and also fixed reorder cell example in other…
Archit101967 Jul 4, 2023
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12,685 changes: 12,685 additions & 0 deletions package-lock.json

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
"@reduxjs/toolkit": "^1.5.1",
"lodash": "^4.17.4",
"prop-types": "^15.7.2",
"react-fps": "^1.0.6",
Copy link
Collaborator

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.

"react-lifecycles-compat": "^3.0.4",
"react-portal": "^4.2.1",
"redux": "^4.0.1",
Expand Down
35 changes: 35 additions & 0 deletions src/FixedDataCellGroupFunction.js
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 = {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

here or every other place, use const instead, or let (only if you have to modify variable later).

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;
44 changes: 44 additions & 0 deletions src/FixedDataCellGroupLegacyFunction.js
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;
4 changes: 4 additions & 0 deletions src/FixedDataTable.js
Original file line number Diff line number Diff line change
Expand Up @@ -872,6 +872,7 @@ class FixedDataTable extends React.Component {
fixedColumnsWidth={this.props.fixedColumnsWidth}
fixedRightColumnsWidth={this.props.fixedRightColumnsWidth}
isGroupHeader={true}
shouldUseLegacyComponents={this.props.shouldUseLegacyComponents}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Declare proptype for shouldUseLegacyComponents above.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done

/>
);
}
Expand Down Expand Up @@ -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}
/>
);
}
Expand Down Expand Up @@ -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}
/>
);

Expand Down Expand Up @@ -1123,6 +1126,7 @@ class FixedDataTable extends React.Component {
fixedRightColumnsWidth={this.props.fixedRightColumnsWidth}
scrollbarYWidth={props.scrollbarYWidth}
isRTL={props.isRTL}
shouldUseLegacyComponents={this.props.shouldUseLegacyComponents}
/>
);
};
Expand Down
2 changes: 2 additions & 0 deletions src/FixedDataTableBufferedRows.js
Original file line number Diff line number Diff line change
Expand Up @@ -228,8 +228,10 @@ class FixedDataTableBufferedRows extends React.Component {
fixedRightColumnsWidth={this.props.fixedRightColumnsWidth}
firstViewportColumnIndex={this.props.firstViewportColumnIndex}
endViewportColumnIndex={this.props.endViewportColumnIndex}
shouldUseLegacyComponents={this.props.shouldUseLegacyComponents}
/>
);
}
}
//}
export default FixedDataTableBufferedRows;
14 changes: 9 additions & 5 deletions src/FixedDataTableCell.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
/**
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -286,13 +291,12 @@ class FixedDataTableCell extends React.Component {
</FixedDataTableCellDefaultDeprecated>
);
}

const role = isHeaderOrFooter ? 'columnheader' : 'gridcell';
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should not remove role. keep it for legacy cell as it is, for new cell this could also be added in props.

Copy link
Author

Choose a reason for hiding this comment

The 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} />
);
}
}
Expand Down
42 changes: 6 additions & 36 deletions src/FixedDataTableCellDefault.js
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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} />;
Copy link
Collaborator

@AmanGupta2708 AmanGupta2708 Jun 28, 2023

Choose a reason for hiding this comment

The 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 content within the FixedDataTableCell. That content is what the client passes, which can be either a DataCell or any other customized cell, or a function that returns a cell, or simply raw data.

Copy link
Author

Choose a reason for hiding this comment

The 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

}
}

Expand Down
47 changes: 47 additions & 0 deletions src/FixedDataTableCellDefaultFunction.js
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;
45 changes: 45 additions & 0 deletions src/FixedDataTableCellDefaultLegacyFunction.js
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;
6 changes: 6 additions & 0 deletions src/FixedDataTableCellFunction.js
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;
Loading