@propellerads/table 5.1.1 → 6.0.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.
package/dist/table.esm.js DELETED
@@ -1,641 +0,0 @@
1
- import { ArrowUp, Size, Color, ArrowDown } from '@propellerads/icon';
2
- import Checkbox from '@propellerads/input-checkbox';
3
- import React, { useMemo, useEffect, useRef } from 'react';
4
- import { useTable, useFlexLayout, useSortBy, useExpanded, usePagination, useRowSelect, useResizeColumns } from 'react-table';
5
- import styled, { css, keyframes } from 'styled-components';
6
- import { fontNormal, spacing, gray95, white, black, gray80 } from '@propellerads/stylevariables';
7
-
8
- function _extends() {
9
- return _extends = Object.assign ? Object.assign.bind() : function (n) {
10
- for (var e = 1; e < arguments.length; e++) {
11
- var t = arguments[e];
12
- for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
13
- }
14
- return n;
15
- }, _extends.apply(null, arguments);
16
- }
17
- function _objectWithoutPropertiesLoose(r, e) {
18
- if (null == r) return {};
19
- var t = {};
20
- for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
21
- if (-1 !== e.indexOf(n)) continue;
22
- t[n] = r[n];
23
- }
24
- return t;
25
- }
26
- function _taggedTemplateLiteralLoose(e, t) {
27
- return t || (t = e.slice(0)), e.raw = t, e;
28
- }
29
-
30
- var defaultGetter = function defaultGetter(props) {
31
- return props;
32
- };
33
- var cellGetter = function cellGetter(props, _ref) {
34
- var _cell$column;
35
- var cell = _ref.cell;
36
- return _extends({}, props, {
37
- // @ts-ignore
38
- align: cell === null || cell === void 0 ? void 0 : (_cell$column = cell.column) === null || _cell$column === void 0 ? void 0 : _cell$column.align
39
- });
40
- };
41
- var mainCellGetter = function mainCellGetter(props, _ref2) {
42
- var column = _ref2.column;
43
- return _extends({}, props, {
44
- // @ts-ignore
45
- align: column === null || column === void 0 ? void 0 : column.align
46
- });
47
- };
48
- var getTableProps = function getTableProps(userGetter, getter) {
49
- if (getter === void 0) {
50
- getter = defaultGetter;
51
- }
52
- if (userGetter) {
53
- return function (props) {
54
- return _extends({}, getter(props), userGetter(props));
55
- };
56
- }
57
- return getter;
58
- };
59
- var getTableElementProps = function getTableElementProps(userGetter, getter) {
60
- if (getter === void 0) {
61
- getter = defaultGetter;
62
- }
63
- if (userGetter) {
64
- return function (props, meta) {
65
- return _extends({}, getter(props, meta), userGetter(props, meta));
66
- };
67
- }
68
- return getter;
69
- };
70
- var getTableRowProps = function getTableRowProps(userGetter, getter) {
71
- if (getter === void 0) {
72
- getter = defaultGetter;
73
- }
74
- if (userGetter) {
75
- return function (props, meta) {
76
- return _extends({}, getter(props, meta), userGetter(props, meta));
77
- };
78
- }
79
- return getter;
80
- };
81
- var getTableCellProps = function getTableCellProps(userGetter, getter) {
82
- if (getter === void 0) {
83
- getter = defaultGetter;
84
- }
85
- if (userGetter) {
86
- return function (props, meta) {
87
- return _extends({}, getter(props, meta), userGetter(props, meta));
88
- };
89
- }
90
- return getter;
91
- };
92
- var getTableElementInternalProps = function getTableElementInternalProps(internalProps, userGetter, getter) {
93
- if (getter === void 0) {
94
- getter = defaultGetter;
95
- }
96
- if (userGetter) {
97
- return function (props, meta) {
98
- return _extends({}, getter(_extends({}, props, internalProps), meta), userGetter(props, meta));
99
- };
100
- }
101
- return function (props, meta) {
102
- return getter(_extends({}, props, internalProps), meta);
103
- };
104
- };
105
-
106
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
107
- var loadingAnimation = /*#__PURE__*/keyframes(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n from {\n background-position-x: 0;\n }\n 50% {\n background-position-x: 100%;\n }\n 100% {\n background-position-x: 0;\n }\n"])));
108
- var TableLoading = /*#__PURE__*/styled.div(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n background: rgba(255, 255, 255, 0.8);\n transition: all 0.3s ease;\n z-index: -1;\n opacity: 0;\n pointer-events: none;\n\n ", "\n"])), function (props) {
109
- return props.isLoading && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n opacity: 1;\n z-index: 2;\n pointer-events: all;\n "])));
110
- });
111
- var TableLoadingInner = /*#__PURE__*/styled.div(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n display: block;\n text-align: center;\n width: 100%;\n top: 50%;\n left: 0;\n color: rgba(0, 0, 0, 0.6);\n transform: translateY(-52%);\n transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n"])));
112
- var TableWrapper = /*#__PURE__*/styled.div(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n overflow: hidden;\n\n &::before {\n bottom: 10px;\n content: '';\n opacity: 0;\n pointer-events: none;\n position: absolute;\n width: 10px;\n height: 100%;\n top: 0;\n left: -10px;\n box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2);\n transition: 0.3s opacity;\n }\n\n &::after {\n bottom: 10px;\n content: '';\n opacity: 0;\n pointer-events: none;\n width: 10px;\n height: 100%;\n position: absolute;\n top: 0;\n right: -10px;\n box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2);\n transition: 0.3s opacity;\n }\n\n &.shadow_left {\n &::before {\n opacity: 1 !important;\n }\n }\n\n &.shadow_right {\n &::after {\n opacity: 1 !important;\n }\n }\n"])));
113
- var TableRoot = /*#__PURE__*/styled.div(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: ", "px;\n position: relative;\n display: flex;\n flex-direction: column;\n border: 0;\n"])), fontNormal);
114
- var TableContent = /*#__PURE__*/styled.div(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n max-width: 100%;\n overflow-x: scroll;\n overflow-y: hidden;\n"])));
115
- var TableCore = /*#__PURE__*/styled.div(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: auto 1;\n display: flex;\n flex-direction: column;\n align-items: stretch;\n border-collapse: collapse;\n"])));
116
- var HeadCell = /*#__PURE__*/styled.div(_templateObject9 || (_templateObject9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n"])));
117
- var TD = /*#__PURE__*/styled.div(_templateObject0 || (_templateObject0 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n white-space: nowrap;\n text-overflow: ellipsis;\n line-height: 1.3rem;\n padding: 7px 4px;\n overflow: hidden;\n transition: width 0.3s ease 0s, min-width, padding, opacity;\n\n ", "\n"])), function (_ref) {
118
- var align = _ref.align;
119
- return align && css(_templateObject1 || (_templateObject1 = _taggedTemplateLiteralLoose(["\n text-align: ", ";\n "])), align);
120
- });
121
- var EmptyStateCell = /*#__PURE__*/styled.div(_templateObject10 || (_templateObject10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n height: ", "px;\n background: linear-gradient(to left, ", ", ", ", ", ");\n background-size: 200% 200%;\n animation: ", " 1.6s linear infinite;\n"])), spacing * 4, gray95, white, gray95, loadingAnimation);
122
- var TH = /*#__PURE__*/styled.div(_templateObject11 || (_templateObject11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0 4px;\n line-height: normal;\n position: relative;\n transition: box-shadow 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;\n color: rgb(0, 0, 0);\n font-weight: 500;\n outline: none;\n"])));
123
- var THead = /*#__PURE__*/styled.div(_templateObject12 || (_templateObject12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1 0 auto;\n display: flex;\n flex-direction: column;\n user-select: none;\n\n ", ", ", " {\n padding: 0 4px;\n line-height: normal;\n position: relative;\n transition: box-shadow 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n color: ", ";\n font-weight: 500;\n outline: none;\n }\n"])), TH, TD, black);
124
- var TRGroup = /*#__PURE__*/styled.div(_templateObject13 || (_templateObject13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex: 1 0 auto;\n box-shadow: inset 0 -1px 0 0 ", ";\n min-width: 100%;\n width: max-content;\n"])), gray95);
125
- var TR = /*#__PURE__*/styled.div(_templateObject14 || (_templateObject14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n -webkit-box-align: center;\n align-items: center;\n"])));
126
- var TBody = /*#__PURE__*/styled.div(_templateObject15 || (_templateObject15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-top: 1px solid ", ";\n margin-top: ", "px;\n min-width: 100%;\n width: max-content;\n"])), gray80, spacing * 2);
127
- var TFoot = /*#__PURE__*/styled.div(_templateObject16 || (_templateObject16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background: ", ";\n flex: 1 0 auto;\n display: flex;\n flex-direction: column;\n"])), gray95);
128
- var TResizer = /*#__PURE__*/styled.div(_templateObject17 || (_templateObject17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-block;\n position: absolute;\n right: 5px;\n top: 0;\n z-index: 1;\n touch-action: none;\n\n &:after {\n content: '\u2194';\n position: absolute;\n right: 0;\n top: 0;\n }\n"])));
129
-
130
- var FOOTER_PLACEMENT;
131
- (function (FOOTER_PLACEMENT) {
132
- FOOTER_PLACEMENT["TOP"] = "top";
133
- FOOTER_PLACEMENT["BOTTOM"] = "bottom";
134
- })(FOOTER_PLACEMENT || (FOOTER_PLACEMENT = {}));
135
-
136
- var useLoadingState = function useLoadingState(showLoadingState, loading, pageSize, columns, LoadingCellComponent) {
137
- var loadingColumns = useMemo(function () {
138
- return showLoadingState && loading ? columns.map(function (column) {
139
- var loadingColumn = _extends({}, column, {
140
- Cell: function Cell() {
141
- return React.createElement(LoadingCellComponent, null);
142
- }
143
- });
144
- return loadingColumn;
145
- }) : [];
146
- }, [columns, loading, showLoadingState]);
147
- var loadingData = useMemo(function () {
148
- if (showLoadingState && loading && columns && columns.length > 0) {
149
- var dataObject = {};
150
- var dataArray = [];
151
- for (var i = 0; i < columns.length; i += 1) {
152
- dataObject["empty_" + i] = '';
153
- }
154
- for (var _i = 0; _i < pageSize; _i += 1) {
155
- dataArray.push(dataObject);
156
- }
157
- return dataArray;
158
- }
159
- return [];
160
- }, [columns, loading, pageSize, showLoadingState]);
161
- return {
162
- // @ts-ignore
163
- loadingColumns: loadingColumns,
164
- loadingData: loadingData
165
- };
166
- };
167
-
168
- // @ts-nocheck
169
- var TABLE_SHADOW_CLASS_NAME = {
170
- LEFT: 'shadow_left',
171
- RIGHT: 'shadow_right'
172
- };
173
- function changeClassName(tableWrapperNode, newClassNameList) {
174
- var classList = tableWrapperNode.classList;
175
- classList.remove(TABLE_SHADOW_CLASS_NAME.LEFT, TABLE_SHADOW_CLASS_NAME.RIGHT);
176
- classList.add.apply(classList, newClassNameList);
177
- }
178
- function calculateNewClassNames(tableNode, tableWrapperNode) {
179
- if (!tableNode || !tableWrapperNode) {
180
- return;
181
- }
182
- var tableRect = tableNode.getBoundingClientRect();
183
- var tableWrapperRect = tableWrapperNode.getBoundingClientRect();
184
- var newClassName = [];
185
- var tableRectLeft = Math.floor(tableRect.left);
186
- var tableRectRight = Math.floor(tableRect.right);
187
- var tableWrapperRectLeft = Math.floor(tableWrapperRect.left);
188
- var tableWrapperRectRight = Math.floor(tableWrapperRect.right);
189
- if (tableRectLeft < tableWrapperRectLeft) {
190
- newClassName.push(TABLE_SHADOW_CLASS_NAME.LEFT);
191
- }
192
- if (tableRectRight > tableWrapperRectRight) {
193
- newClassName.push(TABLE_SHADOW_CLASS_NAME.RIGHT);
194
- }
195
- changeClassName(tableWrapperNode, newClassName);
196
- }
197
- var useTableShadow = (function (tableRef, tableWrapperRef) {
198
- useEffect(function () {
199
- var _tableRef$current;
200
- var ticking = false;
201
- function onMousewheel() {
202
- if (ticking) {
203
- return;
204
- }
205
- window.requestAnimationFrame(function () {
206
- calculateNewClassNames(tableRef.current, tableWrapperRef.current);
207
- ticking = false;
208
- });
209
- ticking = true;
210
- }
211
- calculateNewClassNames(tableRef.current, tableWrapperRef.current);
212
- tableRef === null || tableRef === void 0 ? void 0 : (_tableRef$current = tableRef.current) === null || _tableRef$current === void 0 ? void 0 : _tableRef$current.addEventListener('mousewheel', onMousewheel);
213
- window.addEventListener('resize', onMousewheel);
214
- return function () {
215
- var _tableRef$current2;
216
- tableRef === null || tableRef === void 0 ? void 0 : (_tableRef$current2 = tableRef.current) === null || _tableRef$current2 === void 0 ? void 0 : _tableRef$current2.removeEventListener('mousewheel', onMousewheel);
217
- window.removeEventListener('resize', onMousewheel);
218
- };
219
- }, [tableRef.current, tableWrapperRef.current]);
220
- });
221
-
222
- var _excluded = ["getTableProps", "headerGroups", "footerGroups", "setHiddenColumns", "rows", "prepareRow", "visibleColumns"],
223
- _excluded2 = ["key"],
224
- _excluded3 = ["key"],
225
- _excluded4 = ["key"],
226
- _excluded5 = ["key"],
227
- _excluded6 = ["key"],
228
- _excluded7 = ["key"],
229
- _excluded8 = ["key"],
230
- _excluded9 = ["key"],
231
- _excluded0 = ["key"],
232
- _excluded1 = ["key"];
233
- var TableRoot$1 = TableRoot;
234
- var TableWrapper$1 = TableWrapper;
235
- var TableContent$1 = TableContent;
236
- var HeadCell$1 = HeadCell;
237
- var TableLoading$1 = TableLoading;
238
- var TableLoadingInner$1 = TableLoadingInner;
239
- var TD$1 = TD;
240
- var TableCore$1 = TableCore;
241
- var THead$1 = THead;
242
- var TR$1 = TR;
243
- var TH$1 = TH;
244
- var TBody$1 = TBody;
245
- var TRGroup$1 = TRGroup;
246
- var TFoot$1 = TFoot;
247
- var EmptyStateCell$1 = EmptyStateCell;
248
- var TResizer$1 = TResizer;
249
- var isEnableRowSelectDefault = function isEnableRowSelectDefault() {
250
- return true;
251
- };
252
- var selectColumnPropsDefault = {};
253
- var getRowPrePropsDefault = function getRowPrePropsDefault() {
254
- return {};
255
- };
256
- var defaultProps = {
257
- hasDefaultPagination: false,
258
- isLoading: false,
259
- footerPlacement: [],
260
- loadingMessage: 'loading...',
261
- labelPerPage: 'Show rows',
262
- parentElementId: 'parent-element',
263
- tableContentId: '',
264
- showLoadingState: false,
265
- initialState: {},
266
- LoadingCellComponent: EmptyStateCell$1,
267
- getRowPreProps: getRowPrePropsDefault,
268
- isEnableRowSelect: isEnableRowSelectDefault,
269
- selectColumnProps: selectColumnPropsDefault,
270
- noDataMessage: ''
271
- };
272
- var disableSortRemove = true;
273
- var disableMultiSort = true;
274
- var disabledMultiRemove = true;
275
- var DEFAULT_PAGE_INDEX = 0;
276
- var DEFAULT_PAGE_SIZE = 10;
277
- function isFunction(reference) {
278
- return typeof reference === 'function';
279
- }
280
- function renderResizer(column) {
281
- if (column.isResizable) {
282
- return React.createElement(TResizer$1, Object.assign({}, column.getResizerProps(), {
283
- onClick: function onClick(e) {
284
- e.preventDefault();
285
- e.stopPropagation();
286
- }
287
- }));
288
- }
289
- return null;
290
- }
291
- function getHeadContent(column) {
292
- if (column.isSorted && column.isSortedDesc) {
293
- return React.createElement(HeadCell$1, null, column.render('Header'), React.createElement(ArrowUp, {
294
- size: Size.Small,
295
- color: Color.GrayDark
296
- }));
297
- }
298
- if (column.isSorted && !column.isSortedDesc) {
299
- return React.createElement(HeadCell$1, null, column.render('Header'), React.createElement(ArrowDown, {
300
- size: Size.Small,
301
- color: Color.GrayDark
302
- }));
303
- }
304
- return column.render('Header');
305
- }
306
- var Table = function Table(_ref) {
307
- var _controlledPagination;
308
- var columns = _ref.columns,
309
- data = _ref.data,
310
- totalItems = _ref.totalItems,
311
- fetchData = _ref.fetchData,
312
- controlledPagination = _ref.controlledPagination,
313
- _ref$initialState = _ref.initialState,
314
- initialState = _ref$initialState === void 0 ? defaultProps.initialState : _ref$initialState,
315
- _ref$isLoading = _ref.isLoading,
316
- isLoading = _ref$isLoading === void 0 ? defaultProps.isLoading : _ref$isLoading,
317
- _ref$loadingMessage = _ref.loadingMessage,
318
- loadingMessage = _ref$loadingMessage === void 0 ? defaultProps.loadingMessage : _ref$loadingMessage,
319
- _ref$labelPerPage = _ref.labelPerPage,
320
- labelPerPage = _ref$labelPerPage === void 0 ? defaultProps.labelPerPage : _ref$labelPerPage,
321
- _ref$footerPlacement = _ref.footerPlacement,
322
- footerPlacement = _ref$footerPlacement === void 0 ? defaultProps.footerPlacement : _ref$footerPlacement,
323
- onSortedChange = _ref.onSortedChange,
324
- _ref$hasDefaultPagina = _ref.hasDefaultPagination,
325
- hasDefaultPagination = _ref$hasDefaultPagina === void 0 ? defaultProps.hasDefaultPagination : _ref$hasDefaultPagina,
326
- onSelectRowsChange = _ref.onSelectRowsChange,
327
- _ref$parentElementId = _ref.parentElementId,
328
- parentElementId = _ref$parentElementId === void 0 ? defaultProps.parentElementId : _ref$parentElementId,
329
- _ref$tableContentId = _ref.tableContentId,
330
- tableContentId = _ref$tableContentId === void 0 ? defaultProps.tableContentId : _ref$tableContentId,
331
- _ref$LoadingCellCompo = _ref.LoadingCellComponent,
332
- LoadingCellComponent = _ref$LoadingCellCompo === void 0 ? defaultProps.LoadingCellComponent : _ref$LoadingCellCompo,
333
- PaginationComponent = _ref.PaginationComponent,
334
- _ref$getRowPreProps = _ref.getRowPreProps,
335
- getRowPreProps = _ref$getRowPreProps === void 0 ? defaultProps.getRowPreProps : _ref$getRowPreProps,
336
- getTableProps$1 = _ref.getTableProps,
337
- getHeaderGroupProps = _ref.getHeaderGroupProps,
338
- getHeaderProps = _ref.getHeaderProps,
339
- getRowProps = _ref.getRowProps,
340
- getCellProps = _ref.getCellProps,
341
- getFooterProps = _ref.getFooterProps,
342
- getFooterGroupProps = _ref.getFooterGroupProps,
343
- _ref$showLoadingState = _ref.showLoadingState,
344
- showLoadingState = _ref$showLoadingState === void 0 ? defaultProps.showLoadingState : _ref$showLoadingState,
345
- _ref$noDataMessage = _ref.noDataMessage,
346
- noDataMessage = _ref$noDataMessage === void 0 ? defaultProps.noDataMessage : _ref$noDataMessage,
347
- rowSubComponent = _ref.rowSubComponent,
348
- _ref$isEnableRowSelec = _ref.isEnableRowSelect,
349
- isEnableRowSelect = _ref$isEnableRowSelec === void 0 ? defaultProps.isEnableRowSelect : _ref$isEnableRowSelec,
350
- _ref$selectColumnProp = _ref.selectColumnProps,
351
- selectColumnProps = _ref$selectColumnProp === void 0 ? defaultProps.selectColumnProps : _ref$selectColumnProp;
352
- var memoColumns = useMemo(function () {
353
- return columns;
354
- }, [columns]);
355
- var _useLoadingState = useLoadingState(showLoadingState, isLoading, (_controlledPagination = controlledPagination === null || controlledPagination === void 0 ? void 0 : controlledPagination.pageSize) !== null && _controlledPagination !== void 0 ? _controlledPagination : DEFAULT_PAGE_SIZE, memoColumns, LoadingCellComponent),
356
- loadingColumns = _useLoadingState.loadingColumns,
357
- loadingData = _useLoadingState.loadingData;
358
- var showLoading = showLoadingState && isLoading;
359
- var hasSelectedRowsAbility = onSelectRowsChange && isFunction(onSelectRowsChange);
360
- var hasManualSortBy = onSortedChange && isFunction(onSortedChange);
361
- var hasControlledPagination = fetchData && controlledPagination && Object.keys(controlledPagination).length > 0;
362
- var options = {
363
- columns: showLoading ? loadingColumns : memoColumns,
364
- data: showLoading ? loadingData : data,
365
- initialState: initialState,
366
- disableSortRemove: disableSortRemove,
367
- disableMultiSort: disableMultiSort,
368
- disabledMultiRemove: disabledMultiRemove
369
- };
370
- if (hasManualSortBy) {
371
- options.manualSortBy = true;
372
- }
373
- if (hasControlledPagination) {
374
- var _controlledPagination2, _controlledPagination3;
375
- if (typeof (controlledPagination === null || controlledPagination === void 0 ? void 0 : controlledPagination.pageCount) === 'undefined') {
376
- throw new Error('You have to pass pageCount in controlledPagination data');
377
- }
378
- options.initialState = _extends({}, options.initialState, {
379
- pageIndex: (_controlledPagination2 = controlledPagination.pageIndex) !== null && _controlledPagination2 !== void 0 ? _controlledPagination2 : DEFAULT_PAGE_INDEX,
380
- pageSize: (_controlledPagination3 = controlledPagination.pageSize) !== null && _controlledPagination3 !== void 0 ? _controlledPagination3 : DEFAULT_PAGE_SIZE
381
- });
382
- options.autoResetPage = true;
383
- options.manualPagination = true;
384
- options.pageCount = controlledPagination.pageCount;
385
- }
386
- var useSelect = function useSelect(hooks) {
387
- if (!hasSelectedRowsAbility) {
388
- return;
389
- }
390
- var newColumn = _extends({
391
- id: 'selection',
392
- disableSortBy: true,
393
- Header: function Header(instance) {
394
- var getToggleAllPageRowsSelectedProps = instance.getToggleAllPageRowsSelectedProps,
395
- toggleAllPageRowsSelected = instance.toggleAllPageRowsSelected,
396
- page = instance.page;
397
- var isDisabledAllRows = page.map(function (_ref2) {
398
- var original = _ref2.original;
399
- return original;
400
- }).filter(isEnableRowSelect).length === 0;
401
- return React.createElement(Checkbox, {
402
- elementId: "all",
403
- onChange: toggleAllPageRowsSelected,
404
- isChecked: getToggleAllPageRowsSelectedProps().checked,
405
- isDisabled: isDisabledAllRows
406
- });
407
- },
408
- Cell: function Cell(_ref3) {
409
- var row = _ref3.row;
410
- var id = row.id,
411
- original = row.original,
412
- toggleRowSelected = row.toggleRowSelected,
413
- getToggleRowSelectedProps = row.getToggleRowSelectedProps;
414
- var elementId = Number.isInteger(original.id) ? original.id : id;
415
- var isEnabled = isEnableRowSelect(row.original);
416
- return React.createElement(Checkbox, {
417
- elementId: elementId,
418
- onChange: toggleRowSelected,
419
- isDisabled: !isEnabled,
420
- isChecked: isEnabled && getToggleRowSelectedProps().checked
421
- });
422
- }
423
- }, selectColumnProps);
424
- // @ts-ignore
425
- hooks.visibleColumns.push(function (tableColumns) {
426
- return [newColumn].concat(tableColumns);
427
- });
428
- };
429
- var _useTable = useTable(options, useFlexLayout, useSortBy, useExpanded, usePagination, useRowSelect, useSelect, useResizeColumns),
430
- _getTableProps = _useTable.getTableProps,
431
- headerGroups = _useTable.headerGroups,
432
- footerGroups = _useTable.footerGroups,
433
- setHiddenColumns = _useTable.setHiddenColumns,
434
- rows = _useTable.rows,
435
- prepareRow = _useTable.prepareRow,
436
- visibleColumns = _useTable.visibleColumns,
437
- rest = _objectWithoutPropertiesLoose(_useTable, _excluded);
438
- var selectedFlatRows = rest.selectedFlatRows,
439
- setSortBy = rest.setSortBy,
440
- page = rest.page,
441
- canPreviousPage = rest.canPreviousPage,
442
- canNextPage = rest.canNextPage,
443
- pageCount = rest.pageCount,
444
- gotoPage = rest.gotoPage,
445
- nextPage = rest.nextPage,
446
- previousPage = rest.previousPage,
447
- setPageSize = rest.setPageSize,
448
- _rest$state = rest.state,
449
- selectedRowIds = _rest$state.selectedRowIds,
450
- pageIndex = _rest$state.pageIndex,
451
- pageSize = _rest$state.pageSize;
452
- var tableRef = useRef(null);
453
- var tableWrapperRef = useRef(null);
454
- useTableShadow(tableRef, tableWrapperRef);
455
- useEffect(function () {
456
- if (!(initialState !== null && initialState !== void 0 && initialState.hiddenColumns)) {
457
- return;
458
- }
459
- setHiddenColumns(initialState.hiddenColumns);
460
- }, [initialState === null || initialState === void 0 ? void 0 : initialState.hiddenColumns]);
461
- useEffect(function () {
462
- if (hasSelectedRowsAbility) {
463
- onSelectRowsChange === null || onSelectRowsChange === void 0 ? void 0 : onSelectRowsChange(selectedFlatRows === null || selectedFlatRows === void 0 ? void 0 : selectedFlatRows.map(function (row) {
464
- return row.original;
465
- }).filter(isEnableRowSelect));
466
- }
467
- }, [selectedRowIds]);
468
- var pagination = null;
469
- if (hasDefaultPagination && hasControlledPagination) {
470
- throw new Error('You have to pass either hasDefaultPagination true boolean prop or ' + 'pass fetchData callback and controlledPagination data');
471
- }
472
- if (hasControlledPagination || hasDefaultPagination) {
473
- var paginationData = {
474
- setPageSize: setPageSize,
475
- gotoPage: gotoPage,
476
- canNextPage: canNextPage,
477
- canPreviousPage: canPreviousPage,
478
- parentElementId: parentElementId,
479
- labelPerPage: labelPerPage,
480
- pageIndex: pageIndex,
481
- previousPageHandler: previousPage,
482
- nextPageHandler: nextPage,
483
- totalPages: pageCount,
484
- perPage: pageSize,
485
- totalItems: totalItems !== null && totalItems !== void 0 ? totalItems : data.length
486
- };
487
- if (hasControlledPagination && controlledPagination) {
488
- paginationData.canNextPage = controlledPagination.pageIndex + 1 !== paginationData.totalPages;
489
- paginationData.canPreviousPage = controlledPagination.pageIndex !== 0;
490
- paginationData.pageIndex = controlledPagination.pageIndex;
491
- paginationData.perPage = controlledPagination.pageSize;
492
- paginationData.setPageSize = function (newPageSize) {
493
- fetchData === null || fetchData === void 0 ? void 0 : fetchData({
494
- pageIndex: paginationData.pageIndex,
495
- pageSize: newPageSize
496
- });
497
- };
498
- paginationData.gotoPage = function (newPageIndex) {
499
- fetchData === null || fetchData === void 0 ? void 0 : fetchData({
500
- pageIndex: newPageIndex,
501
- pageSize: paginationData.perPage
502
- });
503
- };
504
- paginationData.nextPageHandler = function () {
505
- var newPageIndex = paginationData.pageIndex + 1;
506
- paginationData.gotoPage(newPageIndex);
507
- };
508
- paginationData.previousPageHandler = function () {
509
- var newPageIndex = paginationData.pageIndex - 1;
510
- paginationData.gotoPage(newPageIndex);
511
- };
512
- if (controlledPagination !== null && controlledPagination !== void 0 && controlledPagination.paginationAmount) {
513
- paginationData.paginationAmount = controlledPagination.paginationAmount;
514
- }
515
- }
516
- pagination = React.createElement(PaginationComponent, Object.assign({}, paginationData));
517
- }
518
- function extendSortByProps(column) {
519
- var headerProps = column.getSortByToggleProps && column.getSortByToggleProps();
520
- headerProps === null || headerProps === void 0 ? true : delete headerProps.style;
521
- if (hasManualSortBy && column.canSort && headerProps) {
522
- headerProps.onClick = function () {
523
- onSortedChange === null || onSortedChange === void 0 ? void 0 : onSortedChange(column.id, Boolean(column.isSortedDesc));
524
- setSortBy([{
525
- id: column.id,
526
- desc: !column.isSortedDesc
527
- }]);
528
- };
529
- }
530
- return headerProps;
531
- }
532
- var tBodyTr = hasControlledPagination || hasDefaultPagination ? page : rows;
533
- return React.createElement(TableRoot$1, {
534
- className: "table-root"
535
- }, React.createElement(TableLoading$1, {
536
- isLoading: !showLoadingState && isLoading,
537
- className: "table-loading"
538
- }, React.createElement(TableLoadingInner$1, null, loadingMessage)), React.createElement(TableWrapper$1, {
539
- ref: tableWrapperRef,
540
- className: "table-wrapper"
541
- }, React.createElement(TableContent$1, {
542
- id: tableContentId,
543
- className: "table-content"
544
- }, React.createElement(TableCore$1, Object.assign({}, _getTableProps(getTableProps(getTableProps$1)), {
545
- ref: tableRef
546
- }), React.createElement(THead$1, {
547
- className: "table-head",
548
- "data-role": "table-head"
549
- }, headerGroups.map(function (headerGroup) {
550
- var _headerGroup$getHeade = headerGroup.getHeaderGroupProps(getTableElementProps(getHeaderGroupProps)),
551
- headerGroupKey = _headerGroup$getHeade.key,
552
- headerGroupProps = _objectWithoutPropertiesLoose(_headerGroup$getHeade, _excluded2);
553
- return React.createElement(TR$1, Object.assign({
554
- key: headerGroupKey
555
- }, headerGroupProps), headerGroup.headers.map(function (column) {
556
- var headerProps = extendSortByProps(column);
557
- var _column$getHeaderProp = column.getHeaderProps(getTableElementInternalProps(headerProps, getHeaderProps, mainCellGetter)),
558
- columnKey = _column$getHeaderProp.key,
559
- thProps = _objectWithoutPropertiesLoose(_column$getHeaderProp, _excluded3);
560
- return React.createElement(TH$1, Object.assign({
561
- key: columnKey
562
- }, thProps), getHeadContent(column), renderResizer(column));
563
- }));
564
- })), footerPlacement.includes(FOOTER_PLACEMENT.TOP) && React.createElement(TFoot$1, {
565
- className: "table-footer-top",
566
- "data-role": "table-footer-top"
567
- }, footerGroups.map(function (group) {
568
- var _group$getFooterGroup = group.getFooterGroupProps(getTableElementProps(getFooterGroupProps)),
569
- footerTopGroupKey = _group$getFooterGroup.key,
570
- footerTopGroupProps = _objectWithoutPropertiesLoose(_group$getFooterGroup, _excluded4);
571
- return React.createElement(TR$1, Object.assign({
572
- key: footerTopGroupKey
573
- }, footerTopGroupProps), group.headers.map(function (column) {
574
- var _column$getFooterProp = column.getFooterProps(getTableElementProps(getFooterProps, mainCellGetter)),
575
- footerTopColumnKey = _column$getFooterProp.key,
576
- footerTopTdProps = _objectWithoutPropertiesLoose(_column$getFooterProp, _excluded5);
577
- return React.createElement(TD$1, Object.assign({
578
- key: footerTopColumnKey
579
- }, footerTopTdProps), column.render('Footer'));
580
- }));
581
- })), React.createElement(TBody$1, {
582
- className: "table-body",
583
- "data-role": "table-body"
584
- }, tBodyTr.map(function (row) {
585
- prepareRow(row);
586
- var _getRowPreProps = getRowPreProps(row),
587
- isDelimiterTd = _getRowPreProps.isDelimiterTd;
588
- if (isDelimiterTd) {
589
- var cell = row.cells[0].render('Cell');
590
- var _row$getRowProps = row.getRowProps(getTableRowProps(getRowProps)),
591
- delimiterRowKey = _row$getRowProps.key,
592
- delimiterRowProps = _objectWithoutPropertiesLoose(_row$getRowProps, _excluded6);
593
- var _row$cells$0$getCellP = row.cells[0].getCellProps(getTableCellProps(getCellProps, cellGetter)),
594
- delimiterCellKey = _row$cells$0$getCellP.key,
595
- delimiterCellProps = _objectWithoutPropertiesLoose(_row$cells$0$getCellP, _excluded7);
596
- return React.createElement(React.Fragment, {
597
- key: "group_" + row.index
598
- }, React.createElement(TRGroup$1, null, React.createElement(TR$1, Object.assign({
599
- key: delimiterRowKey
600
- }, delimiterRowProps), React.createElement(TD$1, Object.assign({
601
- key: delimiterCellKey,
602
- colSpan: visibleColumns.length
603
- }, delimiterCellProps), React.createElement("strong", null, cell)))), (row === null || row === void 0 ? void 0 : row.isExpanded) && rowSubComponent && rowSubComponent(row));
604
- }
605
- var _row$getRowProps2 = row.getRowProps(getTableRowProps(getRowProps)),
606
- rowKey = _row$getRowProps2.key,
607
- rowProps = _objectWithoutPropertiesLoose(_row$getRowProps2, _excluded8);
608
- return React.createElement(React.Fragment, {
609
- key: "group_" + row.index
610
- }, React.createElement(TRGroup$1, null, React.createElement(TR$1, Object.assign({
611
- key: rowKey
612
- }, rowProps), row.cells.map(function (cell) {
613
- var _cell$getCellProps = cell.getCellProps(getTableCellProps(getCellProps, cellGetter)),
614
- cellKey = _cell$getCellProps.key,
615
- cellProps = _objectWithoutPropertiesLoose(_cell$getCellProps, _excluded9);
616
- return React.createElement(TD$1, Object.assign({
617
- key: cellKey
618
- }, cellProps), cell.render('Cell'));
619
- }))), (row === null || row === void 0 ? void 0 : row.isExpanded) && rowSubComponent && rowSubComponent(row));
620
- })), footerPlacement.includes(FOOTER_PLACEMENT.BOTTOM) && React.createElement(TFoot$1, {
621
- className: "table-footer-bottom",
622
- "data-role": "table-footer-bottom"
623
- }, footerGroups.map(function (group) {
624
- var _group$getFooterGroup2 = group.getFooterGroupProps(getTableElementProps(getFooterGroupProps)),
625
- footerBottomGroupKey = _group$getFooterGroup2.key,
626
- footerBottomGroupProps = _objectWithoutPropertiesLoose(_group$getFooterGroup2, _excluded0);
627
- return React.createElement(TR$1, Object.assign({
628
- key: footerBottomGroupKey
629
- }, footerBottomGroupProps), group.headers.map(function (column) {
630
- var _column$getFooterProp2 = column.getFooterProps(getTableElementProps(getFooterProps, mainCellGetter)),
631
- footerBottomColumnKey = _column$getFooterProp2.key,
632
- footerBottomTdProps = _objectWithoutPropertiesLoose(_column$getFooterProp2, _excluded1);
633
- return React.createElement(TD$1, Object.assign({
634
- key: footerBottomColumnKey
635
- }, footerBottomTdProps), column.render('Footer'));
636
- }));
637
- }))))), !isLoading && !data.length && noDataMessage, pagination);
638
- };
639
-
640
- export { Table, defaultProps };
641
- //# sourceMappingURL=table.esm.js.map