@atlaskit/dynamic-table 14.20.2 → 15.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/CHANGELOG.md +18 -0
- package/dist/cjs/components/stateless.js +206 -288
- package/dist/es2019/components/stateless.js +179 -256
- package/dist/esm/components/stateless.js +207 -290
- package/dist/types/components/stateless.d.ts +4 -68
- package/dist/types/styled/dynamic-table.d.ts +1 -1
- package/dist/types/styled/loading-container-advanced.d.ts +2 -2
- package/dist/types/styled/table-head.d.ts +1 -1
- package/dist/types-ts4.5/components/stateless.d.ts +4 -68
- package/dist/types-ts4.5/styled/dynamic-table.d.ts +1 -1
- package/dist/types-ts4.5/styled/loading-container-advanced.d.ts +2 -2
- package/dist/types-ts4.5/styled/table-head.d.ts +1 -1
- package/package.json +4 -8
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,23 @@
|
|
|
1
1
|
# @atlaskit/dynamic-table
|
|
2
2
|
|
|
3
|
+
## 15.0.0
|
|
4
|
+
|
|
5
|
+
### Major Changes
|
|
6
|
+
|
|
7
|
+
- [#137785](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/137785)
|
|
8
|
+
[`5fee01201ba15`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5fee01201ba15) -
|
|
9
|
+
Removes usage of legacy analytics-next APIs internally in favor of the new APIs which do not
|
|
10
|
+
depend on legacy react context. This should not require any changes to consumers of the package,
|
|
11
|
+
however behaviors of the new APIs may result in different behavior in some cases.
|
|
12
|
+
|
|
13
|
+
## 14.20.3
|
|
14
|
+
|
|
15
|
+
### Patch Changes
|
|
16
|
+
|
|
17
|
+
- [#137036](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/137036)
|
|
18
|
+
[`a4bc59c83b1d9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a4bc59c83b1d9) -
|
|
19
|
+
Internally refactors stateless variant from class component to function component
|
|
20
|
+
|
|
3
21
|
## 14.20.2
|
|
4
22
|
|
|
5
23
|
### Patch Changes
|
|
@@ -5,17 +5,10 @@ var _typeof = require("@babel/runtime/helpers/typeof");
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
|
-
exports.default =
|
|
9
|
-
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
10
|
-
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
8
|
+
exports.default = void 0;
|
|
11
9
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
12
|
-
var
|
|
13
|
-
var
|
|
14
|
-
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
|
|
15
|
-
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
16
|
-
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
|
|
17
|
-
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
|
|
18
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
10
|
+
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
11
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
19
12
|
var _react = _interopRequireWildcard(require("react"));
|
|
20
13
|
var _analyticsNext = require("@atlaskit/analytics-next");
|
|
21
14
|
var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
|
|
@@ -32,10 +25,6 @@ var _tableHead = _interopRequireDefault(require("./table-head"));
|
|
|
32
25
|
var _excluded = ["isRankable", "isRanking", "onRankStart", "onRankEnd", "isRankingDisabled"];
|
|
33
26
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
34
27
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
35
|
-
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
|
|
36
|
-
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
|
|
37
|
-
var packageName = "@atlaskit/dynamic-table";
|
|
38
|
-
var packageVersion = "14.20.2";
|
|
39
28
|
function toggleSortOrder(currentSortOrder) {
|
|
40
29
|
switch (currentSortOrder) {
|
|
41
30
|
case _constants.DESC:
|
|
@@ -46,265 +35,226 @@ function toggleSortOrder(currentSortOrder) {
|
|
|
46
35
|
return currentSortOrder;
|
|
47
36
|
}
|
|
48
37
|
}
|
|
49
|
-
var DynamicTable =
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
var
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
rowsPerPage = _this$props2.rowsPerPage,
|
|
119
|
-
loadingSpinnerSize = _this$props2.loadingSpinnerSize;
|
|
120
|
-
if (loadingSpinnerSize) {
|
|
121
|
-
return loadingSpinnerSize;
|
|
38
|
+
var DynamicTable = function DynamicTable(_ref) {
|
|
39
|
+
var caption = _ref.caption,
|
|
40
|
+
head = _ref.head,
|
|
41
|
+
highlightedRowIndex = _ref.highlightedRowIndex,
|
|
42
|
+
rows = _ref.rows,
|
|
43
|
+
sortKey = _ref.sortKey,
|
|
44
|
+
sortOrder = _ref.sortOrder,
|
|
45
|
+
loadingLabel = _ref.loadingLabel,
|
|
46
|
+
onPageRowsUpdate = _ref.onPageRowsUpdate,
|
|
47
|
+
testId = _ref.testId,
|
|
48
|
+
passedDownTotalRows = _ref.totalRows,
|
|
49
|
+
label = _ref.label,
|
|
50
|
+
_ref$isLoading = _ref.isLoading,
|
|
51
|
+
isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
|
|
52
|
+
_ref$isFixedSize = _ref.isFixedSize,
|
|
53
|
+
isFixedSize = _ref$isFixedSize === void 0 ? false : _ref$isFixedSize,
|
|
54
|
+
_ref$rowsPerPage = _ref.rowsPerPage,
|
|
55
|
+
rowsPerPage = _ref$rowsPerPage === void 0 ? Infinity : _ref$rowsPerPage,
|
|
56
|
+
_ref$onSetPage = _ref.onSetPage,
|
|
57
|
+
onSetPage = _ref$onSetPage === void 0 ? _noop.default : _ref$onSetPage,
|
|
58
|
+
_ref$onSort = _ref.onSort,
|
|
59
|
+
providedOnSort = _ref$onSort === void 0 ? _noop.default : _ref$onSort,
|
|
60
|
+
_ref$page = _ref.page,
|
|
61
|
+
page = _ref$page === void 0 ? 1 : _ref$page,
|
|
62
|
+
emptyView = _ref.emptyView,
|
|
63
|
+
_ref$isRankable = _ref.isRankable,
|
|
64
|
+
isRankable = _ref$isRankable === void 0 ? false : _ref$isRankable,
|
|
65
|
+
_ref$isRankingDisable = _ref.isRankingDisabled,
|
|
66
|
+
isRankingDisabled = _ref$isRankingDisable === void 0 ? false : _ref$isRankingDisable,
|
|
67
|
+
_ref$onRankStart = _ref.onRankStart,
|
|
68
|
+
onRankStart = _ref$onRankStart === void 0 ? _noop.default : _ref$onRankStart,
|
|
69
|
+
_ref$onRankEnd = _ref.onRankEnd,
|
|
70
|
+
providedOnRankEnd = _ref$onRankEnd === void 0 ? _noop.default : _ref$onRankEnd,
|
|
71
|
+
loadingSpinnerSize = _ref.loadingSpinnerSize,
|
|
72
|
+
_ref$paginationi18n = _ref.paginationi18n,
|
|
73
|
+
paginationi18n = _ref$paginationi18n === void 0 ? {
|
|
74
|
+
prev: 'Previous',
|
|
75
|
+
next: 'Next',
|
|
76
|
+
label: 'Pagination',
|
|
77
|
+
pageLabel: 'Page'
|
|
78
|
+
} : _ref$paginationi18n;
|
|
79
|
+
var _useState = (0, _react.useState)(false),
|
|
80
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
81
|
+
isRanking = _useState2[0],
|
|
82
|
+
setIsRanking = _useState2[1];
|
|
83
|
+
var tableBodyRef = (0, _react.useRef)(null);
|
|
84
|
+
var onSort = (0, _analyticsNext.usePlatformLeafEventHandler)({
|
|
85
|
+
fn: providedOnSort,
|
|
86
|
+
action: 'sorted',
|
|
87
|
+
componentName: 'dynamicTable',
|
|
88
|
+
packageName: "@atlaskit/dynamic-table",
|
|
89
|
+
packageVersion: "15.0.0"
|
|
90
|
+
});
|
|
91
|
+
var onRankEnd = (0, _analyticsNext.usePlatformLeafEventHandler)({
|
|
92
|
+
fn: providedOnRankEnd,
|
|
93
|
+
action: 'ranked',
|
|
94
|
+
componentName: 'dynamicTable',
|
|
95
|
+
packageName: "@atlaskit/dynamic-table",
|
|
96
|
+
packageVersion: "15.0.0"
|
|
97
|
+
});
|
|
98
|
+
(0, _react.useEffect)(function () {
|
|
99
|
+
(0, _helpers.validateSortKey)(sortKey, head);
|
|
100
|
+
(0, _helpers.assertIsSortable)(head);
|
|
101
|
+
}, [sortKey, head]);
|
|
102
|
+
var onSortHandler = function onSortHandler(item) {
|
|
103
|
+
return function () {
|
|
104
|
+
var key = item.key;
|
|
105
|
+
if (!key) {
|
|
106
|
+
return;
|
|
122
107
|
}
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
isLoading = _this$props3.isLoading,
|
|
129
|
-
testId = _this$props3.testId;
|
|
130
|
-
if (isLoading) {
|
|
131
|
-
return /*#__PURE__*/_react.default.createElement(_emptyBody.EmptyViewWithFixedHeight, {
|
|
132
|
-
testId: testId
|
|
108
|
+
if (onSort && isRankable && key === sortKey && sortOrder === _constants.DESC) {
|
|
109
|
+
onSort({
|
|
110
|
+
key: null,
|
|
111
|
+
sortOrder: null,
|
|
112
|
+
item: item
|
|
133
113
|
});
|
|
114
|
+
return;
|
|
134
115
|
}
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
key: "UNSAFE_componentWillMount",
|
|
143
|
-
value: function UNSAFE_componentWillMount() {
|
|
144
|
-
(0, _helpers.validateSortKey)(this.props.sortKey, this.props.head);
|
|
145
|
-
(0, _helpers.assertIsSortable)(this.props.head);
|
|
146
|
-
}
|
|
147
|
-
}, {
|
|
148
|
-
key: "UNSAFE_componentWillReceiveProps",
|
|
149
|
-
value: function UNSAFE_componentWillReceiveProps(nextProps) {
|
|
150
|
-
if (this.props.sortKey !== nextProps.sortKey || this.props.head !== nextProps.head) {
|
|
151
|
-
(0, _helpers.validateSortKey)(nextProps.sortKey, nextProps.head);
|
|
152
|
-
}
|
|
153
|
-
if (this.props.head !== nextProps.head) {
|
|
154
|
-
(0, _helpers.assertIsSortable)(nextProps.head);
|
|
116
|
+
var sortOrderFormatted = key !== sortKey ? _constants.ASC : toggleSortOrder(sortOrder);
|
|
117
|
+
if (onSort) {
|
|
118
|
+
onSort({
|
|
119
|
+
key: key,
|
|
120
|
+
item: item,
|
|
121
|
+
sortOrder: sortOrderFormatted
|
|
122
|
+
});
|
|
155
123
|
}
|
|
124
|
+
};
|
|
125
|
+
};
|
|
126
|
+
var onSetPageHandler = function onSetPageHandler(page, event) {
|
|
127
|
+
onSetPage(page, event);
|
|
128
|
+
};
|
|
129
|
+
var onRankStartHandler = function onRankStartHandler(params) {
|
|
130
|
+
setIsRanking(true);
|
|
131
|
+
onRankStart(params);
|
|
132
|
+
};
|
|
133
|
+
var onRankEndHandler = function onRankEndHandler(params) {
|
|
134
|
+
setIsRanking(false);
|
|
135
|
+
onRankEnd(params);
|
|
136
|
+
};
|
|
137
|
+
var getSpinnerSize = function getSpinnerSize() {
|
|
138
|
+
if (loadingSpinnerSize) {
|
|
139
|
+
return loadingSpinnerSize;
|
|
156
140
|
}
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
caption = _this$props4.caption,
|
|
163
|
-
head = _this$props4.head,
|
|
164
|
-
highlightedRowIndex = _this$props4.highlightedRowIndex,
|
|
165
|
-
isFixedSize = _this$props4.isFixedSize,
|
|
166
|
-
page = _this$props4.page,
|
|
167
|
-
rows = _this$props4.rows,
|
|
168
|
-
rowsPerPage = _this$props4.rowsPerPage,
|
|
169
|
-
sortKey = _this$props4.sortKey,
|
|
170
|
-
sortOrder = _this$props4.sortOrder,
|
|
171
|
-
isLoading = _this$props4.isLoading,
|
|
172
|
-
loadingLabel = _this$props4.loadingLabel,
|
|
173
|
-
isRankable = _this$props4.isRankable,
|
|
174
|
-
isRankingDisabled = _this$props4.isRankingDisabled,
|
|
175
|
-
paginationi18n = _this$props4.paginationi18n,
|
|
176
|
-
onPageRowsUpdate = _this$props4.onPageRowsUpdate,
|
|
177
|
-
testId = _this$props4.testId,
|
|
178
|
-
passedDownTotalRows = _this$props4.totalRows,
|
|
179
|
-
label = _this$props4.label;
|
|
180
|
-
var rowsLength = rows && rows.length;
|
|
181
|
-
var totalPages;
|
|
182
|
-
// set a flag to denote the dynamic table might get only one page of data
|
|
183
|
-
// for paginated data
|
|
184
|
-
var isTotalPagesControlledExternally = false;
|
|
185
|
-
if (passedDownTotalRows && Number.isInteger(passedDownTotalRows) && rowsPerPage && rowsLength && rowsLength <= passedDownTotalRows) {
|
|
186
|
-
/**
|
|
187
|
-
* If total number of rows / records have been passed down as prop
|
|
188
|
-
* Then table is being fed paginated data from server or other sources
|
|
189
|
-
* In this case, we want to respect information passed down by server or external source
|
|
190
|
-
* Rather than relying on our computation based on number of rows
|
|
191
|
-
*/
|
|
192
|
-
totalPages = Math.ceil(passedDownTotalRows / rowsPerPage);
|
|
193
|
-
isTotalPagesControlledExternally = true;
|
|
194
|
-
} else {
|
|
195
|
-
totalPages = rowsLength && rowsPerPage ? Math.ceil(rowsLength / rowsPerPage) : 0;
|
|
196
|
-
}
|
|
197
|
-
totalPages = totalPages < 1 ? 1 : totalPages;
|
|
198
|
-
var getPageNumber = page > totalPages ? totalPages : page; // page! required, because typescript can't yet see defaultProps to know that this won't be undefined
|
|
199
|
-
|
|
200
|
-
var bodyProps = {
|
|
201
|
-
highlightedRowIndex: highlightedRowIndex,
|
|
202
|
-
rows: rows,
|
|
203
|
-
head: head,
|
|
204
|
-
sortKey: sortKey,
|
|
205
|
-
sortOrder: sortOrder,
|
|
206
|
-
rowsPerPage: rowsPerPage,
|
|
207
|
-
page: getPageNumber,
|
|
208
|
-
isFixedSize: isFixedSize || false,
|
|
209
|
-
onPageRowsUpdate: onPageRowsUpdate,
|
|
210
|
-
isTotalPagesControlledExternally: isTotalPagesControlledExternally,
|
|
211
|
-
ref: this.tableBody,
|
|
141
|
+
return (0, _helpers.getPageRows)(rows || [], page, rowsPerPage).length > 2 ? _constants.LARGE : _constants.SMALL;
|
|
142
|
+
};
|
|
143
|
+
var renderEmptyBody = function renderEmptyBody() {
|
|
144
|
+
if (isLoading) {
|
|
145
|
+
return /*#__PURE__*/_react.default.createElement(_emptyBody.EmptyViewWithFixedHeight, {
|
|
212
146
|
testId: testId
|
|
213
|
-
};
|
|
214
|
-
var rowsExist = !!rowsLength;
|
|
215
|
-
var spinnerSize = this.getSpinnerSize();
|
|
216
|
-
var emptyBody = this.renderEmptyBody();
|
|
217
|
-
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_loadingContainerAdvanced.default, {
|
|
218
|
-
isLoading: isLoading && rowsExist,
|
|
219
|
-
spinnerSize: spinnerSize,
|
|
220
|
-
targetRef: function targetRef() {
|
|
221
|
-
return _this2.tableBody.current;
|
|
222
|
-
},
|
|
223
|
-
testId: testId,
|
|
224
|
-
loadingLabel: loadingLabel
|
|
225
|
-
}, /*#__PURE__*/_react.default.createElement(_dynamicTable.Table, {
|
|
226
|
-
isFixedSize: isFixedSize,
|
|
227
|
-
"aria-label": label,
|
|
228
|
-
hasDataRow: rowsExist,
|
|
229
|
-
testId: testId,
|
|
230
|
-
isLoading: isLoading
|
|
231
|
-
}, !!caption && /*#__PURE__*/_react.default.createElement(_dynamicTable.Caption, null, caption), head && /*#__PURE__*/_react.default.createElement(_tableHead.default, {
|
|
232
|
-
head: head,
|
|
233
|
-
onSort: this.onSortHandler,
|
|
234
|
-
sortKey: sortKey,
|
|
235
|
-
sortOrder: sortOrder,
|
|
236
|
-
isRanking: this.state.isRanking,
|
|
237
|
-
isRankable: isRankable,
|
|
238
|
-
testId: testId
|
|
239
|
-
}), rowsExist && /*#__PURE__*/_react.default.createElement(TableBody, (0, _extends2.default)({}, bodyProps, {
|
|
240
|
-
isRankable: this.props.isRankable,
|
|
241
|
-
isRanking: this.state.isRanking,
|
|
242
|
-
onRankStart: this.onRankStartHandler,
|
|
243
|
-
onRankEnd: this.onRankEndHandler,
|
|
244
|
-
isRankingDisabled: isRankingDisabled || isLoading || false
|
|
245
|
-
})))), totalPages <= 1 ? null :
|
|
246
|
-
/*#__PURE__*/
|
|
247
|
-
// only show pagination if there's MORE than 1 page
|
|
248
|
-
_react.default.createElement(_dynamicTable.PaginationWrapper, {
|
|
249
|
-
testId: testId
|
|
250
|
-
}, /*#__PURE__*/_react.default.createElement(_managedPagination.default, {
|
|
251
|
-
value: getPageNumber,
|
|
252
|
-
onChange: this.onSetPageHandler,
|
|
253
|
-
total: totalPages,
|
|
254
|
-
i18n: paginationi18n,
|
|
255
|
-
isDisabled: isLoading,
|
|
256
|
-
testId: testId
|
|
257
|
-
})), !rowsExist && emptyBody && /*#__PURE__*/_react.default.createElement(_loadingContainer.default, {
|
|
258
|
-
isLoading: isLoading,
|
|
259
|
-
spinnerSize: _constants.LARGE,
|
|
260
|
-
testId: testId,
|
|
261
|
-
loadingLabel: loadingLabel
|
|
262
|
-
}, emptyBody));
|
|
147
|
+
});
|
|
263
148
|
}
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
}
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
149
|
+
return emptyView && /*#__PURE__*/_react.default.createElement(_emptyBody.EmptyViewContainer, {
|
|
150
|
+
testId: testId
|
|
151
|
+
}, emptyView);
|
|
152
|
+
};
|
|
153
|
+
var rowsLength = rows && rows.length;
|
|
154
|
+
var totalPages;
|
|
155
|
+
// set a flag to denote the dynamic table might get only one page of data
|
|
156
|
+
// for paginated data
|
|
157
|
+
var isTotalPagesControlledExternally = false;
|
|
158
|
+
if (passedDownTotalRows && Number.isInteger(passedDownTotalRows) && rowsPerPage && rowsLength && rowsLength <= passedDownTotalRows) {
|
|
159
|
+
/**
|
|
160
|
+
* If total number of rows / records have been passed down as prop
|
|
161
|
+
* Then table is being fed paginated data from server or other sources
|
|
162
|
+
* In this case, we want to respect information passed down by server or external source
|
|
163
|
+
* Rather than relying on our computation based on number of rows
|
|
164
|
+
*/
|
|
165
|
+
totalPages = Math.ceil(passedDownTotalRows / rowsPerPage);
|
|
166
|
+
isTotalPagesControlledExternally = true;
|
|
167
|
+
} else {
|
|
168
|
+
totalPages = rowsLength && rowsPerPage ? Math.ceil(rowsLength / rowsPerPage) : 0;
|
|
283
169
|
}
|
|
284
|
-
|
|
170
|
+
totalPages = totalPages < 1 ? 1 : totalPages;
|
|
171
|
+
var getPageNumber = page > totalPages ? totalPages : page; // page! required, because typescript can't yet see defaultProps to know that this won't be undefined
|
|
172
|
+
|
|
173
|
+
var rowsExist = !!rowsLength;
|
|
174
|
+
var spinnerSize = getSpinnerSize();
|
|
175
|
+
var emptyBody = renderEmptyBody();
|
|
176
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_loadingContainerAdvanced.default, {
|
|
177
|
+
isLoading: isLoading && rowsExist,
|
|
178
|
+
spinnerSize: spinnerSize,
|
|
179
|
+
targetRef: function targetRef() {
|
|
180
|
+
return tableBodyRef.current;
|
|
181
|
+
},
|
|
182
|
+
testId: testId,
|
|
183
|
+
loadingLabel: loadingLabel
|
|
184
|
+
}, /*#__PURE__*/_react.default.createElement(_dynamicTable.Table, {
|
|
185
|
+
isFixedSize: isFixedSize,
|
|
186
|
+
"aria-label": label,
|
|
187
|
+
hasDataRow: rowsExist,
|
|
188
|
+
testId: testId,
|
|
189
|
+
isLoading: isLoading
|
|
190
|
+
}, !!caption && /*#__PURE__*/_react.default.createElement(_dynamicTable.Caption, null, caption), head && /*#__PURE__*/_react.default.createElement(_tableHead.default, {
|
|
191
|
+
head: head,
|
|
192
|
+
onSort: onSortHandler,
|
|
193
|
+
sortKey: sortKey,
|
|
194
|
+
sortOrder: sortOrder,
|
|
195
|
+
isRanking: isRanking,
|
|
196
|
+
isRankable: isRankable,
|
|
197
|
+
testId: testId
|
|
198
|
+
}), rowsExist && /*#__PURE__*/_react.default.createElement(TableBody, {
|
|
199
|
+
ref: tableBodyRef,
|
|
200
|
+
highlightedRowIndex: highlightedRowIndex,
|
|
201
|
+
rows: rows,
|
|
202
|
+
head: head,
|
|
203
|
+
sortKey: sortKey,
|
|
204
|
+
sortOrder: sortOrder,
|
|
205
|
+
rowsPerPage: rowsPerPage,
|
|
206
|
+
page: getPageNumber,
|
|
207
|
+
isFixedSize: isFixedSize || false,
|
|
208
|
+
onPageRowsUpdate: onPageRowsUpdate,
|
|
209
|
+
isTotalPagesControlledExternally: isTotalPagesControlledExternally,
|
|
210
|
+
testId: testId,
|
|
211
|
+
isRankable: isRankable,
|
|
212
|
+
isRanking: isRanking,
|
|
213
|
+
onRankStart: onRankStartHandler,
|
|
214
|
+
onRankEnd: onRankEndHandler,
|
|
215
|
+
isRankingDisabled: isRankingDisabled || isLoading || false
|
|
216
|
+
}))), totalPages <= 1 ? null :
|
|
217
|
+
/*#__PURE__*/
|
|
218
|
+
// only show pagination if there's MORE than 1 page
|
|
219
|
+
_react.default.createElement(_dynamicTable.PaginationWrapper, {
|
|
220
|
+
testId: testId
|
|
221
|
+
}, /*#__PURE__*/_react.default.createElement(_managedPagination.default, {
|
|
222
|
+
value: getPageNumber,
|
|
223
|
+
onChange: onSetPageHandler,
|
|
224
|
+
total: totalPages,
|
|
225
|
+
i18n: paginationi18n,
|
|
226
|
+
isDisabled: isLoading,
|
|
227
|
+
testId: testId
|
|
228
|
+
})), !rowsExist && emptyBody && /*#__PURE__*/_react.default.createElement(_loadingContainer.default, {
|
|
229
|
+
isLoading: isLoading,
|
|
230
|
+
spinnerSize: _constants.LARGE,
|
|
231
|
+
testId: testId,
|
|
232
|
+
loadingLabel: loadingLabel
|
|
233
|
+
}, emptyBody));
|
|
234
|
+
};
|
|
285
235
|
var RankableTableBody = /*#__PURE__*/(0, _react.lazy)(function () {
|
|
286
236
|
return Promise.resolve().then(function () {
|
|
287
237
|
return _interopRequireWildcard(require( /* webpackChunkName: '@atlaskit-internal_dynamic-table' */'./rankable/body'));
|
|
288
238
|
});
|
|
289
239
|
});
|
|
290
|
-
var TableBody = /*#__PURE__*/(0, _react.forwardRef)(function TableBody(
|
|
291
|
-
var
|
|
292
|
-
isRankable =
|
|
293
|
-
isRanking =
|
|
294
|
-
onRankStart =
|
|
295
|
-
onRankEnd =
|
|
296
|
-
isRankingDisabled =
|
|
297
|
-
bodyProps = (0, _objectWithoutProperties2.default)(
|
|
240
|
+
var TableBody = /*#__PURE__*/(0, _react.forwardRef)(function TableBody(_ref2, ref) {
|
|
241
|
+
var _ref2$isRankable = _ref2.isRankable,
|
|
242
|
+
isRankable = _ref2$isRankable === void 0 ? false : _ref2$isRankable,
|
|
243
|
+
isRanking = _ref2.isRanking,
|
|
244
|
+
onRankStart = _ref2.onRankStart,
|
|
245
|
+
onRankEnd = _ref2.onRankEnd,
|
|
246
|
+
isRankingDisabled = _ref2.isRankingDisabled,
|
|
247
|
+
bodyProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
|
|
298
248
|
var canRank = isRankable && !bodyProps.sortKey;
|
|
299
249
|
|
|
300
250
|
/**
|
|
301
251
|
* React 16 does not support SSR for lazy components,
|
|
302
252
|
* so we avoid rendering the `Suspense` on the server.
|
|
303
253
|
*/
|
|
304
|
-
var
|
|
305
|
-
|
|
306
|
-
canRenderRankable =
|
|
307
|
-
setCanRenderRankable =
|
|
254
|
+
var _useState3 = (0, _react.useState)(false),
|
|
255
|
+
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
|
|
256
|
+
canRenderRankable = _useState4[0],
|
|
257
|
+
setCanRenderRankable = _useState4[1];
|
|
308
258
|
(0, _react.useEffect)(function () {
|
|
309
259
|
if (canRank) {
|
|
310
260
|
setCanRenderRankable(true);
|
|
@@ -326,38 +276,6 @@ var TableBody = /*#__PURE__*/(0, _react.forwardRef)(function TableBody(_ref, ref
|
|
|
326
276
|
isRankingDisabled: isRankingDisabled
|
|
327
277
|
})))) : nonRankableBody;
|
|
328
278
|
});
|
|
329
|
-
var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');
|
|
330
279
|
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
*
|
|
334
|
-
* A stateless table that requires consumers to manage the sorting, drag and drop, and pagination.
|
|
335
|
-
*
|
|
336
|
-
* - [Examples](https://atlaskit.atlassian.com/packages/design-system/dynamic-table)
|
|
337
|
-
* - [Code](https://bitbucket.org/atlassian/atlassian-frontend/packages/design-system/dynamic-table)
|
|
338
|
-
*/
|
|
339
|
-
var DynamicTableStateless = (0, _analyticsNext.withAnalyticsContext)({
|
|
340
|
-
componentName: 'dynamicTable',
|
|
341
|
-
packageName: packageName,
|
|
342
|
-
packageVersion: packageVersion
|
|
343
|
-
})((0, _analyticsNext.withAnalyticsEvents)({
|
|
344
|
-
onSort: createAndFireEventOnAtlaskit({
|
|
345
|
-
action: 'sorted',
|
|
346
|
-
actionSubject: 'dynamicTable',
|
|
347
|
-
attributes: {
|
|
348
|
-
componentName: 'dynamicTable',
|
|
349
|
-
packageName: packageName,
|
|
350
|
-
packageVersion: packageVersion
|
|
351
|
-
}
|
|
352
|
-
}),
|
|
353
|
-
onRankEnd: createAndFireEventOnAtlaskit({
|
|
354
|
-
action: 'ranked',
|
|
355
|
-
actionSubject: 'dynamicTable',
|
|
356
|
-
attributes: {
|
|
357
|
-
componentName: 'dynamicTable',
|
|
358
|
-
packageName: packageName,
|
|
359
|
-
packageVersion: packageVersion
|
|
360
|
-
}
|
|
361
|
-
})
|
|
362
|
-
})(DynamicTable));
|
|
363
|
-
var _default = exports.default = DynamicTableStateless;
|
|
280
|
+
// eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
281
|
+
var _default = exports.default = DynamicTable;
|