From ff699bda03eeba80779b63eb03271ad7da49b1b1 Mon Sep 17 00:00:00 2001 From: Alastair Netterfield Date: Mon, 12 Jul 2021 21:33:44 +0800 Subject: [PATCH] fix scroll event in react 17 --- package.json | 9 +- src/demo/index.jsx | 265 ++++++++++++++++++++--------------- src/lib/scrollEvent/index.js | 14 +- yarn.lock | 30 ++-- 4 files changed, 175 insertions(+), 143 deletions(-) diff --git a/package.json b/package.json index b516939..41df20d 100644 --- a/package.json +++ b/package.json @@ -22,8 +22,8 @@ "lib" ], "peerDependencies": { - "react": "^15.3.0 || ^16.2.0", - "react-dom": "^15.3.0 || ^16.2.0" + "react": "^15.3.0 || ^16.2.0 || ^17.0.0", + "react-dom": "^15.3.0 || ^16.2.0 || ^17.0.0" }, "devDependencies": { "@babel/cli": "^7.0.0-beta.37", @@ -42,8 +42,9 @@ "eslint-plugin-jsx-a11y": "^6.0.3", "eslint-plugin-react": "^7.7.0", "html-webpack-plugin": "^3.2.0", - "react": "^16.12.0", - "react-dom": "^16.12.0", + "prop-types": "^15.7.2", + "react": "^17.0.0", + "react-dom": "^17.0.0", "react-table": "^6.11.4", "style-loader": "^0.19.1", "webpack": "^4.41.2", diff --git a/src/demo/index.jsx b/src/demo/index.jsx index f9c064c..c876da2 100644 --- a/src/demo/index.jsx +++ b/src/demo/index.jsx @@ -2,7 +2,7 @@ import React from 'react'; import { render } from 'react-dom'; import ReactTable from 'react-table'; import 'react-table/react-table.css'; -import withFixedColumns from '../../lib'; +import withFixedColumns, { withFixedColumnsScrollEvent } from '../../lib'; import '../../lib/styles.css'; import './styles.css'; import { @@ -16,6 +16,121 @@ import { } from '../../src/FakeData.js'; const ReactTableFixedColumns = withFixedColumns(ReactTable); +const ReactTableFixedColumnsScrollEvent = withFixedColumnsScrollEvent(ReactTable); + +const columns = [ + { + Header: 'First Name', + accessor: 'firstName', + width: 150, + fixed: 'left', + }, + { + Header: 'Last Name', + accessor: 'lastName', + width: 150, + fixed: 'left', + }, + { + Header: 'Age', + accessor: 'age', + width: 150, + fixed: 'right', + }, + { + Header: 'Email', + accessor: 'email', + width: 300, + }, + { + Header: 'Professional Email', + accessor: 'proEmail', + width: 300, + }, + { + Header: 'Street', + accessor: 'street', + width: 300, + }, + { + Header: 'Street bis', + accessor: 'streetBis', + width: 300, + }, + { + Header: 'City', + accessor: 'city', + }, +]; + +const groupedColumns = [ + { + fixed: 'left', + columns: [ + { + Header: 'First Name', + accessor: 'firstName', + width: 150, + Footer: () =>
Footer
, + }, + { + Header: 'Last Name', + accessor: 'lastName', + width: 150, + }, + ], + }, + { + Header: 'Other Infos', + columns: [ + { + Header: 'Full name', + id: 'Full Name', + width: 150, + Cell: row =>
{row.original.firstName}
{row.original.lastName}
, + Footer: () =>
Footer
, + }, + { + Header: 'Age', + accessor: 'age', + }, + ], + }, + { + Header: 'Location', + columns: [ + { + Header: 'Street', + accessor: 'street', + width: 300, + }, + { + Header: 'Street bis', + accessor: 'streetBis', + width: 300, + }, + { + Header: 'City', + accessor: 'city', + }, + ], + }, + { + fixed: 'right', + columns: [ + { + Header: 'Professional Email', + accessor: 'proEmail', + width: 200, + }, + { + Header: 'Email', + accessor: 'email', + width: 200, + }, + ], + }, +]; const getData = () => { const data = []; @@ -41,6 +156,8 @@ const getData = () => { return data; }; +const getTdProps = () => ({ style: { textAlign: 'center' } }); + function Demo() { return (
@@ -52,135 +169,51 @@ function Demo() { Github source
-
+
+ {/* Basic */}
({ style: { textAlign: 'center' } })} + getTdProps={getTdProps} filterable - columns={[ - { - Header: 'First Name', - accessor: 'firstName', - width: 150, - fixed: 'left', - }, - { - Header: 'Last Name', - accessor: 'lastName', - width: 150, - fixed: 'left', - }, - { - Header: 'Age', - accessor: 'age', - width: 150, - fixed: 'right', - }, - { - Header: 'Email', - accessor: 'email', - width: 300, - }, - { - Header: 'Professional Email', - accessor: 'proEmail', - width: 300, - }, - { - Header: 'Street', - accessor: 'street', - width: 300, - }, - { - Header: 'Street bis', - accessor: 'streetBis', - width: 300, - }, - { - Header: 'City', - accessor: 'city', - }, - ]} + columns={columns} defaultPageSize={50} className="-striped -highlight" />
+ {/* Grouped Columns */}
({ style: { textAlign: 'center' } })} + getTdProps={getTdProps} + filterable + columns={groupedColumns} + defaultPageSize={50} + className="-striped" + /> +
+ + {/* Scroll Event */} +
+ +
+ + {/* Grouped Columns & Scroll Event */} +
+
Footer
, - }, - { - Header: 'Last Name', - accessor: 'lastName', - width: 150, - }, - ], - }, - { - Header: 'Other Infos', - columns: [ - { - Header: 'Full name', - id: 'Full Name', - width: 150, - Cell: row =>
{row.original.firstName}
{row.original.lastName}
, - Footer: () =>
Footer
, - }, - { - Header: 'Age', - accessor: 'age', - }, - ], - }, - { - Header: 'Location', - columns: [ - { - Header: 'Street', - accessor: 'street', - width: 300, - }, - { - Header: 'Street bis', - accessor: 'streetBis', - width: 300, - }, - { - Header: 'City', - accessor: 'city', - }, - ], - }, - { - fixed: 'right', - columns: [ - { - Header: 'Professional Email', - accessor: 'proEmail', - width: 200, - }, - { - Header: 'Email', - accessor: 'email', - width: 200, - }, - ], - }, - ]} + columns={groupedColumns} defaultPageSize={50} className="-striped" /> diff --git a/src/lib/scrollEvent/index.js b/src/lib/scrollEvent/index.js index e882a71..3be0e7a 100644 --- a/src/lib/scrollEvent/index.js +++ b/src/lib/scrollEvent/index.js @@ -8,7 +8,7 @@ export default (ReactTable) => { class ReactTableFixedColumns extends React.Component { static propTypes = { columns: PropTypes.array.isRequired, - getProps: PropTypes.func, + getTableProps: PropTypes.func, innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), className: PropTypes.string, uniqClassName: PropTypes.string, @@ -16,7 +16,7 @@ export default (ReactTable) => { } static defaultProps = { - getProps: null, + getTableProps: null, innerRef: null, className: null, uniqClassName: null, @@ -51,7 +51,7 @@ export default (ReactTable) => { } onScrollX = (event) => { - if (event.nativeEvent.target.getAttribute('class').indexOf('rt-table') === -1) return; + if (event.currentTarget !== event.target) return; this.calculatePos(event.nativeEvent.target); } @@ -136,10 +136,10 @@ export default (ReactTable) => { return this.getColumnsWithFixedFeature(sortedColumns, columnProps); }) - getProps = (...args) => { - const { getProps } = this.props; + getTableProps = (...args) => { + const { getTableProps } = this.props; return { - ...(getProps && getProps(...args)), + ...(getTableProps && getTableProps(...args)), onScroll: this.onScrollX, }; } @@ -158,7 +158,7 @@ export default (ReactTable) => { ref={innerRef} className={cx(className, 'rthfc', '-se', this.uniqClassName)} columns={this.getColumns(columns, this.props.column)} - getProps={this.getProps} + getTableProps={this.getTableProps} {...this.onChangePropertyList} /> ); diff --git a/yarn.lock b/yarn.lock index 1993e94..2b097ff 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5332,7 +5332,7 @@ prop-types@^15.6.0: loose-envify "^1.3.1" object-assign "^4.1.1" -prop-types@^15.6.2: +prop-types@^15.7.2: version "15.7.2" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ== @@ -5491,15 +5491,14 @@ rc@^1.2.7: minimist "^1.2.0" strip-json-comments "~2.0.1" -react-dom@^16.12.0: - version "16.12.0" - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.12.0.tgz#0da4b714b8d13c2038c9396b54a92baea633fe11" - integrity sha512-LMxFfAGrcS3kETtQaCkTKjMiifahaMySFDn71fZUNpPHZQEzmk/GiAeIT8JSOrHB23fnuCOMruL2a8NYlw+8Gw== +react-dom@^17.0.0: + version "17.0.2" + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23" + integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" - prop-types "^15.6.2" - scheduler "^0.18.0" + scheduler "^0.20.2" react-is@^16.8.1: version "16.12.0" @@ -5515,14 +5514,13 @@ react-table@^6.11.4: classnames "^2.2.5" react-is "^16.8.1" -react@^16.12.0: - version "16.12.0" - resolved "https://registry.yarnpkg.com/react/-/react-16.12.0.tgz#0c0a9c6a142429e3614834d5a778e18aa78a0b83" - integrity sha512-fglqy3k5E+81pA8s+7K0/T3DBCF0ZDOher1elBFzF7O6arXJgzyu/FW+COxFvAWXJoJN9KIZbT2LXlukwphYTA== +react@^17.0.0: + version "17.0.2" + resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037" + integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" - prop-types "^15.6.2" read-pkg-up@^2.0.0: version "2.0.0" @@ -5872,10 +5870,10 @@ sax@^1.2.4, sax@~1.2.1: version "1.2.4" resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9" -scheduler@^0.18.0: - version "0.18.0" - resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.18.0.tgz#5901ad6659bc1d8f3fdaf36eb7a67b0d6746b1c4" - integrity sha512-agTSHR1Nbfi6ulI0kYNK0203joW2Y5W4po4l+v03tOoiJKpTBbxpNhWDvqc/4IcOw+KLmSiQLTasZ4cab2/UWQ== +scheduler@^0.20.2: + version "0.20.2" + resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91" + integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1"