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

[WC-2757] show numbers of rows pagination for virtual scrolling and load more #1392

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
1 change: 1 addition & 0 deletions packages/pluggableWidgets/datagrid-web/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
### Added

- We introduced a setting to exclude filters from being stored in the Personalization configuration.
- We have introduced show number of rows for virtual scrolling and load more pagination mode.

## [2.28.2] - 2024-12-12

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -83,10 +83,16 @@ export function getProperties(
]);
}
});
if (values.pagination !== "buttons") {
if (values.pagination === "buttons") {
hidePropertyIn(defaultProperties, values, "showNumberOfRows");
} else {
hidePropertyIn(defaultProperties, values, "showPagingButtons");
}

if (values.showNumberOfRows === false) {
hidePropertyIn(defaultProperties, values, "pagingPosition");
}

if (values.pagination !== "loadMore") {
hidePropertyIn(defaultProperties, values, "loadMoreButtonCaption");
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,7 @@ export function preview(props: DatagridPreviewProps): ReactElement {
pageSize={props.pageSize ?? numberOfItems}
showPagingButtons={props.showPagingButtons}
loadMoreButtonCaption={props.loadMoreButtonCaption}
paging={props.pagination === "buttons"}
paging={props.pagination === "buttons" || props.showNumberOfRows}
pagingPosition={props.pagingPosition}
preview
processedRows={0}
Expand Down
7 changes: 5 additions & 2 deletions packages/pluggableWidgets/datagrid-web/src/Datagrid.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,8 @@ const Container = observer((props: Props): ReactElement => {
return props.datasource.status === ValueStatus.Loading;
}, [exportProgress, isRefreshing, props.datasource.status, props.datasource.hasMoreItems]);

const showPagingButtonsOrRows = props.pagination === "buttons" ? props.showPagingButtons : props.showNumberOfRows;

return (
<Widget
className={props.class}
Expand Down Expand Up @@ -134,9 +136,10 @@ const Container = observer((props: Props): ReactElement => {
loadMoreButtonCaption={props.loadMoreButtonCaption?.value}
paging={useShowPagination({
pagination: props.pagination,
showPagingButtons: props.showPagingButtons,
showPagingButtonsOrRows,
totalCount: props.datasource.totalCount,
limit: props.datasource.limit
limit: props.datasource.limit,
requestTotalCount: props.datasource.requestTotalCount
})}
pagingPosition={props.pagingPosition}
showPagingButtons={props.showPagingButtons}
Expand Down
22 changes: 13 additions & 9 deletions packages/pluggableWidgets/datagrid-web/src/Datagrid.xml
Original file line number Diff line number Diff line change
Expand Up @@ -236,15 +236,6 @@
<enumerationValue key="loadMore">Load more</enumerationValue>
</enumerationValues>
</property>
<property key="pagingPosition" type="enumeration" defaultValue="bottom">
<caption>Position of paging buttons</caption>
<description />
<enumerationValues>
<enumerationValue key="bottom">Below grid</enumerationValue>
<enumerationValue key="top">Above grid</enumerationValue>
<enumerationValue key="both">Both</enumerationValue>
</enumerationValues>
</property>
<property key="showPagingButtons" type="enumeration" defaultValue="always">
<caption>Show paging buttons</caption>
<description />
Expand All @@ -253,6 +244,19 @@
<enumerationValue key="auto">Auto</enumerationValue>
</enumerationValues>
</property>
<property key="showNumberOfRows" type="boolean" defaultValue="false">
<caption>Show number of rows</caption>
<description />
</property>
<property key="pagingPosition" type="enumeration" defaultValue="bottom">
<caption>Position of pagination</caption>
<description />
<enumerationValues>
<enumerationValue key="bottom">Below grid</enumerationValue>
<enumerationValue key="top">Above grid</enumerationValue>
<enumerationValue key="both">Both</enumerationValue>
</enumerationValues>
</property>
<property key="loadMoreButtonCaption" type="textTemplate" required="false">
<caption>Load more caption</caption>
<description />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,8 @@ describe("Datagrid", () => {
configurationStorageType: "attribute",
configurationAttribute: undefined,
loadingType: "spinner",
storeFiltersInPersonalization: true
storeFiltersInPersonalization: true,
showNumberOfRows: false
};
const user = userEvent.setup();
let renderCount = 0;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,7 @@ const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
visibleColumns
} = props;

const isInfinite = !paging;
const isInfinite = paginationType === "virtualScrolling";
const showHeader = !!headerContent;
const showTopBar = paging && (pagingPosition === "top" || pagingPosition === "both");

Expand All @@ -149,6 +149,7 @@ const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
pageSize={pageSize}
showPagingButtons={props.showPagingButtons}
previousPage={() => setPage && setPage(prev => prev - 1)}
pagination={paginationType}
/>
) : null;

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ exports[`Table renders the structure correctly 1`] = `
class="test widget-datagrid"
>
<div
class="widget-datagrid-content sticky-table-container infinite-loading"
class="widget-datagrid-content sticky-table-container"
>
<div
class="sticky-sentinel"
Expand Down Expand Up @@ -80,7 +80,7 @@ exports[`Table renders the structure correctly for preview when no header is pro
class="test widget-datagrid"
>
<div
class="widget-datagrid-content sticky-table-container infinite-loading"
class="widget-datagrid-content sticky-table-container"
>
<div
class="sticky-sentinel"
Expand Down Expand Up @@ -154,7 +154,7 @@ exports[`Table renders the structure correctly with column alignments 1`] = `
class="test widget-datagrid"
>
<div
class="widget-datagrid-content sticky-table-container infinite-loading"
class="widget-datagrid-content sticky-table-container"
>
<div
class="sticky-sentinel"
Expand Down Expand Up @@ -261,7 +261,7 @@ exports[`Table renders the structure correctly with custom filtering 1`] = `
class="test widget-datagrid"
>
<div
class="widget-datagrid-content sticky-table-container infinite-loading"
class="widget-datagrid-content sticky-table-container"
>
<div
class="sticky-sentinel"
Expand Down Expand Up @@ -339,7 +339,7 @@ exports[`Table renders the structure correctly with dragging 1`] = `
class="test widget-datagrid"
>
<div
class="widget-datagrid-content sticky-table-container infinite-loading"
class="widget-datagrid-content sticky-table-container"
>
<div
class="sticky-sentinel"
Expand Down Expand Up @@ -413,7 +413,7 @@ exports[`Table renders the structure correctly with dynamic row class 1`] = `
class="test widget-datagrid"
>
<div
class="widget-datagrid-content sticky-table-container infinite-loading"
class="widget-datagrid-content sticky-table-container"
>
<div
class="sticky-sentinel"
Expand Down Expand Up @@ -487,7 +487,7 @@ exports[`Table renders the structure correctly with empty placeholder 1`] = `
class="test widget-datagrid"
>
<div
class="widget-datagrid-content sticky-table-container infinite-loading"
class="widget-datagrid-content sticky-table-container"
>
<div
class="sticky-sentinel"
Expand Down Expand Up @@ -561,7 +561,7 @@ exports[`Table renders the structure correctly with filtering 1`] = `
class="test widget-datagrid"
>
<div
class="widget-datagrid-content sticky-table-container infinite-loading"
class="widget-datagrid-content sticky-table-container"
>
<div
class="sticky-sentinel"
Expand Down Expand Up @@ -649,7 +649,7 @@ exports[`Table renders the structure correctly with header filters and a11y 1`]
</div>
</div>
<div
class="widget-datagrid-content sticky-table-container infinite-loading"
class="widget-datagrid-content sticky-table-container"
>
<div
class="sticky-sentinel"
Expand Down Expand Up @@ -723,7 +723,7 @@ exports[`Table renders the structure correctly with header wrapper 1`] = `
class="test widget-datagrid"
>
<div
class="widget-datagrid-content sticky-table-container infinite-loading"
class="widget-datagrid-content sticky-table-container"
>
<div
class="sticky-sentinel"
Expand Down Expand Up @@ -801,7 +801,7 @@ exports[`Table renders the structure correctly with hiding 1`] = `
class="test widget-datagrid"
>
<div
class="widget-datagrid-content sticky-table-container infinite-loading"
class="widget-datagrid-content sticky-table-container"
>
<div
class="sticky-sentinel"
Expand Down Expand Up @@ -1035,13 +1035,13 @@ exports[`Table renders the structure correctly with paging 1`] = `
<span
class="sr-only sr-only-focusable"
>
Currently showing 11 to 20
Currently showing 11 to 0
</span>
<div
aria-hidden="true"
class="paging-status"
>
11 to 20
11 to 0
</div>
<button
aria-label="Go to next page"
Expand Down Expand Up @@ -1080,7 +1080,7 @@ exports[`Table renders the structure correctly with resizing 1`] = `
class="test widget-datagrid"
>
<div
class="widget-datagrid-content sticky-table-container infinite-loading"
class="widget-datagrid-content sticky-table-container"
>
<div
class="sticky-sentinel"
Expand Down Expand Up @@ -1154,7 +1154,7 @@ exports[`Table renders the structure correctly with sorting 1`] = `
class="test widget-datagrid"
>
<div
class="widget-datagrid-content sticky-table-container infinite-loading"
class="widget-datagrid-content sticky-table-container"
Copy link
Contributor

Choose a reason for hiding this comment

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

Are we removing this class?

>
<div
class="sticky-sentinel"
Expand Down Expand Up @@ -1428,13 +1428,13 @@ exports[`Table with selection method checkbox render an extra column and add cla
<span
class="sr-only sr-only-focusable"
>
Currently showing 11 to 20
Currently showing 11 to 0
Copy link
Contributor

Choose a reason for hiding this comment

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

This new snapshot seems to be incorrect.

</span>
<div
aria-hidden="true"
class="paging-status"
>
11 to 20
11 to 0
</div>
<button
aria-label="Go to next page"
Expand Down Expand Up @@ -1630,13 +1630,13 @@ exports[`Table with selection method rowClick add class to each selected cell 1`
<span
class="sr-only sr-only-focusable"
>
Currently showing 11 to 20
Currently showing 11 to 0
</span>
<div
aria-hidden="true"
class="paging-status"
>
11 to 20
11 to 0
</div>
<button
aria-label="Go to next page"
Expand Down
Original file line number Diff line number Diff line change
@@ -1,20 +1,28 @@
import { useMemo } from "react";
import { useMemo, useEffect } from "react";
import { PaginationEnum, ShowPagingButtonsEnum } from "../../typings/DatagridProps";

interface ShowPaginationProps {
pagination: PaginationEnum;
showPagingButtons: ShowPagingButtonsEnum;
showPagingButtonsOrRows: ShowPagingButtonsEnum | boolean;
totalCount?: number;
limit: number;
requestTotalCount: (needTotalCount: boolean) => void;
}

export const useShowPagination = (props: ShowPaginationProps): boolean => {
const { pagination, showPagingButtons, totalCount, limit } = props;
const { pagination, showPagingButtonsOrRows, totalCount, limit, requestTotalCount } = props;

useEffect(() => {
if (pagination !== "buttons" && showPagingButtonsOrRows) {
requestTotalCount(true);
}
}, [pagination]);

Check warning on line 19 in packages/pluggableWidgets/datagrid-web/src/utils/useShowPagination.ts

View workflow job for this annotation

GitHub Actions / Run code quality check

React Hook useEffect has missing dependencies: 'requestTotalCount' and 'showPagingButtonsOrRows'. Either include them or remove the dependency array

return useMemo(() => {
return (
pagination === "buttons" &&
(showPagingButtons === "always" ||
(showPagingButtons === "auto" && (totalCount ? totalCount > limit : false)))
showPagingButtonsOrRows === true ||
showPagingButtonsOrRows === "always" ||
(showPagingButtonsOrRows === "auto" && (totalCount ? totalCount > limit : false))
);
}, [pagination, showPagingButtons, totalCount, limit]);
}, [pagination, showPagingButtonsOrRows, totalCount, limit]);

Check warning on line 27 in packages/pluggableWidgets/datagrid-web/src/utils/useShowPagination.ts

View workflow job for this annotation

GitHub Actions / Run code quality check

React Hook useMemo has an unnecessary dependency: 'pagination'. Either exclude it or remove the dependency array
};
Original file line number Diff line number Diff line change
Expand Up @@ -53,10 +53,10 @@ export interface ColumnsType {

export type PaginationEnum = "buttons" | "virtualScrolling" | "loadMore";

export type PagingPositionEnum = "bottom" | "top" | "both";

export type ShowPagingButtonsEnum = "always" | "auto";

export type PagingPositionEnum = "bottom" | "top" | "both";

export type ShowEmptyPlaceholderEnum = "none" | "custom";

export type OnClickTriggerEnum = "single" | "double";
Expand Down Expand Up @@ -116,8 +116,9 @@ export interface DatagridContainerProps {
columnsFilterable: boolean;
pageSize: number;
pagination: PaginationEnum;
pagingPosition: PagingPositionEnum;
showPagingButtons: ShowPagingButtonsEnum;
showNumberOfRows: boolean;
pagingPosition: PagingPositionEnum;
loadMoreButtonCaption?: DynamicValue<string>;
showEmptyPlaceholder: ShowEmptyPlaceholderEnum;
emptyPlaceholder?: ReactNode;
Expand Down Expand Up @@ -162,8 +163,9 @@ export interface DatagridPreviewProps {
columnsFilterable: boolean;
pageSize: number | null;
pagination: PaginationEnum;
pagingPosition: PagingPositionEnum;
showPagingButtons: ShowPagingButtonsEnum;
showNumberOfRows: boolean;
pagingPosition: PagingPositionEnum;
loadMoreButtonCaption: string;
showEmptyPlaceholder: ShowEmptyPlaceholderEnum;
emptyPlaceholder: { widgetCount: number; renderer: ComponentType<{ children: ReactNode; caption?: string }> };
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@ export function Gallery<T extends ObjectItem>(props: GalleryProps<T>): ReactElem
page={props.page}
pageSize={props.pageSize}
previousPage={() => props.setPage && props.setPage(prev => prev - 1)}
pagination={props.paging ? "buttons" : "virtualScrolling"}
/>
</div>
) : null;
Expand Down
Loading
Loading