Skip to content

Commit

Permalink
Merge pull request #284 from EMCECS/bugfix-OBSDEF-47922
Browse files Browse the repository at this point in the history
  • Loading branch information
@akate1
akate1 authored May 22, 2024
2 parents 143977b + 57acabc commit 87c13bd
Show file tree
Hide file tree
Showing 3 changed files with 99 additions and 69 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@dellstorage/clarity-react",
"version": "1.2.13",
"version": "1.2.14",
"description": "React components for Clarity UI",
"license": "Apache-2.0",
"private": false,
Expand Down
64 changes: 54 additions & 10 deletions src/datagrid/DataGrid.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -468,8 +468,23 @@ export class DataGrid extends React.PureComponent<DataGridProps, DataGridState>

pagination.totalPages = this.getTotalPages(totalItems, pageSize);

// Update data from props if available
if (this.props.pagination) {
pagination = {
...pagination,
currentPage:
this.props.pagination.currentPage && this.props.pagination.currentPage > 0
? this.props.pagination.currentPage
: pagination.currentPage,
isCustomPageSizeSelected:
this.props.pagination.isCustomPageSizeSelected || pagination.isCustomPageSizeSelected,
maxCustomPageSize: this.props.pagination.maxCustomPageSize || pagination.maxCustomPageSize,
};
}

// Set current page to 1 if it is greater than total pages
const currentPage = pagination.currentPage > pagination.totalPages ? 1 : pagination.currentPage;
const currentPage =
pagination.currentPage > pagination.totalPages ? DEFAULT_CURRENT_PAGE_NUMBER : pagination.currentPage;
const firstItem = this.getFirstItemIndex(currentPage, pageSize);
const lastItem = this.getLastItemIndex(pageSize, totalItems, firstItem);

Expand Down Expand Up @@ -723,7 +738,7 @@ export class DataGrid extends React.PureComponent<DataGridProps, DataGridState>
this.setState(
{
allRows: [...rows],
pagination: paginationState,
pagination: {...this.state.pagination, ...paginationState},
selectAll: this.isAllRowsSelected(rows),
},
() => this.closeDetailPane(),
Expand Down Expand Up @@ -1644,18 +1659,47 @@ export class DataGrid extends React.PureComponent<DataGridProps, DataGridState>
);
}

