@terraware/web-components 3.9.5 → 3.9.6-rc.0

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.
@@ -34,6 +34,9 @@ export interface Props<T> extends LocalizationProps {
34
34
  rows: T[];
35
35
  Renderer?: (props: RendererProps<T>) => JSX.Element;
36
36
  onSelect?: (value: T, fromColumn?: string, newValue?: string) => void;
37
+ onPageChange?: (newPage: number) => void;
38
+ maxItemsPerPage?: number;
39
+ totalRowCount?: number;
37
40
  DetailsRenderer?: (props: DetailsRendererProps) => JSX.Element;
38
41
  sortComparator?: (a: T, b: T, orderBy: keyof T, order: SortOrder) => number;
39
42
  sortHandler?: (order: SortOrder, orderBy: string) => void;
@@ -64,6 +67,6 @@ export type TopBarButton = {
64
67
  tooltipTitle?: TooltipProps['title'];
65
68
  };
66
69
  export declare const isTopBarButton: (input: unknown) => input is TopBarButton;
67
- export default function EnhancedTable<T extends TableRowType>({ id, columns, rows, order: _order, orderBy: _orderBy, Renderer, onSelect, DetailsRenderer, sortComparator, sortHandler, isInactive, isPresorted, onReorderEnd, isClickable, emptyTableMessage, showCheckbox, showTopBar, topBarButtons, selectedRows, setSelectedRows, controlledOnSelect, reloadData, stickyHeader, hideHeader, booleanFalseText, booleanTrueText, editText, renderNumSelectedText, renderPaginationText, enhancedTopBarSelectionConfig, density, tableComments, }: Props<T>): JSX.Element;
70
+ export default function EnhancedTable<T extends TableRowType>({ id, columns, rows, order: _order, orderBy: _orderBy, Renderer, onSelect, onPageChange, maxItemsPerPage, totalRowCount, DetailsRenderer, sortComparator, sortHandler, isInactive, isPresorted, onReorderEnd, isClickable, emptyTableMessage, showCheckbox, showTopBar, topBarButtons, selectedRows, setSelectedRows, controlledOnSelect, reloadData, stickyHeader, hideHeader, booleanFalseText, booleanTrueText, editText, renderNumSelectedText, renderPaginationText, enhancedTopBarSelectionConfig, density, tableComments, }: Props<T>): JSX.Element;
68
71
  export declare function tableSort<T>(ignore: boolean, array: T[], comparator: (a: T, b: T) => number): T[];
69
72
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/table/index.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/table/index.tsx"],"names":[],"mappings":"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"}
@@ -35,6 +35,9 @@ function EnhancedTable(_ref) {
35
35
  orderBy: _orderBy,
36
36
  Renderer = _TableCellRenderer.default,
37
37
  onSelect,
38
+ onPageChange,
39
+ maxItemsPerPage = 100,
40
+ totalRowCount,
38
41
  DetailsRenderer,
39
42
  sortComparator = _sort.descendingComparator,
40
43
  sortHandler,
@@ -64,8 +67,7 @@ function EnhancedTable(_ref) {
64
67
  const theme = (0, _material.useTheme)();
65
68
  const [order, setOrder] = _react.default.useState(_order);
66
69
  const [orderBy, setOrderBy] = _react.default.useState(_orderBy);
67
- const [maxItemsPerPage] = (0, _react.useState)(100);
68
- const [itemsToSkip, setItemsToSkip] = (0, _react.useState)(0);
70
+ const [currentPage, setCurrentPage] = (0, _react.useState)(1);
69
71
  const {
70
72
  isMobile
71
73
  } = (0, _utils.useDeviceInfo)();
@@ -83,12 +85,9 @@ function EnhancedTable(_ref) {
83
85
  }, [columns]);
84
86
  (0, _react.useEffect)(() => {
85
87
  if (displayColumnKeyNames && displayColumnsIndexed) {
86
- const columnsDetails = displayColumnKeyNames.map(key => {
87
- const detail = {
88
- ...displayColumnsIndexed[key]
89
- };
90
- return detail;
91
- });
88
+ const columnsDetails = displayColumnKeyNames.map(key => ({
89
+ ...displayColumnsIndexed[key]
90
+ }));
92
91
  setDisplayColumnDetails(columnsDetails);
93
92
  }
94
93
  }, [displayColumnKeyNames, displayColumnsIndexed]);
@@ -103,15 +102,19 @@ function EnhancedTable(_ref) {
103
102
  });
104
103
  }
