@megha-ui/react 1.2.752 → 1.2.755
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/grid/hooks/usePagination.d.ts +1 -1
- package/dist/components/grid/hooks/usePagination.js +10 -2
- package/dist/components/grid/hooks/useSort.d.ts +7 -1
- package/dist/components/grid/hooks/useSort.js +28 -4
- package/dist/components/grid/index.js +6 -5
- package/dist/components/grid/types/grid.d.ts +9 -0
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { DataRow } from "../types/grid";
|
|
2
|
-
export declare const usePagination: (sortedData: DataRow[], defaultRowsPerPage: number) => {
|
|
2
|
+
export declare const usePagination: (sortedData: DataRow[], defaultRowsPerPage: number, currentPageProp: number | undefined, getCurrentPage: (page: number) => void, totalPages: number) => {
|
|
3
3
|
paginatedData: DataRow[];
|
|
4
4
|
currentPage: number;
|
|
5
5
|
handleChangePage: (page: number) => void;
|
|
@@ -1,7 +1,15 @@
|
|
|
1
1
|
import { useState, useMemo, useEffect } from "react";
|
|
2
|
-
export const usePagination = (sortedData, defaultRowsPerPage) => {
|
|
2
|
+
export const usePagination = (sortedData, defaultRowsPerPage, currentPageProp, getCurrentPage, totalPages) => {
|
|
3
3
|
const [currentPage, setCurrentPage] = useState(1);
|
|
4
4
|
const [rowsPerPage, setRowsPerPage] = useState(10);
|
|
5
|
+
useEffect(() => {
|
|
6
|
+
if (currentPageProp !== undefined && currentPageProp >= 1 && currentPageProp <= totalPages) {
|
|
7
|
+
setCurrentPage(currentPageProp);
|
|
8
|
+
}
|
|
9
|
+
else {
|
|
10
|
+
setCurrentPage(1);
|
|
11
|
+
}
|
|
12
|
+
}, [currentPageProp]);
|
|
5
13
|
useEffect(() => {
|
|
6
14
|
setRowsPerPage(defaultRowsPerPage);
|
|
7
15
|
}, [defaultRowsPerPage]);
|
|
@@ -11,7 +19,7 @@ export const usePagination = (sortedData, defaultRowsPerPage) => {
|
|
|
11
19
|
}, [sortedData, currentPage, rowsPerPage]);
|
|
12
20
|
const handleChangePage = (page) => {
|
|
13
21
|
setCurrentPage(page);
|
|
14
|
-
|
|
22
|
+
getCurrentPage(page);
|
|
15
23
|
};
|
|
16
24
|
const handleChangeRowsPerPage = (value) => {
|
|
17
25
|
setRowsPerPage(parseInt(value.toString(), 10));
|
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
import { Column, DataRow } from "../types/grid";
|
|
2
|
-
export declare const useSort: (data: DataRow[], columns: Column[], uniqueSearch: any, multiSorting: boolean, withAscii: boolean
|
|
2
|
+
export declare const useSort: (data: DataRow[], columns: Column[], uniqueSearch: any, multiSorting: boolean, withAscii: boolean, combinedColumns?: {
|
|
3
|
+
name: string;
|
|
4
|
+
key: string;
|
|
5
|
+
separator: string;
|
|
6
|
+
columns: string[];
|
|
7
|
+
sortOn: string[];
|
|
8
|
+
}[]) => {
|
|
3
9
|
sortedData: DataRow[];
|
|
4
10
|
handleSort: (column: Column | null, order?: "asc" | "desc") => void;
|
|
5
11
|
sortQueries: {
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import { useState, useMemo } from "react";
|
|
2
|
-
export const useSort = (data, columns, uniqueSearch, multiSorting, withAscii) => {
|
|
2
|
+
export const useSort = (data, columns, uniqueSearch, multiSorting, withAscii, combinedColumns) => {
|
|
3
3
|
const [sortQueries, setSortQueries] = useState({});
|
|
4
4
|
const hierarchicalSort = (keys, orders) => {
|
|
5
5
|
return (a, b) => {
|
|
6
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
|
|
6
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
|
|
7
7
|
for (let i = 0; i < keys.length; i++) {
|
|
8
8
|
const key = keys[i];
|
|
9
9
|
const column = columns.find((col) => col.key === key);
|
|
10
10
|
const order = orders[i] === "asc" ? 1 : -1;
|
|
11
|
-
|
|
11
|
+
let aValue = ((_a = a[key]) === null || _a === void 0 ? void 0 : _a.value)
|
|
12
12
|
? (column === null || column === void 0 ? void 0 : column.dataType) &&
|
|
13
13
|
((column === null || column === void 0 ? void 0 : column.dataType) === "number" || (column === null || column === void 0 ? void 0 : column.dataType) === "currency")
|
|
14
14
|
? parseFloat((_c = (_b = a[key]) === null || _b === void 0 ? void 0 : _b.value) === null || _c === void 0 ? void 0 : _c.toString())
|
|
@@ -18,7 +18,7 @@ export const useSort = (data, columns, uniqueSearch, multiSorting, withAscii) =>
|
|
|
18
18
|
: (column === null || column === void 0 ? void 0 : column.dataType) === "number" || (column === null || column === void 0 ? void 0 : column.dataType) === "currency"
|
|
19
19
|
? 0
|
|
20
20
|
: "";
|
|
21
|
-
|
|
21
|
+
let bValue = ((_h = b[key]) === null || _h === void 0 ? void 0 : _h.value)
|
|
22
22
|
? (column === null || column === void 0 ? void 0 : column.dataType) &&
|
|
23
23
|
((column === null || column === void 0 ? void 0 : column.dataType) === "number" || (column === null || column === void 0 ? void 0 : column.dataType) === "currency")
|
|
24
24
|
? parseFloat((_k = (_j = b[key]) === null || _j === void 0 ? void 0 : _j.value) === null || _k === void 0 ? void 0 : _k.toString())
|
|
@@ -28,6 +28,30 @@ export const useSort = (data, columns, uniqueSearch, multiSorting, withAscii) =>
|
|
|
28
28
|
: (column === null || column === void 0 ? void 0 : column.dataType) === "number" || (column === null || column === void 0 ? void 0 : column.dataType) === "currency"
|
|
29
29
|
? 0
|
|
30
30
|
: "";
|
|
31
|
+
if (combinedColumns && (combinedColumns === null || combinedColumns === void 0 ? void 0 : combinedColumns.length) > 0) {
|
|
32
|
+
const combinedColumn = combinedColumns.find((col) => col.key === key);
|
|
33
|
+
if (combinedColumn) {
|
|
34
|
+
const { columns: combinedCols, separator, sortOn } = combinedColumn;
|
|
35
|
+
if (sortOn) {
|
|
36
|
+
const index = combinedCols.findIndex((colKey) => colKey === sortOn[0]);
|
|
37
|
+
const aVals = (((_r = (_q = a[key]) === null || _q === void 0 ? void 0 : _q.value) === null || _r === void 0 ? void 0 : _r.toString()) || "").split(separator);
|
|
38
|
+
const bVals = (((_t = (_s = b[key]) === null || _s === void 0 ? void 0 : _s.value) === null || _t === void 0 ? void 0 : _t.toString()) || "").split(separator);
|
|
39
|
+
aValue = aVals[index] || "";
|
|
40
|
+
bValue = bVals[index] || "";
|
|
41
|
+
if (parseFloat(aValue).toString() !== "NaN" &&
|
|
42
|
+
parseFloat(bValue).toString() !== "NaN") {
|
|
43
|
+
aValue = parseFloat(aValue);
|
|
44
|
+
bValue = parseFloat(bValue);
|
|
45
|
+
}
|
|
46
|
+
else {
|
|
47
|
+
if (!withAscii) {
|
|
48
|
+
aValue = aValue.toUpperCase();
|
|
49
|
+
bValue = bValue.toUpperCase();
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
}
|
|
31
55
|
if (aValue < bValue)
|
|
32
56
|
return -1 * order;
|
|
33
57
|
if (aValue > bValue)
|
|
@@ -40,7 +40,9 @@ const Grid = ({ columns, wrapperClass, updateGridColumns, data, height, sortable
|
|
|
40
40
|
console.log("Update fixed filter values not implemented", fixedFilterValues);
|
|
41
41
|
}, locale, formatOptions, exportOptions,
|
|
42
42
|
// Card wrapper props
|
|
43
|
-
withCard = false, cardClassName, cardHeader, title, headerLeft, headerRight, subHeader, cardFooter
|
|
43
|
+
withCard = false, cardClassName, cardHeader, title, headerLeft, headerRight, subHeader, cardFooter, getCurrentPage = (page) => {
|
|
44
|
+
console.log("Current page:", page);
|
|
45
|
+
}, currentPage: propCurrentPage, combinedColumns, }) => {
|
|
44
46
|
var _a, _b, _c, _d;
|
|
45
47
|
const [searchQueries, setSearchQueries] = useState({});
|
|
46
48
|
const [chips, setChips] = useState([]);
|
|
@@ -530,8 +532,9 @@ withCard = false, cardClassName, cardHeader, title, headerLeft, headerRight, sub
|
|
|
530
532
|
setSummariseKeys(_summariseKeys);
|
|
531
533
|
setSummariseDetails(newSummariseDetails);
|
|
532
534
|
};
|
|
533
|
-
const
|
|
534
|
-
const {
|
|
535
|
+
const [totalPages, setTotalPages] = useState(0);
|
|
536
|
+
const { sortedData, handleSort, sortQueries, setSortQueries } = useSort(filteredData, gridColumns, uniqueSearch, multiSorting, withAscii, combinedColumns);
|
|
537
|
+
const { paginatedData, currentPage, handleChangePage, handleChangeRowsPerPage, rowsPerPage, } = usePagination(sortedData, defaultRowsPerPage, propCurrentPage, getCurrentPage, totalPages);
|
|
535
538
|
useEffect(() => {
|
|
536
539
|
const keys = Object.keys(summariseKeys);
|
|
537
540
|
if (keys.length > 0 && summariseAvailable) {
|
|
@@ -544,7 +547,6 @@ withCard = false, cardClassName, cardHeader, title, headerLeft, headerRight, sub
|
|
|
544
547
|
setSelectedRows: setSelectedCheckbox,
|
|
545
548
|
});
|
|
546
549
|
const [hasVerticalScroll, setHasVerticalScroll] = useState(false);
|
|
547
|
-
const [totalPages, setTotalPages] = useState(0);
|
|
548
550
|
const [rowOpened, setRowOpened] = useState([]);
|
|
549
551
|
const gridRef = useRef(null);
|
|
550
552
|
const entrieGridRef = useRef(null);
|
|
@@ -855,7 +857,6 @@ withCard = false, cardClassName, cardHeader, title, headerLeft, headerRight, sub
|
|
|
855
857
|
};
|
|
856
858
|
}, [sortedData, paginate, paginatedData]);
|
|
857
859
|
useEffect(() => {
|
|
858
|
-
handleChangePage(1);
|
|
859
860
|
setTotalPages(getTotalPages(sortedData.length, rowsPerPage));
|
|
860
861
|
}, [data, sortQueries, rowsPerPage, sortedData.length]);
|
|
861
862
|
const isScrollAlmostAtEnd = (element, threshold = 100) => {
|
|
@@ -172,6 +172,15 @@ export interface OjasGridProps {
|
|
|
172
172
|
headerRight?: ReactNode;
|
|
173
173
|
subHeader?: ReactNode;
|
|
174
174
|
cardFooter?: ReactNode;
|
|
175
|
+
getCurrentPage?: (page: number) => void;
|
|
176
|
+
currentPage?: number;
|
|
177
|
+
combinedColumns?: {
|
|
178
|
+
name: string;
|
|
179
|
+
key: string;
|
|
180
|
+
separator: string;
|
|
181
|
+
columns: string[];
|
|
182
|
+
sortOn: string[];
|
|
183
|
+
}[];
|
|
175
184
|
}
|
|
176
185
|
export interface GroupedRowProps {
|
|
177
186
|
item: any;
|
package/package.json
CHANGED