@semcore/data-table 4.50.0 → 4.50.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/lib/cjs/Body.js +6 -4
- package/lib/cjs/Body.js.map +1 -1
- package/lib/cjs/DataTable.js +39 -37
- package/lib/cjs/DataTable.js.map +1 -1
- package/lib/es6/Body.js +6 -4
- package/lib/es6/Body.js.map +1 -1
- package/lib/es6/DataTable.js +39 -37
- package/lib/es6/DataTable.js.map +1 -1
- package/lib/esm/Body.mjs +348 -238
- package/lib/esm/DataTable.mjs +483 -336
- package/lib/esm/Head.mjs +317 -206
- package/lib/esm/index.mjs +6 -6
- package/lib/esm/style/data-table.shadow.css +413 -0
- package/lib/esm/style/scroll-shadows.shadow.css +7 -0
- package/lib/esm/translations/__intergalactic-dynamic-locales.mjs +30 -30
- package/lib/esm/translations/de.json.mjs +5 -4
- package/lib/esm/translations/en.json.mjs +5 -4
- package/lib/esm/translations/es.json.mjs +5 -4
- package/lib/esm/translations/fr.json.mjs +5 -4
- package/lib/esm/translations/it.json.mjs +5 -4
- package/lib/esm/translations/ja.json.mjs +5 -4
- package/lib/esm/translations/ko.json.mjs +5 -4
- package/lib/esm/translations/nl.json.mjs +5 -4
- package/lib/esm/translations/pl.json.mjs +5 -4
- package/lib/esm/translations/pt.json.mjs +5 -4
- package/lib/esm/translations/sv.json.mjs +5 -4
- package/lib/esm/translations/tr.json.mjs +5 -4
- package/lib/esm/translations/vi.json.mjs +5 -4
- package/lib/esm/translations/zh.json.mjs +5 -4
- package/lib/esm/utils.mjs +44 -29
- package/package.json +5 -5
package/lib/esm/Body.mjs
CHANGED
|
@@ -1,320 +1,430 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
import
|
|
11
|
-
import
|
|
12
|
-
import
|
|
13
|
-
import { sstyled
|
|
14
|
-
import { sstyled as
|
|
15
|
-
import
|
|
16
|
-
import { Flex
|
|
17
|
-
import
|
|
18
|
-
import { getFixedStyle
|
|
19
|
-
import
|
|
20
|
-
import
|
|
21
|
-
import { forkRef
|
|
22
|
-
import
|
|
23
|
-
import { SORT_ICON_WIDTH
|
|
24
|
-
import { getFocusableIn
|
|
25
|
-
var
|
|
1
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
2
|
+
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
3
|
+
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
|
|
4
|
+
import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
|
|
5
|
+
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
6
|
+
import _typeof from "@babel/runtime/helpers/esm/typeof";
|
|
7
|
+
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
|
|
8
|
+
import _createClass from "@babel/runtime/helpers/esm/createClass";
|
|
9
|
+
import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
|
|
10
|
+
import _inherits from "@babel/runtime/helpers/esm/inherits";
|
|
11
|
+
import _createSuper from "@babel/runtime/helpers/esm/createSuper";
|
|
12
|
+
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
13
|
+
import { sstyled } from "@semcore/utils/lib/core/index";
|
|
14
|
+
import { sstyled as sstyled$1, assignProps as assignProps$1, Component } from "@semcore/core";
|
|
15
|
+
import React from "react";
|
|
16
|
+
import { Flex, Box } from "@semcore/flex-box";
|
|
17
|
+
import ScrollArea, { hideScrollBarsFromScreenReadersContext } from "@semcore/scroll-area";
|
|
18
|
+
import { getFixedStyle, getScrollOffsetValue } from "./utils.mjs";
|
|
19
|
+
import assignProps, { callAllEventHandlers } from "@semcore/utils/lib/assignProps";
|
|
20
|
+
import trottle from "@semcore/utils/lib/rafTrottle";
|
|
21
|
+
import { forkRef } from "@semcore/utils/lib/ref";
|
|
22
|
+
import canUseDOM from "@semcore/utils/lib/canUseDOM";
|
|
23
|
+
import { SORT_ICON_WIDTH } from "./Head.mjs";
|
|
24
|
+
import { getFocusableIn } from "@semcore/utils/lib/focus-lock/getFocusableIn";
|
|
25
|
+
var _excluded = ["childrenPropsGetter"], _excluded2 = ["childrenPropsGetter"];
|
|
26
|
+
/*!__reshadow-styles__:"./style/scroll-shadows.shadow.css"*/
|
|
27
|
+
var scrollStyles = (
|
|
26
28
|
/*__reshadow_css_start__*/
|
|
27
|
-
(
|
|
29
|
+
(sstyled.insert(
|
|
28
30
|
/*__inner_css_start__*/
|
|
29
|
-
".
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
31
|
+
".___SShadowHorizontal_1u19m_gg_:after,.___SShadowHorizontal_1u19m_gg_:before,.___SShadowVertical_1u19m_gg_:after,.___SShadowVertical_1u19m_gg_:before{z-index:1}",
|
|
32
|
+
/*__inner_css_end__*/
|
|
33
|
+
"1u19m_gg_"
|
|
34
|
+
), /*__reshadow_css_end__*/
|
|
35
|
+
{
|
|
36
|
+
"__SShadowHorizontal": "___SShadowHorizontal_1u19m_gg_",
|
|
37
|
+
"__SShadowVertical": "___SShadowVertical_1u19m_gg_"
|
|
34
38
|
})
|
|
35
|
-
)
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
+
);
|
|
40
|
+
var testEnv = process.env.NODE_ENV === "test";
|
|
41
|
+
var getCellsByColumn = function getCellsByColumn2(cells) {
|
|
42
|
+
var flattenCells = cells.flat(20);
|
|
43
|
+
return Object.fromEntries(flattenCells.map(function(cell) {
|
|
44
|
+
return [cell.name, cell.data];
|
|
39
45
|
}));
|
|
40
|
-
}
|
|
46
|
+
};
|
|
47
|
+
var displayContents = {
|
|
41
48
|
display: "contents"
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
49
|
+
};
|
|
50
|
+
var Body = /* @__PURE__ */ function(_Component) {
|
|
51
|
+
_inherits(Body2, _Component);
|
|
52
|
+
var _super = _createSuper(Body2);
|
|
53
|
+
function Body2() {
|
|
54
|
+
var _this;
|
|
55
|
+
_classCallCheck(this, Body2);
|
|
56
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
57
|
+
args[_key] = arguments[_key];
|
|
58
|
+
}
|
|
59
|
+
_this = _super.call.apply(_super, [this].concat(args));
|
|
60
|
+
_defineProperty(_assertThisInitialized(_this), "state", {
|
|
51
61
|
rowHeight: void 0,
|
|
52
62
|
scrollAreaHeight: void 0,
|
|
53
63
|
scrollOffset: 0
|
|
54
|
-
})
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
64
|
+
});
|
|
65
|
+
_defineProperty(_assertThisInitialized(_this), "scrollContainerRef", /* @__PURE__ */ React.createRef());
|
|
66
|
+
_defineProperty(_assertThisInitialized(_this), "firstRowRef", /* @__PURE__ */ React.createRef());
|
|
67
|
+
_defineProperty(_assertThisInitialized(_this), "firstRowResizeObserver", null);
|
|
68
|
+
_defineProperty(_assertThisInitialized(_this), "lockedCell", [null, false]);
|
|
69
|
+
_defineProperty(_assertThisInitialized(_this), "getRowHeight", function() {
|
|
70
|
+
var virtualScroll = _this.asProps.virtualScroll;
|
|
71
|
+
var rowHeightFromProps = _typeof(virtualScroll) === "object" && (virtualScroll === null || virtualScroll === void 0 ? void 0 : virtualScroll.rowHeight);
|
|
72
|
+
return rowHeightFromProps || _this.state.rowHeight;
|
|
73
|
+
});
|
|
74
|
+
_defineProperty(_assertThisInitialized(_this), "handleKeyDown", function(e) {
|
|
75
|
+
if (e.currentTarget === _this.lockedCell[0]) {
|
|
76
|
+
var focusableChildren = Array.from(_this.lockedCell[0].children).flatMap(function(node) {
|
|
77
|
+
return getFocusableIn(node);
|
|
61
78
|
});
|
|
62
|
-
if (
|
|
79
|
+
if (_this.lockedCell[1]) {
|
|
63
80
|
if (e.key === "Escape") {
|
|
64
|
-
var
|
|
65
|
-
(
|
|
81
|
+
var _this$lockedCell$;
|
|
82
|
+
(_this$lockedCell$ = _this.lockedCell[0]) === null || _this$lockedCell$ === void 0 ? void 0 : _this$lockedCell$.focus();
|
|
83
|
+
_this.lockedCell[1] = false;
|
|
84
|
+
}
|
|
85
|
+
if (e.key.startsWith("Arrow")) {
|
|
86
|
+
e.stopPropagation();
|
|
87
|
+
e.preventDefault();
|
|
66
88
|
}
|
|
67
|
-
if (e.key
|
|
68
|
-
if (e.target ===
|
|
69
|
-
var
|
|
70
|
-
(
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
89
|
+
if (e.key === "Tab") {
|
|
90
|
+
if (e.target === focusableChildren[0] && e.shiftKey) {
|
|
91
|
+
var _focusableChildren;
|
|
92
|
+
(_focusableChildren = focusableChildren[focusableChildren.length - 1]) === null || _focusableChildren === void 0 ? void 0 : _focusableChildren.focus();
|
|
93
|
+
e.preventDefault();
|
|
94
|
+
} else if (e.target === focusableChildren[focusableChildren.length - 1] && !e.shiftKey) {
|
|
95
|
+
var _focusableChildren$;
|
|
96
|
+
(_focusableChildren$ = focusableChildren[0]) === null || _focusableChildren$ === void 0 ? void 0 : _focusableChildren$.focus();
|
|
97
|
+
e.preventDefault();
|
|
74
98
|
}
|
|
75
99
|
e.stopPropagation();
|
|
76
100
|
}
|
|
77
101
|
} else if (e.key === "Enter") {
|
|
78
|
-
var
|
|
79
|
-
e.preventDefault()
|
|
102
|
+
var _focusableChildren$2;
|
|
103
|
+
e.preventDefault();
|
|
104
|
+
e.stopPropagation();
|
|
105
|
+
_this.lockedCell[1] = true;
|
|
106
|
+
(_focusableChildren$2 = focusableChildren[0]) === null || _focusableChildren$2 === void 0 ? void 0 : _focusableChildren$2.focus();
|
|
80
107
|
}
|
|
81
108
|
}
|
|
82
|
-
})
|
|
109
|
+
});
|
|
110
|
+
_defineProperty(_assertThisInitialized(_this), "onFocusCell", function(e) {
|
|
83
111
|
if (e.target === e.currentTarget && e.target.matches(":focus-visible")) {
|
|
84
|
-
var
|
|
85
|
-
return
|
|
112
|
+
var focusableChildren = Array.from(e.currentTarget.children).flatMap(function(node) {
|
|
113
|
+
return getFocusableIn(node);
|
|
86
114
|
});
|
|
87
|
-
|
|
115
|
+
if (focusableChildren.length === 1) {
|
|
116
|
+
focusableChildren[0].focus();
|
|
117
|
+
} else if (focusableChildren.length > 1) {
|
|
118
|
+
_this.lockedCell = [e.currentTarget, false];
|
|
119
|
+
}
|
|
88
120
|
}
|
|
89
|
-
})
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
121
|
+
});
|
|
122
|
+
_defineProperty(_assertThisInitialized(_this), "handleFirstRowResize", trottle(function(entries) {
|
|
123
|
+
var contentRect = entries[0].contentRect;
|
|
124
|
+
var height = contentRect.height;
|
|
125
|
+
_this.setState(function(oldState) {
|
|
126
|
+
if (oldState.rowHeight === height) return oldState;
|
|
127
|
+
return {
|
|
128
|
+
rowHeight: height
|
|
129
|
+
};
|
|
130
|
+
});
|
|
131
|
+
}));
|
|
132
|
+
_defineProperty(_assertThisInitialized(_this), "handleScrollAreaResize", trottle(function(entries) {
|
|
133
|
+
var virtualScroll = _this.asProps.virtualScroll;
|
|
134
|
+
if (!virtualScroll) return;
|
|
135
|
+
var contentRect = entries[0].contentRect;
|
|
136
|
+
var height = contentRect.height;
|
|
137
|
+
_this.setState(function(oldState) {
|
|
138
|
+
if (oldState.scrollAreaHeight === height) return oldState;
|
|
139
|
+
return {
|
|
140
|
+
scrollAreaHeight: height
|
|
94
141
|
};
|
|
95
142
|
});
|
|
96
|
-
}))
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
143
|
+
}));
|
|
144
|
+
_defineProperty(_assertThisInitialized(_this), "handleScrollAreaScroll", function(event) {
|
|
145
|
+
var _ref6 = event.target, scrollTop = _ref6.scrollTop;
|
|
146
|
+
var virtualScroll = _this.asProps.virtualScroll;
|
|
147
|
+
if (virtualScroll) {
|
|
148
|
+
_this.setState(function(oldState) {
|
|
149
|
+
if (oldState.scrollOffset === scrollTop) return oldState;
|
|
150
|
+
return {
|
|
151
|
+
scrollOffset: scrollTop
|
|
103
152
|
};
|
|
104
153
|
});
|
|
105
154
|
}
|
|
106
|
-
})
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
}))
|
|
155
|
+
});
|
|
156
|
+
_defineProperty(_assertThisInitialized(_this), "setupRowSizeObserver", function() {
|
|
157
|
+
if (!_this.firstRowRef.current) return;
|
|
158
|
+
if (!_this.asProps.virtualScroll) return;
|
|
159
|
+
if (canUseDOM()) {
|
|
160
|
+
_this.firstRowResizeObserver = new ResizeObserver(_this.handleFirstRowResize);
|
|
161
|
+
_this.firstRowResizeObserver.observe(_this.firstRowRef.current);
|
|
162
|
+
}
|
|
163
|
+
});
|
|
164
|
+
_defineProperty(_assertThisInitialized(_this), "handleBodyTransitionEnd", trottle(function() {
|
|
165
|
+
_this.forceUpdate();
|
|
166
|
+
}));
|
|
167
|
+
return _this;
|
|
118
168
|
}
|
|
119
|
-
|
|
169
|
+
_createClass(Body2, [{
|
|
120
170
|
key: "renderCells",
|
|
121
|
-
value: function(
|
|
122
|
-
var
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
171
|
+
value: function renderCells(cells, rowData, dataIndex) {
|
|
172
|
+
var _this2 = this;
|
|
173
|
+
var SCell = Flex;
|
|
174
|
+
var _this$asProps = this.asProps, styles = _this$asProps.styles, columns = _this$asProps.columns, use = _this$asProps.use, uid = _this$asProps.uid;
|
|
175
|
+
return cells.map(function(cell, cellIndex) {
|
|
176
|
+
if (Array.isArray(cell)) {
|
|
177
|
+
var _ref2;
|
|
178
|
+
var SGroupCell = "div";
|
|
179
|
+
return _ref2 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SGroupCell, _ref2.cn("SGroupCell", {
|
|
180
|
+
"key": "".concat(cellIndex),
|
|
128
181
|
"data-ui-name": "group-cell"
|
|
129
|
-
}),
|
|
182
|
+
}), _this2.renderRows(cell, true));
|
|
130
183
|
} else {
|
|
131
|
-
var
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
return
|
|
137
|
-
})
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
name
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
184
|
+
var _ref3, _column$parentColumns, _column$props, _column$props$ref$cur, _column$props2, _column$props2$ref$cu, _column$props3, _column$props4;
|
|
185
|
+
var nameParts = cell.name.split("/");
|
|
186
|
+
var firstName = nameParts[0];
|
|
187
|
+
var lastName = nameParts[nameParts.length - 1];
|
|
188
|
+
var firstColumn = columns.find(function(c) {
|
|
189
|
+
return c.name === firstName;
|
|
190
|
+
});
|
|
191
|
+
var lastColumn = columns.find(function(c) {
|
|
192
|
+
return c.name === lastName;
|
|
193
|
+
});
|
|
194
|
+
var column = columns.find(function(c) {
|
|
195
|
+
return c.name === cell.name;
|
|
196
|
+
});
|
|
197
|
+
var _getFixedStyle = getFixedStyle(cell, columns), _getFixedStyle2 = _slicedToArray(_getFixedStyle, 2), name = _getFixedStyle2[0], value = _getFixedStyle2[1];
|
|
198
|
+
var parentColumnNames = (_column$parentColumns = column === null || column === void 0 ? void 0 : column.parentColumns.map(function(column2) {
|
|
199
|
+
return column2.name;
|
|
200
|
+
})) !== null && _column$parentColumns !== void 0 ? _column$parentColumns : [];
|
|
201
|
+
var vars = (Array.isArray(cell.cssVar) ? cell.cssVar : [cell.cssVar]).map(function(name2) {
|
|
202
|
+
return "var(".concat(name2, ")");
|
|
203
|
+
});
|
|
204
|
+
var columnWMin = column === null || column === void 0 ? void 0 : (_column$props = column.props) === null || _column$props === void 0 ? void 0 : (_column$props$ref$cur = _column$props.ref.current) === null || _column$props$ref$cur === void 0 ? void 0 : _column$props$ref$cur.style.getPropertyValue("min-width");
|
|
205
|
+
var columnWMax = column === null || column === void 0 ? void 0 : (_column$props2 = column.props) === null || _column$props2 === void 0 ? void 0 : (_column$props2$ref$cu = _column$props2.ref.current) === null || _column$props2$ref$cu === void 0 ? void 0 : _column$props2$ref$cu.style.getPropertyValue("max-width");
|
|
206
|
+
var _props = {
|
|
207
|
+
name: cell.name,
|
|
208
|
+
children: /* @__PURE__ */ React.createElement(React.Fragment, null, cell.data),
|
|
209
|
+
justifyContent: column === null || column === void 0 ? void 0 : (_column$props3 = column.props) === null || _column$props3 === void 0 ? void 0 : _column$props3.justifyContent,
|
|
210
|
+
alignItems: column === null || column === void 0 ? void 0 : (_column$props4 = column.props) === null || _column$props4 === void 0 ? void 0 : _column$props4.alignItems,
|
|
211
|
+
borderLeft: firstColumn === null || firstColumn === void 0 ? void 0 : firstColumn.borderLeft,
|
|
212
|
+
borderRight: lastColumn === null || lastColumn === void 0 ? void 0 : lastColumn.borderRight,
|
|
148
213
|
style: {
|
|
149
|
-
width:
|
|
150
|
-
minWidth:
|
|
151
|
-
maxWidth:
|
|
214
|
+
width: vars.length === 1 ? vars[0] : "calc(".concat(vars.join(" + "), ")"),
|
|
215
|
+
minWidth: columnWMin,
|
|
216
|
+
maxWidth: columnWMax && column !== null && column !== void 0 && column.sortable ? "calc(".concat(SORT_ICON_WIDTH, "px + ").concat(columnWMax, ")") : columnWMax
|
|
152
217
|
}
|
|
153
218
|
};
|
|
154
|
-
|
|
155
|
-
|
|
219
|
+
if (name !== void 0 && value !== void 0) {
|
|
220
|
+
_props.style[name] = value;
|
|
221
|
+
}
|
|
222
|
+
var _iterator = _createForOfIteratorHelper(cell.cellPropsLayers || []), _step;
|
|
156
223
|
try {
|
|
157
|
-
for (
|
|
158
|
-
var
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
224
|
+
for (_iterator.s(); !(_step = _iterator.n()).done; ) {
|
|
225
|
+
var cellPropLayer = _step.value;
|
|
226
|
+
var _cellPropLayer$childr = cellPropLayer.childrenPropsGetter, childrenPropsGetter = _cellPropLayer$childr === void 0 ? function(p) {
|
|
227
|
+
return p;
|
|
228
|
+
} : _cellPropLayer$childr, other = _objectWithoutProperties(cellPropLayer, _excluded);
|
|
229
|
+
var propsCell = assignProps(other, _props);
|
|
230
|
+
_props = assignProps(childrenPropsGetter(propsCell, rowData, dataIndex), propsCell);
|
|
162
231
|
}
|
|
163
|
-
} catch (
|
|
164
|
-
|
|
232
|
+
} catch (err) {
|
|
233
|
+
_iterator.e(err);
|
|
165
234
|
} finally {
|
|
166
|
-
|
|
235
|
+
_iterator.f();
|
|
167
236
|
}
|
|
168
|
-
var
|
|
169
|
-
return "igc-table-".concat(
|
|
170
|
-
})
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
"
|
|
186
|
-
"aria-
|
|
237
|
+
var headerIds = [cell.name].concat(_toConsumableArray(parentColumnNames)).filter(Boolean).map(function(name2) {
|
|
238
|
+
return "igc-table-".concat(uid, "-").concat(name2);
|
|
239
|
+
});
|
|
240
|
+
var ariaColspan = nameParts.length;
|
|
241
|
+
return _ref3 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SCell, _ref3.cn("SCell", _objectSpread(_objectSpread({
|
|
242
|
+
"key": cell.name,
|
|
243
|
+
"role": "gridcell",
|
|
244
|
+
"headers": headerIds.join(" "),
|
|
245
|
+
"__excludeProps": ["data"]
|
|
246
|
+
}, _props), {}, {
|
|
247
|
+
"fixed": cell.fixed,
|
|
248
|
+
"theme": _props.theme,
|
|
249
|
+
"use": use,
|
|
250
|
+
"borderLeft": _props.borderLeft,
|
|
251
|
+
"borderRight": _props.borderRight,
|
|
252
|
+
"tabIndex": -1,
|
|
253
|
+
"onKeyDown": _this2.handleKeyDown,
|
|
254
|
+
"onFocus": _this2.onFocusCell,
|
|
255
|
+
"aria-colindex": cellIndex + 1,
|
|
256
|
+
"aria-colspan": ariaColspan === 1 ? void 0 : ariaColspan
|
|
187
257
|
})));
|
|
188
258
|
}
|
|
189
259
|
}, []);
|
|
190
260
|
}
|
|
191
261
|
}, {
|
|
192
262
|
key: "renderRow",
|
|
193
|
-
value: function(
|
|
194
|
-
var
|
|
195
|
-
|
|
263
|
+
value: function renderRow(cells, _ref7) {
|
|
264
|
+
var _ref4;
|
|
265
|
+
var dataIndex = _ref7.dataIndex, topOffset = _ref7.topOffset, _ref7$nested = _ref7.nested, nested = _ref7$nested === void 0 ? false : _ref7$nested;
|
|
266
|
+
var SRow = Box;
|
|
267
|
+
var _this$asProps2 = this.asProps, styles = _this$asProps2.styles, rowPropsLayers = _this$asProps2.rowPropsLayers, uniqueKey = _this$asProps2.uniqueKey, virtualScroll = _this$asProps2.virtualScroll;
|
|
268
|
+
var rowHeightFromProps = _typeof(virtualScroll) === "object" && (virtualScroll === null || virtualScroll === void 0 ? void 0 : virtualScroll.rowHeight);
|
|
269
|
+
var rowData = cells.flatRowData || getCellsByColumn(cells);
|
|
270
|
+
var key = rowData[uniqueKey] ? String(rowData[uniqueKey]) : "row_".concat(dataIndex);
|
|
271
|
+
var needToMeasureHeight = dataIndex === 0 && !rowHeightFromProps;
|
|
272
|
+
var props = {
|
|
273
|
+
children: this.renderCells(cells, rowData, dataIndex),
|
|
196
274
|
theme: void 0,
|
|
197
275
|
active: void 0,
|
|
198
|
-
positioned:
|
|
199
|
-
top:
|
|
200
|
-
ref:
|
|
201
|
-
key
|
|
202
|
-
"aria-rowindex":
|
|
203
|
-
}
|
|
276
|
+
positioned: topOffset !== void 0,
|
|
277
|
+
top: topOffset,
|
|
278
|
+
ref: needToMeasureHeight ? this.firstRowRef : void 0,
|
|
279
|
+
key,
|
|
280
|
+
"aria-rowindex": !nested ? dataIndex + 2 : void 0
|
|
281
|
+
};
|
|
282
|
+
var _iterator2 = _createForOfIteratorHelper(rowPropsLayers), _step2;
|
|
204
283
|
try {
|
|
205
|
-
for (
|
|
206
|
-
var
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
284
|
+
for (_iterator2.s(); !(_step2 = _iterator2.n()).done; ) {
|
|
285
|
+
var rowPropsLayer = _step2.value;
|
|
286
|
+
var _rowPropsLayer$childr = rowPropsLayer.childrenPropsGetter, childrenPropsGetter = _rowPropsLayer$childr === void 0 ? function(p) {
|
|
287
|
+
return p;
|
|
288
|
+
} : _rowPropsLayer$childr, other = _objectWithoutProperties(rowPropsLayer, _excluded2);
|
|
289
|
+
var propsRow = assignProps(other, props);
|
|
290
|
+
props = assignProps(childrenPropsGetter(propsRow, rowData, dataIndex), propsRow);
|
|
210
291
|
}
|
|
211
|
-
} catch (
|
|
212
|
-
|
|
292
|
+
} catch (err) {
|
|
293
|
+
_iterator2.e(err);
|
|
213
294
|
} finally {
|
|
214
|
-
|
|
295
|
+
_iterator2.f();
|
|
215
296
|
}
|
|
216
|
-
return
|
|
217
|
-
"data-nested":
|
|
218
|
-
role:
|
|
219
|
-
__excludeProps: ["data"]
|
|
220
|
-
},
|
|
297
|
+
return _ref4 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SRow, _ref4.cn("SRow", _objectSpread({
|
|
298
|
+
"data-nested": nested.toString(),
|
|
299
|
+
"role": !nested ? "row" : void 0,
|
|
300
|
+
"__excludeProps": ["data"]
|
|
301
|
+
}, props)));
|
|
221
302
|
}
|
|
222
303
|
}, {
|
|
223
304
|
key: "renderRows",
|
|
224
|
-
value: function(
|
|
225
|
-
var
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
305
|
+
value: function renderRows(rows) {
|
|
306
|
+
var _this3 = this;
|
|
307
|
+
var nested = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false;
|
|
308
|
+
return rows.map(function(cells, dataIndex) {
|
|
309
|
+
return _this3.renderRow(cells, {
|
|
310
|
+
dataIndex,
|
|
311
|
+
nested
|
|
230
312
|
});
|
|
231
313
|
});
|
|
232
314
|
}
|
|
233
315
|
}, {
|
|
234
316
|
key: "renderVirtualizedRows",
|
|
235
|
-
value: function(
|
|
236
|
-
var
|
|
237
|
-
if (
|
|
238
|
-
var
|
|
239
|
-
|
|
317
|
+
value: function renderVirtualizedRows(rows) {
|
|
318
|
+
var _ref8, _this4 = this;
|
|
319
|
+
if (rows.length === 0) return [];
|
|
320
|
+
var virtualScroll = this.asProps.virtualScroll;
|
|
321
|
+
var _this$state = this.state, scrollOffset = _this$state.scrollOffset, scrollAreaHeight = _this$state.scrollAreaHeight;
|
|
322
|
+
var rowHeight = this.getRowHeight();
|
|
323
|
+
var tollerance = (_ref8 = _typeof(virtualScroll) === "object" ? virtualScroll === null || virtualScroll === void 0 ? void 0 : virtualScroll.tollerance : 2) !== null && _ref8 !== void 0 ? _ref8 : 2;
|
|
324
|
+
var startIndex = Math.max(Math.floor(scrollOffset / rowHeight) - tollerance, 0);
|
|
325
|
+
var lastIndex = Math.min(Math.ceil((scrollOffset + scrollAreaHeight) / rowHeight) + tollerance, rows.length);
|
|
326
|
+
var rowHeightFromProps = _typeof(virtualScroll) === "object" && (virtualScroll === null || virtualScroll === void 0 ? void 0 : virtualScroll.rowHeight);
|
|
327
|
+
var needToMeasureFirstRowHeight = !rowHeightFromProps;
|
|
328
|
+
var firstRow = {
|
|
329
|
+
cells: rows[0],
|
|
240
330
|
dataIndex: 0,
|
|
241
331
|
topOffset: 0
|
|
242
|
-
}
|
|
332
|
+
};
|
|
333
|
+
var visibleRows = rowHeight !== void 0 ? rows.slice(startIndex, lastIndex) : [];
|
|
334
|
+
var processedVisibleRows = visibleRows.map(function(cells, index) {
|
|
243
335
|
return {
|
|
244
|
-
cells
|
|
245
|
-
dataIndex:
|
|
246
|
-
topOffset:
|
|
336
|
+
cells,
|
|
337
|
+
dataIndex: startIndex + index,
|
|
338
|
+
topOffset: rowHeight * (startIndex + index)
|
|
247
339
|
};
|
|
248
340
|
});
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
341
|
+
if (needToMeasureFirstRowHeight && startIndex !== 0) {
|
|
342
|
+
processedVisibleRows.unshift(firstRow);
|
|
343
|
+
}
|
|
344
|
+
return processedVisibleRows.map(function(_ref9) {
|
|
345
|
+
var cells = _ref9.cells, dataIndex = _ref9.dataIndex, topOffset = _ref9.topOffset;
|
|
346
|
+
return _this4.renderRow(cells, {
|
|
347
|
+
dataIndex,
|
|
348
|
+
topOffset,
|
|
349
|
+
nested: false
|
|
255
350
|
});
|
|
256
351
|
});
|
|
257
352
|
}
|
|
258
353
|
}, {
|
|
259
354
|
key: "componentWillUnmount",
|
|
260
|
-
value: function() {
|
|
261
|
-
var
|
|
262
|
-
(
|
|
355
|
+
value: function componentWillUnmount() {
|
|
356
|
+
var _this$firstRowResizeO;
|
|
357
|
+
(_this$firstRowResizeO = this.firstRowResizeObserver) === null || _this$firstRowResizeO === void 0 ? void 0 : _this$firstRowResizeO.disconnect();
|
|
263
358
|
}
|
|
264
359
|
}, {
|
|
265
360
|
key: "render",
|
|
266
|
-
value: function() {
|
|
267
|
-
var
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
var
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
},
|
|
276
|
-
|
|
277
|
-
|
|
361
|
+
value: function render() {
|
|
362
|
+
var _ref = this.asProps, _ref5;
|
|
363
|
+
var SBody = Box;
|
|
364
|
+
var SBodyWrapper = Box;
|
|
365
|
+
var SHeightHold = Box;
|
|
366
|
+
var _this$asProps3 = this.asProps, Children = _this$asProps3.Children, styles = _this$asProps3.styles, rows = _this$asProps3.rows, columns = _this$asProps3.columns, $scrollRef = _this$asProps3.$scrollRef, virtualScroll = _this$asProps3.virtualScroll, onResize = _this$asProps3.onResize, onScroll = _this$asProps3.onScroll, disabledScroll = _this$asProps3.disabledScroll, renderRows = _this$asProps3.renderRows, animationsDisabled = _this$asProps3.animationsDisabled, scrollContainerRef = _this$asProps3.scrollContainerRef;
|
|
367
|
+
var columnsInitialized = columns.reduce(function(sum, _ref10) {
|
|
368
|
+
var width = _ref10.width;
|
|
369
|
+
return sum + width;
|
|
370
|
+
}, 0) > 0 || testEnv;
|
|
371
|
+
var _getScrollOffsetValue = getScrollOffsetValue(columns), _getScrollOffsetValue2 = _slicedToArray(_getScrollOffsetValue, 2), offsetLeftSum = _getScrollOffsetValue2[0], offsetRightSum = _getScrollOffsetValue2[1];
|
|
372
|
+
var rowHeight = this.getRowHeight();
|
|
373
|
+
var holdHeight = rowHeight !== void 0 && virtualScroll ? rowHeight * rows.length : void 0;
|
|
374
|
+
if (virtualScroll && columnsInitialized && !rowHeight) {
|
|
375
|
+
requestAnimationFrame(this.setupRowSizeObserver);
|
|
376
|
+
}
|
|
377
|
+
var body = (_ref5 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SBody, _ref5.cn("SBody", _objectSpread({}, assignProps$1({
|
|
378
|
+
"animationsDisabled": animationsDisabled,
|
|
379
|
+
"onTransitionEnd": this.handleBodyTransitionEnd
|
|
380
|
+
}, _ref))), renderRows ? renderRows({
|
|
381
|
+
rows,
|
|
382
|
+
columns,
|
|
278
383
|
renderRow: this.renderRow.bind(this)
|
|
279
|
-
}) || null : /* @__PURE__ */
|
|
280
|
-
hMin:
|
|
281
|
-
"aria-hidden":
|
|
282
|
-
})) : null,
|
|
283
|
-
if (
|
|
284
|
-
return /* @__PURE__ */
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
384
|
+
}) || null : /* @__PURE__ */ React.createElement(React.Fragment, null, holdHeight ? /* @__PURE__ */ React.createElement(SHeightHold, _ref5.cn("SHeightHold", {
|
|
385
|
+
"hMin": holdHeight,
|
|
386
|
+
"aria-hidden": true
|
|
387
|
+
})) : null, virtualScroll ? this.renderVirtualizedRows(rows) : this.renderRows(rows))));
|
|
388
|
+
if (disabledScroll) {
|
|
389
|
+
return /* @__PURE__ */ React.createElement(SBodyWrapper, null, body);
|
|
390
|
+
}
|
|
391
|
+
var scrollContainerRefs = [$scrollRef, this.scrollContainerRef];
|
|
392
|
+
if (scrollContainerRef) {
|
|
393
|
+
scrollContainerRefs.push(scrollContainerRef);
|
|
394
|
+
}
|
|
395
|
+
return /* @__PURE__ */ React.createElement(hideScrollBarsFromScreenReadersContext.Provider, {
|
|
396
|
+
value: true
|
|
397
|
+
}, /* @__PURE__ */ React.createElement(SBodyWrapper, _ref5.cn("SBodyWrapper", {}), /* @__PURE__ */ React.createElement(ScrollArea, _ref5.cn("ScrollArea", {
|
|
398
|
+
"shadow": true,
|
|
399
|
+
"leftOffset": offsetLeftSum,
|
|
400
|
+
"rightOffset": offsetRightSum,
|
|
401
|
+
"onResize": callAllEventHandlers(onResize, this.handleScrollAreaResize),
|
|
402
|
+
"onScroll": callAllEventHandlers(onScroll, this.handleScrollAreaScroll),
|
|
403
|
+
"styles": scrollStyles
|
|
404
|
+
}), /* @__PURE__ */ React.createElement(ScrollArea.Container, {
|
|
405
|
+
ref: forkRef.apply(void 0, scrollContainerRefs),
|
|
297
406
|
role: "rowgroup",
|
|
298
407
|
focusRingTopOffset: "3px",
|
|
299
408
|
tabIndex: -1
|
|
300
|
-
},
|
|
301
|
-
style:
|
|
302
|
-
}), /* @__PURE__ */
|
|
303
|
-
style:
|
|
304
|
-
}), /* @__PURE__ */
|
|
305
|
-
style:
|
|
306
|
-
}), /* @__PURE__ */
|
|
409
|
+
}, body), /* @__PURE__ */ React.createElement("div", _ref5.cn("div", {
|
|
410
|
+
"style": displayContents
|
|
411
|
+
}), /* @__PURE__ */ React.createElement("div", _ref5.cn("div", {
|
|
412
|
+
"style": displayContents
|
|
413
|
+
}), /* @__PURE__ */ React.createElement("div", _ref5.cn("div", {
|
|
414
|
+
"style": displayContents
|
|
415
|
+
}), /* @__PURE__ */ React.createElement(ScrollArea.Bar, {
|
|
307
416
|
orientation: "horizontal",
|
|
308
417
|
bottom: 0,
|
|
309
418
|
container: this.scrollContainerRef
|
|
310
|
-
}), /* @__PURE__ */
|
|
419
|
+
}), /* @__PURE__ */ React.createElement(ScrollArea.Bar, {
|
|
311
420
|
orientation: "vertical",
|
|
312
421
|
w: "12px",
|
|
313
422
|
zIndex: 2
|
|
314
|
-
}))))),
|
|
423
|
+
}))))), Children.origin));
|
|
315
424
|
}
|
|
316
|
-
}])
|
|
317
|
-
|
|
425
|
+
}]);
|
|
426
|
+
return Body2;
|
|
427
|
+
}(Component);
|
|
318
428
|
export {
|
|
319
|
-
|
|
429
|
+
Body as default
|
|
320
430
|
};
|