105
104
  }, [rows, setSelectedRows]);
105
+ const handleChangePage = (0, _react.useCallback)((event, newPage) => {
106
+ onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(newPage);
107
+ setCurrentPage(newPage);
108
+ }, [onPageChange]);
106
109
  (0, _react.useEffect)(() => {
107
110
  // this is not most elegant but we want to do this if table was sorted by some column in a presorted table
108
111
  // but we don't know when the data changes, hence this useEffect on the data size
109
- if (isPresorted) {
112
+ if (isPresorted && onPageChange === undefined) {
110
113
  // we want to set page back to 1 if the data changes on presorted lists,
111
114
  // this is because the data was reset due to some sort behavior refetching new data
112
115
  handleChangePage({}, 1);
113
116
  }
114
- }, [rows]);
117
+ }, [handleChangePage, isPresorted, onPageChange, rows]);
115
118
  const handleRequestSort = (event, property) => {
116
119
  const isAsc = orderBy === property && order === 'asc';
117
120
  const newOrder = isAsc ? 'desc' : 'asc';
@@ -151,10 +154,7 @@ function EnhancedTable(_ref) {
151
154
  setSelectedRows(newSelected);
152
155
  }
153
156
  };
154
- const handleChangePage = (event, newPage) => {
155
- setItemsToSkip(maxItemsPerPage * (newPage - 1));
156
- };
157
- function columnsToHeadCells(columnsR) {
157
+ const columnsToHeadCells = (0, _react.useCallback)(columnsR => {
158
158
  return columnsR.map(c => ({
159
159
  id: c.key,
160
160
  disablePadding: true,
@@ -164,13 +164,13 @@ function EnhancedTable(_ref) {
164
164
  }, ...(Array.isArray(c.sx) ? c.sx : [c.sx])],
165
165
  tooltipTitle: c.tooltipTitle
166
166
  }));
167
- }
167
+ }, [density]);
168
168
  const [headCells, setHeadCells] = _react.default.useState();
169
169
  _react.default.useEffect(() => {
170
170
  if (displayColumnDetails) {
171
171
  setHeadCells(columnsToHeadCells(displayColumnDetails));
172
172
  }
173
- }, [displayColumnDetails]);
173
+ }, [columnsToHeadCells, displayColumnDetails]);
174
174
  const sensors = (0, _core.useSensors)((0, _core.useSensor)(_core.MouseSensor), (0, _core.useSensor)(_core.TouchSensor), (0, _core.useSensor)(_core.KeyboardSensor, {
175
175
  coordinateGetter: _sortable.sortableKeyboardCoordinates
176
176
  }));
@@ -191,7 +191,7 @@ function EnhancedTable(_ref) {
191
191
  }
192
192
  }
193
193
  }, [displayColumnKeyNames, setDisplayColumnKeyNames, onReorderEnd]);
