diff --git a/package.json b/package.json index d8a7947..9d8ef91 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@dellstorage/dell-design-react-common", "description": "Override CSS of Clarity-React components to align it with Dell design standards", - "version": "0.2.11", + "version": "0.2.12", "license": "Apache-2.0", "private": false, "outDir": "dist", @@ -12,7 +12,7 @@ "node": ">=16.14.1" }, "dependencies": { - "@dellstorage/clarity-react": "^1.2.14", + "@dellstorage/clarity-react": "^1.2.15", "@types/node": "^12.14.1", "bootstrap": "^5.2.0", "react": "^17.0.2", diff --git a/src/components/dataGrid/DataGrid.stories.tsx b/src/components/dataGrid/DataGrid.stories.tsx index e10e8f9..9655554 100644 --- a/src/components/dataGrid/DataGrid.stories.tsx +++ b/src/components/dataGrid/DataGrid.stories.tsx @@ -27,6 +27,7 @@ import { hideShowColFooter, paginationDetails, filterFunction, + pageFilterFunction, paginationRows, sortColumns, customRows, @@ -42,6 +43,7 @@ const datagridFilterRef = React.createRef(); const datagridFilterSortRef = React.createRef(); const datagridCustomFilterMultiRef = React.createRef(); const datagridDetailsDemoRef = React.createRef(); +const datagridFullDemoRef = React.createRef(); storiesOf("DataGrid", module) .add("Basic grid with filtering", () => ( @@ -286,4 +288,35 @@ storiesOf("DataGrid", module)
+ )) + .add("Grid full demo", () => ( +
+ + ), + sort: {defaultSortOrder: SortOrder.ASC, sortFunction: sortFunction}, + }, + {columnName: "Model"}, + {columnName: "Template"}, + {columnName: "Networking"}, + {columnName: "Role"}, + ]} + rows={paginationRows.slice(0, 5)} + pagination={paginationDetails} + selectionType={GridSelectionType.MULTI} + footer={hideShowColFooter} + /> +
)); diff --git a/src/components/dataGrid/DataGridStoriesData.tsx b/src/components/dataGrid/DataGridStoriesData.tsx index 2632dbd..635ac91 100644 --- a/src/components/dataGrid/DataGridStoriesData.tsx +++ b/src/components/dataGrid/DataGridStoriesData.tsx @@ -207,28 +207,7 @@ export const hideShowColFooter = { 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 delay 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 => { - return new Promise((resolve, reject) => { - let rows: DataGridRow[] = []; - let offset = pageSize * (pageIndex - 1); + const offset = pageSize * (pageIndex - 1); rows = paginationRows.slice(offset, offset + pageSize); setTimeout(function() { @@ -239,16 +218,23 @@ export const getPageDataForCustomPageSize = (pageIndex: number, pageSize: number const cellData = [ ['192.168.0.1', "xyz", "PI-12345672", "ECS EX400", "DHCP", "Data,Monitor"], - ['192.168.0.1', "abc", "PI-12345672", "ECS EX400", "DHCP", "Data,Monitor"], - ['192.168.0.1', "def", "PI-12345672", "ECS EX400", "DHCP", "Data,Monitor"], - ['192.168.0.1', "xyz", "PI-12345672", "ECS EX400", "DHCP", "Data,Monitor"], - ['192.168.0.1', "123", "PI-12345672", "ECS EX400", "DHCP", "Data,Monitor"], - ['192.168.0.1', "123", "PI-12345672", "ECS EX400", "DHCP", "Data,Monitor"], - ['192.168.0.1', "klm", "PI-12345672", "ECS EX400", "DHCP", "Data,Monitor"], - ['192.168.0.1', "fgh", "PI-12345672", "ECS EX400", "DHCP", "Data,Monitor"], - ['192.168.0.1', "uvx", "PI-12345672", "ECS EX400", "DHCP", "Data,Monitor"], - ['192.168.0.1', "kssdlm", "PI-12345672", "ECS EX400", "DHCP", "Data,Monitor"], - ['192.168.0.1', "lmn", "PI-12345672", "ECS EX400", "DHCP", "Data,Monitor"], + ['192.168.0.2', "abc", "PI-12345672", "ECS EX400", "DHCP", "Data,Monitor"], + ['192.168.0.3', "def", "PI-12345672", "ECS EX400", "DHCP", "Data,Monitor"], + ['192.168.0.4', "xyz", "PI-12345672", "ECS EX400", "DHCP", "Data,Monitor"], + ['192.168.0.5', "123", "PI-12345672", "ECS EX400", "DHCP", "Data,Monitor"], + ['192.168.0.6', "123", "PI-12345672", "ECS EX400", "DHCP", "Data,Monitor"], + ['192.168.0.7', "klm", "PI-12345672", "ECS EX400", "DHCP", "Data,Monitor"], + ['192.168.0.8', "fgh", "PI-12345672", "ECS EX400", "DHCP", "Data,Monitor"], + ['192.168.0.9', "uvx", "PI-12345672", "ECS EX400", "DHCP", "Data,Monitor"], + ['192.168.0.10', "klm", "PI-12345672", "ECS EX400", "DHCP", "Data,Monitor"], + ['192.168.0.11', "lmn", "PI-12345672", "ECS EX400", "DHCP", "Data,Monitor"], + ['192.168.0.12', "uvx", "PI-12345672", "ECS EX400", "DHCP", "Data,Monitor"], + ['192.168.0.13', "xyz1", "PI-12345672", "ECS EX400", "DHCP", "Data,Monitor"], + ['192.168.0.14', "xyz2", "PI-12345672", "ECS EX400", "DHCP", "Data,Monitor"], + ['192.168.0.15', "xyz3", "PI-12345672", "ECS EX400", "DHCP", "Data,Monitor"], + ['192.168.0.16', "xyz4", "PI-12345672", "ECS EX400", "DHCP", "Data,Monitor"], + ['192.168.0.17', "xyz5", "PI-12345672", "ECS EX400", "DHCP", "Data,Monitor"], + ['192.168.0.18', "xyz6", "PI-12345672", "ECS EX400", "DHCP", "Data,Monitor"], ]; // Function to get row data export function getRowData() { @@ -295,13 +281,15 @@ export const paginationDetails: DataGridPaginationProps = { totalItems: paginationRows.length, getPageData: getPageData, pageSize: 5, + currentPage: 1, pageSizes: ["5", "10"], }; export const paginationDetailswithCustomPageSize: DataGridPaginationProps = { totalItems: paginationRows.length, - getPageData: getPageDataForCustomPageSize, + getPageData: getPageData, pageSize: 10, + currentPage: 1, pageSizes: ["10", "20", "50", "100", CUSTOM_PAGE_SIZE_OPTION], }; @@ -554,3 +542,33 @@ export function getRowDataWithLink(functionToAttach: Function) { }); return rowValues; } + +export const pageFilterFunction = ( + rows: DataGridRow[], + columnValue: string, + columnName: string, +): Promise => { + return new Promise((resolve, reject) => { + let result: DataGridFilterResult = { + rows: [], + totalItems: 0, + }; + if (columnValue === "" || columnValue === undefined) { + result = { + rows: paginationRows.slice(0, 5), + totalItems: paginationRows.length, + }; + } else { + const newRows = filterRows(paginationRows, columnName, Array.isArray(columnValue) ? columnValue : [columnValue]); + result = { + rows: newRows.slice(0, 5), + totalItems: newRows.length, + }; + } + + // Purposefully added delay here to see loading spinner + setTimeout(function() { + resolve(result); + }, 2000); + }); +}; diff --git a/yarn.lock b/yarn.lock index c9d5305..8bafc42 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1337,10 +1337,10 @@ resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-10.1.0.tgz#f0950bba18819512d42f7197e56c518aa491cf18" integrity sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg== -"@dellstorage/clarity-react@^1.2.14": - version "1.2.14" - resolved "https://registry.yarnpkg.com/@dellstorage/clarity-react/-/clarity-react-1.2.14.tgz#04c6ac3e1169fdba053984d11aa26dd8f3408093" - integrity sha512-E/O45+vFFpD3vHpkWX893pKpjSM1DZ892ltNNnP0J3RwGklrRsJJ7MxDh+QTmYhKKpKY6UAyBmJ1Ik3qwIRayw== +"@dellstorage/clarity-react@^1.2.15": + version "1.2.15" + resolved "https://registry.yarnpkg.com/@dellstorage/clarity-react/-/clarity-react-1.2.15.tgz#2a1188f0d8a19c08e69c3138936e425df37f1a25" + integrity sha512-8hFqY3TG1kemGXMXDbeHi3H+V3LbfyYsh9vmbh/XIn/tF4JcJb5LgZP6loEgsIXqHuUu1/CfLa8erD2iGeJcng== dependencies: "@clr/icons" "12.0.8" "@clr/ui" "12.0.8"