You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by di...@apache.org on 2022/11/14 14:09:39 UTC
[superset] 01/01: Add scrollTopOnPagination
This is an automated email from the ASF dual-hosted git repository.
diegopucci pushed a commit to branch fix/d2d-modal-scroll-top
in repository https://gitbox.apache.org/repos/asf/superset.git
commit cedf75bbf077e4135405cac648bbf7a41322fc6a
Author: geido <di...@gmail.com>
AuthorDate: Mon Nov 14 16:09:19 2022 +0200
Add scrollTopOnPagination
---
.../integration/dashboard/drilltodetail.test.ts | 17 ++++++++
.../Chart/DrillDetail/DrillDetailPane.tsx | 1 +
.../src/components/TableView/TableView.stories.tsx | 1 +
.../src/components/TableView/TableView.tsx | 48 +++++++++++++---------
4 files changed, 48 insertions(+), 19 deletions(-)
diff --git a/superset-frontend/cypress-base/cypress/integration/dashboard/drilltodetail.test.ts b/superset-frontend/cypress-base/cypress/integration/dashboard/drilltodetail.test.ts
index f89435f1bc..926c4d3997 100644
--- a/superset-frontend/cypress-base/cypress/integration/dashboard/drilltodetail.test.ts
+++ b/superset-frontend/cypress-base/cypress/integration/dashboard/drilltodetail.test.ts
@@ -196,6 +196,23 @@ describe('Drill to detail modal', () => {
.then($rows => {
expect($rows).to.contain('Victoria');
});
+
+ // verify scroll top on pagination
+ cy.getBySelLike('Number-modal')
+ .find('.table-condensed')
+ .scrollTo(0, 100);
+
+ cy.get("[role='rowgroup'] [role='row']")
+ .contains('Miguel')
+ .should('not.be.visible');
+
+ cy.get(".pagination-container [role='navigation'] [role='button']")
+ .eq(1)
+ .click();
+
+ cy.get("[role='rowgroup'] [role='row']")
+ .contains('Aaron')
+ .should('be.visible');
});
});
diff --git a/superset-frontend/src/components/Chart/DrillDetail/DrillDetailPane.tsx b/superset-frontend/src/components/Chart/DrillDetail/DrillDetailPane.tsx
index 30ea2293a1..e90b30e1d7 100644
--- a/superset-frontend/src/components/Chart/DrillDetail/DrillDetailPane.tsx
+++ b/superset-frontend/src/components/Chart/DrillDetail/DrillDetailPane.tsx
@@ -243,6 +243,7 @@ export default function DrillDetailPane({
margin-bottom: 0;
}
`}
+ scrollTopOnPagination
/>
);
}
diff --git a/superset-frontend/src/components/TableView/TableView.stories.tsx b/superset-frontend/src/components/TableView/TableView.stories.tsx
index 9d28ca38b4..ff2079431a 100644
--- a/superset-frontend/src/components/TableView/TableView.stories.tsx
+++ b/superset-frontend/src/components/TableView/TableView.stories.tsx
@@ -77,6 +77,7 @@ InteractiveTableView.args = {
showRowCount: true,
withPagination: true,
columnsForWrapText: ['Summary'],
+ scrollTopOnPagination: false,
};
InteractiveTableView.argTypes = {
diff --git a/superset-frontend/src/components/TableView/TableView.tsx b/superset-frontend/src/components/TableView/TableView.tsx
index 25a403ff9e..5bf3933636 100644
--- a/superset-frontend/src/components/TableView/TableView.tsx
+++ b/superset-frontend/src/components/TableView/TableView.tsx
@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
import isEqual from 'lodash/isEqual';
import { styled, t } from '@superset-ui/core';
import { useFilters, usePagination, useSortBy, useTable } from 'react-table';
@@ -49,6 +49,7 @@ export interface TableViewProps {
isPaginationSticky?: boolean;
showRowCount?: boolean;
scrollTable?: boolean;
+ scrollTopOnPagination?: boolean;
small?: boolean;
columnsForWrapText?: string[];
}
@@ -130,6 +131,7 @@ const TableView = ({
serverPagination = false,
columnsForWrapText,
onServerPagination = () => {},
+ scrollTopOnPagination = false,
...props
}: TableViewProps) => {
const initialState = {
@@ -161,22 +163,6 @@ const TableView = ({
useSortBy,
usePagination,
);
- useEffect(() => {
- if (serverPagination && pageIndex !== initialState.pageIndex) {
- onServerPagination({
- pageIndex,
- });
- }
- }, [pageIndex]);
-
- useEffect(() => {
- if (serverPagination && !isEqual(sortBy, initialState.sortBy)) {
- onServerPagination({
- pageIndex: 0,
- sortBy,
- });
- }
- }, [sortBy]);
const content = withPagination ? page : rows;
@@ -194,10 +180,34 @@ const TableView = ({
const isEmpty = !loading && content.length === 0;
const hasPagination = pageCount > 1 && withPagination;
+ const tableRef = useRef<HTMLTableElement>(null);
+ const handleGotoPage = (p: number) => {
+ if (scrollTopOnPagination) {
+ tableRef?.current?.scroll(0, 0);
+ }
+ gotoPage(p);
+ };
+
+ useEffect(() => {
+ if (serverPagination && pageIndex !== initialState.pageIndex) {
+ onServerPagination({
+ pageIndex,
+ });
+ }
+ }, [pageIndex]);
+
+ useEffect(() => {
+ if (serverPagination && !isEqual(sortBy, initialState.sortBy)) {
+ onServerPagination({
+ pageIndex: 0,
+ sortBy,
+ });
+ }
+ }, [sortBy]);
return (
<>
- <TableViewStyles {...props}>
+ <TableViewStyles {...props} ref={tableRef}>
<TableCollection
getTableProps={getTableProps}
getTableBodyProps={getTableBodyProps}
@@ -229,7 +239,7 @@ const TableView = ({
<Pagination
totalPages={pageCount || 0}
currentPage={pageCount ? pageIndex + 1 : 0}
- onChange={(p: number) => gotoPage(p - 1)}
+ onChange={(p: number) => handleGotoPage(p - 1)}
hideFirstAndLastPageLinks
/>
{showRowCount && (