194
- function handleDragEnd(event) {
194
+ const handleDragEnd = event => {
195
195
  if (headCells) {
196
196
  const {
197
197
  active,
@@ -206,8 +206,35 @@ function EnhancedTable(_ref) {
206
206
  });
207
207
  }
208
208
  }
209
- }
210
- const pagesCount = Math.ceil(rows.length / maxItemsPerPage);
209
+ };
210
+ const sortedPageRows = (0, _react.useMemo)(() => {
211
+ if (rows) {
212
+ const itemsToSkip = onPageChange ? 0 : maxItemsPerPage * (currentPage - 1);
213
+ return (isPresorted ? rows : (0, _sort.stableSort)(rows, (0, _sort.getComparator)(order, orderBy, sortComparator))).slice(itemsToSkip, itemsToSkip + maxItemsPerPage);
214
+ } else {
215
+ return [];
216
+ }
217
+ }, [rows, onPageChange, maxItemsPerPage, currentPage, isPresorted, order, orderBy, sortComparator]);
218
+
219
+ /**
220
+ * Calculate pagination numbers to show.
221
+ * If the table is empty (rows.length === 0) override calculation and show '0 of 0'
222
+ * Pagination total is overridden by totalRowCount if provided.
223
+ */
224
+ const paginationTotal = (0, _react.useMemo)(() => totalRowCount || rows.length, [rows.length, totalRowCount]);
225
+ const pagesCount = (0, _react.useMemo)(() => Math.ceil(paginationTotal / maxItemsPerPage), [maxItemsPerPage, paginationTotal]);
226
+ const minRowNumber = (0, _react.useMemo)(() => {
227
+ if (!sortedPageRows.length) {
228
+ return 0;
229
+ }
230
+ return (currentPage - 1) * maxItemsPerPage + 1;
231
+ }, [currentPage, maxItemsPerPage, sortedPageRows.length]);
232
+ const maxRowNumber = (0, _react.useMemo)(() => {
233
+ if (!sortedPageRows.length) {
234
+ return 0;
235
+ }
236
+ return Math.min(currentPage * maxItemsPerPage, paginationTotal);
237
+ }, [currentPage, maxItemsPerPage, paginationTotal, sortedPageRows.length]);
211
238
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showTopBar && /*#__PURE__*/_react.default.createElement(_EnhancedTableToolbarV.default, {
212
239
  selectedRowsCount: (selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.length) || 0,
213
240
  pagesCount: pagesCount,
@@ -240,12 +267,12 @@ function EnhancedTable(_ref) {
240
267
  onReorderEnd: onReorderEndHandler,
241
268
  numSelected: showCheckbox ? selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.length : undefined,
242
269
  onSelectAllClick: showCheckbox ? handleSelectAllClick : undefined,
243
- rowCount: showCheckbox ? rows === null || rows === void 0 ? void 0 : rows.length : undefined,
270
+ rowCount: showCheckbox ? sortedPageRows === null || sortedPageRows === void 0 ? void 0 : sortedPageRows.length : undefined,
244
271
  density: density
245
- }), /*#__PURE__*/_react.default.createElement(_material.TableBody, null, rows.length < 1 && emptyTableMessage && /*#__PURE__*/_react.default.createElement(_material.TableRow, null, /*#__PURE__*/_react.default.createElement(_material.TableCell, {
272
+ }), /*#__PURE__*/_react.default.createElement(_material.TableBody, null, sortedPageRows.length < 1 && emptyTableMessage && /*#__PURE__*/_react.default.createElement(_material.TableRow, null, /*#__PURE__*/_react.default.createElement(_material.TableCell, {
246
273
  colSpan: columns.length + 1,
247
274
  align: "center"
248
- }, /*#__PURE__*/_react.default.createElement("p", null, emptyTableMessage))), rows && (isPresorted ? rows : (0, _sort.stableSort)(rows, (0, _sort.getComparator)(order, orderBy, sortComparator))).slice(itemsToSkip, itemsToSkip + maxItemsPerPage).map((row, index) => {
275
+ }, /*#__PURE__*/_react.default.createElement("p", null, emptyTableMessage))), sortedPageRows && sortedPageRows.map((row, index) => {
249
276
  const onClick = onSelect && !controlledOnSelect ? () => onSelect(row) : undefined;
250
277
  const isItemSelected = isSelected(row);
251
278
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
@@ -320,18 +347,12 @@ function EnhancedTable(_ref) {
320
347
  alignItems: "center",
321
348
  justifyContent: "flex-end",
322
349
  paddingTop: "24px"
323
- }, rows.length ? itemsToSkip + maxItemsPerPage < rows.length ? /*#__PURE__*/_react.default.createElement(_material.Typography, {
324
- paddingRight: "24px",
325
- fontSize: "14px"
326
- }, renderPaginationText(itemsToSkip + 1, itemsToSkip + maxItemsPerPage, rows.length)) : /*#__PURE__*/_react.default.createElement(_material.Typography, {
327
- paddingRight: "24px",
328
- fontSize: "14px"
329
- }, renderPaginationText(itemsToSkip + 1, rows.length, rows.length)) : /*#__PURE__*/_react.default.createElement(_material.Typography, {
350
+ }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
330
351
  paddingRight: "24px",
331
352
  fontSize: "14px"
332
- }, renderPaginationText(0, 0, 0)), /*#__PURE__*/_react.default.createElement(_material.Pagination, {
353
+ }, renderPaginationText(minRowNumber, maxRowNumber, paginationTotal)), /*#__PURE__*/_react.default.createElement(_material.Pagination, {
333
354
  count: pagesCount,
334
- page: itemsToSkip / maxItemsPerPage + 1,
355
+ page: currentPage,
335
356
  shape: "rounded",
336
357
  onChange: handleChangePage,
337
358
  siblingCount: isMobile ? 0 : 1,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@terraware/web-components",
3
- "version": "3.9.5",
3
+ "version": "3.9.6-rc.0",
4
4
  "author": "Terraformation Inc.",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -1,3 +1,4 @@
1
+ import { Story } from '@storybook/react';
1
2
  import Table, { Props as TableProps } from '../components/table/index';
2
3
  declare const _default: {
3
4
  title: string;
@@ -12,6 +13,12 @@ declare const _default: {
12
13
  };
13
14
  };
14
15
  export default _default;
16
+ export declare const PageChangeCallback: Story<Omit<TableProps<{
17
+ name: string;
18
+ lastname: string;
19
+ }>, 'rows'> & {
20
+ rowCount: number;
21
+ }>;
15
22
  export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, Omit<TableProps<{
16
23
  name: string;
17
24
  lastname: string;
@@ -1 +1 @@
1
- {"version":3,"file":"Table.stories.d.ts","sourceRoot":"","sources":["../../src/stories/Table.stories.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,EAAgC,KAAK,IAAI,UAAU,EAAE,MAAM,2BAA2B,CAAC;;;;;;;;;;;;;AAGrG,wBASE;AA6FF,eAAO,MAAM,OAAO;UAjF0B,MAAM;cAAY,MAAM;;cAA2B,MAAM;EAiF/D,CAAC;AACzC,eAAO,MAAM,UAAU;UAlFuB,MAAM;cAAY,MAAM;;cAA2B,MAAM;EAkF5D,CAAC;AAC5C,eAAO,MAAM,SAAS;UAnFwB,MAAM;cAAY,MAAM;;cAA2B,MAAM;EAmF7D,CAAC;AAC3C,eAAO,MAAM,UAAU;UApFuB,MAAM;cAAY,MAAM;;cAA2B,MAAM;EAoF5D,CAAC;AAC5C,eAAO,MAAM,YAAY;UArFqB,MAAM;cAAY,MAAM;;cAA2B,MAAM;EAqF1D,CAAC"}
1
+ {"version":3,"file":"Table.stories.d.ts","sourceRoot":"","sources":["../../src/stories/Table.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAGzC,OAAO,KAAK,EAAE,EAAgC,KAAK,IAAI,UAAU,EAAE,MAAM,2BAA2B,CAAC;;;;;;;;;;;;;AAGrG,wBASE;AA4FF,eAAO,MAAM,kBAAkB,EAAE,KAAK,CACpC,IAAI,CAAC,UAAU,CAAC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE,CAAC,EAAE,MAAM,CAAC,GAAG;IAAE,QAAQ,EAAE,MAAM,CAAA;CAAE,CAKpF,CAAC;AAEF,eAAO,MAAM,OAAO;UAZ0B,MAAM;cAAY,MAAM;;cAA2B,MAAM;EAY/D,CAAC;AACzC,eAAO,MAAM,UAAU;UAbuB,MAAM;cAAY,MAAM;;cAA2B,MAAM;EAa5D,CAAC;AAC5C,eAAO,MAAM,SAAS;UAdwB,MAAM;cAAY,MAAM;;cAA2B,MAAM;EAc7D,CAAC;AAC3C,eAAO,MAAM,UAAU;UAfuB,MAAM;cAAY,MAAM;;cAA2B,MAAM;EAe5D,CAAC;AAC5C,eAAO,MAAM,YAAY;UAhBqB,MAAM;cAAY,MAAM;;cAA2B,MAAM;EAgB1D,CAAC"}