@absreim/react-bootstrap-data-grid-pro 2.5.0 → 2.6.1
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/grid/Grid.js +26 -30
- package/grid/InternalGrid.d.ts +1 -0
- package/grid/InternalGrid.js +17 -18
- package/grid/editing/EditControlsCell.js +3 -4
- package/grid/editing/EditableRow.js +11 -17
- package/grid/editing/inputStrsToRowData.js +4 -4
- package/grid/export/ExportForm.js +25 -49
- package/grid/export/useExportFn.js +34 -58
- package/grid/filtering/DateFilterRow.js +17 -33
- package/grid/filtering/FilterOptionsTable.js +60 -96
- package/grid/filtering/FilterRow.js +4 -13
- package/grid/filtering/NumberFilterRow.js +10 -25
- package/grid/filtering/StringFilterRow.js +10 -25
- package/grid/filtering/types.js +6 -6
- package/grid/filtering/useFilterFormState.js +52 -65
- package/grid/main/BodyRows.d.ts +3 -1
- package/grid/main/BodyRows.js +6 -13
- package/grid/main/ColHeaderCell/index.js +4 -4
- package/grid/main/ColHeaderCell/useSortHeaderStates.js +10 -10
- package/grid/main/ToggleButton.js +3 -4
- package/grid/pagination/PageSelector.js +17 -18
- package/grid/pagination/PageSizeSelector.js +5 -6
- package/grid/pagination/Pagination.js +6 -7
- package/grid/pipeline/useAugFormattedRows.js +5 -20
- package/grid/pipeline/useCombinedPipeline/index.d.ts +2 -2
- package/grid/pipeline/useCombinedPipeline/index.js +21 -22
- package/grid/pipeline/useCombinedPipeline/useCurrentPageRows.d.ts +3 -3
- package/grid/pipeline/useCombinedPipeline/useCurrentPageRows.js +29 -24
- package/grid/pipeline/useCombinedPipeline/useDisplayRows.d.ts +2 -2
- package/grid/pipeline/useCombinedPipeline/useDisplayRows.js +40 -41
- package/grid/pipeline/useCombinedPipeline/useFilter.d.ts +2 -2
- package/grid/pipeline/useCombinedPipeline/useFilter.js +9 -9
- package/grid/pipeline/useCombinedPipeline/useFilterStateFromEditable.js +5 -6
- package/grid/pipeline/useCombinedPipeline/useFilterStateStore.js +6 -7
- package/grid/pipeline/useCombinedPipeline/useSortedRows.d.ts +3 -3
- package/grid/pipeline/useCombinedPipeline/useSortedRows.js +22 -27
- package/grid/pipeline/useGetInputStrSubmitCallback.js +6 -6
- package/grid/pipeline/useGridSelectionFns.js +30 -30
- package/grid/pipeline/useUnwrappedGridStyles.js +5 -7
- package/grid/selection/SelectAllHeaderCell.d.ts +1 -0
- package/grid/selection/SelectAllHeaderCell.js +9 -10
- package/grid/selection/SelectionInput.js +4 -6
- package/grid/sorting/arrowPlaceholder.js +1 -1
- package/grid/sorting/downArrow.js +1 -1
- package/grid/sorting/sortOrderToAriaSort.d.ts +4 -0
- package/grid/sorting/sortOrderToAriaSort.js +11 -0
- package/grid/sorting/upArrow.js +1 -10
- package/grid/styling/styleModelUnwrappers.js +22 -33
- package/grid/toolbar/Toolbar.js +13 -16
- package/grid/toolbar/ToolbarContainer.js +3 -4
- package/grid/toolbar/useInterfaces.js +5 -17
- package/grid/types.d.ts +9 -5
- package/grid/util/datetime.js +2 -4
- package/grid/util/getWidthStyle.js +6 -8
- package/grid/util/isSubset.js +3 -4
- package/grid/util/useControlledHover.js +8 -8
- package/grid-pro/ColHeaderCellPro.js +52 -44
- package/grid-pro/GridPro.js +42 -32
- package/grid-pro/assets/HorizontalGrip.d.ts +6 -0
- package/grid-pro/assets/HorizontalGrip.js +3 -0
- package/grid-pro/assets/VerticalGrip.d.ts +6 -0
- package/grid-pro/assets/VerticalGrip.js +3 -0
- package/grid-pro/index.d.ts +3 -0
- package/grid-pro/index.js +3 -0
- package/grid-pro/reorder/ReorderHandleCell.d.ts +12 -0
- package/grid-pro/reorder/ReorderHandleCell.js +220 -0
- package/grid-pro/reorder/ReorderHeaderCell.d.ts +3 -0
- package/grid-pro/reorder/ReorderHeaderCell.js +4 -0
- package/grid-pro/reorder/types.d.ts +12 -0
- package/grid-pro/reorder/types.js +1 -0
- package/grid-pro/resize/useResizeModel.js +40 -62
- package/grid-pro/types.d.ts +9 -2
- package/grid-pro/util/index.d.ts +1 -0
- package/grid-pro/util/index.js +1 -0
- package/grid-pro/util/regDragCleanup.d.ts +3 -0
- package/grid-pro/util/regDragCleanup.js +28 -0
- package/grid-pro/util/reorderRows.d.ts +3 -0
- package/grid-pro/util/reorderRows.js +17 -0
- package/grid-pro/util/types.d.ts +10 -0
- package/grid-pro/util/types.js +1 -0
- package/package.json +1 -1
- package/style.css +1 -1
|
@@ -13,9 +13,8 @@ import classNames from "classnames";
|
|
|
13
13
|
* @param alignment - Flexbox justify-content setting on the <ul> element
|
|
14
14
|
* @param size - Size variant of the <ul> element
|
|
15
15
|
*/
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
var ulClasses = ["pagination"];
|
|
16
|
+
const PageSelector = ({ numPages, numButtons, pageNum, setPageNum, ariaLabel, alignment, size, }) => {
|
|
17
|
+
const ulClasses = ["pagination"];
|
|
19
18
|
if (size === "small") {
|
|
20
19
|
ulClasses.push("pagination-sm");
|
|
21
20
|
}
|
|
@@ -23,23 +22,23 @@ var PageSelector = function (_a) {
|
|
|
23
22
|
ulClasses.push("pagination-lg");
|
|
24
23
|
}
|
|
25
24
|
if (alignment) {
|
|
26
|
-
ulClasses.push(
|
|
25
|
+
ulClasses.push(`justify-content-${alignment}`);
|
|
27
26
|
}
|
|
28
|
-
|
|
29
|
-
|
|
27
|
+
let lowerBound = pageNum - Math.floor((numButtons - 1) / 2);
|
|
28
|
+
let upperBound = pageNum + Math.ceil((numButtons - 1) / 2);
|
|
30
29
|
if (upperBound > numPages) {
|
|
31
|
-
|
|
30
|
+
const diff = upperBound - numPages;
|
|
32
31
|
lowerBound = Math.max(lowerBound - diff, 1);
|
|
33
32
|
upperBound -= diff;
|
|
34
33
|
}
|
|
35
34
|
else if (lowerBound < 1) {
|
|
36
|
-
|
|
35
|
+
const diff = 1 - lowerBound;
|
|
37
36
|
lowerBound = 1;
|
|
38
37
|
upperBound = Math.min(numPages, upperBound + diff);
|
|
39
38
|
}
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
for (
|
|
39
|
+
const buttonIndices = useMemo(() => {
|
|
40
|
+
const indices = [];
|
|
41
|
+
for (let i = lowerBound; i <= upperBound; i++) {
|
|
43
42
|
indices.push(i);
|
|
44
43
|
}
|
|
45
44
|
return indices;
|
|
@@ -48,7 +47,7 @@ var PageSelector = function (_a) {
|
|
|
48
47
|
if (lowerBound === 1) {
|
|
49
48
|
return null;
|
|
50
49
|
}
|
|
51
|
-
return (_jsx("li", { className: "page-item", children: _jsx("a", { className: "page-link", href: "#", "aria-label": "First", onClick:
|
|
50
|
+
return (_jsx("li", { className: "page-item", children: _jsx("a", { className: "page-link", href: "#", "aria-label": "First", onClick: (event) => {
|
|
52
51
|
event.preventDefault();
|
|
53
52
|
setPageNum(1);
|
|
54
53
|
}, children: _jsx("span", { "aria-hidden": "true", children: "<<" }) }) }));
|
|
@@ -57,7 +56,7 @@ var PageSelector = function (_a) {
|
|
|
57
56
|
if (pageNum === 1) {
|
|
58
57
|
return null;
|
|
59
58
|
}
|
|
60
|
-
return (_jsx("li", { className: "page-item", children: _jsx("a", { className: "page-link", href: "#", "aria-label": "Previous", onClick:
|
|
59
|
+
return (_jsx("li", { className: "page-item", children: _jsx("a", { className: "page-link", href: "#", "aria-label": "Previous", onClick: (event) => {
|
|
61
60
|
event.preventDefault();
|
|
62
61
|
setPageNum(pageNum - 1);
|
|
63
62
|
}, children: _jsx("span", { "aria-hidden": "true", children: "<" }) }) }));
|
|
@@ -66,7 +65,7 @@ var PageSelector = function (_a) {
|
|
|
66
65
|
if (pageNum === numPages) {
|
|
67
66
|
return null;
|
|
68
67
|
}
|
|
69
|
-
return (_jsx("li", { className: "page-item", children: _jsx("a", { className: "page-link", href: "#", "aria-label": "Next", onClick:
|
|
68
|
+
return (_jsx("li", { className: "page-item", children: _jsx("a", { className: "page-link", href: "#", "aria-label": "Next", onClick: (event) => {
|
|
70
69
|
event.preventDefault();
|
|
71
70
|
setPageNum(pageNum + 1);
|
|
72
71
|
}, children: _jsx("span", { "aria-hidden": "true", children: ">" }) }) }));
|
|
@@ -75,18 +74,18 @@ var PageSelector = function (_a) {
|
|
|
75
74
|
if (upperBound === numPages) {
|
|
76
75
|
return null;
|
|
77
76
|
}
|
|
78
|
-
return (_jsx("li", { className: "page-item", children: _jsx("a", { className: "page-link", href: "#", "aria-label": "Last", onClick:
|
|
77
|
+
return (_jsx("li", { className: "page-item", children: _jsx("a", { className: "page-link", href: "#", "aria-label": "Last", onClick: (event) => {
|
|
79
78
|
event.preventDefault();
|
|
80
79
|
setPageNum(numPages);
|
|
81
80
|
}, children: _jsx("span", { "aria-hidden": "true", children: ">>" }) }) }));
|
|
82
81
|
}
|
|
83
|
-
|
|
82
|
+
const indexButtons = buttonIndices.map((buttonIndex) => (_jsx("li", { className: classNames({
|
|
84
83
|
"page-item": true,
|
|
85
84
|
active: pageNum === buttonIndex,
|
|
86
|
-
}), "aria-current": pageNum === buttonIndex ? "page" : undefined, children: _jsx("a", { className: "page-link", href: "#", onClick:
|
|
85
|
+
}), "aria-current": pageNum === buttonIndex ? "page" : undefined, children: _jsx("a", { className: "page-link", href: "#", onClick: (event) => {
|
|
87
86
|
event.preventDefault();
|
|
88
87
|
setPageNum(buttonIndex);
|
|
89
|
-
}, children: buttonIndex }) }, buttonIndex))
|
|
88
|
+
}, children: buttonIndex }) }, buttonIndex)));
|
|
90
89
|
return (_jsx("nav", { "aria-label": ariaLabel, children: _jsxs("ul", { className: classNames(ulClasses), children: [getFirstArrowButton(), getPrevArrowButton(), indexButtons, getNextArrowButton(), getLastArrowButton()] }) }));
|
|
91
90
|
};
|
|
92
91
|
export default PageSelector;
|
|
@@ -1,15 +1,14 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import classNames from "classnames";
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
var pageSizeIndex = Number(event.target.value);
|
|
3
|
+
const PageSizeSelector = ({ componentSize, pageSizeOptions, pageSizeIndex, handleSetPageSize, }) => {
|
|
4
|
+
const onChange = (event) => {
|
|
5
|
+
const pageSizeIndex = Number(event.target.value);
|
|
7
6
|
handleSetPageSize(pageSizeIndex);
|
|
8
7
|
};
|
|
9
|
-
return (_jsx("div", { children: _jsx("select", { className: classNames({
|
|
8
|
+
return (_jsx("div", { children: _jsx("select", { name: "rowsPerPage", className: classNames({
|
|
10
9
|
"form-select": true,
|
|
11
10
|
"form-select-lg": componentSize === "large",
|
|
12
11
|
"form-select-sm": componentSize === "small",
|
|
13
|
-
}), value: pageSizeIndex, "aria-label": "Number of Rows per Page", onChange: onChange, children: pageSizeOptions.map(
|
|
12
|
+
}), value: pageSizeIndex, "aria-label": "Number of Rows per Page", onChange: onChange, children: pageSizeOptions.map((numRows, index) => (_jsx("option", { value: index, children: numRows }, index))) }) }));
|
|
14
13
|
};
|
|
15
14
|
export default PageSizeSelector;
|
|
@@ -2,13 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import PageSizeSelector from "./PageSizeSelector";
|
|
3
3
|
import PageSelector from "./PageSelector";
|
|
4
4
|
import classNames from "classnames";
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
var maxPages = Math.ceil(prePagingNumRows / newPageSize);
|
|
5
|
+
const Pagination = ({ normalizedModel, prePagingNumRows, containerDivClasses, }) => {
|
|
6
|
+
const { pageSizeOptions, pageSizeIndex, currentPage, setCurrentPage, setPageSizeIndex, componentSize, maxPageButtons, pageSelectorAriaLabel, pageSelectorJustifyContent, } = normalizedModel;
|
|
7
|
+
const numPages = Math.ceil(prePagingNumRows / pageSizeOptions[pageSizeIndex]);
|
|
8
|
+
const pageIndexAwarePageSizeSetter = (newPageSizeIndex) => {
|
|
9
|
+
const newPageSize = pageSizeOptions[newPageSizeIndex];
|
|
10
|
+
const maxPages = Math.ceil(prePagingNumRows / newPageSize);
|
|
12
11
|
setPageSizeIndex(newPageSizeIndex);
|
|
13
12
|
// The new page size can cause the current page number to be out of bounds.
|
|
14
13
|
// In that case, set the page num to the maximum possible with new page
|
|
@@ -1,22 +1,7 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
1
|
import { useMemo } from "react";
|
|
13
|
-
|
|
14
|
-
return
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
}) });
|
|
19
|
-
});
|
|
20
|
-
}, [colNameToWidth, rows]);
|
|
21
|
-
};
|
|
2
|
+
const useAugFormattedRows = (colNameToWidth, rows) => useMemo(() => rows.map((row) => {
|
|
3
|
+
return Object.assign(Object.assign({}, row), { contents: row.contents.map((cell) => {
|
|
4
|
+
return Object.assign(Object.assign({}, cell), { width: colNameToWidth[cell.fieldName] });
|
|
5
|
+
}) });
|
|
6
|
+
}), [colNameToWidth, rows]);
|
|
22
7
|
export default useAugFormattedRows;
|
|
@@ -15,5 +15,5 @@ export interface UseCombinedPipelineHook {
|
|
|
15
15
|
ariaColIndexOffset: number;
|
|
16
16
|
displayRows: FormattedRow[];
|
|
17
17
|
}
|
|
18
|
-
declare const
|
|
19
|
-
export default
|
|
18
|
+
declare const useCombinedPipeline: (params: CombinedPipelineParams) => UseCombinedPipelineHook;
|
|
19
|
+
export default useCombinedPipeline;
|
|
@@ -4,28 +4,27 @@ import useFilterStateFromEditable from "./useFilterStateFromEditable";
|
|
|
4
4
|
import useSortedRows from "./useSortedRows";
|
|
5
5
|
import useCurrentPageRows from "./useCurrentPageRows";
|
|
6
6
|
import useDisplayRows from "./useDisplayRows";
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
var displayRows = useDisplayRows(paginatedRows, cols, ariaColIndexOffset);
|
|
7
|
+
const useCombinedPipeline = ({ filterModel, cols, rows, sortModel, pagination, selectModel, }) => {
|
|
8
|
+
const normalizedTableFilterModel = useFilterStateStore(filterModel, cols);
|
|
9
|
+
const editableFilterState = (normalizedTableFilterModel === null || normalizedTableFilterModel === void 0 ? void 0 : normalizedTableFilterModel.tableFilterState) || null;
|
|
10
|
+
const filteredRows = useFilter(rows, editableFilterState);
|
|
11
|
+
const filterState = useFilterStateFromEditable(cols, editableFilterState);
|
|
12
|
+
const sortedRowsOutput = useSortedRows(filteredRows, cols, sortModel);
|
|
13
|
+
const { sortedRows } = sortedRowsOutput;
|
|
14
|
+
const currentPageRowsOutput = useCurrentPageRows(sortedRows, pagination);
|
|
15
|
+
const showSelectCol = !!(selectModel && selectModel.mode !== "row");
|
|
16
|
+
const ariaColIndexOffset = showSelectCol ? 1 : 0;
|
|
17
|
+
const { paginatedRows } = currentPageRowsOutput;
|
|
18
|
+
const displayRows = useDisplayRows(paginatedRows, cols, ariaColIndexOffset);
|
|
20
19
|
return {
|
|
21
|
-
normalizedTableFilterModel
|
|
22
|
-
filteredRows
|
|
23
|
-
filterState
|
|
24
|
-
sortedRowsOutput
|
|
25
|
-
currentPageRowsOutput
|
|
26
|
-
showSelectCol
|
|
27
|
-
ariaColIndexOffset
|
|
28
|
-
displayRows
|
|
20
|
+
normalizedTableFilterModel,
|
|
21
|
+
filteredRows,
|
|
22
|
+
filterState,
|
|
23
|
+
sortedRowsOutput,
|
|
24
|
+
currentPageRowsOutput,
|
|
25
|
+
showSelectCol,
|
|
26
|
+
ariaColIndexOffset,
|
|
27
|
+
displayRows,
|
|
29
28
|
};
|
|
30
29
|
};
|
|
31
|
-
export default
|
|
30
|
+
export default useCombinedPipeline;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { AugRowDef, PostPaginationRowDef } from "../../types";
|
|
2
2
|
import { NormalizedPaginationModel, GridPaginationState } from "../../pagination/types";
|
|
3
3
|
export interface CurrentPageRowsOutput {
|
|
4
|
-
paginatedRows:
|
|
4
|
+
paginatedRows: PostPaginationRowDef[];
|
|
5
5
|
normalizedModel: NormalizedPaginationModel | null;
|
|
6
6
|
}
|
|
7
|
-
declare const useCurrentPageRows: (sortedRows:
|
|
7
|
+
declare const useCurrentPageRows: (sortedRows: AugRowDef[], paginationModel: GridPaginationState | undefined) => CurrentPageRowsOutput;
|
|
8
8
|
export default useCurrentPageRows;
|
|
@@ -1,43 +1,48 @@
|
|
|
1
1
|
import { useMemo, useState } from "react";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
2
|
+
const useCurrentPageRows = (sortedRows, paginationModel) => {
|
|
3
|
+
const componentSize = (paginationModel === null || paginationModel === void 0 ? void 0 : paginationModel.componentSize) || "medium";
|
|
4
|
+
const isControlled = (paginationModel === null || paginationModel === void 0 ? void 0 : paginationModel.type) !== "uncontrolled";
|
|
5
|
+
const [internalPageSizeIndex, setInternalPageSizeIndex] = useState(isControlled ? 0 : paginationModel.startingPageSizeIndex || 0);
|
|
6
|
+
const pageSizeIndex = isControlled
|
|
7
7
|
? (paginationModel === null || paginationModel === void 0 ? void 0 : paginationModel.pageSizeIndex) || 0
|
|
8
8
|
: internalPageSizeIndex;
|
|
9
|
-
|
|
9
|
+
const setPageSizeIndex = isControlled
|
|
10
10
|
? paginationModel === null || paginationModel === void 0 ? void 0 : paginationModel.setPageSizeIndex
|
|
11
11
|
: setInternalPageSizeIndex;
|
|
12
|
-
|
|
13
|
-
|
|
12
|
+
const [internalPageNum, setInternalPageNum] = useState(isControlled ? 1 : paginationModel.startingCurrentPage || 1);
|
|
13
|
+
const currentPage = isControlled
|
|
14
14
|
? (paginationModel === null || paginationModel === void 0 ? void 0 : paginationModel.currentPage) || 1
|
|
15
15
|
: internalPageNum;
|
|
16
|
-
|
|
16
|
+
const setCurrentPage = isControlled
|
|
17
17
|
? paginationModel === null || paginationModel === void 0 ? void 0 : paginationModel.setCurrentPage
|
|
18
18
|
: setInternalPageNum;
|
|
19
|
-
|
|
20
|
-
return useMemo(
|
|
19
|
+
const maxPageButtons = (paginationModel === null || paginationModel === void 0 ? void 0 : paginationModel.maxPageButtons) || 5;
|
|
20
|
+
return useMemo(() => {
|
|
21
21
|
if (paginationModel === undefined) {
|
|
22
|
-
return {
|
|
22
|
+
return {
|
|
23
|
+
paginatedRows: sortedRows.map((row, index) => (Object.assign(Object.assign({}, row), { prePaginationIndex: index }))),
|
|
24
|
+
normalizedModel: null,
|
|
25
|
+
};
|
|
23
26
|
}
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
pageSizeIndex
|
|
27
|
+
const pageSizeOptions = (paginationModel === null || paginationModel === void 0 ? void 0 : paginationModel.pageSizeOptions) || [10, 25, 100];
|
|
28
|
+
const normalizedModel = {
|
|
29
|
+
pageSizeIndex,
|
|
27
30
|
setPageSizeIndex: setPageSizeIndex,
|
|
28
|
-
currentPage
|
|
31
|
+
currentPage,
|
|
29
32
|
setCurrentPage: setCurrentPage,
|
|
30
|
-
pageSizeOptions
|
|
31
|
-
maxPageButtons
|
|
32
|
-
componentSize
|
|
33
|
+
pageSizeOptions,
|
|
34
|
+
maxPageButtons,
|
|
35
|
+
componentSize,
|
|
33
36
|
pageSelectorAriaLabel: paginationModel === null || paginationModel === void 0 ? void 0 : paginationModel.pageSelectorAriaLabel,
|
|
34
37
|
pageSelectorJustifyContent: paginationModel === null || paginationModel === void 0 ? void 0 : paginationModel.pageSelectorJustifyContent,
|
|
35
38
|
};
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
39
|
+
const pageSize = pageSizeOptions[pageSizeIndex];
|
|
40
|
+
const lowerIndex = pageSize * (currentPage - 1);
|
|
41
|
+
const upperIndex = lowerIndex + pageSize;
|
|
42
|
+
const paginatedRows = sortedRows
|
|
43
|
+
.slice(lowerIndex, upperIndex)
|
|
44
|
+
.map((row, index) => (Object.assign(Object.assign({}, row), { prePaginationIndex: lowerIndex + index })));
|
|
45
|
+
return { paginatedRows, normalizedModel };
|
|
41
46
|
}, [
|
|
42
47
|
paginationModel,
|
|
43
48
|
pageSizeIndex,
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import {
|
|
2
|
-
declare const useDisplayRows: (currentPageRows:
|
|
1
|
+
import { FormattedRow, ColDef, PostPaginationRowDef } from "../../types";
|
|
2
|
+
declare const useDisplayRows: (currentPageRows: PostPaginationRowDef[], cols: ColDef[], ariaColIndexOffset: number) => FormattedRow[];
|
|
3
3
|
export default useDisplayRows;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { useMemo } from "react";
|
|
2
2
|
import { dateToDatetimeInputStr, dateToInputStr } from "../../util/datetime";
|
|
3
|
-
|
|
3
|
+
const getFormattedValue = (value, formatter, typeString) => {
|
|
4
4
|
if (formatter) {
|
|
5
5
|
return formatter(value);
|
|
6
6
|
}
|
|
@@ -15,46 +15,45 @@ var getFormattedValue = function (value, formatter, typeString) {
|
|
|
15
15
|
}
|
|
16
16
|
return value;
|
|
17
17
|
};
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
18
|
+
const useDisplayRows = (currentPageRows, cols, ariaColIndexOffset) => useMemo(() => {
|
|
19
|
+
const nameToIndex = new Map();
|
|
20
|
+
cols.forEach(({ name }, index) => {
|
|
21
|
+
nameToIndex.set(name, index);
|
|
22
|
+
});
|
|
23
|
+
return currentPageRows.map((row, index) => {
|
|
24
|
+
cols
|
|
25
|
+
.map(({ name }) => name)
|
|
26
|
+
.forEach((name) => {
|
|
27
|
+
if (!(name in row.data)) {
|
|
28
|
+
throw new Error(`Column definition specifies a property named "${name}", but it was not found in the row data object at index ${index}.`);
|
|
29
|
+
}
|
|
24
30
|
});
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
return
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
var formatter = col.formatter;
|
|
45
|
-
var typeString = col.type;
|
|
46
|
-
var value = row.data[name];
|
|
47
|
-
displayRow[index] = {
|
|
48
|
-
fieldName: cols[index].name,
|
|
49
|
-
value: value,
|
|
50
|
-
type: typeString,
|
|
51
|
-
ariaColIndex: index + 1 + ariaColIndexOffset,
|
|
52
|
-
formattedValue: getFormattedValue(value, formatter, typeString),
|
|
53
|
-
label: cols[index].label,
|
|
54
|
-
};
|
|
55
|
-
});
|
|
56
|
-
return { contents: displayRow, id: row.id };
|
|
31
|
+
const displayRow = [];
|
|
32
|
+
Object.keys(row.data).forEach((name) => {
|
|
33
|
+
if (!nameToIndex.has(name)) {
|
|
34
|
+
console.error(`Warning: row data contains a property named "${name}", but it was not found among the column definitions.`);
|
|
35
|
+
return;
|
|
36
|
+
}
|
|
37
|
+
const index = nameToIndex.get(name);
|
|
38
|
+
const col = cols[index];
|
|
39
|
+
const formatter = col.formatter;
|
|
40
|
+
const typeString = col.type;
|
|
41
|
+
const value = row.data[name];
|
|
42
|
+
displayRow[index] = {
|
|
43
|
+
fieldName: cols[index].name,
|
|
44
|
+
value,
|
|
45
|
+
type: typeString,
|
|
46
|
+
ariaColIndex: index + 1 + ariaColIndexOffset,
|
|
47
|
+
formattedValue: getFormattedValue(value, formatter, typeString),
|
|
48
|
+
label: cols[index].label,
|
|
49
|
+
};
|
|
57
50
|
});
|
|
58
|
-
|
|
59
|
-
|
|
51
|
+
return {
|
|
52
|
+
contents: displayRow,
|
|
53
|
+
id: row.id,
|
|
54
|
+
origIndex: row.origIndex,
|
|
55
|
+
prePaginationIndex: row.prePaginationIndex,
|
|
56
|
+
};
|
|
57
|
+
});
|
|
58
|
+
}, [currentPageRows, cols, ariaColIndexOffset]);
|
|
60
59
|
export default useDisplayRows;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { RowDef } from "../../types";
|
|
1
|
+
import { AugRowDef, RowDef } from "../../types";
|
|
2
2
|
import { EditableTableFilterState } from "../../filtering/types";
|
|
3
|
-
declare const useFilter: (rows: RowDef[], filterState: EditableTableFilterState | null) =>
|
|
3
|
+
declare const useFilter: (rows: RowDef[], filterState: EditableTableFilterState | null) => AugRowDef[];
|
|
4
4
|
export default useFilter;
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import { useMemo } from "react";
|
|
2
|
-
|
|
3
|
-
return useMemo(
|
|
2
|
+
const useFilter = (rows, filterState) => {
|
|
3
|
+
return useMemo(() => {
|
|
4
|
+
const augRows = rows.map((row, index) => (Object.assign({ origIndex: index }, row)));
|
|
4
5
|
if (filterState === null) {
|
|
5
|
-
return
|
|
6
|
+
return augRows;
|
|
6
7
|
}
|
|
7
|
-
return
|
|
8
|
+
return augRows.filter((row) => {
|
|
8
9
|
function checkIfPassesStringFilter(value, state) {
|
|
9
10
|
switch (state.scheme) {
|
|
10
11
|
case "contains": {
|
|
@@ -21,7 +22,7 @@ var useFilter = function (rows, filterState) {
|
|
|
21
22
|
function checkIfPassesNumberFilter(value, state) {
|
|
22
23
|
// Note that a blank string becomes 0. This situation should usually be
|
|
23
24
|
// prevented by form validation.
|
|
24
|
-
|
|
25
|
+
const numValue = Number(state.numValue);
|
|
25
26
|
switch (state.scheme) {
|
|
26
27
|
case "equals":
|
|
27
28
|
return value === numValue;
|
|
@@ -47,16 +48,15 @@ var useFilter = function (rows, filterState) {
|
|
|
47
48
|
(value >= state.startDate && value <= state.endDate));
|
|
48
49
|
}
|
|
49
50
|
}
|
|
50
|
-
|
|
51
|
-
for (
|
|
52
|
-
var columnName = columnNames_1[_i];
|
|
51
|
+
const columnNames = Object.keys(row.data);
|
|
52
|
+
for (const columnName of columnNames) {
|
|
53
53
|
if (!(columnName in filterState)) {
|
|
54
54
|
continue;
|
|
55
55
|
}
|
|
56
56
|
if (!filterState[columnName].enabled) {
|
|
57
57
|
continue;
|
|
58
58
|
}
|
|
59
|
-
|
|
59
|
+
const columnFilterState = filterState[columnName];
|
|
60
60
|
switch (columnFilterState.type) {
|
|
61
61
|
case "string": {
|
|
62
62
|
if (!checkIfPassesStringFilter(row.data[columnName], columnFilterState)) {
|
|
@@ -1,15 +1,14 @@
|
|
|
1
1
|
import { useMemo } from "react";
|
|
2
|
-
|
|
3
|
-
return useMemo(
|
|
2
|
+
const useFilterStateFromEditable = (colDefs, editableFilterState) => {
|
|
3
|
+
return useMemo(() => {
|
|
4
4
|
if (editableFilterState === null) {
|
|
5
5
|
return null;
|
|
6
6
|
}
|
|
7
|
-
|
|
8
|
-
colDefs.forEach(
|
|
9
|
-
var name = _a.name, label = _a.label;
|
|
7
|
+
const filterState = {};
|
|
8
|
+
colDefs.forEach(({ name, label }) => {
|
|
10
9
|
filterState[name] = {
|
|
11
10
|
editableState: editableFilterState[name],
|
|
12
|
-
label
|
|
11
|
+
label,
|
|
13
12
|
};
|
|
14
13
|
});
|
|
15
14
|
return filterState;
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import { useState } from "react";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
cols.forEach(
|
|
5
|
-
var type = _a.type, name = _a.name;
|
|
2
|
+
const generateEmptyFilterState = (cols) => {
|
|
3
|
+
const filterState = {};
|
|
4
|
+
cols.forEach(({ type, name }) => {
|
|
6
5
|
switch (type) {
|
|
7
6
|
case "string": {
|
|
8
7
|
filterState[name] = {
|
|
@@ -24,7 +23,7 @@ var generateEmptyFilterState = function (cols) {
|
|
|
24
23
|
}
|
|
25
24
|
default: {
|
|
26
25
|
filterState[name] = {
|
|
27
|
-
type
|
|
26
|
+
type,
|
|
28
27
|
enabled: false,
|
|
29
28
|
scheme: "startFrom",
|
|
30
29
|
startDate: null,
|
|
@@ -34,13 +33,13 @@ var generateEmptyFilterState = function (cols) {
|
|
|
34
33
|
});
|
|
35
34
|
return filterState;
|
|
36
35
|
};
|
|
37
|
-
|
|
36
|
+
const useFilterStateStore = (filterModel, cols) => {
|
|
38
37
|
// Initial states being from prop values means that should uncontrolled
|
|
39
38
|
// FilterModel starting values change, the changes will not take effect
|
|
40
39
|
// unless the Grid is remounted. The documentation for this and other
|
|
41
40
|
// uncontrolled features should indicate this fact and recommend using
|
|
42
41
|
// controlled modes if this behavior is unacceptable.
|
|
43
|
-
|
|
42
|
+
const [internalFilterState, setInternalFilterState] = useState((filterModel === null || filterModel === void 0 ? void 0 : filterModel.tableFilterState) || generateEmptyFilterState(cols));
|
|
44
43
|
if (!filterModel) {
|
|
45
44
|
return null;
|
|
46
45
|
}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { AugRowDef, ColDefBase } from "../../types";
|
|
2
2
|
import { SortColDef, TableSortModel } from "../../sorting/types";
|
|
3
3
|
export interface SortedRowsOutput {
|
|
4
|
-
sortedRows:
|
|
4
|
+
sortedRows: AugRowDef[];
|
|
5
5
|
sortingEnabled: boolean;
|
|
6
6
|
sortColDef: SortColDef | null | undefined;
|
|
7
7
|
setSortColDef: ((sortColDef: SortColDef | null) => void) | undefined;
|
|
8
8
|
}
|
|
9
|
-
declare const useSortedRows: (rows:
|
|
9
|
+
declare const useSortedRows: (rows: AugRowDef[], cols: ColDefBase[], sortModel: TableSortModel | undefined) => SortedRowsOutput;
|
|
10
10
|
export default useSortedRows;
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { useMemo, useState } from "react";
|
|
2
|
-
|
|
2
|
+
const getTypeComparator = (typeStr) => {
|
|
3
3
|
if (typeStr === "date" || typeStr === "datetime") {
|
|
4
|
-
return
|
|
4
|
+
return (a, b) => a.valueOf() - b.valueOf();
|
|
5
5
|
}
|
|
6
6
|
if (typeStr === "number") {
|
|
7
|
-
return
|
|
7
|
+
return (a, b) => a - b;
|
|
8
8
|
}
|
|
9
|
-
return
|
|
9
|
+
return (a, b) => {
|
|
10
10
|
if (a < b) {
|
|
11
11
|
return -1;
|
|
12
12
|
}
|
|
@@ -16,43 +16,38 @@ var getTypeComparator = function (typeStr) {
|
|
|
16
16
|
return 0;
|
|
17
17
|
};
|
|
18
18
|
};
|
|
19
|
-
|
|
20
|
-
return
|
|
19
|
+
const getRowComparator = (comparator, fieldName) => {
|
|
20
|
+
return (rowA, rowB) => comparator(rowA.data[fieldName], rowB.data[fieldName]);
|
|
21
21
|
};
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
null)
|
|
25
|
-
|
|
22
|
+
const useSortedRows = (rows, cols, sortModel) => {
|
|
23
|
+
const [internalSortColDef, setInternalSortColDef] = useState(((sortModel === null || sortModel === void 0 ? void 0 : sortModel.type) === "uncontrolled" && sortModel.initialSortColDef) ||
|
|
24
|
+
null);
|
|
25
|
+
const sortColDef = (sortModel === null || sortModel === void 0 ? void 0 : sortModel.type) === "uncontrolled"
|
|
26
26
|
? internalSortColDef
|
|
27
27
|
: (sortModel === null || sortModel === void 0 ? void 0 : sortModel.sortColDef) || undefined;
|
|
28
|
-
|
|
28
|
+
const setSortColDef = (sortModel === null || sortModel === void 0 ? void 0 : sortModel.type) === "uncontrolled"
|
|
29
29
|
? setInternalSortColDef
|
|
30
30
|
: (sortModel === null || sortModel === void 0 ? void 0 : sortModel.setSortColDef) || undefined;
|
|
31
|
-
|
|
32
|
-
|
|
31
|
+
const sortingEnabled = !!sortModel;
|
|
32
|
+
const sortedRows = useMemo(() => {
|
|
33
33
|
if (!sortColDef) {
|
|
34
34
|
return rows;
|
|
35
35
|
}
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
var name = _a.name;
|
|
40
|
-
return name === sortFieldName;
|
|
41
|
-
});
|
|
36
|
+
const sortFieldName = sortColDef.name;
|
|
37
|
+
const sortOrder = sortColDef.order;
|
|
38
|
+
const sortColIndex = cols.findIndex(({ name }) => name === sortFieldName);
|
|
42
39
|
if (sortColIndex < 0) {
|
|
43
|
-
throw new Error(
|
|
40
|
+
throw new Error(`The sortModel for the grid specifies that the data should be sorted based on a column named ${sortFieldName}, but it was not found among the column definitions.`);
|
|
44
41
|
}
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
42
|
+
const typeStr = cols[sortColIndex].type;
|
|
43
|
+
const ascComparator = getTypeComparator(typeStr);
|
|
44
|
+
let rowComparator = getRowComparator(ascComparator, sortFieldName);
|
|
48
45
|
if (sortOrder === "desc") {
|
|
49
|
-
|
|
50
|
-
return ascComparator(a, b) * -1;
|
|
51
|
-
};
|
|
46
|
+
const descComparator = (a, b) => ascComparator(a, b) * -1;
|
|
52
47
|
rowComparator = getRowComparator(descComparator, sortFieldName);
|
|
53
48
|
}
|
|
54
49
|
return rows.slice().sort(rowComparator);
|
|
55
50
|
}, [sortColDef, cols, rows]);
|
|
56
|
-
return { sortedRows
|
|
51
|
+
return { sortedRows, sortingEnabled, sortColDef, setSortColDef };
|
|
57
52
|
};
|
|
58
53
|
export default useSortedRows;
|