Skip to content

fix: React 19 fixes for Table related components #1855

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.

Sign up for GitHub

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

Closed
wants to merge 6 commits into from
Closed

fix: React 19 fixes for Table related components #1855

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
980b9c9
feat: Add support for React 19 for Table related components
artur-ptaszek-mck Nov 8, 2024
e3558cc
fixup! feat: Add support for React 19 for Table related components
artur-ptaszek-mck Nov 8, 2024
eb7b1e4
fixup! fixup! feat: Add support for React 19 for Table related compon…
artur-ptaszek-mck Nov 8, 2024
5bc45c5
fixup! fixup! fixup! feat: Add support for React 19 for Table related…
artur-ptaszek-mck Dec 12, 2024
43fe754
fix: yarn expired dependecies
artur-ptaszek-mck Dec 12, 2024
ea43119
fixup! fix: yarn expired dependecies
artur-ptaszek-mck Dec 12, 2024
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
9 changes: 9 additions & 0 deletions source/Grid/Grid.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -221,6 +221,9 @@ type Props = {

/** Width of Grid; this property determines the number of visible (vs virtualized) columns. */
width: number,

/** Reference to DOM element */
elRef?: React.Ref<React.ElementType>,
};

type InstanceProps = {
Expand Down Expand Up @@ -1382,6 +1385,12 @@ class Grid extends React.PureComponent<Props, State> {

_setScrollingContainerRef = (ref: Element) => {
this._scrollingContainer = ref;

if (typeof this.props.elRef === 'function') {
this.props.elRef(ref);
} else if (typeof this.props.elRef === 'object') {
this.props.elRef.current = ref;
}
};

/**
Expand Down
27 changes: 18 additions & 9 deletions source/Table/Table.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,13 @@ import clsx from 'clsx';
import Column from './Column';
import PropTypes from 'prop-types';
import * as React from 'react';
import {findDOMNode} from 'react-dom';
import Grid, {accessibilityOverscanIndicesGetter} from '../Grid';

import defaultRowRenderer from './defaultRowRenderer';
import defaultHeaderRowRenderer from './defaultHeaderRowRenderer';
import SortDirection from './SortDirection';
import defaultCellDataGetter from './defaultCellDataGetter';
import defaultCellRenderer from './defaultCellRenderer';

/**
* Table component with fixed headers and virtualized rows for improved performance with large data sets.
Expand Down Expand Up @@ -263,6 +264,7 @@ export default class Table extends React.PureComponent {
this._onScroll = this._onScroll.bind(this);
this._onSectionRendered = this._onSectionRendered.bind(this);
this._setRef = this._setRef.bind(this);
this._setGridElementRef = this._setGridElementRef.bind(this);
}

forceUpdateGrid() {
Expand Down Expand Up @@ -338,8 +340,8 @@ export default class Table extends React.PureComponent {
}

getScrollbarWidth() {
if (this.Grid) {
const Grid = findDOMNode(this.Grid);
if (this.GridEl) {
const Grid = this.GridEl;
const clientWidth = Grid.clientWidth || 0;
const offsetWidth = Grid.offsetWidth || 0;
return offsetWidth - clientWidth;
Expand Down Expand Up @@ -390,7 +392,7 @@ export default class Table extends React.PureComponent {
React.Children.toArray(children).forEach((column, index) => {
const flexStyles = this._getFlexStyleForColumn(
column,
column.props.style,
column.props.style || Column.defaultProps.style,
);

this._cachedColumnStyles[index] = {
Expand Down Expand Up @@ -427,6 +429,7 @@ export default class Table extends React.PureComponent {

<Grid
{...this.props}
elRef={this._setGridElementRef}
aria-readonly={null}
autoContainerWidth
className={clsx('ReactVirtualized__Table__Grid', gridClassName)}
Expand Down Expand Up @@ -454,8 +457,8 @@ export default class Table extends React.PureComponent {
_createColumn({column, columnIndex, isScrolling, parent, rowData, rowIndex}) {
const {onColumnClick} = this.props;
const {
cellDataGetter,
cellRenderer,
cellDataGetter = defaultCellDataGetter,
cellRenderer = defaultCellRenderer,
className,
columnData,
dataKey,
Expand Down Expand Up @@ -512,9 +515,9 @@ export default class Table extends React.PureComponent {
const {
columnData,
dataKey,
defaultSortDirection,
defaultSortDirection = Column.defaultProps.defaultSortDirection,
disableSort,
headerRenderer,
headerRenderer = Column.defaultProps.headerRenderer,
id,
label,
} = column.props;
Expand Down Expand Up @@ -673,7 +676,9 @@ export default class Table extends React.PureComponent {
* Determines the flex-shrink, flex-grow, and width values for a cell (header or column).
*/
_getFlexStyleForColumn(column, customStyle = {}) {
const flexValue = `${column.props.flexGrow} ${column.props.flexShrink} ${column.props.width}px`;
const flexValue = `${column.props.flexGrow ||
Column.defaultProps.flexGrow} ${column.props.flexShrink ||
Column.defaultProps.flexShrink} ${column.props.width}px`;

const style = {
...customStyle,
Expand Down Expand Up @@ -734,6 +739,10 @@ export default class Table extends React.PureComponent {
this.Grid = ref;
}

_setGridElementRef(ref) {
this.GridEl = ref;
}

_setScrollbarWidth() {
const scrollbarWidth = this.getScrollbarWidth();

Expand Down
26 changes: 13 additions & 13 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,8 +47,8 @@

"@babel/generator@^7.12.13":
version "7.13.16"
resolved "https://registry.nlark.com/@babel/generator/download/@babel/generator-7.13.16.tgz#0befc287031a201d84cdfc173b46b320ae472d14"
integrity sha1-C+/ChwMaIB2EzfwXO0azIK5HLRQ=
resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.13.16.tgz#0befc287031a201d84cdfc173b46b320ae472d14"
integrity sha512-grBBR75UnKOcUWMp8WoDxNsWCFl//XCK6HWTrBQKTr5SV9f5g0pNOjdyzi/DTBv12S9GnYPInIXQBTky7OXEMg==
dependencies:
"@babel/types" "^7.13.16"
jsesc "^2.5.1"
Expand Down Expand Up @@ -196,8 +196,8 @@

"@babel/helper-plugin-utils@^7.12.13":
version "7.13.0"
resolved "https://registry.npm.taobao.org/@babel/helper-plugin-utils/download/@babel/helper-plugin-utils-7.13.0.tgz#806526ce125aed03373bc416a828321e3a6a33af"
integrity sha1-gGUmzhJa7QM3O8QWqCgyHjpqM68=
resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.13.0.tgz#806526ce125aed03373bc416a828321e3a6a33af"
integrity sha512-ZPafIPSwzUlAoWT8DKs1W2VyF2gOWthGd5NGFMsBcMMol+ZhK+EQY/e6V96poa6PA/Bh+C9plWN0hXO1uB8AfQ==

"@babel/helper-regex@^7.0.0", "@babel/helper-regex@^7.4.4":
version "7.5.5"
Expand Down Expand Up @@ -244,8 +244,8 @@

"@babel/helper-validator-identifier@^7.12.11":
version "7.12.11"
resolved "https://registry.nlark.com/@babel/helper-validator-identifier/download/@babel/helper-validator-identifier-7.12.11.tgz#c9a1f021917dcb5ccf0d4e453e399022981fc9ed"
integrity sha1-yaHwIZF9y1zPDU5FPjmQIpgfye0=
resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz#c9a1f021917dcb5ccf0d4e453e399022981fc9ed"
integrity sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw==

"@babel/helper-wrap-function@^7.7.0":
version "7.7.0"
Expand Down Expand Up @@ -360,8 +360,8 @@

"@babel/plugin-syntax-flow@^7.12.13":
version "7.12.13"
resolved "https://registry.npm.taobao.org/@babel/plugin-syntax-flow/download/@babel/plugin-syntax-flow-7.12.13.tgz#5df9962503c0a9c918381c929d51d4d6949e7e86"
integrity sha1-XfmWJQPAqckYOBySnVHU1pSefoY=
resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.12.13.tgz#5df9962503c0a9c918381c929d51d4d6949e7e86"
integrity sha512-J/RYxnlSLXZLVR7wTRsozxKT8qbsx1mNKJzXEEjQ0Kjx1ZACcyHgbanNWNCFtc36IzuWhYWPpvJFFoexoOWFmA==
dependencies:
"@babel/helper-plugin-utils" "^7.12.13"

Expand Down Expand Up @@ -491,8 +491,8 @@

"@babel/plugin-transform-flow-comments@^7.12.13":
version "7.12.13"
resolved "https://registry.nlark.com/@babel/plugin-transform-flow-comments/download/@babel/plugin-transform-flow-comments-7.12.13.tgz#b6f0de89ac4955572913f4af82f6b8ddbff38bf1"
integrity sha1-tvDeiaxJVVcpE/Svgva43b/zi/E=
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-flow-comments/-/plugin-transform-flow-comments-7.12.13.tgz#b6f0de89ac4955572913f4af82f6b8ddbff38bf1"
integrity sha512-o4Z7Mw9KvrfAxBwSr+Ia+E0+LLb6ZzDXQTsJb628ejXuvvNoCDyu3FLBcz2/W8B7q/MOzm6d6pbNM6ur/aegMQ==
dependencies:
"@babel/generator" "^7.12.13"
"@babel/helper-plugin-utils" "^7.12.13"
Expand Down Expand Up @@ -848,8 +848,8 @@

"@babel/types@^7.13.16":
version "7.13.17"
resolved "https://registry.nlark.com/@babel/types/download/@babel/types-7.13.17.tgz#48010a115c9fba7588b4437dd68c9469012b38b4"
integrity sha1-SAEKEVyfunWItEN91oyUaQErOLQ=
resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.13.17.tgz#48010a115c9fba7588b4437dd68c9469012b38b4"
integrity sha512-RawydLgxbOPDlTLJNtoIypwdmAy//uQIzlKt2+iBiJaRlVuI6QLUxVAyWGNfOzp8Yu4L4lLIacoCyTNtpb4wiA==
dependencies:
"@babel/helper-validator-identifier" "^7.12.11"
to-fast-properties "^2.0.0"
Expand Down Expand Up @@ -10162,4 +10162,4 @@ [email protected]:
resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.4.1.tgz#9528f442dab1b2284e58b4379bb194e22e0c4005"
integrity sha1-lSj0QtqxsihOWLQ3m7GU4i4MQAU=
dependencies:
fd-slicer "~1.0.1"
fd-slicer "~1.0.1"