diff --git a/package.json b/package.json index 4fbeae22..87cb61c3 100644 --- a/package.json +++ b/package.json @@ -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, diff --git a/src/datagrid/DataGrid.tsx b/src/datagrid/DataGrid.tsx index 0a4a4dbf..cb651283 100644 --- a/src/datagrid/DataGrid.tsx +++ b/src/datagrid/DataGrid.tsx @@ -468,8 +468,23 @@ export class DataGrid extends React.PureComponent 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); @@ -723,7 +738,7 @@ export class DataGrid extends React.PureComponent this.setState( { allRows: [...rows], - pagination: paginationState, + pagination: {...this.state.pagination, ...paginationState}, selectAll: this.isAllRowsSelected(rows), }, () => this.closeDetailPane(), @@ -1644,18 +1659,47 @@ export class DataGrid extends React.PureComponent ); } - // 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 (
{ 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); }); @@ -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; } }); } @@ -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 => { - 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 => { return new Promise((resolve, reject) => { @@ -558,16 +547,8 @@ export const getPageDataForSelectedRows = (pageIndex: number, pageSize: number): export const getPageDataForDetailPane = (pageIndex: number, pageSize: number): Promise => { 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() { @@ -575,11 +556,12 @@ export const getPageDataForDetailPane = (pageIndex: number, pageSize: number): P }, 2000); }); }; -//Function to get data for page based on customPageSize and page number -export const getPageDataForCustomPageSize = (pageIndex: number, pageSize: number): Promise => { + +//Function to get data for page based on page size and page number +export const getPageData = (pageIndex: number, pageSize: number): Promise => { 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 @@ -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 = { @@ -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, }; } @@ -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 ####################### */