@okta/odyssey-react-mui 1.14.3 → 1.14.5
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/CHANGELOG.md +8 -0
- package/dist/DataTable/DataTable.js +450 -0
- package/dist/DataTable/DataTable.js.map +1 -0
- package/dist/DataTable/DataTableEmptyState.js +55 -0
- package/dist/DataTable/DataTableEmptyState.js.map +1 -0
- package/dist/DataTable/DataTablePagination.js +221 -0
- package/dist/DataTable/DataTablePagination.js.map +1 -0
- package/dist/DataTable/DataTableRowActions.js +99 -0
- package/dist/DataTable/DataTableRowActions.js.map +1 -0
- package/dist/DataTable/DataTableSettings.js +84 -0
- package/dist/DataTable/DataTableSettings.js.map +1 -0
- package/dist/DataTable/constants.js +15 -0
- package/dist/DataTable/constants.js.map +1 -0
- package/dist/DataTable/index.js +15 -0
- package/dist/DataTable/index.js.map +1 -0
- package/dist/DataTable/reorderDataRowsLocally.js +26 -0
- package/dist/DataTable/reorderDataRowsLocally.js.map +1 -0
- package/dist/DataTable/useRowReordering.js +179 -0
- package/dist/DataTable/useRowReordering.js.map +1 -0
- package/dist/DataTable/useScrollIndication.js +70 -0
- package/dist/DataTable/useScrollIndication.js.map +1 -0
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/dist/labs/DataFilters.js +47 -15
- package/dist/labs/DataFilters.js.map +1 -1
- package/dist/labs/DataTable.js +19 -14
- package/dist/labs/DataTable.js.map +1 -1
- package/dist/labs/index.js +0 -1
- package/dist/labs/index.js.map +1 -1
- package/dist/properties/ts/odyssey-react-mui.js +27 -1
- package/dist/properties/ts/odyssey-react-mui.js.map +1 -1
- package/dist/src/DataTable/DataTable.d.ts +151 -0
- package/dist/src/DataTable/DataTable.d.ts.map +1 -0
- package/dist/src/DataTable/DataTableEmptyState.d.ts +21 -0
- package/dist/src/DataTable/DataTableEmptyState.d.ts.map +1 -0
- package/dist/src/DataTable/DataTablePagination.d.ts +33 -0
- package/dist/src/DataTable/DataTablePagination.d.ts.map +1 -0
- package/dist/src/DataTable/DataTableRowActions.d.ts +30 -0
- package/dist/src/DataTable/DataTableRowActions.d.ts.map +1 -0
- package/dist/src/DataTable/DataTableSettings.d.ts +27 -0
- package/dist/src/DataTable/DataTableSettings.d.ts.map +1 -0
- package/dist/src/DataTable/constants.d.ts +14 -0
- package/dist/src/DataTable/constants.d.ts.map +1 -0
- package/dist/src/DataTable/index.d.ts +16 -0
- package/dist/src/DataTable/index.d.ts.map +1 -0
- package/dist/src/DataTable/reorderDataRowsLocally.d.ts +26 -0
- package/dist/src/DataTable/reorderDataRowsLocally.d.ts.map +1 -0
- package/dist/src/DataTable/useRowReordering.d.ts +56 -0
- package/dist/src/DataTable/useRowReordering.d.ts.map +1 -0
- package/dist/src/DataTable/useScrollIndication.d.ts +22 -0
- package/dist/src/DataTable/useScrollIndication.d.ts.map +1 -0
- package/dist/src/OdysseyTranslationProvider.d.ts +1 -1
- package/dist/src/OdysseyTranslationProvider.d.ts.map +1 -1
- package/dist/src/index.d.ts +1 -0
- package/dist/src/index.d.ts.map +1 -1
- package/dist/src/labs/DataFilters.d.ts +5 -1
- package/dist/src/labs/DataFilters.d.ts.map +1 -1
- package/dist/src/labs/DataTable.d.ts +2 -2
- package/dist/src/labs/DataTable.d.ts.map +1 -1
- package/dist/src/labs/index.d.ts +3 -1
- package/dist/src/labs/index.d.ts.map +1 -1
- package/dist/src/properties/ts/odyssey-react-mui.d.ts +27 -1
- package/dist/src/properties/ts/odyssey-react-mui.d.ts.map +1 -1
- package/dist/src/theme/components.d.ts.map +1 -1
- package/dist/theme/components.js +37 -18
- package/dist/theme/components.js.map +1 -1
- package/dist/tsconfig.production.tsbuildinfo +1 -1
- package/package.json +3 -3
- package/src/DataTable/DataTable.tsx +746 -0
- package/src/DataTable/DataTableEmptyState.tsx +62 -0
- package/src/DataTable/DataTablePagination.tsx +289 -0
- package/src/DataTable/DataTableRowActions.tsx +122 -0
- package/src/DataTable/DataTableSettings.tsx +135 -0
- package/src/DataTable/constants.ts +14 -0
- package/src/DataTable/index.tsx +28 -0
- package/src/DataTable/reorderDataRowsLocally.tsx +48 -0
- package/src/DataTable/useRowReordering.tsx +235 -0
- package/src/DataTable/useScrollIndication.tsx +118 -0
- package/src/index.ts +1 -0
- package/src/labs/DataFilters.tsx +69 -17
- package/src/labs/DataTable.tsx +29 -20
- package/src/labs/index.ts +3 -1
- package/src/properties/odyssey-react-mui.properties +41 -2
- package/src/properties/ts/odyssey-react-mui.ts +1 -1
- package/src/theme/components.tsx +43 -16
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,14 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [1.14.5](https://github.com/okta/odyssey/compare/v1.14.4...v1.14.5) (2024-03-01)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @okta/odyssey-react-mui
|
|
9
|
+
|
|
10
|
+
## [1.14.4](https://github.com/okta/odyssey/compare/v1.14.3...v1.14.4) (2024-03-01)
|
|
11
|
+
|
|
12
|
+
**Note:** Version bump only for package @okta/odyssey-react-mui
|
|
13
|
+
|
|
6
14
|
## [1.14.3](https://github.com/okta/odyssey/compare/v1.14.2...v1.14.3) (2024-02-29)
|
|
7
15
|
|
|
8
16
|
**Note:** Version bump only for package @okta/odyssey-react-mui
|
|
@@ -0,0 +1,450 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
|
|
3
|
+
* The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
|
|
4
|
+
*
|
|
5
|
+
* You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
7
|
+
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
|
8
|
+
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
9
|
+
*
|
|
10
|
+
* See the License for the specific language governing permissions and limitations under the License.
|
|
11
|
+
*/
|
|
12
|
+
|
|
13
|
+
import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
14
|
+
import { useMaterialReactTable, MRT_TableContainer } from "material-react-table";
|
|
15
|
+
import { ArrowDownIcon, ArrowUnsortedIcon, DragIndicatorIcon, MoreIcon } from "../icons.generated/index.js";
|
|
16
|
+
import { densityValues } from "./constants.js";
|
|
17
|
+
import { DataTablePagination } from "./DataTablePagination.js";
|
|
18
|
+
import { DataFilters } from "../labs/DataFilters.js";
|
|
19
|
+
import { DataTableRowActions } from "./DataTableRowActions.js";
|
|
20
|
+
import { useRowReordering } from "./useRowReordering.js";
|
|
21
|
+
import { DataTableSettings } from "./DataTableSettings.js";
|
|
22
|
+
import { MenuButton } from "../MenuButton.js";
|
|
23
|
+
import { Box } from "../Box.js";
|
|
24
|
+
import { useOdysseyDesignTokens } from "../OdysseyDesignTokensContext.js";
|
|
25
|
+
import { useScrollIndication } from "./useScrollIndication.js";
|
|
26
|
+
import styled from "@emotion/styled";
|
|
27
|
+
import { DataTableEmptyState } from "./DataTableEmptyState.js";
|
|
28
|
+
import { Callout } from "../Callout.js";
|
|
29
|
+
import { t } from "i18next";
|
|
30
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
31
|
+
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
32
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
33
|
+
const displayColumnDefOptions = {
|
|
34
|
+
"mrt-row-actions": {
|
|
35
|
+
header: "",
|
|
36
|
+
grow: true,
|
|
37
|
+
muiTableBodyCellProps: {
|
|
38
|
+
align: "right",
|
|
39
|
+
sx: {
|
|
40
|
+
overflow: "visible",
|
|
41
|
+
width: "unset"
|
|
42
|
+
},
|
|
43
|
+
className: "ods-actions-cell"
|
|
44
|
+
},
|
|
45
|
+
muiTableHeadCellProps: {
|
|
46
|
+
align: "right",
|
|
47
|
+
sx: {
|
|
48
|
+
width: "unset"
|
|
49
|
+
},
|
|
50
|
+
className: "ods-actions-cell"
|
|
51
|
+
}
|
|
52
|
+
},
|
|
53
|
+
"mrt-row-drag": {
|
|
54
|
+
header: "",
|
|
55
|
+
muiTableBodyCellProps: {
|
|
56
|
+
sx: {
|
|
57
|
+
minWidth: 0,
|
|
58
|
+
width: "auto"
|
|
59
|
+
},
|
|
60
|
+
className: "ods-drag-handle"
|
|
61
|
+
},
|
|
62
|
+
muiTableHeadCellProps: {
|
|
63
|
+
sx: {
|
|
64
|
+
minWidth: 0,
|
|
65
|
+
width: "auto"
|
|
66
|
+
},
|
|
67
|
+
children: _jsx(Box, {
|
|
68
|
+
sx: {
|
|
69
|
+
marginInline: "-0.1rem"
|
|
70
|
+
},
|
|
71
|
+
children: _jsx(DragIndicatorIcon, {
|
|
72
|
+
sx: {
|
|
73
|
+
marginInline: 1,
|
|
74
|
+
opacity: 0
|
|
75
|
+
}
|
|
76
|
+
})
|
|
77
|
+
})
|
|
78
|
+
}
|
|
79
|
+
},
|
|
80
|
+
"mrt-row-select": {
|
|
81
|
+
muiTableHeadCellProps: {
|
|
82
|
+
padding: "checkbox"
|
|
83
|
+
},
|
|
84
|
+
muiTableBodyCellProps: {
|
|
85
|
+
padding: "checkbox"
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
};
|
|
89
|
+
const ScrollableTableContainer = styled("div", {
|
|
90
|
+
shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "isScrollableStart" && prop !== "isScrollableEnd"
|
|
91
|
+
})(({
|
|
92
|
+
odysseyDesignTokens,
|
|
93
|
+
isScrollableStart,
|
|
94
|
+
isScrollableEnd
|
|
95
|
+
}) => ({
|
|
96
|
+
borderBlockEndColor: odysseyDesignTokens.HueNeutral100,
|
|
97
|
+
borderBlockEndStyle: "solid",
|
|
98
|
+
borderBlockEndWidth: odysseyDesignTokens.BorderWidthMain,
|
|
99
|
+
marginBlockEnd: odysseyDesignTokens.Spacing4,
|
|
100
|
+
position: "relative",
|
|
101
|
+
borderInlineStartColor: isScrollableStart ? odysseyDesignTokens.HueNeutral200 : "transparent",
|
|
102
|
+
borderInlineStartStyle: "solid",
|
|
103
|
+
borderInlineStartWidth: odysseyDesignTokens.BorderWidthMain,
|
|
104
|
+
"::before": {
|
|
105
|
+
background: "linear-gradient(-90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.33) 50%, rgba(0, 0, 0, 1) 100%)",
|
|
106
|
+
content: '""',
|
|
107
|
+
opacity: isScrollableStart ? "0.075" : "0",
|
|
108
|
+
pointerEvents: "none",
|
|
109
|
+
position: "absolute",
|
|
110
|
+
top: 0,
|
|
111
|
+
left: 0,
|
|
112
|
+
bottom: 0,
|
|
113
|
+
width: odysseyDesignTokens.Spacing6,
|
|
114
|
+
zIndex: 100,
|
|
115
|
+
transition: `opacity ${odysseyDesignTokens.TransitionDurationMain} ${odysseyDesignTokens.TransitionTimingMain}`
|
|
116
|
+
},
|
|
117
|
+
borderInlineEndColor: isScrollableEnd ? odysseyDesignTokens.HueNeutral200 : "transparent",
|
|
118
|
+
borderInlineEndStyle: "solid",
|
|
119
|
+
borderInlineEndWidth: odysseyDesignTokens.BorderWidthMain,
|
|
120
|
+
"::after": {
|
|
121
|
+
background: "linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.33) 50%, rgba(0, 0, 0, 1) 100%)",
|
|
122
|
+
content: '""',
|
|
123
|
+
opacity: isScrollableEnd ? "0.075" : "0",
|
|
124
|
+
pointerEvents: "none",
|
|
125
|
+
position: "absolute",
|
|
126
|
+
top: 0,
|
|
127
|
+
right: 0,
|
|
128
|
+
bottom: 0,
|
|
129
|
+
width: odysseyDesignTokens.Spacing6,
|
|
130
|
+
transition: `opacity ${odysseyDesignTokens.TransitionDurationMain} ${odysseyDesignTokens.TransitionTimingMain}`
|
|
131
|
+
}
|
|
132
|
+
}));
|
|
133
|
+
const DataTable = ({
|
|
134
|
+
columns,
|
|
135
|
+
getRowId: getRowIdProp,
|
|
136
|
+
currentPage = 1,
|
|
137
|
+
initialDensity = densityValues[0],
|
|
138
|
+
resultsPerPage = 20,
|
|
139
|
+
getData,
|
|
140
|
+
onReorderRows,
|
|
141
|
+
totalRows,
|
|
142
|
+
hasSearchSubmitButton,
|
|
143
|
+
searchDelayTime,
|
|
144
|
+
paginationType = "paged",
|
|
145
|
+
onChangeRowSelection,
|
|
146
|
+
rowActionButtons,
|
|
147
|
+
rowActionMenuItems,
|
|
148
|
+
hasChangeableDensity,
|
|
149
|
+
hasColumnResizing,
|
|
150
|
+
hasColumnVisibility,
|
|
151
|
+
hasFilters,
|
|
152
|
+
hasPagination,
|
|
153
|
+
hasRowReordering,
|
|
154
|
+
hasRowSelection,
|
|
155
|
+
hasSearch,
|
|
156
|
+
hasSorting,
|
|
157
|
+
bulkActionMenuItems,
|
|
158
|
+
errorMessage: errorMessageProp,
|
|
159
|
+
emptyPlaceholder,
|
|
160
|
+
noResultsPlaceholder
|
|
161
|
+
}) => {
|
|
162
|
+
const [data, setData] = useState([]);
|
|
163
|
+
const [pagination, setPagination] = useState({
|
|
164
|
+
pageIndex: currentPage,
|
|
165
|
+
pageSize: resultsPerPage
|
|
166
|
+
});
|
|
167
|
+
const [draggingRow, setDraggingRow] = useState();
|
|
168
|
+
const [isTableContainerScrolledToStart, setIsTableContainerScrolledToStart] = useState(true);
|
|
169
|
+
const [isTableContainerScrolledToEnd, setIsTableContainerScrolledToEnd] = useState(true);
|
|
170
|
+
const [tableInnerContainerWidth, setTableInnerContainerWidth] = useState("100%");
|
|
171
|
+
const tableOuterContainerRef = useRef(null);
|
|
172
|
+
const tableInnerContainerRef = useRef(null);
|
|
173
|
+
const tableContentRef = useRef(null);
|
|
174
|
+
const [columnSorting, setColumnSorting] = useState([]);
|
|
175
|
+
const [columnVisibility, setColumnVisibility] = useState();
|
|
176
|
+
const [rowDensity, setRowDensity] = useState(initialDensity);
|
|
177
|
+
const [rowSelection, setRowSelection] = useState({});
|
|
178
|
+
const [search, setSearch] = useState("");
|
|
179
|
+
const [filters, setFilters] = useState();
|
|
180
|
+
const [initialFilters, setInitialFilters] = useState();
|
|
181
|
+
const [isLoading, setIsLoading] = useState(true);
|
|
182
|
+
const [isEmpty, setIsEmpty] = useState();
|
|
183
|
+
const [errorMessage, setErrorMessage] = useState(errorMessageProp);
|
|
184
|
+
useScrollIndication({
|
|
185
|
+
tableOuterContainer: tableOuterContainerRef.current,
|
|
186
|
+
tableInnerContainer: tableInnerContainerRef.current,
|
|
187
|
+
setIsTableContainerScrolledToStart: setIsTableContainerScrolledToStart,
|
|
188
|
+
setIsTableContainerScrolledToEnd: setIsTableContainerScrolledToEnd,
|
|
189
|
+
setTableInnerContainerWidth: setTableInnerContainerWidth
|
|
190
|
+
});
|
|
191
|
+
const odysseyDesignTokens = useOdysseyDesignTokens();
|
|
192
|
+
const {
|
|
193
|
+
dragHandleStyles,
|
|
194
|
+
dragHandleText,
|
|
195
|
+
draggableTableBodyRowClassName,
|
|
196
|
+
handleDragHandleKeyDown,
|
|
197
|
+
handleDragHandleOnDragCapture,
|
|
198
|
+
handleDragHandleOnDragEnd,
|
|
199
|
+
resetDraggingAndHoveredRow,
|
|
200
|
+
updateRowOrder
|
|
201
|
+
} = useRowReordering({
|
|
202
|
+
totalRows,
|
|
203
|
+
onReorderRows,
|
|
204
|
+
data,
|
|
205
|
+
setData,
|
|
206
|
+
draggingRow,
|
|
207
|
+
setDraggingRow,
|
|
208
|
+
resultsPerPage: pagination.pageSize,
|
|
209
|
+
page: pagination.pageIndex
|
|
210
|
+
});
|
|
211
|
+
const getRowId = getRowIdProp ? getRowIdProp : row => row.id;
|
|
212
|
+
const rowDensityCellClassName = useMemo(() => {
|
|
213
|
+
return rowDensity === "spacious" ? "MuiTableCell-spacious" : rowDensity === "compact" ? "MuiTableCell-compact" : "MuiTableCell-default";
|
|
214
|
+
}, [rowDensity]);
|
|
215
|
+
const renderRowActions = useCallback(({
|
|
216
|
+
row
|
|
217
|
+
}) => {
|
|
218
|
+
const currentIndex = row.index + (pagination.pageIndex - 1) * pagination.pageSize;
|
|
219
|
+
return _jsx(DataTableRowActions, {
|
|
220
|
+
row: row,
|
|
221
|
+
rowIndex: currentIndex,
|
|
222
|
+
rowActionButtons: rowActionButtons,
|
|
223
|
+
rowActionMenuItems: rowActionMenuItems,
|
|
224
|
+
totalRows: totalRows,
|
|
225
|
+
updateRowOrder: hasRowReordering && onReorderRows ? updateRowOrder : undefined
|
|
226
|
+
});
|
|
227
|
+
}, [pagination, rowActionButtons, rowActionMenuItems, hasRowReordering, onReorderRows, totalRows, updateRowOrder]);
|
|
228
|
+
const dataTableFilters = useMemo(() => columns.filter(column => column.enableColumnFilter !== false).map(column => {
|
|
229
|
+
return {
|
|
230
|
+
id: column.accessorKey,
|
|
231
|
+
label: column.header,
|
|
232
|
+
variant: column.filterVariant ?? "text",
|
|
233
|
+
options: column.filterSelectOptions
|
|
234
|
+
};
|
|
235
|
+
}), [columns]);
|
|
236
|
+
const defaultCell = useCallback(({
|
|
237
|
+
cell
|
|
238
|
+
}) => {
|
|
239
|
+
const value = cell.getValue();
|
|
240
|
+
return _jsx(Box, {
|
|
241
|
+
sx: {
|
|
242
|
+
whiteSpace: "nowrap",
|
|
243
|
+
textOverflow: "ellipsis",
|
|
244
|
+
overflow: "hidden"
|
|
245
|
+
},
|
|
246
|
+
children: value
|
|
247
|
+
});
|
|
248
|
+
}, []);
|
|
249
|
+
const emptyState = useCallback(() => {
|
|
250
|
+
const noResultsInnerContent = noResultsPlaceholder || _jsx(DataTableEmptyState, {
|
|
251
|
+
heading: t("table.noresults.heading"),
|
|
252
|
+
text: t("table.noresults.text")
|
|
253
|
+
});
|
|
254
|
+
const emptyStateInnerContent = emptyPlaceholder && isEmpty ? emptyPlaceholder : noResultsInnerContent;
|
|
255
|
+
return _jsx(Box, {
|
|
256
|
+
sx: {
|
|
257
|
+
width: tableInnerContainerWidth
|
|
258
|
+
},
|
|
259
|
+
children: emptyStateInnerContent
|
|
260
|
+
});
|
|
261
|
+
}, [tableInnerContainerWidth, emptyPlaceholder, noResultsPlaceholder, isEmpty]);
|
|
262
|
+
const dataTable = useMaterialReactTable({
|
|
263
|
+
columns: columns,
|
|
264
|
+
data: data,
|
|
265
|
+
getRowId: getRowId,
|
|
266
|
+
state: {
|
|
267
|
+
density: rowDensity,
|
|
268
|
+
sorting: columnSorting,
|
|
269
|
+
globalFilter: search,
|
|
270
|
+
columnVisibility,
|
|
271
|
+
isLoading,
|
|
272
|
+
rowSelection
|
|
273
|
+
},
|
|
274
|
+
icons: {
|
|
275
|
+
ArrowDownwardIcon: ArrowDownIcon,
|
|
276
|
+
DragHandleIcon: DragIndicatorIcon,
|
|
277
|
+
SyncAltIcon: ArrowUnsortedIcon
|
|
278
|
+
},
|
|
279
|
+
enableColumnActions: false,
|
|
280
|
+
enableColumnResizing: hasColumnResizing,
|
|
281
|
+
enableDensityToggle: false,
|
|
282
|
+
enableFilters: false,
|
|
283
|
+
enableFullScreenToggle: false,
|
|
284
|
+
enableGlobalFilter: false,
|
|
285
|
+
enableHiding: false,
|
|
286
|
+
enablePagination: false,
|
|
287
|
+
layoutMode: "grid-no-grow",
|
|
288
|
+
manualFiltering: true,
|
|
289
|
+
manualSorting: true,
|
|
290
|
+
muiTablePaperProps: {
|
|
291
|
+
elevation: 0,
|
|
292
|
+
sx: {
|
|
293
|
+
overflow: "visible"
|
|
294
|
+
}
|
|
295
|
+
},
|
|
296
|
+
selectAllMode: "all",
|
|
297
|
+
displayColumnDefOptions: displayColumnDefOptions,
|
|
298
|
+
muiTableBodyCellProps: () => ({
|
|
299
|
+
className: rowDensityCellClassName
|
|
300
|
+
}),
|
|
301
|
+
defaultColumn: {
|
|
302
|
+
Cell: defaultCell
|
|
303
|
+
},
|
|
304
|
+
enableRowOrdering: hasRowReordering && Boolean(onReorderRows),
|
|
305
|
+
enableRowDragging: hasRowReordering && Boolean(onReorderRows),
|
|
306
|
+
muiTableBodyRowProps: ({
|
|
307
|
+
table,
|
|
308
|
+
row
|
|
309
|
+
}) => ({
|
|
310
|
+
className: draggableTableBodyRowClassName({
|
|
311
|
+
currentRowId: row.id,
|
|
312
|
+
draggingRowId: draggingRow?.id,
|
|
313
|
+
hoveredRowId: table.getState().hoveredRow?.id
|
|
314
|
+
})
|
|
315
|
+
}),
|
|
316
|
+
muiRowDragHandleProps: ({
|
|
317
|
+
table,
|
|
318
|
+
row
|
|
319
|
+
}) => ({
|
|
320
|
+
onKeyDown: event => handleDragHandleKeyDown({
|
|
321
|
+
table,
|
|
322
|
+
row,
|
|
323
|
+
event
|
|
324
|
+
}),
|
|
325
|
+
onBlur: () => resetDraggingAndHoveredRow(table),
|
|
326
|
+
onDragEnd: () => handleDragHandleOnDragEnd(table),
|
|
327
|
+
onDragCapture: () => handleDragHandleOnDragCapture(table),
|
|
328
|
+
sx: dragHandleStyles,
|
|
329
|
+
...dragHandleText
|
|
330
|
+
}),
|
|
331
|
+
enableRowActions: hasRowReordering === true && onReorderRows || rowActionButtons || rowActionMenuItems ? true : false,
|
|
332
|
+
positionActionsColumn: "last",
|
|
333
|
+
renderRowActions: ({
|
|
334
|
+
row
|
|
335
|
+
}) => renderRowActions({
|
|
336
|
+
row
|
|
337
|
+
}),
|
|
338
|
+
enableRowSelection: hasRowSelection,
|
|
339
|
+
onRowSelectionChange: setRowSelection,
|
|
340
|
+
enableSorting: hasSorting,
|
|
341
|
+
onSortingChange: setColumnSorting,
|
|
342
|
+
muiTableHeadCellProps: ({
|
|
343
|
+
column: currentColumn
|
|
344
|
+
}) => ({
|
|
345
|
+
className: columnSorting.find(sortedColumn => sortedColumn.id === currentColumn.id) ? "isSorted" : "isUnsorted"
|
|
346
|
+
}),
|
|
347
|
+
enableRowVirtualization: paginationType !== "loadMore" && pagination.pageSize > 50,
|
|
348
|
+
rowVirtualizerInstanceRef: useRef(null),
|
|
349
|
+
rowVirtualizerOptions: {
|
|
350
|
+
overscan: 4
|
|
351
|
+
},
|
|
352
|
+
renderEmptyRowsFallback: emptyState,
|
|
353
|
+
muiTableProps: {
|
|
354
|
+
ref: tableContentRef
|
|
355
|
+
},
|
|
356
|
+
muiTableContainerProps: {
|
|
357
|
+
ref: tableInnerContainerRef
|
|
358
|
+
}
|
|
359
|
+
});
|
|
360
|
+
const bulkActionMenuButton = useMemo(() => _jsx(_Fragment, {
|
|
361
|
+
children: _jsx(MenuButton, {
|
|
362
|
+
buttonVariant: "secondary",
|
|
363
|
+
endIcon: _jsx(MoreIcon, {}),
|
|
364
|
+
isDisabled: Object.keys(rowSelection).length === 0,
|
|
365
|
+
ariaLabel: "More actions",
|
|
366
|
+
children: bulkActionMenuItems?.(rowSelection)
|
|
367
|
+
})
|
|
368
|
+
}), [bulkActionMenuItems, rowSelection]);
|
|
369
|
+
useEffect(() => {
|
|
370
|
+
(async () => {
|
|
371
|
+
setIsLoading(true);
|
|
372
|
+
setErrorMessage(errorMessageProp);
|
|
373
|
+
try {
|
|
374
|
+
const incomingData = await getData?.({
|
|
375
|
+
page: pagination.pageIndex,
|
|
376
|
+
resultsPerPage: pagination.pageSize,
|
|
377
|
+
search,
|
|
378
|
+
filters,
|
|
379
|
+
sort: columnSorting
|
|
380
|
+
});
|
|
381
|
+
setData(incomingData);
|
|
382
|
+
} catch (error) {
|
|
383
|
+
setErrorMessage(typeof error === "string" ? error : t("table.error"));
|
|
384
|
+
} finally {
|
|
385
|
+
setIsLoading(false);
|
|
386
|
+
}
|
|
387
|
+
})();
|
|
388
|
+
}, [pagination, columnSorting, search, filters, getData, errorMessageProp]);
|
|
389
|
+
useEffect(() => {
|
|
390
|
+
if (!initialFilters && filters) {
|
|
391
|
+
setInitialFilters(filters);
|
|
392
|
+
}
|
|
393
|
+
setIsEmpty(pagination.pageIndex === currentPage && pagination.pageSize === resultsPerPage && search === "" && filters === initialFilters && data.length === 0);
|
|
394
|
+
}, [filters, pagination, search, data, currentPage, initialFilters, resultsPerPage]);
|
|
395
|
+
useEffect(() => {
|
|
396
|
+
onChangeRowSelection?.(rowSelection);
|
|
397
|
+
}, [rowSelection, onChangeRowSelection]);
|
|
398
|
+
return _jsxs(_Fragment, {
|
|
399
|
+
children: [(hasSearch || hasFilters || hasChangeableDensity || hasColumnVisibility || bulkActionMenuItems) && _jsx(Box, {
|
|
400
|
+
sx: {
|
|
401
|
+
marginBottom: 5
|
|
402
|
+
},
|
|
403
|
+
children: _jsx(DataFilters, {
|
|
404
|
+
onChangeSearch: hasSearch ? setSearch : undefined,
|
|
405
|
+
onChangeFilters: hasFilters ? setFilters : undefined,
|
|
406
|
+
hasSearchSubmitButton: hasSearchSubmitButton,
|
|
407
|
+
searchDelayTime: searchDelayTime,
|
|
408
|
+
filters: hasFilters ? dataTableFilters : undefined,
|
|
409
|
+
isDisabled: isEmpty,
|
|
410
|
+
additionalActions: _jsxs(_Fragment, {
|
|
411
|
+
children: [_jsx(DataTableSettings, {
|
|
412
|
+
hasChangeableDensity: hasChangeableDensity,
|
|
413
|
+
rowDensity: rowDensity,
|
|
414
|
+
setRowDensity: setRowDensity,
|
|
415
|
+
hasColumnVisibility: hasColumnVisibility,
|
|
416
|
+
columns: columns,
|
|
417
|
+
columnVisibility: columnVisibility,
|
|
418
|
+
setColumnVisibility: setColumnVisibility
|
|
419
|
+
}), bulkActionMenuItems && bulkActionMenuButton]
|
|
420
|
+
})
|
|
421
|
+
})
|
|
422
|
+
}), errorMessage && _jsx(Box, {
|
|
423
|
+
sx: {
|
|
424
|
+
marginBlockEnd: 2
|
|
425
|
+
},
|
|
426
|
+
children: _jsx(Callout, {
|
|
427
|
+
severity: "error",
|
|
428
|
+
text: errorMessage
|
|
429
|
+
})
|
|
430
|
+
}), _jsx(ScrollableTableContainer, {
|
|
431
|
+
odysseyDesignTokens: odysseyDesignTokens,
|
|
432
|
+
isScrollableStart: !isTableContainerScrolledToStart,
|
|
433
|
+
isScrollableEnd: !isTableContainerScrolledToEnd,
|
|
434
|
+
ref: tableOuterContainerRef,
|
|
435
|
+
children: _jsx(MRT_TableContainer, {
|
|
436
|
+
table: dataTable
|
|
437
|
+
})
|
|
438
|
+
}), hasPagination && _jsx(DataTablePagination, {
|
|
439
|
+
pagination: pagination,
|
|
440
|
+
setPagination: setPagination,
|
|
441
|
+
totalRows: totalRows,
|
|
442
|
+
isDisabled: isEmpty,
|
|
443
|
+
variant: paginationType
|
|
444
|
+
})]
|
|
445
|
+
});
|
|
446
|
+
};
|
|
447
|
+
const MemoizedDataTable = memo(DataTable);
|
|
448
|
+
MemoizedDataTable.displayName = "DataTable";
|
|
449
|
+
export { MemoizedDataTable as DataTable };
|
|
450
|
+
//# sourceMappingURL=DataTable.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DataTable.js","names":["memo","useCallback","useEffect","useMemo","useRef","useState","useMaterialReactTable","MRT_TableContainer","ArrowDownIcon","ArrowUnsortedIcon","DragIndicatorIcon","MoreIcon","densityValues","DataTablePagination","DataFilters","DataTableRowActions","useRowReordering","DataTableSettings","MenuButton","Box","useOdysseyDesignTokens","useScrollIndication","styled","DataTableEmptyState","Callout","t","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","displayColumnDefOptions","header","grow","muiTableBodyCellProps","align","sx","overflow","width","className","muiTableHeadCellProps","minWidth","children","marginInline","opacity","padding","ScrollableTableContainer","shouldForwardProp","prop","odysseyDesignTokens","isScrollableStart","isScrollableEnd","borderBlockEndColor","HueNeutral100","borderBlockEndStyle","borderBlockEndWidth","BorderWidthMain","marginBlockEnd","Spacing4","position","borderInlineStartColor","HueNeutral200","borderInlineStartStyle","borderInlineStartWidth","background","content","pointerEvents","top","left","bottom","Spacing6","zIndex","transition","TransitionDurationMain","TransitionTimingMain","borderInlineEndColor","borderInlineEndStyle","borderInlineEndWidth","right","DataTable","columns","getRowId","getRowIdProp","currentPage","initialDensity","resultsPerPage","getData","onReorderRows","totalRows","hasSearchSubmitButton","searchDelayTime","paginationType","onChangeRowSelection","rowActionButtons","rowActionMenuItems","hasChangeableDensity","hasColumnResizing","hasColumnVisibility","hasFilters","hasPagination","hasRowReordering","hasRowSelection","hasSearch","hasSorting","bulkActionMenuItems","errorMessage","errorMessageProp","emptyPlaceholder","noResultsPlaceholder","data","setData","pagination","setPagination","pageIndex","pageSize","draggingRow","setDraggingRow","isTableContainerScrolledToStart","setIsTableContainerScrolledToStart","isTableContainerScrolledToEnd","setIsTableContainerScrolledToEnd","tableInnerContainerWidth","setTableInnerContainerWidth","tableOuterContainerRef","tableInnerContainerRef","tableContentRef","columnSorting","setColumnSorting","columnVisibility","setColumnVisibility","rowDensity","setRowDensity","rowSelection","setRowSelection","search","setSearch","filters","setFilters","initialFilters","setInitialFilters","isLoading","setIsLoading","isEmpty","setIsEmpty","setErrorMessage","tableOuterContainer","current","tableInnerContainer","dragHandleStyles","dragHandleText","draggableTableBodyRowClassName","handleDragHandleKeyDown","handleDragHandleOnDragCapture","handleDragHandleOnDragEnd","resetDraggingAndHoveredRow","updateRowOrder","page","row","id","rowDensityCellClassName","renderRowActions","currentIndex","index","rowIndex","undefined","dataTableFilters","filter","column","enableColumnFilter","map","accessorKey","label","variant","filterVariant","options","filterSelectOptions","defaultCell","cell","value","getValue","whiteSpace","textOverflow","emptyState","noResultsInnerContent","heading","text","emptyStateInnerContent","dataTable","state","density","sorting","globalFilter","icons","ArrowDownwardIcon","DragHandleIcon","SyncAltIcon","enableColumnActions","enableColumnResizing","enableDensityToggle","enableFilters","enableFullScreenToggle","enableGlobalFilter","enableHiding","enablePagination","layoutMode","manualFiltering","manualSorting","muiTablePaperProps","elevation","selectAllMode","defaultColumn","Cell","enableRowOrdering","Boolean","enableRowDragging","muiTableBodyRowProps","table","currentRowId","draggingRowId","hoveredRowId","getState","hoveredRow","muiRowDragHandleProps","onKeyDown","event","onBlur","onDragEnd","onDragCapture","enableRowActions","positionActionsColumn","enableRowSelection","onRowSelectionChange","enableSorting","onSortingChange","currentColumn","find","sortedColumn","enableRowVirtualization","rowVirtualizerInstanceRef","rowVirtualizerOptions","overscan","renderEmptyRowsFallback","muiTableProps","ref","muiTableContainerProps","bulkActionMenuButton","buttonVariant","endIcon","isDisabled","Object","keys","length","ariaLabel","incomingData","sort","error","marginBottom","onChangeSearch","onChangeFilters","additionalActions","severity","MemoizedDataTable","displayName"],"sources":["../../src/DataTable/DataTable.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport {\n ReactNode,\n memo,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport {\n MRT_Cell,\n MRT_DensityState,\n MRT_Row,\n MRT_RowData,\n MRT_SortingState,\n MRT_TableOptions,\n MRT_RowSelectionState,\n MRT_RowVirtualizer,\n MRT_VisibilityState,\n useMaterialReactTable,\n MRT_TableContainer,\n} from \"material-react-table\";\nimport {\n ArrowDownIcon,\n ArrowUnsortedIcon,\n DragIndicatorIcon,\n MoreIcon,\n} from \"../icons.generated\";\nimport { densityValues, paginationTypeValues } from \"./constants\";\nimport { DataTablePagination } from \"./DataTablePagination\";\nimport { DataFilter, DataFilters } from \"../labs/DataFilters\";\nimport {\n DataTableRowActions,\n DataTableRowActionsProps,\n} from \"./DataTableRowActions\";\nimport { useRowReordering } from \"./useRowReordering\";\nimport { DataTableSettings } from \"./DataTableSettings\";\nimport { MenuButton, MenuButtonProps } from \"../MenuButton\";\nimport { Box } from \"../Box\";\nimport { DataTableRowSelectionState } from \".\";\nimport {\n DesignTokens,\n useOdysseyDesignTokens,\n} from \"../OdysseyDesignTokensContext\";\nimport { useScrollIndication } from \"./useScrollIndication\";\nimport styled from \"@emotion/styled\";\nimport { DataTableEmptyState } from \"./DataTableEmptyState\";\nimport { Callout } from \"../Callout\";\nimport { t } from \"i18next\";\n\nexport type DataTableGetDataType = {\n page?: number;\n resultsPerPage?: number;\n search?: string;\n filters?: DataFilter[];\n sort?: MRT_SortingState;\n};\n\nexport type DataTableOnReorderRowsType = {\n rowId: string;\n newRowIndex: number;\n};\n\nexport type DataTableProps = {\n /**\n * The columns that make up the table\n */\n columns: MRT_TableOptions<MRT_RowData>[\"columns\"];\n /**\n * The total number of rows in the table. Optional, because it's sometimes impossible\n * to calculate. Used in table pagination to know when to disable the \"next\"/\"more\" button.\n */\n totalRows?: number;\n /**\n * The function to get the ID of a row\n */\n getRowId?: MRT_TableOptions<MRT_RowData>[\"getRowId\"];\n /**\n * The initial density (height & padding) of the table rows. This is available even if the\n * table density isn't changeable by the end user via hasChangeableDensity.\n */\n initialDensity?: (typeof densityValues)[number];\n /**\n * If true, the end user will be able to change the table density.\n */\n hasChangeableDensity?: boolean;\n /**\n * If true, the end user can resize individual columns.\n */\n hasColumnResizing?: boolean;\n /**\n * If true, the end user will be able to show/hide columns.\n */\n hasColumnVisibility?: boolean;\n /**\n * If true, the end user will be able to filter columns.\n */\n hasFilters?: boolean;\n /**\n * If true, the table will include pagination controls.\n */\n hasPagination?: boolean;\n /**\n * If true, the table will include checkboxes on each row, enabling\n * the user to select some or all rows.\n */\n hasRowSelection?: boolean;\n /**\n * If true, the global table search controls will be shown.\n */\n hasSearch?: boolean;\n /**\n * If true, the end user can sort columns (ascending, descending, or neither)\n */\n hasSorting?: boolean;\n /**\n * If true, the end user can reorder rows via a drag-and-drop interface\n */\n hasRowReordering?: boolean;\n /**\n * If true, the search field will include a Search button, rather than\n * firing on input change.\n */\n hasSearchSubmitButton?: boolean;\n /**\n * The debounce time, in milliseconds, for the search input firing\n * `onChangeSearch` when changed. If `hasSearchSubmitButton` is true,\n * this doesn't do anything.\n */\n searchDelayTime?: number;\n /**\n * Callback that fires when a row (or rows) is selected or unselected.\n */\n onChangeRowSelection?: (rowSelection: DataTableRowSelectionState) => void;\n /**\n * Callback that fires whenever the table needs to fetch new data, due to changes in\n * page, results per page, search input, filters, or sorting\n */\n getData: ({\n page,\n resultsPerPage,\n search,\n filters,\n sort,\n }: DataTableGetDataType) =>\n | MRT_TableOptions<MRT_RowData>[\"data\"]\n | Promise<MRT_TableOptions<MRT_RowData>[\"data\"]>;\n /**\n * Callback that fires when the user reorders rows within the table. Can be used\n * to propogate order change to the backend.\n */\n onReorderRows?: ({ rowId, newRowIndex }: DataTableOnReorderRowsType) => void;\n /**\n * The current page number.\n */\n currentPage?: number;\n /**\n * The number of results per page.\n */\n resultsPerPage?: number;\n /**\n * The type of pagination controls shown. Defaults to next/prev buttons, but can be\n * set to a simple \"Load more\" button by setting to \"loadMore\".\n */\n paginationType?: (typeof paginationTypeValues)[number];\n /**\n * Action buttons to display in each row\n */\n rowActionButtons?: DataTableRowActionsProps[\"rowActionButtons\"];\n /**\n * Menu items to include in the optional actions menu on each row.\n */\n rowActionMenuItems?: DataTableRowActionsProps[\"rowActionMenuItems\"];\n /**\n * Menu items to include in the bulk actions menu, which appears above the table if a row or rows are selected\n */\n bulkActionMenuItems?: (\n selectedRows: MRT_RowSelectionState,\n ) => MenuButtonProps[\"children\"];\n /**\n * If `error` is not undefined, the DataTable will indicate an error.\n */\n errorMessage?: string;\n /**\n * The component to display when the table is displaying the initial empty state\n */\n emptyPlaceholder?: ReactNode;\n /**\n * The component to display when the query returns no results\n */\n noResultsPlaceholder?: ReactNode;\n};\n\nconst displayColumnDefOptions = {\n \"mrt-row-actions\": {\n header: \"\",\n grow: true,\n muiTableBodyCellProps: {\n align: \"right\",\n sx: {\n overflow: \"visible\",\n width: \"unset\",\n },\n className: \"ods-actions-cell\",\n },\n muiTableHeadCellProps: {\n align: \"right\",\n sx: {\n width: \"unset\",\n },\n className: \"ods-actions-cell\",\n },\n },\n \"mrt-row-drag\": {\n header: \"\",\n muiTableBodyCellProps: {\n sx: {\n minWidth: 0,\n width: \"auto\",\n },\n className: \"ods-drag-handle\",\n },\n muiTableHeadCellProps: {\n sx: {\n minWidth: 0,\n width: \"auto\",\n },\n children: (\n // Add a spacer to simulate the width of the drag handle in the column.\n // Without this, the head cells are offset from their body cell counterparts\n <Box sx={{ marginInline: \"-0.1rem\" }}>\n <DragIndicatorIcon sx={{ marginInline: 1, opacity: 0 }} />\n </Box>\n ),\n },\n },\n \"mrt-row-select\": {\n muiTableHeadCellProps: {\n padding: \"checkbox\",\n },\n muiTableBodyCellProps: {\n padding: \"checkbox\",\n },\n },\n};\n\nconst ScrollableTableContainer = styled(\"div\", {\n shouldForwardProp: (prop) =>\n prop !== \"odysseyDesignTokens\" &&\n prop !== \"isScrollableStart\" &&\n prop !== \"isScrollableEnd\",\n})(\n ({\n odysseyDesignTokens,\n isScrollableStart,\n isScrollableEnd,\n }: {\n odysseyDesignTokens: DesignTokens;\n isScrollableStart: boolean;\n isScrollableEnd: boolean;\n }) => ({\n borderBlockEndColor: odysseyDesignTokens.HueNeutral100,\n borderBlockEndStyle: \"solid\",\n borderBlockEndWidth: odysseyDesignTokens.BorderWidthMain,\n marginBlockEnd: odysseyDesignTokens.Spacing4,\n position: \"relative\",\n borderInlineStartColor: isScrollableStart\n ? odysseyDesignTokens.HueNeutral200\n : \"transparent\",\n borderInlineStartStyle: \"solid\",\n borderInlineStartWidth: odysseyDesignTokens.BorderWidthMain,\n \"::before\": {\n background:\n \"linear-gradient(-90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.33) 50%, rgba(0, 0, 0, 1) 100%)\",\n content: '\"\"',\n opacity: isScrollableStart ? \"0.075\" : \"0\",\n pointerEvents: \"none\",\n position: \"absolute\",\n top: 0,\n left: 0,\n bottom: 0,\n width: odysseyDesignTokens.Spacing6,\n zIndex: 100,\n transition: `opacity ${odysseyDesignTokens.TransitionDurationMain} ${odysseyDesignTokens.TransitionTimingMain}`,\n },\n borderInlineEndColor: isScrollableEnd\n ? odysseyDesignTokens.HueNeutral200\n : \"transparent\",\n borderInlineEndStyle: \"solid\",\n borderInlineEndWidth: odysseyDesignTokens.BorderWidthMain,\n \"::after\": {\n background:\n \"linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.33) 50%, rgba(0, 0, 0, 1) 100%)\",\n content: '\"\"',\n opacity: isScrollableEnd ? \"0.075\" : \"0\",\n pointerEvents: \"none\",\n position: \"absolute\",\n top: 0,\n right: 0,\n bottom: 0,\n width: odysseyDesignTokens.Spacing6,\n transition: `opacity ${odysseyDesignTokens.TransitionDurationMain} ${odysseyDesignTokens.TransitionTimingMain}`,\n },\n }),\n);\n\nconst DataTable = ({\n columns,\n getRowId: getRowIdProp,\n currentPage = 1,\n initialDensity = densityValues[0],\n resultsPerPage = 20,\n getData,\n onReorderRows,\n totalRows,\n hasSearchSubmitButton,\n searchDelayTime,\n paginationType = \"paged\",\n onChangeRowSelection,\n rowActionButtons,\n rowActionMenuItems,\n hasChangeableDensity,\n hasColumnResizing,\n hasColumnVisibility,\n hasFilters,\n hasPagination,\n hasRowReordering,\n hasRowSelection,\n hasSearch,\n hasSorting,\n bulkActionMenuItems,\n errorMessage: errorMessageProp,\n emptyPlaceholder,\n noResultsPlaceholder,\n}: DataTableProps) => {\n const [data, setData] = useState<MRT_RowData[]>([]);\n const [pagination, setPagination] = useState({\n pageIndex: currentPage,\n pageSize: resultsPerPage,\n });\n const [draggingRow, setDraggingRow] = useState<MRT_Row<MRT_RowData> | null>();\n const [isTableContainerScrolledToStart, setIsTableContainerScrolledToStart] =\n useState(true);\n const [isTableContainerScrolledToEnd, setIsTableContainerScrolledToEnd] =\n useState(true);\n const [tableInnerContainerWidth, setTableInnerContainerWidth] =\n useState<string>(\"100%\");\n const tableOuterContainerRef = useRef<HTMLDivElement>(null);\n const tableInnerContainerRef = useRef<HTMLDivElement>(null);\n const tableContentRef = useRef<HTMLTableElement>(null);\n\n // Table states\n const [columnSorting, setColumnSorting] = useState<MRT_SortingState>([]);\n const [columnVisibility, setColumnVisibility] =\n useState<MRT_VisibilityState>();\n const [rowDensity, setRowDensity] =\n useState<MRT_DensityState>(initialDensity);\n const [rowSelection, setRowSelection] = useState<MRT_RowSelectionState>({});\n const [search, setSearch] = useState<string>(\"\");\n const [filters, setFilters] = useState<DataFilter[]>();\n const [initialFilters, setInitialFilters] = useState<DataFilter[]>();\n const [isLoading, setIsLoading] = useState<boolean | undefined>(true);\n const [isEmpty, setIsEmpty] = useState<boolean | undefined>();\n const [errorMessage, setErrorMessage] = useState<string | undefined>(\n errorMessageProp,\n );\n\n useScrollIndication({\n tableOuterContainer: tableOuterContainerRef.current,\n tableInnerContainer: tableInnerContainerRef.current,\n setIsTableContainerScrolledToStart: setIsTableContainerScrolledToStart,\n setIsTableContainerScrolledToEnd: setIsTableContainerScrolledToEnd,\n setTableInnerContainerWidth: setTableInnerContainerWidth,\n });\n\n const odysseyDesignTokens = useOdysseyDesignTokens();\n\n const {\n dragHandleStyles,\n dragHandleText,\n draggableTableBodyRowClassName,\n handleDragHandleKeyDown,\n handleDragHandleOnDragCapture,\n handleDragHandleOnDragEnd,\n resetDraggingAndHoveredRow,\n updateRowOrder,\n } = useRowReordering({\n totalRows,\n onReorderRows,\n data,\n setData,\n draggingRow,\n setDraggingRow,\n resultsPerPage: pagination.pageSize,\n page: pagination.pageIndex,\n });\n\n const getRowId = getRowIdProp ? getRowIdProp : (row: MRT_RowData) => row.id;\n\n const rowDensityCellClassName = useMemo(() => {\n return rowDensity === \"spacious\"\n ? \"MuiTableCell-spacious\"\n : rowDensity === \"compact\"\n ? \"MuiTableCell-compact\"\n : \"MuiTableCell-default\";\n }, [rowDensity]);\n\n const renderRowActions = useCallback(\n ({ row }: { row: MRT_Row<MRT_RowData> }) => {\n const currentIndex =\n row.index + (pagination.pageIndex - 1) * pagination.pageSize;\n return (\n <DataTableRowActions\n row={row}\n rowIndex={currentIndex}\n rowActionButtons={rowActionButtons}\n rowActionMenuItems={rowActionMenuItems}\n totalRows={totalRows}\n updateRowOrder={\n hasRowReordering && onReorderRows ? updateRowOrder : undefined\n }\n />\n );\n },\n [\n pagination,\n rowActionButtons,\n rowActionMenuItems,\n hasRowReordering,\n onReorderRows,\n totalRows,\n updateRowOrder,\n ],\n );\n\n const dataTableFilters = useMemo(\n () =>\n columns\n .filter((column) => column.enableColumnFilter !== false)\n .map((column) => {\n return {\n id: column.accessorKey as string,\n label: column.header,\n variant: column.filterVariant ?? \"text\",\n options: column.filterSelectOptions,\n } as DataFilter;\n }),\n [columns],\n );\n\n const defaultCell = useCallback(\n ({ cell }: { cell: MRT_Cell<MRT_RowData> }) => {\n const value = cell.getValue<string>();\n return (\n <Box\n sx={{\n whiteSpace: \"nowrap\",\n textOverflow: \"ellipsis\",\n overflow: \"hidden\",\n }}\n >\n {value}\n </Box>\n );\n },\n [],\n );\n\n const emptyState = useCallback(() => {\n const noResultsInnerContent = noResultsPlaceholder || (\n <DataTableEmptyState\n heading={t(\"table.noresults.heading\")}\n text={t(\"table.noresults.text\")}\n />\n );\n\n const emptyStateInnerContent =\n emptyPlaceholder && isEmpty ? emptyPlaceholder : noResultsInnerContent;\n\n return (\n <Box sx={{ width: tableInnerContainerWidth }}>\n {emptyStateInnerContent}\n </Box>\n );\n }, [\n tableInnerContainerWidth,\n emptyPlaceholder,\n noResultsPlaceholder,\n isEmpty,\n ]);\n\n const dataTable = useMaterialReactTable({\n columns: columns,\n data: data,\n getRowId: getRowId,\n state: {\n density: rowDensity,\n sorting: columnSorting,\n globalFilter: search,\n columnVisibility,\n isLoading,\n rowSelection,\n },\n icons: {\n ArrowDownwardIcon: ArrowDownIcon,\n DragHandleIcon: DragIndicatorIcon,\n SyncAltIcon: ArrowUnsortedIcon,\n },\n\n // Base table settings\n enableColumnActions: false,\n enableColumnResizing: hasColumnResizing,\n enableDensityToggle: false,\n enableFilters: false,\n enableFullScreenToggle: false,\n enableGlobalFilter: false,\n enableHiding: false,\n enablePagination: false,\n layoutMode: \"grid-no-grow\",\n manualFiltering: true,\n manualSorting: true,\n muiTablePaperProps: {\n elevation: 0,\n sx: {\n overflow: \"visible\",\n },\n },\n selectAllMode: \"all\",\n displayColumnDefOptions:\n displayColumnDefOptions as MRT_TableOptions<MRT_RowData>[\"displayColumnDefOptions\"],\n muiTableBodyCellProps: () => ({\n className: rowDensityCellClassName,\n }),\n defaultColumn: {\n Cell: defaultCell,\n },\n\n // Reordering\n enableRowOrdering: hasRowReordering && Boolean(onReorderRows),\n enableRowDragging: hasRowReordering && Boolean(onReorderRows),\n muiTableBodyRowProps: ({ table, row }) => ({\n className: draggableTableBodyRowClassName({\n currentRowId: row.id,\n draggingRowId: draggingRow?.id,\n hoveredRowId: table.getState().hoveredRow?.id,\n }),\n }),\n muiRowDragHandleProps: ({ table, row }) => ({\n onKeyDown: (event) => handleDragHandleKeyDown({ table, row, event }),\n onBlur: () => resetDraggingAndHoveredRow(table),\n onDragEnd: () => handleDragHandleOnDragEnd(table),\n onDragCapture: () => handleDragHandleOnDragCapture(table),\n sx: dragHandleStyles,\n ...dragHandleText,\n }),\n\n // Row actions\n enableRowActions:\n (hasRowReordering === true && onReorderRows) ||\n rowActionButtons ||\n rowActionMenuItems\n ? true\n : false,\n positionActionsColumn:\n \"last\" as MRT_TableOptions<MRT_RowData>[\"positionActionsColumn\"],\n renderRowActions: ({ row }) => renderRowActions({ row }),\n\n // Row selection\n enableRowSelection: hasRowSelection,\n onRowSelectionChange: setRowSelection,\n\n // Sorting\n enableSorting: hasSorting,\n onSortingChange: setColumnSorting,\n muiTableHeadCellProps: ({ column: currentColumn }) => ({\n className: columnSorting.find(\n (sortedColumn) => sortedColumn.id === currentColumn.id,\n )\n ? \"isSorted\"\n : \"isUnsorted\",\n }),\n\n // Virtualization\n enableRowVirtualization:\n paginationType !== \"loadMore\" && pagination.pageSize > 50,\n rowVirtualizerInstanceRef:\n useRef<MRT_RowVirtualizer<HTMLDivElement, HTMLTableRowElement>>(null),\n rowVirtualizerOptions: {\n overscan: 4,\n },\n\n // States\n renderEmptyRowsFallback: emptyState,\n\n // Refs\n muiTableProps: {\n ref: tableContentRef,\n },\n\n muiTableContainerProps: {\n ref: tableInnerContainerRef,\n },\n });\n\n // Effects\n const bulkActionMenuButton = useMemo(\n () => (\n <>\n <MenuButton\n buttonVariant=\"secondary\"\n endIcon={<MoreIcon />}\n isDisabled={Object.keys(rowSelection).length === 0}\n ariaLabel=\"More actions\"\n >\n {bulkActionMenuItems?.(rowSelection)}\n </MenuButton>\n </>\n ),\n [bulkActionMenuItems, rowSelection],\n );\n\n useEffect(() => {\n (async () => {\n setIsLoading(true);\n setErrorMessage(errorMessageProp);\n try {\n const incomingData = await getData?.({\n page: pagination.pageIndex,\n resultsPerPage: pagination.pageSize,\n search,\n filters,\n sort: columnSorting,\n });\n setData(incomingData);\n } catch (error) {\n setErrorMessage(typeof error === \"string\" ? error : t(\"table.error\"));\n } finally {\n setIsLoading(false);\n }\n })();\n }, [pagination, columnSorting, search, filters, getData, errorMessageProp]);\n\n useEffect(() => {\n if (!initialFilters && filters) {\n setInitialFilters(filters);\n }\n\n setIsEmpty(\n pagination.pageIndex === currentPage &&\n pagination.pageSize === resultsPerPage &&\n search === \"\" &&\n filters === initialFilters &&\n data.length === 0,\n );\n }, [\n filters,\n pagination,\n search,\n data,\n currentPage,\n initialFilters,\n resultsPerPage,\n ]);\n\n useEffect(() => {\n onChangeRowSelection?.(rowSelection);\n }, [rowSelection, onChangeRowSelection]);\n\n // Render the table\n return (\n <>\n {(hasSearch ||\n hasFilters ||\n hasChangeableDensity ||\n hasColumnVisibility ||\n bulkActionMenuItems) && (\n <Box sx={{ marginBottom: 5 }}>\n <DataFilters\n onChangeSearch={hasSearch ? setSearch : undefined}\n onChangeFilters={hasFilters ? setFilters : undefined}\n hasSearchSubmitButton={hasSearchSubmitButton}\n searchDelayTime={searchDelayTime}\n filters={hasFilters ? dataTableFilters : undefined}\n isDisabled={isEmpty}\n additionalActions={\n <>\n <DataTableSettings\n hasChangeableDensity={hasChangeableDensity}\n rowDensity={rowDensity}\n setRowDensity={setRowDensity}\n hasColumnVisibility={hasColumnVisibility}\n columns={columns}\n columnVisibility={columnVisibility}\n setColumnVisibility={setColumnVisibility}\n />\n {bulkActionMenuItems && bulkActionMenuButton}\n </>\n }\n />\n </Box>\n )}\n\n {errorMessage && (\n <Box sx={{ marginBlockEnd: 2 }}>\n <Callout severity=\"error\" text={errorMessage} />\n </Box>\n )}\n\n <ScrollableTableContainer\n odysseyDesignTokens={odysseyDesignTokens}\n isScrollableStart={!isTableContainerScrolledToStart}\n isScrollableEnd={!isTableContainerScrolledToEnd}\n ref={tableOuterContainerRef}\n >\n <MRT_TableContainer table={dataTable} />\n </ScrollableTableContainer>\n\n {hasPagination && (\n <DataTablePagination\n pagination={pagination}\n setPagination={setPagination}\n totalRows={totalRows}\n isDisabled={isEmpty}\n variant={paginationType}\n />\n )}\n </>\n );\n};\n\nconst MemoizedDataTable = memo(DataTable);\nMemoizedDataTable.displayName = \"DataTable\";\n\nexport { MemoizedDataTable as DataTable };\n"],"mappings":"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"}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
|
|
3
|
+
* The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
|
|
4
|
+
*
|
|
5
|
+
* You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
7
|
+
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
|
8
|
+
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
9
|
+
*
|
|
10
|
+
* See the License for the specific language governing permissions and limitations under the License.
|
|
11
|
+
*/
|
|
12
|
+
|
|
13
|
+
import { memo } from "react";
|
|
14
|
+
import { Heading4, Paragraph } from "../Typography.js";
|
|
15
|
+
import { Box } from "../Box.js";
|
|
16
|
+
import styled from "@emotion/styled";
|
|
17
|
+
import { useOdysseyDesignTokens } from "../OdysseyDesignTokensContext.js";
|
|
18
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
19
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
20
|
+
const EmptyContainer = styled("div", {
|
|
21
|
+
shouldForwardProp: prop => prop !== "odysseyDesignTokens"
|
|
22
|
+
})(({
|
|
23
|
+
odysseyDesignTokens
|
|
24
|
+
}) => ({
|
|
25
|
+
display: "flex",
|
|
26
|
+
flexDirection: "column",
|
|
27
|
+
marginBlock: odysseyDesignTokens.Spacing9,
|
|
28
|
+
padding: odysseyDesignTokens.Spacing5,
|
|
29
|
+
textAlign: "center",
|
|
30
|
+
width: "100%"
|
|
31
|
+
}));
|
|
32
|
+
const DataTableEmptyState = ({
|
|
33
|
+
heading,
|
|
34
|
+
text,
|
|
35
|
+
primaryButton,
|
|
36
|
+
secondaryButton
|
|
37
|
+
}) => {
|
|
38
|
+
const odysseyDesignTokens = useOdysseyDesignTokens();
|
|
39
|
+
return _jsxs(EmptyContainer, {
|
|
40
|
+
odysseyDesignTokens: odysseyDesignTokens,
|
|
41
|
+
children: [_jsx(Heading4, {
|
|
42
|
+
children: heading
|
|
43
|
+
}), _jsx(Paragraph, {
|
|
44
|
+
children: text
|
|
45
|
+
}), (primaryButton || secondaryButton) && _jsxs(Box, {
|
|
46
|
+
sx: {
|
|
47
|
+
marginBlockStart: 5
|
|
48
|
+
},
|
|
49
|
+
children: [secondaryButton, primaryButton]
|
|
50
|
+
})]
|
|
51
|
+
});
|
|
52
|
+
};
|
|
53
|
+
const MemoizedDataTableEmptyState = memo(DataTableEmptyState);
|
|
54
|
+
export { MemoizedDataTableEmptyState as DataTableEmptyState };
|
|
55
|
+
//# sourceMappingURL=DataTableEmptyState.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DataTableEmptyState.js","names":["memo","Heading4","Paragraph","Box","styled","useOdysseyDesignTokens","jsx","_jsx","jsxs","_jsxs","EmptyContainer","shouldForwardProp","prop","odysseyDesignTokens","display","flexDirection","marginBlock","Spacing9","padding","Spacing5","textAlign","width","DataTableEmptyState","heading","text","primaryButton","secondaryButton","children","sx","marginBlockStart","MemoizedDataTableEmptyState"],"sources":["../../src/DataTable/DataTableEmptyState.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { ReactNode, memo } from \"react\";\nimport { Heading4, Paragraph } from \"../Typography\";\nimport { Box } from \"../Box\";\nimport styled from \"@emotion/styled\";\nimport {\n useOdysseyDesignTokens,\n DesignTokens,\n} from \"../OdysseyDesignTokensContext\";\n\nconst EmptyContainer = styled(\"div\", {\n shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({\n display: \"flex\",\n flexDirection: \"column\",\n marginBlock: odysseyDesignTokens.Spacing9,\n padding: odysseyDesignTokens.Spacing5,\n textAlign: \"center\",\n width: \"100%\",\n}));\n\nexport type DataTableEmptyStateProps = {\n heading: string;\n text: string;\n primaryButton?: ReactNode;\n secondaryButton?: ReactNode;\n};\n\nconst DataTableEmptyState = ({\n heading,\n text,\n primaryButton,\n secondaryButton,\n}: DataTableEmptyStateProps) => {\n const odysseyDesignTokens = useOdysseyDesignTokens();\n return (\n <EmptyContainer odysseyDesignTokens={odysseyDesignTokens}>\n <Heading4>{heading}</Heading4>\n <Paragraph>{text}</Paragraph>\n {(primaryButton || secondaryButton) && (\n <Box sx={{ marginBlockStart: 5 }}>\n {secondaryButton}\n {primaryButton}\n </Box>\n )}\n </EmptyContainer>\n );\n};\n\nconst MemoizedDataTableEmptyState = memo(DataTableEmptyState);\nexport { MemoizedDataTableEmptyState as DataTableEmptyState };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAAoBA,IAAI,QAAQ,OAAO;AAAC,SAC/BC,QAAQ,EAAEC,SAAS;AAAA,SACnBC,GAAG;AACZ,OAAOC,MAAM,MAAM,iBAAiB;AAAC,SAEnCC,sBAAsB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAIxB,MAAMC,cAAc,GAAGN,MAAM,CAAC,KAAK,EAAE;EACnCO,iBAAiB,EAAGC,IAAI,IAAKA,IAAI,KAAK;AACxC,CAAC,CAAC,CAAC,CAAC;EAAEC;AAA2D,CAAC,MAAM;EACtEC,OAAO,EAAE,MAAM;EACfC,aAAa,EAAE,QAAQ;EACvBC,WAAW,EAAEH,mBAAmB,CAACI,QAAQ;EACzCC,OAAO,EAAEL,mBAAmB,CAACM,QAAQ;EACrCC,SAAS,EAAE,QAAQ;EACnBC,KAAK,EAAE;AACT,CAAC,CAAC,CAAC;AASH,MAAMC,mBAAmB,GAAGA,CAAC;EAC3BC,OAAO;EACPC,IAAI;EACJC,aAAa;EACbC;AACwB,CAAC,KAAK;EAC9B,MAAMb,mBAAmB,GAAGR,sBAAsB,CAAC,CAAC;EACpD,OACEI,KAAA,CAACC,cAAc;IAACG,mBAAmB,EAAEA,mBAAoB;IAAAc,QAAA,GACvDpB,IAAA,CAACN,QAAQ;MAAA0B,QAAA,EAAEJ;IAAO,CAAW,CAAC,EAC9BhB,IAAA,CAACL,SAAS;MAAAyB,QAAA,EAAEH;IAAI,CAAY,CAAC,EAC5B,CAACC,aAAa,IAAIC,eAAe,KAChCjB,KAAA,CAACN,GAAG;MAACyB,EAAE,EAAE;QAAEC,gBAAgB,EAAE;MAAE,CAAE;MAAAF,QAAA,GAC9BD,eAAe,EACfD,aAAa;IAAA,CACX,CACN;EAAA,CACa,CAAC;AAErB,CAAC;AAED,MAAMK,2BAA2B,GAAG9B,IAAI,CAACsB,mBAAmB,CAAC;AAC7D,SAASQ,2BAA2B,IAAIR,mBAAmB"}
|