@semcore/data-table 2.0.0 → 2.2.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 +18 -0
- package/lib/cjs/Body.js +277 -78
- package/lib/cjs/Body.js.map +1 -1
- package/lib/cjs/DataTable.js +194 -159
- package/lib/cjs/DataTable.js.map +1 -1
- package/lib/cjs/Head.js +15 -8
- package/lib/cjs/Head.js.map +1 -1
- package/lib/cjs/index.js.map +1 -1
- package/lib/cjs/style/data-table.shadow.css +11 -0
- 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 +277 -78
- package/lib/es6/Body.js.map +1 -1
- package/lib/es6/DataTable.js +196 -157
- package/lib/es6/DataTable.js.map +1 -1
- package/lib/es6/Head.js +16 -8
- package/lib/es6/Head.js.map +1 -1
- package/lib/es6/index.js.map +1 -1
- package/lib/es6/style/data-table.shadow.css +11 -0
- 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 +3 -2
- 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 +11 -0
- 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 -119
- package/src/DataTable.jsx +0 -283
- package/src/index.d.ts +0 -99
- package/src/utils.js +0 -54
package/lib/cjs/DataTable.js
CHANGED
|
@@ -9,10 +9,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
9
9
|
});
|
|
10
10
|
exports["default"] = exports.ROW_GROUP = void 0;
|
|
11
11
|
|
|
12
|
-
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
13
|
-
|
|
14
|
-
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
15
|
-
|
|
16
12
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
17
13
|
|
|
18
14
|
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
@@ -58,6 +54,12 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
|
|
|
58
54
|
|
|
59
55
|
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) { (0, _defineProperty2["default"])(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; }
|
|
60
56
|
|
|
57
|
+
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; } } }; }
|
|
58
|
+
|
|
59
|
+
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); }
|
|
60
|
+
|
|
61
|
+
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; }
|
|
62
|
+
|
|
61
63
|
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); }; }
|
|
62
64
|
|
|
63
65
|
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; } }
|
|
@@ -67,45 +69,47 @@ var style = (
|
|
|
67
69
|
/*__reshadow_css_start__*/
|
|
68
70
|
_core.sstyled.insert(
|
|
69
71
|
/*__inner_css_start__*/
|
|
70
|
-
".
|
|
72
|
+
".___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}"
|
|
71
73
|
/*__inner_css_end__*/
|
|
72
|
-
, "
|
|
74
|
+
, "n8z383_gg_")
|
|
73
75
|
/*__reshadow_css_end__*/
|
|
74
76
|
, {
|
|
75
|
-
"__SDataTable": "
|
|
76
|
-
"__SHeadWrapper": "
|
|
77
|
-
"_sticky": "
|
|
78
|
-
"__SHead": "
|
|
79
|
-
"__SColumn": "
|
|
80
|
-
"_hidden": "
|
|
81
|
-
"_use_primary": "
|
|
82
|
-
"_use_secondary": "
|
|
83
|
-
"_use": "
|
|
84
|
-
"_group": "
|
|
85
|
-
"_groupHead": "
|
|
86
|
-
"_sortable": "
|
|
87
|
-
"_active": "
|
|
88
|
-
"_resizable": "
|
|
89
|
-
"_fixed": "
|
|
90
|
-
"__SSortIcon": "
|
|
91
|
-
"__SBodyWrapper": "
|
|
92
|
-
"__SBody": "
|
|
93
|
-
"__SRow": "
|
|
94
|
-
"__SCell": "
|
|
95
|
-
"_theme": "
|
|
96
|
-
"_theme_muted": "
|
|
97
|
-
"_theme_info": "
|
|
98
|
-
"_theme_success": "
|
|
99
|
-
"_theme_warning": "
|
|
100
|
-
"_theme_danger": "
|
|
101
|
-
"
|
|
102
|
-
"
|
|
103
|
-
"
|
|
104
|
-
"
|
|
105
|
-
"--
|
|
106
|
-
"--
|
|
77
|
+
"__SDataTable": "___SDataTable_129rn_gg_",
|
|
78
|
+
"__SHeadWrapper": "___SHeadWrapper_129rn_gg_",
|
|
79
|
+
"_sticky": "__sticky_129rn_gg_",
|
|
80
|
+
"__SHead": "___SHead_129rn_gg_",
|
|
81
|
+
"__SColumn": "___SColumn_129rn_gg_",
|
|
82
|
+
"_hidden": "__hidden_129rn_gg_",
|
|
83
|
+
"_use_primary": "_use_primary_129rn_gg_",
|
|
84
|
+
"_use_secondary": "_use_secondary_129rn_gg_",
|
|
85
|
+
"_use": "__use_129rn_gg_",
|
|
86
|
+
"_group": "__group_129rn_gg_",
|
|
87
|
+
"_groupHead": "__groupHead_129rn_gg_",
|
|
88
|
+
"_sortable": "__sortable_129rn_gg_",
|
|
89
|
+
"_active": "__active_129rn_gg_",
|
|
90
|
+
"_resizable": "__resizable_129rn_gg_",
|
|
91
|
+
"_fixed": "__fixed_129rn_gg_",
|
|
92
|
+
"__SSortIcon": "___SSortIcon_129rn_gg_",
|
|
93
|
+
"__SBodyWrapper": "___SBodyWrapper_129rn_gg_",
|
|
94
|
+
"__SBody": "___SBody_129rn_gg_",
|
|
95
|
+
"__SRow": "___SRow_129rn_gg_",
|
|
96
|
+
"__SCell": "___SCell_129rn_gg_",
|
|
97
|
+
"_theme": "__theme_129rn_gg_",
|
|
98
|
+
"_theme_muted": "_theme_muted_129rn_gg_",
|
|
99
|
+
"_theme_info": "_theme_info_129rn_gg_",
|
|
100
|
+
"_theme_success": "_theme_success_129rn_gg_",
|
|
101
|
+
"_theme_warning": "_theme_warning_129rn_gg_",
|
|
102
|
+
"_theme_danger": "_theme_danger_129rn_gg_",
|
|
103
|
+
"_positioned": "__positioned_129rn_gg_",
|
|
104
|
+
"__SScrollAreaBar": "___SScrollAreaBar_129rn_gg_",
|
|
105
|
+
"_orientation_horizontal": "_orientation_horizontal_129rn_gg_",
|
|
106
|
+
"_orientation_vertical": "_orientation_vertical_129rn_gg_",
|
|
107
|
+
"--left": "--left_n8z383",
|
|
108
|
+
"--right": "--right_n8z383",
|
|
109
|
+
"--offsetSum": "--offsetSum_n8z383",
|
|
110
|
+
"__SHeightHold": "___SHeightHold_129rn_gg_"
|
|
107
111
|
});
|
|
108
|
-
var
|
|
112
|
+
var REVERSED_SORT_DIRECTION = {
|
|
109
113
|
desc: 'asc',
|
|
110
114
|
asc: 'desc'
|
|
111
115
|
};
|
|
@@ -114,9 +118,9 @@ var ROW_GROUP = Symbol('ROW_GROUP');
|
|
|
114
118
|
exports.ROW_GROUP = ROW_GROUP;
|
|
115
119
|
var cssVarReg = /[:;]/g;
|
|
116
120
|
|
|
117
|
-
function createCssVarForWidth(name) {
|
|
121
|
+
var createCssVarForWidth = function createCssVarForWidth(name) {
|
|
118
122
|
return "--".concat(name.replace(cssVarReg, '_'), "_width");
|
|
119
|
-
}
|
|
123
|
+
};
|
|
120
124
|
|
|
121
125
|
var RootDefinitionTable = /*#__PURE__*/function (_Component) {
|
|
122
126
|
(0, _inherits2["default"])(RootDefinitionTable, _Component);
|
|
@@ -129,21 +133,21 @@ var RootDefinitionTable = /*#__PURE__*/function (_Component) {
|
|
|
129
133
|
(0, _classCallCheck2["default"])(this, RootDefinitionTable);
|
|
130
134
|
_this = _super.call(this, props);
|
|
131
135
|
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "columns", []);
|
|
132
|
-
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "tableRef",
|
|
133
|
-
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "
|
|
134
|
-
|
|
135
|
-
|
|
136
|
+
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "tableRef", _react["default"].createRef());
|
|
137
|
+
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "scrollBodyRef", null);
|
|
138
|
+
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "scrollHeadRef", null);
|
|
139
|
+
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handlerSortClick", function (name, event) {
|
|
140
|
+
var column = _this.columns.find(function (column) {
|
|
141
|
+
return column.name === name;
|
|
136
142
|
});
|
|
137
143
|
|
|
138
|
-
return (0, _fire["default"])((0, _assertThisInitialized2["default"])(_this), 'onSortChange', [column.name, column.active ?
|
|
144
|
+
return (0, _fire["default"])((0, _assertThisInitialized2["default"])(_this), 'onSortChange', [column.name, column.active ? REVERSED_SORT_DIRECTION[column.sortDirection] : column.sortDirection], event);
|
|
139
145
|
});
|
|
140
146
|
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handlerResize", function () {
|
|
141
147
|
_this.forceUpdate();
|
|
142
148
|
});
|
|
143
149
|
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "scrollToUp", function () {
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
(_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({
|
|
150
|
+
_this.tableRef?.current?.scrollIntoView({
|
|
147
151
|
block: 'nearest',
|
|
148
152
|
inline: 'nearest',
|
|
149
153
|
behavior: 'smooth'
|
|
@@ -159,18 +163,41 @@ var RootDefinitionTable = /*#__PURE__*/function (_Component) {
|
|
|
159
163
|
(0, _createClass2["default"])(RootDefinitionTable, [{
|
|
160
164
|
key: "setVarStyle",
|
|
161
165
|
value: function setVarStyle(columns) {
|
|
162
|
-
var
|
|
166
|
+
var _iterator = _createForOfIteratorHelper(columns),
|
|
167
|
+
_step;
|
|
163
168
|
|
|
164
|
-
|
|
165
|
-
|
|
169
|
+
try {
|
|
170
|
+
for (_iterator.s(); !(_step = _iterator.n()).done;) {
|
|
171
|
+
var _column = _step.value;
|
|
166
172
|
|
|
167
|
-
|
|
168
|
-
|
|
173
|
+
if (Array.isArray(_column.cssVar)) {
|
|
174
|
+
var _iterator2 = _createForOfIteratorHelper(_column.cssVar),
|
|
175
|
+
_step2;
|
|
176
|
+
|
|
177
|
+
try {
|
|
178
|
+
for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
|
|
179
|
+
var cssVar = _step2.value;
|
|
180
|
+
this.tableRef.current?.style.setProperty(cssVar, "".concat(_column.width, "px"));
|
|
181
|
+
}
|
|
182
|
+
} catch (err) {
|
|
183
|
+
_iterator2.e(err);
|
|
184
|
+
} finally {
|
|
185
|
+
_iterator2.f();
|
|
186
|
+
}
|
|
187
|
+
} else {
|
|
188
|
+
this.tableRef.current?.style.setProperty(_column.cssVar, "".concat(_column.width, "px"));
|
|
189
|
+
}
|
|
190
|
+
}
|
|
191
|
+
} catch (err) {
|
|
192
|
+
_iterator.e(err);
|
|
193
|
+
} finally {
|
|
194
|
+
_iterator.f();
|
|
195
|
+
}
|
|
169
196
|
}
|
|
170
197
|
}, {
|
|
171
198
|
key: "childrenToColumns",
|
|
172
199
|
value: function childrenToColumns(children) {
|
|
173
|
-
var
|
|
200
|
+
var _this2 = this;
|
|
174
201
|
|
|
175
202
|
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
|
|
176
203
|
fixed: undefined
|
|
@@ -179,43 +206,40 @@ var RootDefinitionTable = /*#__PURE__*/function (_Component) {
|
|
|
179
206
|
var columnsChildren = [];
|
|
180
207
|
|
|
181
208
|
_react["default"].Children.forEach(children, function (child) {
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
if (! /*#__PURE__*/_react["default"].isValidElement(child)) return;
|
|
209
|
+
if (!_react["default"].isValidElement(child)) return;
|
|
185
210
|
if (child.type !== DefinitionTable.Column) return;
|
|
186
|
-
var
|
|
187
|
-
children =
|
|
188
|
-
name =
|
|
189
|
-
|
|
190
|
-
fixed =
|
|
191
|
-
resizable =
|
|
192
|
-
sortable =
|
|
193
|
-
props = (0, _objectWithoutProperties2["default"])(
|
|
211
|
+
var _ref3 = child.props,
|
|
212
|
+
children = _ref3.children,
|
|
213
|
+
name = _ref3.name,
|
|
214
|
+
_ref3$fixed = _ref3.fixed,
|
|
215
|
+
fixed = _ref3$fixed === void 0 ? options.fixed : _ref3$fixed,
|
|
216
|
+
resizable = _ref3.resizable,
|
|
217
|
+
sortable = _ref3.sortable,
|
|
218
|
+
props = (0, _objectWithoutProperties2["default"])(_ref3, _excluded);
|
|
194
219
|
var isGroup = !name;
|
|
195
|
-
var columns =
|
|
220
|
+
var columns = [];
|
|
196
221
|
|
|
197
222
|
if (isGroup) {
|
|
198
|
-
columns =
|
|
223
|
+
columns = _this2.childrenToColumns(children, {
|
|
199
224
|
fixed: fixed
|
|
200
225
|
});
|
|
201
|
-
name = (0, _utils.flattenColumns)(columns).map(function (
|
|
202
|
-
|
|
226
|
+
name = (0, _utils.flattenColumns)(columns).map(function (_ref4) {
|
|
227
|
+
var name = _ref4.name;
|
|
228
|
+
return name;
|
|
203
229
|
}).join('/');
|
|
204
230
|
if (!columns.length) return;
|
|
205
231
|
children = _react["default"].Children.toArray(children).filter(function (child) {
|
|
206
|
-
return !(
|
|
232
|
+
return !(_react["default"].isValidElement(child) && child.type === DefinitionTable.Column);
|
|
207
233
|
});
|
|
208
234
|
}
|
|
209
235
|
|
|
210
|
-
var column =
|
|
211
|
-
return
|
|
236
|
+
var column = _this2.columns.find(function (column) {
|
|
237
|
+
return column.name === name;
|
|
212
238
|
});
|
|
213
239
|
|
|
214
240
|
columnsChildren.push({
|
|
215
241
|
get width() {
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
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;
|
|
242
|
+
return this.props.ref.current?.getBoundingClientRect().width || 0;
|
|
219
243
|
},
|
|
220
244
|
|
|
221
245
|
name: name,
|
|
@@ -224,10 +248,11 @@ var RootDefinitionTable = /*#__PURE__*/function (_Component) {
|
|
|
224
248
|
resizable: resizable,
|
|
225
249
|
active: sort[0] === name,
|
|
226
250
|
sortable: sortable,
|
|
227
|
-
sortDirection: sort[0] === name ? sort[1] :
|
|
251
|
+
sortDirection: sort[0] === name ? sort[1] : column?.sortDirection || (typeof sortable == 'string' ? sortable : DEFAULT_SORT_DIRECTION),
|
|
228
252
|
columns: columns,
|
|
229
253
|
props: _objectSpread({
|
|
230
|
-
|
|
254
|
+
name: name,
|
|
255
|
+
ref: column?.props?.ref || _react["default"].createRef(),
|
|
231
256
|
children: children
|
|
232
257
|
}, props)
|
|
233
258
|
});
|
|
@@ -254,129 +279,138 @@ var RootDefinitionTable = /*#__PURE__*/function (_Component) {
|
|
|
254
279
|
value: function getBodyProps(props) {
|
|
255
280
|
var _this$asProps = this.asProps,
|
|
256
281
|
data = _this$asProps.data,
|
|
257
|
-
use = _this$asProps.use
|
|
258
|
-
|
|
259
|
-
var
|
|
282
|
+
use = _this$asProps.use,
|
|
283
|
+
uniqueKey = _this$asProps.uniqueKey;
|
|
284
|
+
var cellPropsLayers = {};
|
|
285
|
+
var rowPropsLayers = [];
|
|
260
286
|
|
|
261
287
|
_react["default"].Children.forEach(props.children, function (child) {
|
|
262
|
-
if (
|
|
263
|
-
var
|
|
264
|
-
name =
|
|
265
|
-
children =
|
|
266
|
-
other = (0, _objectWithoutProperties2["default"])(
|
|
288
|
+
if (_react["default"].isValidElement(child)) {
|
|
289
|
+
var _ref5 = child.props,
|
|
290
|
+
name = _ref5.name,
|
|
291
|
+
children = _ref5.children,
|
|
292
|
+
other = (0, _objectWithoutProperties2["default"])(_ref5, _excluded2);
|
|
267
293
|
|
|
268
294
|
if (child.type === DefinitionTable.Cell && name) {
|
|
269
295
|
name.split('/').forEach(function (name) {
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
296
|
+
cellPropsLayers[name] = cellPropsLayers[name] || [];
|
|
297
|
+
cellPropsLayers[name].push(_objectSpread(_objectSpread({}, other), {}, {
|
|
298
|
+
childrenPropsGetter: children
|
|
273
299
|
}));
|
|
274
300
|
});
|
|
275
301
|
}
|
|
276
302
|
|
|
277
303
|
if (child.type === DefinitionTable.Row) {
|
|
278
|
-
|
|
279
|
-
|
|
304
|
+
rowPropsLayers.push(_objectSpread(_objectSpread({}, other), {}, {
|
|
305
|
+
childrenPropsGetter: children
|
|
280
306
|
}));
|
|
281
307
|
}
|
|
282
308
|
}
|
|
283
309
|
});
|
|
284
310
|
|
|
285
|
-
|
|
311
|
+
var result = {
|
|
286
312
|
columns: this.columns,
|
|
287
|
-
rows: this.dataToRows(data,
|
|
313
|
+
rows: this.dataToRows(data, cellPropsLayers),
|
|
314
|
+
uniqueKey: uniqueKey,
|
|
288
315
|
use: use,
|
|
289
|
-
|
|
316
|
+
rowPropsLayers: rowPropsLayers,
|
|
290
317
|
$scrollRef: this.scrollBodyRef
|
|
291
318
|
};
|
|
319
|
+
return result;
|
|
292
320
|
}
|
|
293
321
|
}, {
|
|
294
322
|
key: "dataToRows",
|
|
295
|
-
value: function dataToRows(data,
|
|
296
|
-
var
|
|
323
|
+
value: function dataToRows(data, cellPropsLayers) {
|
|
324
|
+
var _this3 = this;
|
|
297
325
|
|
|
298
|
-
function parseData(data) {
|
|
299
|
-
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
|
|
300
|
-
exclude: []
|
|
301
|
-
};
|
|
326
|
+
var parseData = function parseData(data, exclude) {
|
|
302
327
|
return data.map(function (row) {
|
|
303
|
-
var
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
328
|
+
var groupByName = {};
|
|
329
|
+
var groupedColumns = {};
|
|
330
|
+
var ungroupedColumns = {};
|
|
331
|
+
|
|
332
|
+
for (var rowKey in row) {
|
|
333
|
+
var columnNames = rowKey.split('/');
|
|
334
|
+
|
|
335
|
+
if (columnNames.length >= 2) {
|
|
336
|
+
var _iterator3 = _createForOfIteratorHelper(columnNames),
|
|
337
|
+
_step3;
|
|
338
|
+
|
|
339
|
+
try {
|
|
340
|
+
for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
|
|
341
|
+
var _column2 = _step3.value;
|
|
342
|
+
groupByName[_column2] = {
|
|
343
|
+
groupedColumns: columnNames,
|
|
344
|
+
groupData: row[rowKey]
|
|
345
|
+
};
|
|
346
|
+
groupedColumns[rowKey] = true;
|
|
347
|
+
}
|
|
348
|
+
} catch (err) {
|
|
349
|
+
_iterator3.e(err);
|
|
350
|
+
} finally {
|
|
351
|
+
_iterator3.f();
|
|
352
|
+
}
|
|
353
|
+
} else {
|
|
354
|
+
ungroupedColumns[rowKey] = true;
|
|
308
355
|
}
|
|
356
|
+
}
|
|
309
357
|
|
|
310
|
-
return acc;
|
|
311
|
-
}, []);
|
|
312
|
-
var nameColumnsGroup = columnsGroups.reduce(function (acc, _ref3) {
|
|
313
|
-
var _ref4 = (0, _slicedToArray2["default"])(_ref3, 1),
|
|
314
|
-
names = _ref4[0];
|
|
315
|
-
|
|
316
|
-
return acc.concat(names);
|
|
317
|
-
}, []).filter(function (name, i, arr) {
|
|
318
|
-
return arr.indexOf(name) === i;
|
|
319
|
-
});
|
|
320
358
|
var rowsGroup = row[ROW_GROUP] || [];
|
|
321
|
-
var
|
|
322
|
-
return
|
|
323
|
-
}
|
|
324
|
-
return
|
|
325
|
-
});
|
|
326
|
-
var
|
|
327
|
-
|
|
328
|
-
cells
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
names = _columnGroup[0],
|
|
339
|
-
_data = _columnGroup[1];
|
|
340
|
-
|
|
341
|
-
if (names[0] === column.name) {
|
|
342
|
-
acc.push({
|
|
343
|
-
name: names.join('/'),
|
|
344
|
-
cssVar: names.map(createCssVarForWidth),
|
|
359
|
+
var rowsGroupedNames = Object.fromEntries(rowsGroup.map(function (subRow) {
|
|
360
|
+
return Object.keys(subRow);
|
|
361
|
+
}).flat().map(function (key) {
|
|
362
|
+
return [key, true];
|
|
363
|
+
}));
|
|
364
|
+
var isGroup = false;
|
|
365
|
+
|
|
366
|
+
var cells = _this3.columns.map(function (column) {
|
|
367
|
+
if (groupByName[column.name]) {
|
|
368
|
+
var _groupByName$column$n = groupByName[column.name],
|
|
369
|
+
_groupedColumns = _groupByName$column$n.groupedColumns,
|
|
370
|
+
groupData = _groupByName$column$n.groupData;
|
|
371
|
+
|
|
372
|
+
if (_groupedColumns[0] === column.name) {
|
|
373
|
+
return {
|
|
374
|
+
name: _groupedColumns.join('/'),
|
|
375
|
+
cssVar: _groupedColumns.map(createCssVarForWidth),
|
|
345
376
|
fixed: column.fixed,
|
|
346
|
-
data:
|
|
347
|
-
|
|
348
|
-
}
|
|
377
|
+
data: groupData,
|
|
378
|
+
cellPropsLayers: cellPropsLayers[column.name] || []
|
|
379
|
+
};
|
|
349
380
|
}
|
|
350
381
|
} else if (column.name in row) {
|
|
351
|
-
|
|
382
|
+
return {
|
|
352
383
|
name: column.name,
|
|
353
384
|
cssVar: column.cssVar,
|
|
354
385
|
fixed: column.fixed,
|
|
355
386
|
data: row[column.name],
|
|
356
|
-
|
|
357
|
-
}
|
|
358
|
-
} else if (!
|
|
359
|
-
// TODO:
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
} else if (![].concat((0, _toConsumableArray2["default"])(options.exclude), (0, _toConsumableArray2["default"])(nameRowsGroup)).includes(column.name)) {
|
|
365
|
-
acc.push({
|
|
387
|
+
cellPropsLayers: cellPropsLayers[column.name] || []
|
|
388
|
+
};
|
|
389
|
+
} else if (!isGroup && rowsGroupedNames[column.name]) {
|
|
390
|
+
// TODO: make it work not only with first group
|
|
391
|
+
isGroup = true;
|
|
392
|
+
return parseData(rowsGroup, _objectSpread(_objectSpread({}, ungroupedColumns), groupedColumns));
|
|
393
|
+
} else if (!exclude[column.name] && !rowsGroupedNames[column.name]) {
|
|
394
|
+
return {
|
|
366
395
|
name: column.name,
|
|
367
396
|
cssVar: column.cssVar,
|
|
368
397
|
fixed: column.fixed,
|
|
369
398
|
data: null,
|
|
370
|
-
|
|
371
|
-
}
|
|
399
|
+
cellPropsLayers: cellPropsLayers[column.name] || []
|
|
400
|
+
};
|
|
372
401
|
}
|
|
402
|
+
}).filter(function (column) {
|
|
403
|
+
return column !== undefined;
|
|
404
|
+
}).map(function (column) {
|
|
405
|
+
return column;
|
|
406
|
+
});
|
|
373
407
|
|
|
374
|
-
|
|
375
|
-
|
|
408
|
+
cells.flatRowData = row;
|
|
409
|
+
return cells;
|
|
376
410
|
});
|
|
377
|
-
}
|
|
411
|
+
};
|
|
378
412
|
|
|
379
|
-
return parseData(data);
|
|
413
|
+
return parseData(data, {});
|
|
380
414
|
}
|
|
381
415
|
}, {
|
|
382
416
|
key: "componentDidUpdate",
|
|
@@ -406,6 +440,7 @@ var RootDefinitionTable = /*#__PURE__*/function (_Component) {
|
|
|
406
440
|
(0, _defineProperty2["default"])(RootDefinitionTable, "style", style);
|
|
407
441
|
(0, _defineProperty2["default"])(RootDefinitionTable, "defaultProps", {
|
|
408
442
|
use: 'primary',
|
|
443
|
+
uniqueKey: 'id',
|
|
409
444
|
sort: [],
|
|
410
445
|
data: []
|
|
411
446
|
});
|