// Function to build datagrid pagination footer
private buildDataGridPagination(): React.ReactElement {
const {className, style, compactFooter} = this.props.pagination!;
const {itemText = DEFAULT_ITEM_TEXT} = this.props;
/**
* Builds the label for the pagination footer.
* @returns {string} The pagination footer label.
*/
private buildPaginationFooterLabel(): string {
// Destructure pagination state
let {totalItems, firstItem, lastItem, pageSize, compactFooter} = this.state.pagination!;

// Determine if compactFooter should be shown
const showCompactFooter: boolean = compactFooter || this.isDetailPaneOpen();
let {totalItems, firstItem, lastItem, pageSizes} = this.state.pagination!;

// Destructure props
const {itemText = DEFAULT_ITEM_TEXT} = this.props;

// If no items, set first and last to 0
if (totalItems === 0) {
firstItem = lastItem = 0;
}
const paginationLabel = showCompactFooter
? firstItem + "-" + lastItem + " / " + totalItems
: firstItem + "-" + lastItem + " of " + totalItems + " " + itemText;

// Build the pagination label
let paginationLabel = `${firstItem}-${lastItem} of ${totalItems} ${itemText}`;

// If compactFooter is true, use compact pagination label
if (showCompactFooter) {
paginationLabel = `${firstItem}-${lastItem} / ${totalItems}`;
// If pageSize is 1, use label for single item
} else if (pageSize === 1) {
paginationLabel = `${firstItem} of ${totalItems} ${itemText}`;
}

// Return the pagination label
return paginationLabel;
}

// Function to build datagrid pagination footer
private buildDataGridPagination(): React.ReactElement {
const {className, style, compactFooter} = this.props.pagination!;
const showCompactFooter: boolean = compactFooter || this.isDetailPaneOpen();
let {totalItems, pageSizes} = this.state.pagination!;

const paginationLabel = this.buildPaginationFooterLabel();

return (
<div
Expand Down
102 changes: 44 additions & 58 deletions src/datagrid/DataGridStoriesData.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,9 +64,17 @@ const cellData = [
[14262, "Johnson", "Jun 23, 2019", "Blue"],
[59729, "Sibyl", "Feb 27, 2016", "Red"],
[92422, "Roslyn", "Apr 26, 2016", "Blue"],
[83941, "Lottie", "Mar 2, 2019", "Yellow"],
[83942, "Lottie", "Mar 2, 2019", "Yellow"],
[83943, "Lottie", "Mar 2, 2019", "Yellow"],
[83941, "Lottie", "Mar 2, 2020", "Yellow"],
[83942, "Lottie", "May 5, 2019", "Red"],
[83943, "Lottie", "June 29, 2018", "Blue"],
[83944, "Latta", "Mar 26, 2017", "Grren"],
[83945, "Lottie", "Apr 11, 2010", "Yellow"],
[83946, "Lottie", "Dec 2, 2020", "Blue"],
[83947, "Lottie", "Feb 27, 2019", "Yellow"],
[83948, "Lottie", "Oct 2, 2015", "Black"],
[83946, "Lottie", "Dec 10, 2020", "Blue"],
[83947, "Lottie", "Feb 27, 2019", "Yellow"],
[83948, "Lottie", "Oct 2, 2009", "Black"],
];

/**
Expand Down Expand Up @@ -349,7 +357,8 @@ export const getSelectableRowsData = (): DataGridRow[] => {
export let selectedRows = [41512, 2459, 83942];

export const getSelectedRowsData = (): DataGridRow[] => {
let updatedRows: DataGridRow[] = getRowData();
// Create deep copy of datagrid rows
let updatedRows: DataGridRow[] = JSON.parse(JSON.stringify(getRowData()));
updatedRows.forEach((row: DataGridRow) => {
row.isSelected = selectedRows.includes(row.rowData[0].cellData);
});
Expand Down Expand Up @@ -396,10 +405,11 @@ function filterRows(rows: DataGridRow[], columnValues: string[]) {
const newRows = rows.filter(row => {
let matchFound = false;
for (const index in row.rowData) {
const content = String(row.rowData[index].cellData);
const content = String(row.rowData[index].cellData).toLowerCase();
columnValues.forEach(columnValue => {
if (content.indexOf(columnValue) !== -1) {
if (content.indexOf(columnValue.toLowerCase()) !== -1) {
matchFound = true;
return;
}
});
}
Expand Down Expand Up @@ -511,27 +521,6 @@ export const sortColumns = [
* Data for Pagination
*/

// Function to get data for page based on pagenumber
export const getPageData = (pageIndex: number, pageSize: number): Promise<DataGridRow[]> => {
return new Promise((resolve, reject) => {
let rows: DataGridRow[] = [];
if (pageSize === 5) {
if (pageIndex === 2) {
rows = paginationRows.slice(5, 10);
}
if (pageIndex === 1) {
rows = paginationRows.slice(0, 5);
}
} else if (pageSize === 10) {
rows = paginationRows;
}
// Purposefully added dealy here to see loading spinner
setTimeout(function() {
resolve(rows);
}, 2000);
});
};

// Function to get data for page based on pagenumber
export const getPageDataForSelectedRows = (pageIndex: number, pageSize: number): Promise<DataGridRow[]> => {
return new Promise((resolve, reject) => {
Expand All @@ -558,28 +547,21 @@ export const getPageDataForSelectedRows = (pageIndex: number, pageSize: number):
export const getPageDataForDetailPane = (pageIndex: number, pageSize: number): Promise<DataGridRow[]> => {
return new Promise((resolve, reject) => {
let rows: DataGridRow[] = [];
if (pageSize === 5) {
if (pageIndex === 2) {
rows = rowsWithDetailPane.slice(5, 10);
}
if (pageIndex === 1) {
rows = rowsWithDetailPane.slice(0, 5);
}
} else if (pageSize === 10) {
rows = rowsWithDetailPane;
}
const offset = pageSize * (pageIndex - 1);
rows = rowsWithDetailPane.slice(offset, offset + pageSize);

// Purposefully added dealy here to see loading spinner
setTimeout(function() {
resolve(rows);
}, 2000);
});
};
//Function to get data for page based on customPageSize and page number
export const getPageDataForCustomPageSize = (pageIndex: number, pageSize: number): Promise<DataGridRow[]> => {

//Function to get data for page based on page size and page number
export const getPageData = (pageIndex: number, pageSize: number): Promise<DataGridRow[]> => {
return new Promise((resolve, reject) => {
let rows: DataGridRow[] = [];
let offset = pageSize * (pageIndex - 1);
const offset = pageSize * (pageIndex - 1);
rows = paginationRows.slice(offset, offset + pageSize);

// Delay to display loading spinner
Expand All @@ -594,22 +576,7 @@ export const paginationDetails: DataGridPaginationProps = {
getPageData: getPageData,
pageSize: 5,
pageSizes: ["5", "10"],
};

export const paginationDetailswithPageSizes: DataGridPaginationProps = {
totalItems: paginationRows.length,
getPageData: getPageDataForCustomPageSize,
pageSize: 10,
currentPage: 1,
pageSizes: ["10", "20", "50", "100", CUSTOM_PAGE_SIZE_OPTION],
};

export const paginationDetailsForLessThan10Records: DataGridPaginationProps = {
totalItems: 6,
getPageData: getPageDataForCustomPageSize,
pageSize: 10,
currentPage: 1,
pageSizes: ["10", "20", "50", "100", CUSTOM_PAGE_SIZE_OPTION],
};

export const paginationDetailsWithCompactFooter: DataGridPaginationProps = {
Expand Down Expand Up @@ -643,9 +610,9 @@ export const pageFilterFunction = (
totalItems: paginationRows.length,
};
} else {
const newRows = filterRows(rows, [columnValue]);
const newRows = filterRows(paginationRows, [columnValue]);
result = {
rows: newRows,
rows: newRows.slice(0, 5),
totalItems: newRows.length,
};
}
Expand Down Expand Up @@ -807,9 +774,28 @@ export const storeForDetailPane = new Store({

export const paginationDetailsForDetailsPane = {
totalItems: rowsWithDetailPane.length,
getPageData: getPageDataForDetailPane,
getPageData: getPageData,
pageSize: 5,
pageSizes: ["5", "10"],
};

/* #################### Data For detail pane story end ####################### */

/* #################### Data For Custom Page Size story start ####################### */
export const paginationDetailswithPageSizes: DataGridPaginationProps = {
totalItems: paginationRows.length,
getPageData: getPageData,
pageSize: 10,
currentPage: 1,
pageSizes: ["10", "20", "50", "100", CUSTOM_PAGE_SIZE_OPTION],
};

export const paginationDetailsForLessThan10Records: DataGridPaginationProps = {
totalItems: 6,
getPageData: getPageData,
pageSize: 10,
currentPage: 1,
pageSizes: ["10", "20", "50", "100", CUSTOM_PAGE_SIZE_OPTION],
};

/* #################### Data For Custom Page Size story end ####################### */

0 comments on commit 87c13bd

Please sign in to comment.