@semcore/data-table 1.5.4 → 2.2.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/lib/cjs/Body.js +279 -78
- package/lib/cjs/Body.js.map +1 -1
- package/lib/cjs/DataTable.js +195 -160
- package/lib/cjs/DataTable.js.map +1 -1
- package/lib/cjs/Head.js +16 -9
- package/lib/cjs/Head.js.map +1 -1
- package/lib/cjs/index.js.map +1 -1
- package/lib/cjs/style/data-table.shadow.css +12 -1
- package/lib/cjs/types.js +4 -0
- package/lib/cjs/types.js.map +1 -0
- package/lib/cjs/utils.js +26 -26
- package/lib/cjs/utils.js.map +1 -1
- package/lib/es6/Body.js +279 -78
- package/lib/es6/Body.js.map +1 -1
- package/lib/es6/DataTable.js +197 -158
- package/lib/es6/DataTable.js.map +1 -1
- package/lib/es6/Head.js +17 -9
- package/lib/es6/Head.js.map +1 -1
- package/lib/es6/index.js.map +1 -1
- package/lib/es6/style/data-table.shadow.css +12 -1
- package/lib/es6/types.js +2 -0
- package/lib/es6/types.js.map +1 -0
- package/lib/es6/utils.js +20 -24
- package/lib/es6/utils.js.map +1 -1
- package/package.json +20 -3
- package/src/Body.tsx +257 -0
- package/src/DataTable.tsx +443 -0
- package/src/{Head.jsx → Head.tsx} +29 -11
- package/src/{index.js → index.ts} +0 -0
- package/src/style/data-table.shadow.css +12 -1
- package/src/types.ts +53 -0
- package/src/utils.ts +55 -0
- package/lib/types/index.d.ts +0 -99
- package/src/Body.jsx +0 -118
- package/src/DataTable.jsx +0 -283
- package/src/index.d.ts +0 -99
- package/src/utils.js +0 -54
package/lib/es6/DataTable.js
CHANGED
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
2
|
-
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
3
1
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
4
2
|
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
5
3
|
import _createClass from "@babel/runtime/helpers/createClass";
|
|
@@ -17,6 +15,12 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
|
|
|
17
15
|
|
|
18
16
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
19
17
|
|
|
18
|
+
function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function (_e) { function e(_x) { return _e.apply(this, arguments); } e.toString = function () { return _e.toString(); }; return e; }(function (e) { throw e; }), f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function (_e2) { function e(_x2) { return _e2.apply(this, arguments); } e.toString = function () { return _e2.toString(); }; return e; }(function (e) { didErr = true; err = e; }), f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
|
|
19
|
+
|
|
20
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
21
|
+
|
|
22
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
23
|
+
|
|
20
24
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
21
25
|
|
|
22
26
|
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
@@ -36,45 +40,47 @@ var style = (
|
|
|
36
40
|
/*__reshadow_css_start__*/
|
|
37
41
|
_sstyled.insert(
|
|
38
42
|
/*__inner_css_start__*/
|
|
39
|
-
".
|
|
43
|
+
".___SDataTable_129rn_gg_{position:relative}.___SHeadWrapper_129rn_gg_{position:relative}.___SHeadWrapper_129rn_gg_.__sticky_129rn_gg_{position:-webkit-sticky;position:sticky;top:0;z-index:2}.___SHead_129rn_gg_{display:flex;position:relative;flex-direction:row;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;z-index:0}.___SColumn_129rn_gg_{display:flex;flex-grow:1;font-size:12px;line-height:18px;color:#333333;box-sizing:border-box;position:relative}.___SColumn_129rn_gg_:focus{outline:none;box-shadow:inset 0 0 0 3px rgba(43,148,225,.3)}.___SColumn_129rn_gg_.__hidden_129rn_gg_{height:0!important;padding:0!important;overflow:hidden!important;border:none!important}.___SColumn_129rn_gg_._use_primary_129rn_gg_{padding:12px;border-right:1px solid #dee3e5;border-bottom:1px solid #dee3e5;background-color:#f2f3f4}.___SColumn_129rn_gg_._use_secondary_129rn_gg_{padding:8px;border-bottom:1px solid #a6b0b3;background-color:#fff}.___SColumn_129rn_gg_.__use_129rn_gg_:last-child{border-right:none}.___SColumn_129rn_gg_.__group_129rn_gg_.__use_129rn_gg_{display:flex;flex-wrap:wrap;flex-direction:column;border-bottom:none;padding:0}.___SColumn_129rn_gg_.__groupHead_129rn_gg_.__use_129rn_gg_{justify-content:center;border-right:none;z-index:1}.___SColumn_129rn_gg_.__groupHead_129rn_gg_._use_primary_129rn_gg_{border-bottom:1px solid #dee3e5}.___SColumn_129rn_gg_.__groupHead_129rn_gg_._use_secondary_129rn_gg_{border-bottom:1px solid #a6b0b3}.___SColumn_129rn_gg_.__sortable_129rn_gg_{cursor:pointer}.___SColumn_129rn_gg_.__sortable_129rn_gg_._use_primary_129rn_gg_:hover{background-color:#e4e7e8}.___SColumn_129rn_gg_.__active_129rn_gg_._use_primary_129rn_gg_{background-color:#e4e7e8}.___SColumn_129rn_gg_.__resizable_129rn_gg_:hover:after{background:#a6b0b3}.___SColumn_129rn_gg_.__resizable_129rn_gg_:after{content:\"\";position:absolute;bottom:0;right:-1px;height:100vh;width:1px;background:transparent;cursor:col-resize}.___SColumn_129rn_gg_.__fixed_129rn_gg_{position:-webkit-sticky;position:sticky;z-index:2}.___SSortIcon_129rn_gg_{margin-top:2px;margin-left:4px;color:#bdc4c6}.___SSortIcon_129rn_gg_.__active_129rn_gg_{fill:#64787e}.___SBodyWrapper_129rn_gg_{position:relative}.___SBody_129rn_gg_{display:flex;flex-direction:column;position:relative;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}.___SRow_129rn_gg_{display:flex;flex-direction:row;position:relative}.___SRow_129rn_gg_:hover .___SCell_129rn_gg_:not(.__theme_129rn_gg_),.___SRow_129rn_gg_.__active_129rn_gg_ .___SCell_129rn_gg_:not(.__theme_129rn_gg_){background-color:#f6f7f7}.___SRow_129rn_gg_._theme_muted_129rn_gg_ .___SCell_129rn_gg_:not(.__theme_129rn_gg_){background-color:#f2f3f4}.___SRow_129rn_gg_:hover .___SCell_129rn_gg_._theme_muted_129rn_gg_,.___SRow_129rn_gg_._theme_muted_129rn_gg_:hover .___SCell_129rn_gg_:not(.__theme_129rn_gg_),.___SRow_129rn_gg_._theme_muted_129rn_gg_.__active_129rn_gg_ .___SCell_129rn_gg_:not(.__theme_129rn_gg_){background-color:#f6f7f7}.___SRow_129rn_gg_._theme_info_129rn_gg_ .___SCell_129rn_gg_:not(.__theme_129rn_gg_){background-color:#d5eaf9}.___SRow_129rn_gg_:hover .___SCell_129rn_gg_._theme_info_129rn_gg_,.___SRow_129rn_gg_._theme_info_129rn_gg_:hover .___SCell_129rn_gg_:not(.__theme_129rn_gg_),.___SRow_129rn_gg_._theme_info_129rn_gg_.__active_129rn_gg_ .___SCell_129rn_gg_:not(.__theme_129rn_gg_){background-color:#cae4f8}.___SRow_129rn_gg_._theme_success_129rn_gg_ .___SCell_129rn_gg_:not(.__theme_129rn_gg_){background-color:#e5f3e0}.___SRow_129rn_gg_:hover .___SCell_129rn_gg_._theme_success_129rn_gg_,.___SRow_129rn_gg_._theme_success_129rn_gg_:hover .___SCell_129rn_gg_:not(.__theme_129rn_gg_),.___SRow_129rn_gg_._theme_success_129rn_gg_.__active_129rn_gg_ .___SCell_129rn_gg_:not(.__theme_129rn_gg_){background-color:#dcefd6}.___SRow_129rn_gg_._theme_warning_129rn_gg_ .___SCell_129rn_gg_:not(.__theme_129rn_gg_){background-color:#fef3e6}.___SRow_129rn_gg_:hover .___SCell_129rn_gg_._theme_warning_129rn_gg_,.___SRow_129rn_gg_._theme_warning_129rn_gg_:hover .___SCell_129rn_gg_:not(.__theme_129rn_gg_),.___SRow_129rn_gg_._theme_warning_129rn_gg_.__active_129rn_gg_ .___SCell_129rn_gg_:not(.__theme_129rn_gg_){background-color:#feefde}.___SRow_129rn_gg_._theme_danger_129rn_gg_ .___SCell_129rn_gg_:not(.__theme_129rn_gg_){background-color:#fdeaea}.___SRow_129rn_gg_:hover .___SCell_129rn_gg_._theme_danger_129rn_gg_,.___SRow_129rn_gg_._theme_danger_129rn_gg_:hover .___SCell_129rn_gg_:not(.__theme_129rn_gg_),.___SRow_129rn_gg_._theme_danger_129rn_gg_.__active_129rn_gg_ .___SCell_129rn_gg_:not(.__theme_129rn_gg_){background-color:#fce0e0}.___SRow_129rn_gg_.__positioned_129rn_gg_{position:absolute}.___SCell_129rn_gg_{display:flex;flex:1;font-size:14px;color:#333333;line-height:20px;box-sizing:border-box;border-bottom:1px solid #dee3e5;overflow:hidden;white-space:nowrap}.___SCell_129rn_gg_._use_primary_129rn_gg_{padding:12px;min-height:45px;background-color:#fff}.___SCell_129rn_gg_._use_secondary_129rn_gg_{padding:8px;min-height:37px;background-color:#fff}.___SCell_129rn_gg_.__fixed_129rn_gg_{position:-webkit-sticky;position:sticky;z-index:1}.___SCell_129rn_gg_._theme_muted_129rn_gg_{background-color:#f2f3f4}.___SCell_129rn_gg_._theme_info_129rn_gg_{background-color:#d5eaf9}.___SCell_129rn_gg_._theme_success_129rn_gg_{background-color:#e5f3e0}.___SCell_129rn_gg_._theme_warning_129rn_gg_{background-color:#fef3e6}.___SCell_129rn_gg_._theme_danger_129rn_gg_{background-color:#fdeaea}.___SScrollAreaBar_129rn_gg_._orientation_horizontal_129rn_gg_{position:-webkit-sticky;position:sticky;bottom:0;left:0;margin-top:-12px;z-index:2}.___SScrollAreaBar_129rn_gg_._orientation_vertical_129rn_gg_{width:12px}.___SScrollAreaBar_129rn_gg_._orientation_horizontal_129rn_gg_{margin-left:calc(var(--left_n8z383) + 4px);margin-right:calc(var(--right_n8z383) + 4px);width:calc(100% - var(--offsetSum_n8z383) - 8px)}.___SHeightHold_129rn_gg_{position:absolute;top:0;width:100px}"
|
|
40
44
|
/*__inner_css_end__*/
|
|
41
|
-
, "
|
|
45
|
+
, "n8z383_gg_")
|
|
42
46
|
/*__reshadow_css_end__*/
|
|
43
47
|
, {
|
|
44
|
-
"__SDataTable": "
|
|
45
|
-
"__SHeadWrapper": "
|
|
46
|
-
"_sticky": "
|
|
47
|
-
"__SHead": "
|
|
48
|
-
"__SColumn": "
|
|
49
|
-
"_hidden": "
|
|
50
|
-
"_use_primary": "
|
|
51
|
-
"_use_secondary": "
|
|
52
|
-
"_use": "
|
|
53
|
-
"_group": "
|
|
54
|
-
"_groupHead": "
|
|
55
|
-
"_sortable": "
|
|
56
|
-
"_active": "
|
|
57
|
-
"_resizable": "
|
|
58
|
-
"_fixed": "
|
|
59
|
-
"__SSortIcon": "
|
|
60
|
-
"__SBodyWrapper": "
|
|
61
|
-
"__SBody": "
|
|
62
|
-
"__SRow": "
|
|
63
|
-
"__SCell": "
|
|
64
|
-
"_theme": "
|
|
65
|
-
"_theme_muted": "
|
|
66
|
-
"_theme_info": "
|
|
67
|
-
"_theme_success": "
|
|
68
|
-
"_theme_warning": "
|
|
69
|
-
"_theme_danger": "
|
|
70
|
-
"
|
|
71
|
-
"
|
|
72
|
-
"
|
|
73
|
-
"
|
|
74
|
-
"--
|
|
75
|
-
"--
|
|
48
|
+
"__SDataTable": "___SDataTable_129rn_gg_",
|
|
49
|
+
"__SHeadWrapper": "___SHeadWrapper_129rn_gg_",
|
|
50
|
+
"_sticky": "__sticky_129rn_gg_",
|
|
51
|
+
"__SHead": "___SHead_129rn_gg_",
|
|
52
|
+
"__SColumn": "___SColumn_129rn_gg_",
|
|
53
|
+
"_hidden": "__hidden_129rn_gg_",
|
|
54
|
+
"_use_primary": "_use_primary_129rn_gg_",
|
|
55
|
+
"_use_secondary": "_use_secondary_129rn_gg_",
|
|
56
|
+
"_use": "__use_129rn_gg_",
|
|
57
|
+
"_group": "__group_129rn_gg_",
|
|
58
|
+
"_groupHead": "__groupHead_129rn_gg_",
|
|
59
|
+
"_sortable": "__sortable_129rn_gg_",
|
|
60
|
+
"_active": "__active_129rn_gg_",
|
|
61
|
+
"_resizable": "__resizable_129rn_gg_",
|
|
62
|
+
"_fixed": "__fixed_129rn_gg_",
|
|
63
|
+
"__SSortIcon": "___SSortIcon_129rn_gg_",
|
|
64
|
+
"__SBodyWrapper": "___SBodyWrapper_129rn_gg_",
|
|
65
|
+
"__SBody": "___SBody_129rn_gg_",
|
|
66
|
+
"__SRow": "___SRow_129rn_gg_",
|
|
67
|
+
"__SCell": "___SCell_129rn_gg_",
|
|
68
|
+
"_theme": "__theme_129rn_gg_",
|
|
69
|
+
"_theme_muted": "_theme_muted_129rn_gg_",
|
|
70
|
+
"_theme_info": "_theme_info_129rn_gg_",
|
|
71
|
+
"_theme_success": "_theme_success_129rn_gg_",
|
|
72
|
+
"_theme_warning": "_theme_warning_129rn_gg_",
|
|
73
|
+
"_theme_danger": "_theme_danger_129rn_gg_",
|
|
74
|
+
"_positioned": "__positioned_129rn_gg_",
|
|
75
|
+
"__SScrollAreaBar": "___SScrollAreaBar_129rn_gg_",
|
|
76
|
+
"_orientation_horizontal": "_orientation_horizontal_129rn_gg_",
|
|
77
|
+
"_orientation_vertical": "_orientation_vertical_129rn_gg_",
|
|
78
|
+
"--left": "--left_n8z383",
|
|
79
|
+
"--right": "--right_n8z383",
|
|
80
|
+
"--offsetSum": "--offsetSum_n8z383",
|
|
81
|
+
"__SHeightHold": "___SHeightHold_129rn_gg_"
|
|
76
82
|
});
|
|
77
|
-
var
|
|
83
|
+
var REVERSED_SORT_DIRECTION = {
|
|
78
84
|
desc: 'asc',
|
|
79
85
|
asc: 'desc'
|
|
80
86
|
};
|
|
@@ -82,9 +88,9 @@ var DEFAULT_SORT_DIRECTION = 'desc';
|
|
|
82
88
|
var ROW_GROUP = Symbol('ROW_GROUP');
|
|
83
89
|
var cssVarReg = /[:;]/g;
|
|
84
90
|
|
|
85
|
-
function createCssVarForWidth(name) {
|
|
91
|
+
var createCssVarForWidth = function createCssVarForWidth(name) {
|
|
86
92
|
return "--".concat(name.replace(cssVarReg, '_'), "_width");
|
|
87
|
-
}
|
|
93
|
+
};
|
|
88
94
|
|
|
89
95
|
var RootDefinitionTable = /*#__PURE__*/function (_Component) {
|
|
90
96
|
_inherits(RootDefinitionTable, _Component);
|
|
@@ -100,14 +106,18 @@ var RootDefinitionTable = /*#__PURE__*/function (_Component) {
|
|
|
100
106
|
|
|
101
107
|
_defineProperty(_assertThisInitialized(_this), "columns", []);
|
|
102
108
|
|
|
103
|
-
_defineProperty(_assertThisInitialized(_this), "tableRef",
|
|
109
|
+
_defineProperty(_assertThisInitialized(_this), "tableRef", React.createRef());
|
|
104
110
|
|
|
105
|
-
_defineProperty(_assertThisInitialized(_this), "
|
|
106
|
-
|
|
107
|
-
|
|
111
|
+
_defineProperty(_assertThisInitialized(_this), "scrollBodyRef", null);
|
|
112
|
+
|
|
113
|
+
_defineProperty(_assertThisInitialized(_this), "scrollHeadRef", null);
|
|
114
|
+
|
|
115
|
+
_defineProperty(_assertThisInitialized(_this), "handlerSortClick", function (name, event) {
|
|
116
|
+
var column = _this.columns.find(function (column) {
|
|
117
|
+
return column.name === name;
|
|
108
118
|
});
|
|
109
119
|
|
|
110
|
-
return fire(_assertThisInitialized(_this), 'onSortChange', [column.name, column.active ?
|
|
120
|
+
return fire(_assertThisInitialized(_this), 'onSortChange', [column.name, column.active ? REVERSED_SORT_DIRECTION[column.sortDirection] : column.sortDirection], event);
|
|
111
121
|
});
|
|
112
122
|
|
|
113
123
|
_defineProperty(_assertThisInitialized(_this), "handlerResize", function () {
|
|
@@ -115,9 +125,7 @@ var RootDefinitionTable = /*#__PURE__*/function (_Component) {
|
|
|
115
125
|
});
|
|
116
126
|
|
|
117
127
|
_defineProperty(_assertThisInitialized(_this), "scrollToUp", function () {
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
(_this$tableRef = _this.tableRef) === null || _this$tableRef === void 0 ? void 0 : (_this$tableRef$curren = _this$tableRef.current) === null || _this$tableRef$curren === void 0 ? void 0 : _this$tableRef$curren.scrollIntoView({
|
|
128
|
+
_this.tableRef?.current?.scrollIntoView({
|
|
121
129
|
block: 'nearest',
|
|
122
130
|
inline: 'nearest',
|
|
123
131
|
behavior: 'smooth'
|
|
@@ -134,18 +142,41 @@ var RootDefinitionTable = /*#__PURE__*/function (_Component) {
|
|
|
134
142
|
_createClass(RootDefinitionTable, [{
|
|
135
143
|
key: "setVarStyle",
|
|
136
144
|
value: function setVarStyle(columns) {
|
|
137
|
-
var
|
|
145
|
+
var _iterator = _createForOfIteratorHelper(columns),
|
|
146
|
+
_step;
|
|
138
147
|
|
|
139
|
-
|
|
140
|
-
|
|
148
|
+
try {
|
|
149
|
+
for (_iterator.s(); !(_step = _iterator.n()).done;) {
|
|
150
|
+
var _column = _step.value;
|
|
141
151
|
|
|
142
|
-
|
|
143
|
-
|
|
152
|
+
if (Array.isArray(_column.cssVar)) {
|
|
153
|
+
var _iterator2 = _createForOfIteratorHelper(_column.cssVar),
|
|
154
|
+
_step2;
|
|
155
|
+
|
|
156
|
+
try {
|
|
157
|
+
for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
|
|
158
|
+
var cssVar = _step2.value;
|
|
159
|
+
this.tableRef.current?.style.setProperty(cssVar, "".concat(_column.width, "px"));
|
|
160
|
+
}
|
|
161
|
+
} catch (err) {
|
|
162
|
+
_iterator2.e(err);
|
|
163
|
+
} finally {
|
|
164
|
+
_iterator2.f();
|
|
165
|
+
}
|
|
166
|
+
} else {
|
|
167
|
+
this.tableRef.current?.style.setProperty(_column.cssVar, "".concat(_column.width, "px"));
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
} catch (err) {
|
|
171
|
+
_iterator.e(err);
|
|
172
|
+
} finally {
|
|
173
|
+
_iterator.f();
|
|
174
|
+
}
|
|
144
175
|
}
|
|
145
176
|
}, {
|
|
146
177
|
key: "childrenToColumns",
|
|
147
178
|
value: function childrenToColumns(children) {
|
|
148
|
-
var
|
|
179
|
+
var _this2 = this;
|
|
149
180
|
|
|
150
181
|
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
|
|
151
182
|
fixed: undefined
|
|
@@ -153,45 +184,42 @@ var RootDefinitionTable = /*#__PURE__*/function (_Component) {
|
|
|
153
184
|
var sort = this.asProps.sort;
|
|
154
185
|
var columnsChildren = [];
|
|
155
186
|
React.Children.forEach(children, function (child) {
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
if (! /*#__PURE__*/React.isValidElement(child)) return;
|
|
187
|
+
if (!React.isValidElement(child)) return;
|
|
159
188
|
if (child.type !== DefinitionTable.Column) return;
|
|
160
189
|
|
|
161
|
-
var
|
|
162
|
-
children =
|
|
163
|
-
name =
|
|
164
|
-
|
|
165
|
-
fixed =
|
|
166
|
-
resizable =
|
|
167
|
-
sortable =
|
|
168
|
-
props = _objectWithoutProperties(
|
|
190
|
+
var _ref3 = child.props,
|
|
191
|
+
children = _ref3.children,
|
|
192
|
+
name = _ref3.name,
|
|
193
|
+
_ref3$fixed = _ref3.fixed,
|
|
194
|
+
fixed = _ref3$fixed === void 0 ? options.fixed : _ref3$fixed,
|
|
195
|
+
resizable = _ref3.resizable,
|
|
196
|
+
sortable = _ref3.sortable,
|
|
197
|
+
props = _objectWithoutProperties(_ref3, _excluded);
|
|
169
198
|
|
|
170
199
|
var isGroup = !name;
|
|
171
|
-
var columns =
|
|
200
|
+
var columns = [];
|
|
172
201
|
|
|
173
202
|
if (isGroup) {
|
|
174
|
-
columns =
|
|
203
|
+
columns = _this2.childrenToColumns(children, {
|
|
175
204
|
fixed: fixed
|
|
176
205
|
});
|
|
177
|
-
name = flattenColumns(columns).map(function (
|
|
178
|
-
|
|
206
|
+
name = flattenColumns(columns).map(function (_ref4) {
|
|
207
|
+
var name = _ref4.name;
|
|
208
|
+
return name;
|
|
179
209
|
}).join('/');
|
|
180
210
|
if (!columns.length) return;
|
|
181
211
|
children = React.Children.toArray(children).filter(function (child) {
|
|
182
|
-
return !(
|
|
212
|
+
return !(React.isValidElement(child) && child.type === DefinitionTable.Column);
|
|
183
213
|
});
|
|
184
214
|
}
|
|
185
215
|
|
|
186
|
-
var column =
|
|
187
|
-
return
|
|
216
|
+
var column = _this2.columns.find(function (column) {
|
|
217
|
+
return column.name === name;
|
|
188
218
|
});
|
|
189
219
|
|
|
190
220
|
columnsChildren.push({
|
|
191
221
|
get width() {
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
return ((_this$props$ref$curre = this.props.ref.current) === null || _this$props$ref$curre === void 0 ? void 0 : _this$props$ref$curre.getBoundingClientRect().width) || 0;
|
|
222
|
+
return this.props.ref.current?.getBoundingClientRect().width || 0;
|
|
195
223
|
},
|
|
196
224
|
|
|
197
225
|
name: name,
|
|
@@ -200,10 +228,11 @@ var RootDefinitionTable = /*#__PURE__*/function (_Component) {
|
|
|
200
228
|
resizable: resizable,
|
|
201
229
|
active: sort[0] === name,
|
|
202
230
|
sortable: sortable,
|
|
203
|
-
sortDirection: sort[0] === name ? sort[1] :
|
|
231
|
+
sortDirection: sort[0] === name ? sort[1] : column?.sortDirection || (typeof sortable == 'string' ? sortable : DEFAULT_SORT_DIRECTION),
|
|
204
232
|
columns: columns,
|
|
205
233
|
props: _objectSpread({
|
|
206
|
-
|
|
234
|
+
name: name,
|
|
235
|
+
ref: column?.props?.ref || React.createRef(),
|
|
207
236
|
children: children
|
|
208
237
|
}, props)
|
|
209
238
|
});
|
|
@@ -229,127 +258,136 @@ var RootDefinitionTable = /*#__PURE__*/function (_Component) {
|
|
|
229
258
|
value: function getBodyProps(props) {
|
|
230
259
|
var _this$asProps = this.asProps,
|
|
231
260
|
data = _this$asProps.data,
|
|
232
|
-
use = _this$asProps.use
|
|
233
|
-
|
|
234
|
-
var
|
|
261
|
+
use = _this$asProps.use,
|
|
262
|
+
uniqueKey = _this$asProps.uniqueKey;
|
|
263
|
+
var cellPropsLayers = {};
|
|
264
|
+
var rowPropsLayers = [];
|
|
235
265
|
React.Children.forEach(props.children, function (child) {
|
|
236
|
-
if (
|
|
237
|
-
var
|
|
238
|
-
name =
|
|
239
|
-
children =
|
|
240
|
-
other = _objectWithoutProperties(
|
|
266
|
+
if (React.isValidElement(child)) {
|
|
267
|
+
var _ref5 = child.props,
|
|
268
|
+
name = _ref5.name,
|
|
269
|
+
children = _ref5.children,
|
|
270
|
+
other = _objectWithoutProperties(_ref5, _excluded2);
|
|
241
271
|
|
|
242
272
|
if (child.type === DefinitionTable.Cell && name) {
|
|
243
273
|
name.split('/').forEach(function (name) {
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
274
|
+
cellPropsLayers[name] = cellPropsLayers[name] || [];
|
|
275
|
+
cellPropsLayers[name].push(_objectSpread(_objectSpread({}, other), {}, {
|
|
276
|
+
childrenPropsGetter: children
|
|
247
277
|
}));
|
|
248
278
|
});
|
|
249
279
|
}
|
|
250
280
|
|
|
251
281
|
if (child.type === DefinitionTable.Row) {
|
|
252
|
-
|
|
253
|
-
|
|
282
|
+
rowPropsLayers.push(_objectSpread(_objectSpread({}, other), {}, {
|
|
283
|
+
childrenPropsGetter: children
|
|
254
284
|
}));
|
|
255
285
|
}
|
|
256
286
|
}
|
|
257
287
|
});
|
|
258
|
-
|
|
288
|
+
var result = {
|
|
259
289
|
columns: this.columns,
|
|
260
|
-
rows: this.dataToRows(data,
|
|
290
|
+
rows: this.dataToRows(data, cellPropsLayers),
|
|
291
|
+
uniqueKey: uniqueKey,
|
|
261
292
|
use: use,
|
|
262
|
-
|
|
293
|
+
rowPropsLayers: rowPropsLayers,
|
|
263
294
|
$scrollRef: this.scrollBodyRef
|
|
264
295
|
};
|
|
296
|
+
return result;
|
|
265
297
|
}
|
|
266
298
|
}, {
|
|
267
299
|
key: "dataToRows",
|
|
268
|
-
value: function dataToRows(data,
|
|
269
|
-
var
|
|
300
|
+
value: function dataToRows(data, cellPropsLayers) {
|
|
301
|
+
var _this3 = this;
|
|
270
302
|
|
|
271
|
-
function parseData(data) {
|
|
272
|
-
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
|
|
273
|
-
exclude: []
|
|
274
|
-
};
|
|
303
|
+
var parseData = function parseData(data, exclude) {
|
|
275
304
|
return data.map(function (row) {
|
|
276
|
-
var
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
305
|
+
var groupByName = {};
|
|
306
|
+
var groupedColumns = {};
|
|
307
|
+
var ungroupedColumns = {};
|
|
308
|
+
|
|
309
|
+
for (var rowKey in row) {
|
|
310
|
+
var columnNames = rowKey.split('/');
|
|
311
|
+
|
|
312
|
+
if (columnNames.length >= 2) {
|
|
313
|
+
var _iterator3 = _createForOfIteratorHelper(columnNames),
|
|
314
|
+
_step3;
|
|
315
|
+
|
|
316
|
+
try {
|
|
317
|
+
for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
|
|
318
|
+
var _column2 = _step3.value;
|
|
319
|
+
groupByName[_column2] = {
|
|
320
|
+
groupedColumns: columnNames,
|
|
321
|
+
groupData: row[rowKey]
|
|
322
|
+
};
|
|
323
|
+
groupedColumns[rowKey] = true;
|
|
324
|
+
}
|
|
325
|
+
} catch (err) {
|
|
326
|
+
_iterator3.e(err);
|
|
327
|
+
} finally {
|
|
328
|
+
_iterator3.f();
|
|
329
|
+
}
|
|
330
|
+
} else {
|
|
331
|
+
ungroupedColumns[rowKey] = true;
|
|
281
332
|
}
|
|
333
|
+
}
|
|
282
334
|
|
|
283
|
-
return acc;
|
|
284
|
-
}, []);
|
|
285
|
-
var nameColumnsGroup = columnsGroups.reduce(function (acc, _ref3) {
|
|
286
|
-
var _ref4 = _slicedToArray(_ref3, 1),
|
|
287
|
-
names = _ref4[0];
|
|
288
|
-
|
|
289
|
-
return acc.concat(names);
|
|
290
|
-
}, []).filter(function (name, i, arr) {
|
|
291
|
-
return arr.indexOf(name) === i;
|
|
292
|
-
});
|
|
293
335
|
var rowsGroup = row[ROW_GROUP] || [];
|
|
294
|
-
var
|
|
295
|
-
return
|
|
296
|
-
}
|
|
297
|
-
return
|
|
298
|
-
});
|
|
299
|
-
var
|
|
300
|
-
|
|
301
|
-
cells
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
names = _columnGroup[0],
|
|
312
|
-
_data = _columnGroup[1];
|
|
313
|
-
|
|
314
|
-
if (names[0] === column.name) {
|
|
315
|
-
acc.push({
|
|
316
|
-
name: names.join('/'),
|
|
317
|
-
cssVar: names.map(createCssVarForWidth),
|
|
336
|
+
var rowsGroupedNames = Object.fromEntries(rowsGroup.map(function (subRow) {
|
|
337
|
+
return Object.keys(subRow);
|
|
338
|
+
}).flat().map(function (key) {
|
|
339
|
+
return [key, true];
|
|
340
|
+
}));
|
|
341
|
+
var isGroup = false;
|
|
342
|
+
|
|
343
|
+
var cells = _this3.columns.map(function (column) {
|
|
344
|
+
if (groupByName[column.name]) {
|
|
345
|
+
var _groupByName$column$n = groupByName[column.name],
|
|
346
|
+
_groupedColumns = _groupByName$column$n.groupedColumns,
|
|
347
|
+
groupData = _groupByName$column$n.groupData;
|
|
348
|
+
|
|
349
|
+
if (_groupedColumns[0] === column.name) {
|
|
350
|
+
return {
|
|
351
|
+
name: _groupedColumns.join('/'),
|
|
352
|
+
cssVar: _groupedColumns.map(createCssVarForWidth),
|
|
318
353
|
fixed: column.fixed,
|
|
319
|
-
data:
|
|
320
|
-
|
|
321
|
-
}
|
|
354
|
+
data: groupData,
|
|
355
|
+
cellPropsLayers: cellPropsLayers[column.name] || []
|
|
356
|
+
};
|
|
322
357
|
}
|
|
323
358
|
} else if (column.name in row) {
|
|
324
|
-
|
|
359
|
+
return {
|
|
325
360
|
name: column.name,
|
|
326
361
|
cssVar: column.cssVar,
|
|
327
362
|
fixed: column.fixed,
|
|
328
363
|
data: row[column.name],
|
|
329
|
-
|
|
330
|
-
}
|
|
331
|
-
} else if (!
|
|
332
|
-
// TODO:
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
} else if (![].concat(_toConsumableArray(options.exclude), _toConsumableArray(nameRowsGroup)).includes(column.name)) {
|
|
338
|
-
acc.push({
|
|
364
|
+
cellPropsLayers: cellPropsLayers[column.name] || []
|
|
365
|
+
};
|
|
366
|
+
} else if (!isGroup && rowsGroupedNames[column.name]) {
|
|
367
|
+
// TODO: make it work not only with first group
|
|
368
|
+
isGroup = true;
|
|
369
|
+
return parseData(rowsGroup, _objectSpread(_objectSpread({}, ungroupedColumns), groupedColumns));
|
|
370
|
+
} else if (!exclude[column.name] && !rowsGroupedNames[column.name]) {
|
|
371
|
+
return {
|
|
339
372
|
name: column.name,
|
|
340
373
|
cssVar: column.cssVar,
|
|
341
374
|
fixed: column.fixed,
|
|
342
375
|
data: null,
|
|
343
|
-
|
|
344
|
-
}
|
|
376
|
+
cellPropsLayers: cellPropsLayers[column.name] || []
|
|
377
|
+
};
|
|
345
378
|
}
|
|
379
|
+
}).filter(function (column) {
|
|
380
|
+
return column !== undefined;
|
|
381
|
+
}).map(function (column) {
|
|
382
|
+
return column;
|
|
383
|
+
});
|
|
346
384
|
|
|
347
|
-
|
|
348
|
-
|
|
385
|
+
cells.flatRowData = row;
|
|
386
|
+
return cells;
|
|
349
387
|
});
|
|
350
|
-
}
|
|
388
|
+
};
|
|
351
389
|
|
|
352
|
-
return parseData(data);
|
|
390
|
+
return parseData(data, {});
|
|
353
391
|
}
|
|
354
392
|
}, {
|
|
355
393
|
key: "componentDidUpdate",
|
|
@@ -359,7 +397,7 @@ var RootDefinitionTable = /*#__PURE__*/function (_Component) {
|
|
|
359
397
|
}, {
|
|
360
398
|
key: "render",
|
|
361
399
|
value: function render() {
|
|
362
|
-
var _ref = this
|
|
400
|
+
var _ref = this.asProps,
|
|
363
401
|
_ref2;
|
|
364
402
|
|
|
365
403
|
var SDataTable = Box;
|
|
@@ -382,6 +420,7 @@ _defineProperty(RootDefinitionTable, "style", style);
|
|
|
382
420
|
|
|
383
421
|
_defineProperty(RootDefinitionTable, "defaultProps", {
|
|
384
422
|
use: 'primary',
|
|
423
|
+
uniqueKey: 'id',
|
|
385
424
|
sort: [],
|
|
386
425
|
data: []
|
|
387
426
|
});
|