linear-react-components-ui 0.4.76-beta.23 → 0.4.76-beta.26
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/lib/assets/styles/effects.scss +20 -0
- package/lib/assets/styles/table.scss +13 -0
- package/lib/assets/styles/uitour.scss +112 -0
- package/lib/form/index.js +21 -40
- package/lib/icons/helper.js +4 -0
- package/lib/inputs/base/InputTextBase.js +23 -3
- package/lib/inputs/date/helper.js +16 -0
- package/lib/inputs/mask/Phone.js +1 -10
- package/lib/inputs/select/multiple/index.js +2 -2
- package/lib/inputs/select/simple/index.js +2 -2
- package/lib/internals/constants.js +4 -3
- package/lib/list/Item.js +25 -7
- package/lib/list/index.js +88 -10
- package/lib/list/list.spec.js +230 -102
- package/lib/menus/sidenav/NavMenuItem.js +12 -4
- package/lib/menus/sidenav/index.js +23 -3
- package/lib/menus/sidenav/popup_menu_search/index.js +13 -9
- package/lib/menus/sidenav/sidenav.spec.js +78 -19
- package/lib/skeleton/SkeletonContainer.js +1 -1
- package/lib/table/Body.js +41 -7
- package/lib/table/Header.js +12 -1
- package/lib/table/HeaderColumn.js +4 -2
- package/lib/table/Row.js +14 -7
- package/lib/table/RowColumn.js +4 -3
- package/lib/table/helpers.js +11 -1
- package/lib/table/index.js +32 -8
- package/lib/uitour/helpers.js +15 -0
- package/lib/uitour/index.js +271 -0
- package/lib/uitour/uitour.spec.js +176 -0
- package/package.json +1 -1
|
@@ -19,6 +19,8 @@ var _helpers = require("./helpers");
|
|
|
19
19
|
|
|
20
20
|
var _permissionValidations = require("../../permissionValidations");
|
|
21
21
|
|
|
22
|
+
var _withTooltip = _interopRequireDefault(require("../../internals/withTooltip"));
|
|
23
|
+
|
|
22
24
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
23
25
|
|
|
24
26
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
@@ -49,7 +51,8 @@ var NavMenuItem = function NavMenuItem(props) {
|
|
|
49
51
|
permissionAttr = props.permissionAttr,
|
|
50
52
|
maxWidth = props.maxWidth,
|
|
51
53
|
minWidth = props.minWidth,
|
|
52
|
-
columnsQtty = props.columnsQtty
|
|
54
|
+
columnsQtty = props.columnsQtty,
|
|
55
|
+
targetRef = props.targetRef;
|
|
53
56
|
|
|
54
57
|
var _useState = (0, _react.useState)(false),
|
|
55
58
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -93,6 +96,7 @@ var NavMenuItem = function NavMenuItem(props) {
|
|
|
93
96
|
return /*#__PURE__*/_react["default"].createElement(_helpers.SubMenuContext.Provider, {
|
|
94
97
|
value: contextValues()
|
|
95
98
|
}, /*#__PURE__*/_react["default"].createElement("li", {
|
|
99
|
+
ref: targetRef,
|
|
96
100
|
className: "item ".concat(url && !disabled && '-withlink', " ").concat(customClass, " ").concat(disabled && '-disabled'),
|
|
97
101
|
onMouseEnter: function onMouseEnter(e) {
|
|
98
102
|
_onMouseEnter(e);
|
|
@@ -136,7 +140,8 @@ NavMenuItem.propTypes = {
|
|
|
136
140
|
permissionAttr: _propTypes["default"].oneOfType([_propTypes["default"].object, _propTypes["default"].arrayOf(_propTypes["default"].object)]),
|
|
137
141
|
minWidth: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
|
|
138
142
|
maxWidth: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
|
|
139
|
-
columnsQtty: _propTypes["default"].number
|
|
143
|
+
columnsQtty: _propTypes["default"].number,
|
|
144
|
+
targetRef: _propTypes["default"].func
|
|
140
145
|
};
|
|
141
146
|
NavMenuItem.defaultProps = {
|
|
142
147
|
childrenIsSubMenu: true,
|
|
@@ -148,7 +153,10 @@ NavMenuItem.defaultProps = {
|
|
|
148
153
|
permissionAttr: undefined,
|
|
149
154
|
minWidth: 500,
|
|
150
155
|
maxWidth: '90%',
|
|
151
|
-
columnsQtty: 2
|
|
156
|
+
columnsQtty: 2,
|
|
157
|
+
targetRef: undefined
|
|
152
158
|
};
|
|
153
|
-
|
|
159
|
+
|
|
160
|
+
var _default = (0, _withTooltip["default"])(NavMenuItem);
|
|
161
|
+
|
|
154
162
|
exports["default"] = _default;
|
|
@@ -53,6 +53,8 @@ var _helpers = require("./helpers");
|
|
|
53
53
|
|
|
54
54
|
var _icons = _interopRequireDefault(require("../../icons"));
|
|
55
55
|
|
|
56
|
+
var constants = _interopRequireWildcard(require("../../internals/constants"));
|
|
57
|
+
|
|
56
58
|
var _popup_menu_search = _interopRequireDefault(require("./popup_menu_search"));
|
|
57
59
|
|
|
58
60
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
@@ -194,6 +196,7 @@ var SideNav = function SideNav(props) {
|
|
|
194
196
|
|
|
195
197
|
if ((type === _NavMenuItem["default"] || type === _NavSubMenuItem["default"]) && !child.props.children) {
|
|
196
198
|
menuItemsContent.push({
|
|
199
|
+
id: "".concat(child.props.title, "-").concat(_uuid["default"].v1()),
|
|
197
200
|
content: child.props.title,
|
|
198
201
|
url: child.props.url
|
|
199
202
|
});
|
|
@@ -217,6 +220,20 @@ var SideNav = function SideNav(props) {
|
|
|
217
220
|
}
|
|
218
221
|
};
|
|
219
222
|
|
|
223
|
+
var onKeyDown = function onKeyDown(e) {
|
|
224
|
+
if ([constants.keyCodes.F].includes(e.keyCode) && e.ctrlKey && e.shiftKey) {
|
|
225
|
+
e.preventDefault();
|
|
226
|
+
setSearchFieldHasNoFocus(false);
|
|
227
|
+
if (searchFieldRef.current) searchFieldRef.current.focus();
|
|
228
|
+
}
|
|
229
|
+
};
|
|
230
|
+
|
|
231
|
+
(0, _react.useEffect)(function () {
|
|
232
|
+
document.addEventListener('keydown', onKeyDown);
|
|
233
|
+
return function () {
|
|
234
|
+
document.removeEventListener('keydown', onKeyDown);
|
|
235
|
+
};
|
|
236
|
+
}, []);
|
|
220
237
|
(0, _react.useEffect)(function () {
|
|
221
238
|
if (enableMenuSearch && sideNavRef && sideNavRef.current) {
|
|
222
239
|
setSideNavDimensions(sideNavRef.current.getBoundingClientRect());
|
|
@@ -239,14 +256,14 @@ var SideNav = function SideNav(props) {
|
|
|
239
256
|
key: "popup-menusearch-".concat(_uuid["default"].v1())
|
|
240
257
|
}, /*#__PURE__*/_react["default"].createElement(_NavMenuItem["default"], {
|
|
241
258
|
childrenIsSubMenu: false,
|
|
242
|
-
customClass: "-customsidenavitem"
|
|
259
|
+
customClass: "-customsidenavitem",
|
|
260
|
+
tooltip: "Pesquisar funcionalidades (CTRL+SHIFT+F)",
|
|
261
|
+
tooltipPosition: "right"
|
|
243
262
|
}, /*#__PURE__*/_react["default"].createElement(_text["default"], _extends({
|
|
244
263
|
value: searchContent,
|
|
245
264
|
customClassForWrapper: "-customsizes",
|
|
246
265
|
customClass: "-customsizes",
|
|
247
266
|
customClassForSideButtons: "-iconcenter",
|
|
248
|
-
tooltip: "Pesquisar funcionalidades",
|
|
249
|
-
tooltipPosition: "right",
|
|
250
267
|
customClassForInputContent: searchFieldHasNoFocus ? '-hidden' : '',
|
|
251
268
|
onFocus: function onFocus() {
|
|
252
269
|
return setSearchFieldHasNoFocus(false);
|
|
@@ -263,6 +280,9 @@ var SideNav = function SideNav(props) {
|
|
|
263
280
|
}, returnLeftElements())), openSearchMenuPopup && /*#__PURE__*/_react["default"].createElement(_popup_menu_search["default"], _extends({}, props, {
|
|
264
281
|
style: getPopupMenuSearchStyle(),
|
|
265
282
|
searchContent: searchContent,
|
|
283
|
+
handleSetSearchContent: function handleSetSearchContent(searchValue) {
|
|
284
|
+
return setSearchContent(searchValue);
|
|
285
|
+
},
|
|
266
286
|
handlerClose: closeSearchMenuPopup,
|
|
267
287
|
menuItemsContent: menuItemsContent && returnMenuItems()
|
|
268
288
|
}))));
|
|
@@ -9,8 +9,6 @@ exports["default"] = void 0;
|
|
|
9
9
|
|
|
10
10
|
var _react = _interopRequireWildcard(require("react"));
|
|
11
11
|
|
|
12
|
-
var _uuid = _interopRequireDefault(require("uuid"));
|
|
13
|
-
|
|
14
12
|
var _reactDom = _interopRequireDefault(require("react-dom"));
|
|
15
13
|
|
|
16
14
|
var _search = _interopRequireDefault(require("../../../inputs/search"));
|
|
@@ -46,7 +44,8 @@ var PopupMenuSearch = function PopupMenuSearch(props) {
|
|
|
46
44
|
searchContent = props.searchContent,
|
|
47
45
|
menuItemsContent = props.menuItemsContent,
|
|
48
46
|
handlerClose = props.handlerClose,
|
|
49
|
-
menuSearchEmptyMessage = props.menuSearchEmptyMessage
|
|
47
|
+
menuSearchEmptyMessage = props.menuSearchEmptyMessage,
|
|
48
|
+
handleSetSearchContent = props.handleSetSearchContent;
|
|
50
49
|
|
|
51
50
|
var _useState = (0, _react.useState)(searchContent),
|
|
52
51
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -88,6 +87,7 @@ var PopupMenuSearch = function PopupMenuSearch(props) {
|
|
|
88
87
|
return item.content.toLowerCase().includes(filter);
|
|
89
88
|
});
|
|
90
89
|
setSearchFieldContent(value);
|
|
90
|
+
handleSetSearchContent(value);
|
|
91
91
|
setSearchResult(result);
|
|
92
92
|
};
|
|
93
93
|
|
|
@@ -101,15 +101,19 @@ var PopupMenuSearch = function PopupMenuSearch(props) {
|
|
|
101
101
|
return /*#__PURE__*/_react["default"].createElement(_list["default"], {
|
|
102
102
|
condensed: true,
|
|
103
103
|
transparent: true,
|
|
104
|
+
selectable: true,
|
|
105
|
+
onSelectItem: handlerClose,
|
|
104
106
|
style: {
|
|
105
|
-
margin: '25px 0px'
|
|
107
|
+
margin: '25px 0px',
|
|
108
|
+
border: 'none',
|
|
109
|
+
boxShadow: 'none'
|
|
106
110
|
}
|
|
107
|
-
}, searchResult
|
|
111
|
+
}, searchResult.map(function (item) {
|
|
108
112
|
return /*#__PURE__*/_react["default"].createElement(_list.ListItem, {
|
|
109
|
-
key:
|
|
113
|
+
key: item.id,
|
|
114
|
+
itemId: item.id,
|
|
110
115
|
url: item.url,
|
|
111
|
-
text: item.content
|
|
112
|
-
onClick: handlerClose
|
|
116
|
+
text: item.content
|
|
113
117
|
});
|
|
114
118
|
}));
|
|
115
119
|
}
|
|
@@ -137,7 +141,7 @@ var PopupMenuSearch = function PopupMenuSearch(props) {
|
|
|
137
141
|
inputRef: searchFieldRef,
|
|
138
142
|
value: searchFieldContent,
|
|
139
143
|
onReset: function onReset() {
|
|
140
|
-
|
|
144
|
+
search('');
|
|
141
145
|
}
|
|
142
146
|
}), /*#__PURE__*/_react["default"].createElement("div", {
|
|
143
147
|
style: {
|
|
@@ -206,38 +206,30 @@ describe('SideNav Menu', function () {
|
|
|
206
206
|
|
|
207
207
|
expect(container.querySelector('.openclosemenu')).toBeInTheDocument();
|
|
208
208
|
});
|
|
209
|
-
it('should enable menu search', function () {
|
|
210
|
-
var _render4 = (0, _react2.render)(sidebarNavMockRender({
|
|
211
|
-
enableMenuSearch: true
|
|
212
|
-
})),
|
|
213
|
-
container = _render4.container;
|
|
214
|
-
|
|
215
|
-
expect(container.querySelector('.inputwrapper')).toBeInTheDocument();
|
|
216
|
-
});
|
|
217
209
|
it('should render all items', function () {
|
|
218
|
-
var
|
|
219
|
-
container =
|
|
210
|
+
var _render4 = (0, _react2.render)(sidebarNavMockRender()),
|
|
211
|
+
container = _render4.container;
|
|
220
212
|
/* primeiro item é o float menu */
|
|
221
213
|
|
|
222
214
|
|
|
223
215
|
expect(container.querySelectorAll('li.item').length - 1).toBe(menuDataMock.length);
|
|
224
216
|
});
|
|
225
217
|
it('should be rendering 3 items SVGs', function () {
|
|
226
|
-
var
|
|
227
|
-
container =
|
|
218
|
+
var _render5 = (0, _react2.render)(sidebarNavMockRender()),
|
|
219
|
+
container = _render5.container;
|
|
228
220
|
|
|
229
221
|
expect(container.querySelectorAll('li.item .icon-component').length).toBe(3);
|
|
230
222
|
});
|
|
231
223
|
it('should open submenu on over', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
|
|
232
|
-
var
|
|
224
|
+
var _render6, container;
|
|
233
225
|
|
|
234
226
|
return regeneratorRuntime.wrap(function _callee$(_context) {
|
|
235
227
|
while (1) {
|
|
236
228
|
switch (_context.prev = _context.next) {
|
|
237
229
|
case 0:
|
|
238
|
-
|
|
230
|
+
_render6 = (0, _react2.render)(sidebarNavMockRender({
|
|
239
231
|
menuSize: 'large'
|
|
240
|
-
})), container =
|
|
232
|
+
})), container = _render6.container;
|
|
241
233
|
|
|
242
234
|
_react2.fireEvent.mouseOver(container.querySelector('.customscroll .item'));
|
|
243
235
|
|
|
@@ -257,13 +249,13 @@ describe('SideNav Menu', function () {
|
|
|
257
249
|
}, _callee);
|
|
258
250
|
})));
|
|
259
251
|
it('submenu should render all items', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
|
|
260
|
-
var
|
|
252
|
+
var _render7, container;
|
|
261
253
|
|
|
262
254
|
return regeneratorRuntime.wrap(function _callee2$(_context2) {
|
|
263
255
|
while (1) {
|
|
264
256
|
switch (_context2.prev = _context2.next) {
|
|
265
257
|
case 0:
|
|
266
|
-
|
|
258
|
+
_render7 = (0, _react2.render)(sidebarNavMockRender()), container = _render7.container;
|
|
267
259
|
|
|
268
260
|
_react2.fireEvent.mouseOver(container.querySelector('.customscroll .item'));
|
|
269
261
|
|
|
@@ -283,13 +275,13 @@ describe('SideNav Menu', function () {
|
|
|
283
275
|
}, _callee2);
|
|
284
276
|
})));
|
|
285
277
|
it('submenu should have title', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
|
|
286
|
-
var
|
|
278
|
+
var _render8, container;
|
|
287
279
|
|
|
288
280
|
return regeneratorRuntime.wrap(function _callee3$(_context3) {
|
|
289
281
|
while (1) {
|
|
290
282
|
switch (_context3.prev = _context3.next) {
|
|
291
283
|
case 0:
|
|
292
|
-
|
|
284
|
+
_render8 = (0, _react2.render)(sidebarNavMockRender()), container = _render8.container;
|
|
293
285
|
|
|
294
286
|
_react2.fireEvent.mouseOver(container.querySelector('.customscroll .item'));
|
|
295
287
|
|
|
@@ -308,5 +300,72 @@ describe('SideNav Menu', function () {
|
|
|
308
300
|
}
|
|
309
301
|
}, _callee3);
|
|
310
302
|
})));
|
|
303
|
+
describe('Popup Search Menu', function () {
|
|
304
|
+
it('should enable menu search', function () {
|
|
305
|
+
var _render9 = (0, _react2.render)(sidebarNavMockRender({
|
|
306
|
+
enableMenuSearch: true
|
|
307
|
+
})),
|
|
308
|
+
container = _render9.container;
|
|
309
|
+
|
|
310
|
+
expect(container.querySelector('.inputwrapper')).toBeInTheDocument();
|
|
311
|
+
});
|
|
312
|
+
it('should render tooltip on over menu search item', function () {
|
|
313
|
+
var _render10 = (0, _react2.render)(sidebarNavMockRender({
|
|
314
|
+
enableMenuSearch: true
|
|
315
|
+
})),
|
|
316
|
+
container = _render10.container;
|
|
317
|
+
|
|
318
|
+
var navitem = container.querySelector('.-customsidenavitem');
|
|
319
|
+
|
|
320
|
+
_react2.fireEvent.mouseOver(navitem);
|
|
321
|
+
|
|
322
|
+
expect(document.querySelector('.tooltip-component')).toBeInTheDocument();
|
|
323
|
+
});
|
|
324
|
+
it('should focus input when pressed HotKey', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4() {
|
|
325
|
+
var _render11, container;
|
|
326
|
+
|
|
327
|
+
return regeneratorRuntime.wrap(function _callee4$(_context4) {
|
|
328
|
+
while (1) {
|
|
329
|
+
switch (_context4.prev = _context4.next) {
|
|
330
|
+
case 0:
|
|
331
|
+
_render11 = (0, _react2.render)(sidebarNavMockRender({
|
|
332
|
+
enableMenuSearch: true
|
|
333
|
+
})), container = _render11.container;
|
|
334
|
+
|
|
335
|
+
_react2.fireEvent.keyDown(container, {
|
|
336
|
+
key: 'F',
|
|
337
|
+
code: 'keyF',
|
|
338
|
+
keyCode: 70,
|
|
339
|
+
ctrlKey: true,
|
|
340
|
+
shiftKey: true
|
|
341
|
+
});
|
|
342
|
+
|
|
343
|
+
expect(container.querySelector('.inputwrapper .sidebuttons')).not.toBeInTheDocument();
|
|
344
|
+
|
|
345
|
+
case 3:
|
|
346
|
+
case "end":
|
|
347
|
+
return _context4.stop();
|
|
348
|
+
}
|
|
349
|
+
}
|
|
350
|
+
}, _callee4);
|
|
351
|
+
})));
|
|
352
|
+
it('should render menu search on input change', function () {
|
|
353
|
+
var _render12 = (0, _react2.render)(sidebarNavMockRender({
|
|
354
|
+
enableMenuSearch: true
|
|
355
|
+
})),
|
|
356
|
+
container = _render12.container;
|
|
357
|
+
|
|
358
|
+
var input = container.querySelector('.inputwrapper .inputcontent .textinput');
|
|
359
|
+
|
|
360
|
+
_react2.fireEvent.change(input, {
|
|
361
|
+
target: {
|
|
362
|
+
value: 'A'
|
|
363
|
+
}
|
|
364
|
+
});
|
|
365
|
+
|
|
366
|
+
expect(document.querySelector('.searchmenu')).toBeInTheDocument();
|
|
367
|
+
expect(document.querySelectorAll('.list-component .item').length).toBe(5);
|
|
368
|
+
});
|
|
369
|
+
});
|
|
311
370
|
});
|
|
312
371
|
});
|
|
@@ -28,7 +28,7 @@ var SkeletonContainer = function SkeletonContainer(_ref) {
|
|
|
28
28
|
};
|
|
29
29
|
|
|
30
30
|
SkeletonContainer.propTypes = {
|
|
31
|
-
children: _propTypes["default"].element.isRequired,
|
|
31
|
+
children: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].arrayOf(_propTypes["default"].element)]).isRequired,
|
|
32
32
|
row: _propTypes["default"].bool,
|
|
33
33
|
customClass: _propTypes["default"].string,
|
|
34
34
|
style: _propTypes["default"].object
|
package/lib/table/Body.js
CHANGED
|
@@ -11,7 +11,11 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
11
11
|
|
|
12
12
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
13
13
|
|
|
14
|
-
var _helpers =
|
|
14
|
+
var _helpers = _interopRequireWildcard(require("./helpers"));
|
|
15
|
+
|
|
16
|
+
var _skeleton = _interopRequireDefault(require("../skeleton"));
|
|
17
|
+
|
|
18
|
+
var _index = require("./index");
|
|
15
19
|
|
|
16
20
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
17
21
|
|
|
@@ -19,13 +23,42 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
|
19
23
|
|
|
20
24
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
21
25
|
|
|
26
|
+
var renderChildren = function renderChildren(children, columnsCount, skeletonize, skeletonInRows) {
|
|
27
|
+
if (skeletonize && columnsCount) {
|
|
28
|
+
var rows = (0, _helpers.getArrayFromNumber)(skeletonInRows);
|
|
29
|
+
var columns = (0, _helpers.getArrayFromNumber)(columnsCount);
|
|
30
|
+
var skeletonChildrens = rows.map(function (index) {
|
|
31
|
+
return /*#__PURE__*/_react["default"].createElement(_index.TRow, {
|
|
32
|
+
key: index
|
|
33
|
+
}, columns.map(function (id) {
|
|
34
|
+
return /*#__PURE__*/_react["default"].createElement(_index.Td, {
|
|
35
|
+
key: id
|
|
36
|
+
}, /*#__PURE__*/_react["default"].createElement(_skeleton["default"], {
|
|
37
|
+
height: 16,
|
|
38
|
+
style: {
|
|
39
|
+
marginBottom: 0,
|
|
40
|
+
opacity: 1
|
|
41
|
+
}
|
|
42
|
+
}));
|
|
43
|
+
}));
|
|
44
|
+
});
|
|
45
|
+
return skeletonChildrens;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
return children;
|
|
49
|
+
};
|
|
50
|
+
|
|
22
51
|
var TableBody = function TableBody(_ref) {
|
|
23
52
|
var children = _ref.children,
|
|
24
53
|
customClass = _ref.customClass;
|
|
25
54
|
|
|
26
55
|
var _useContext = (0, _react.useContext)(_helpers["default"]),
|
|
27
56
|
bodyScrollable = _useContext.bodyScrollable,
|
|
28
|
-
bodyContainerRef = _useContext.bodyContainerRef
|
|
57
|
+
bodyContainerRef = _useContext.bodyContainerRef,
|
|
58
|
+
columnsCount = _useContext.columnsCount,
|
|
59
|
+
skeletonize = _useContext.skeletonize,
|
|
60
|
+
skeletonInRows = _useContext.skeletonInRows,
|
|
61
|
+
strict = _useContext.strict;
|
|
29
62
|
|
|
30
63
|
return bodyScrollable ? /*#__PURE__*/_react["default"].createElement("div", {
|
|
31
64
|
className: "bodycontainer",
|
|
@@ -33,13 +66,14 @@ var TableBody = function TableBody(_ref) {
|
|
|
33
66
|
}, /*#__PURE__*/_react["default"].createElement("table", {
|
|
34
67
|
className: "innertable",
|
|
35
68
|
style: {
|
|
36
|
-
tableLayout: 'fixed'
|
|
69
|
+
tableLayout: 'fixed',
|
|
70
|
+
contain: strict ? 'strict' : 'size layout style'
|
|
37
71
|
}
|
|
38
72
|
}, /*#__PURE__*/_react["default"].createElement("tbody", {
|
|
39
|
-
className: "tbody ".concat(customClass)
|
|
40
|
-
}, children))) : /*#__PURE__*/_react["default"].createElement("tbody", {
|
|
41
|
-
className: "tbody ".concat(customClass)
|
|
42
|
-
}, children);
|
|
73
|
+
className: "tbody ".concat(skeletonize && skeletonInRows ? 'skeleton-transparency' : '', " ").concat(customClass)
|
|
74
|
+
}, renderChildren(children, columnsCount, skeletonize, skeletonInRows)))) : /*#__PURE__*/_react["default"].createElement("tbody", {
|
|
75
|
+
className: "tbody ".concat(skeletonize && skeletonInRows ? 'skeleton-transparency' : '', " ").concat(customClass)
|
|
76
|
+
}, renderChildren(children, columnsCount, skeletonize, skeletonInRows));
|
|
43
77
|
};
|
|
44
78
|
|
|
45
79
|
TableBody.propTypes = {
|
package/lib/table/Header.js
CHANGED
|
@@ -41,6 +41,15 @@ var getColumnsWidth = function getColumnsWidth(children) {
|
|
|
41
41
|
return columnsWidth;
|
|
42
42
|
};
|
|
43
43
|
|
|
44
|
+
var getColumnsCount = function getColumnsCount(children) {
|
|
45
|
+
if (children && children.props) {
|
|
46
|
+
var columnsChildren = children.props.children;
|
|
47
|
+
return columnsChildren.length;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
return undefined;
|
|
51
|
+
};
|
|
52
|
+
|
|
44
53
|
var Header = function Header(_ref) {
|
|
45
54
|
var customClass = _ref.customClass,
|
|
46
55
|
children = _ref.children;
|
|
@@ -48,10 +57,12 @@ var Header = function Header(_ref) {
|
|
|
48
57
|
var _useContext = (0, _react.useContext)(_helpers["default"]),
|
|
49
58
|
bodyScrollWidth = _useContext.bodyScrollWidth,
|
|
50
59
|
bodyScrollable = _useContext.bodyScrollable,
|
|
51
|
-
handlerSetColumnsWidth = _useContext.handlerSetColumnsWidth
|
|
60
|
+
handlerSetColumnsWidth = _useContext.handlerSetColumnsWidth,
|
|
61
|
+
handlerSetColumnsCount = _useContext.handlerSetColumnsCount;
|
|
52
62
|
|
|
53
63
|
(0, _react.useEffect)(function () {
|
|
54
64
|
handlerSetColumnsWidth(getColumnsWidth(children));
|
|
65
|
+
handlerSetColumnsCount(getColumnsCount(children));
|
|
55
66
|
}, []);
|
|
56
67
|
return bodyScrollable ? /*#__PURE__*/_react["default"].createElement("div", {
|
|
57
68
|
className: "headercontainer",
|
|
@@ -30,13 +30,15 @@ var HeaderColumn = function HeaderColumn(_ref) {
|
|
|
30
30
|
|
|
31
31
|
var _useContext = (0, _react.useContext)(_helpers["default"]),
|
|
32
32
|
skeletonize = _useContext.skeletonize,
|
|
33
|
-
vertical = _useContext.vertical
|
|
33
|
+
vertical = _useContext.vertical,
|
|
34
|
+
skeletonInHeader = _useContext.skeletonInHeader,
|
|
35
|
+
skeletonInRows = _useContext.skeletonInRows;
|
|
34
36
|
|
|
35
37
|
if (!visible) return null;
|
|
36
38
|
return /*#__PURE__*/_react["default"].createElement("th", {
|
|
37
39
|
className: "headercolumn ".concat(customClass, " text-align-").concat(textAlign),
|
|
38
40
|
style: style
|
|
39
|
-
}, skeletonize && !vertical ? /*#__PURE__*/_react["default"].createElement(_skeleton["default"], {
|
|
41
|
+
}, skeletonize && (skeletonInHeader || !skeletonInRows) && !vertical ? /*#__PURE__*/_react["default"].createElement(_skeleton["default"], {
|
|
40
42
|
height: style.height ? null : 16,
|
|
41
43
|
style: {
|
|
42
44
|
marginBottom: 0
|
package/lib/table/Row.js
CHANGED
|
@@ -19,6 +19,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
|
19
19
|
|
|
20
20
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
21
21
|
|
|
22
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
23
|
+
|
|
22
24
|
var Row = function Row(props) {
|
|
23
25
|
var customClass = props.customClass,
|
|
24
26
|
children = props.children,
|
|
@@ -26,7 +28,8 @@ var Row = function Row(props) {
|
|
|
26
28
|
dataId = props.dataId,
|
|
27
29
|
_onClick = props.onClick,
|
|
28
30
|
height = props.height,
|
|
29
|
-
rowBorder = props.rowBorder
|
|
31
|
+
rowBorder = props.rowBorder,
|
|
32
|
+
style = props.style;
|
|
30
33
|
|
|
31
34
|
var _useContext = (0, _react.useContext)(_helpers["default"]),
|
|
32
35
|
selectedRowId = _useContext.selectedRowId,
|
|
@@ -34,14 +37,16 @@ var Row = function Row(props) {
|
|
|
34
37
|
handleTableRowClick = _useContext.handleTableRowClick,
|
|
35
38
|
handleTableColClick = _useContext.handleTableColClick,
|
|
36
39
|
vertical = _useContext.vertical,
|
|
37
|
-
skeletonize = _useContext.skeletonize
|
|
40
|
+
skeletonize = _useContext.skeletonize,
|
|
41
|
+
skeletonInRows = _useContext.skeletonInRows;
|
|
38
42
|
|
|
39
43
|
var contextValues = {
|
|
40
44
|
dataId: dataId,
|
|
41
45
|
rowBorder: rowBorder,
|
|
42
46
|
handleTableColClick: handleTableColClick,
|
|
43
47
|
vertical: vertical,
|
|
44
|
-
skeletonize: skeletonize
|
|
48
|
+
skeletonize: skeletonize,
|
|
49
|
+
skeletonInRows: skeletonInRows
|
|
45
50
|
};
|
|
46
51
|
return /*#__PURE__*/_react["default"].createElement(_helpers.RowContext.Provider, {
|
|
47
52
|
value: contextValues
|
|
@@ -53,9 +58,9 @@ var Row = function Row(props) {
|
|
|
53
58
|
if (_onClick) _onClick(e, dataId);
|
|
54
59
|
},
|
|
55
60
|
id: rowId,
|
|
56
|
-
style: {
|
|
61
|
+
style: _extends({}, style, {
|
|
57
62
|
height: height
|
|
58
|
-
}
|
|
63
|
+
})
|
|
59
64
|
}, children));
|
|
60
65
|
};
|
|
61
66
|
|
|
@@ -66,7 +71,8 @@ Row.propTypes = {
|
|
|
66
71
|
dataId: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
|
|
67
72
|
onClick: _propTypes["default"].func,
|
|
68
73
|
rowBorder: _propTypes["default"].bool,
|
|
69
|
-
height: _propTypes["default"].string
|
|
74
|
+
height: _propTypes["default"].string,
|
|
75
|
+
style: _propTypes["default"].object
|
|
70
76
|
};
|
|
71
77
|
Row.defaultProps = {
|
|
72
78
|
customClass: '',
|
|
@@ -74,7 +80,8 @@ Row.defaultProps = {
|
|
|
74
80
|
onClick: undefined,
|
|
75
81
|
rowId: undefined,
|
|
76
82
|
rowBorder: true,
|
|
77
|
-
height: undefined
|
|
83
|
+
height: undefined,
|
|
84
|
+
style: null
|
|
78
85
|
};
|
|
79
86
|
var _default = Row;
|
|
80
87
|
exports["default"] = _default;
|
package/lib/table/RowColumn.js
CHANGED
|
@@ -52,11 +52,12 @@ var RowColumn = function RowColumn(props) {
|
|
|
52
52
|
visible = props.visible;
|
|
53
53
|
var context = (0, _react.useContext)(_helpers.RowContext);
|
|
54
54
|
var skeletonize = context.skeletonize,
|
|
55
|
-
vertical = context.vertical
|
|
55
|
+
vertical = context.vertical,
|
|
56
|
+
skeletonInRows = context.skeletonInRows;
|
|
56
57
|
var hiddenContent = displayContent !== 'always';
|
|
57
58
|
|
|
58
59
|
var renderContent = function renderContent() {
|
|
59
|
-
if (skeletonize) {
|
|
60
|
+
if (skeletonize && vertical) {
|
|
60
61
|
return /*#__PURE__*/_react["default"].createElement(_skeleton["default"], {
|
|
61
62
|
height: 16,
|
|
62
63
|
style: {
|
|
@@ -71,7 +72,7 @@ var RowColumn = function RowColumn(props) {
|
|
|
71
72
|
};
|
|
72
73
|
|
|
73
74
|
if (!visible) return null;
|
|
74
|
-
if (skeletonize && !vertical) return null;
|
|
75
|
+
if (skeletonize && !skeletonInRows && !vertical) return null;
|
|
75
76
|
return /*#__PURE__*/_react["default"].createElement("td", {
|
|
76
77
|
className: "rowcolumn ".concat(customClass, " text-align-").concat(textAlign, " ").concat(!context.rowBorder && ' -noborder'),
|
|
77
78
|
style: style,
|
package/lib/table/helpers.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.RowContext = exports["default"] = void 0;
|
|
6
|
+
exports.getArrayFromNumber = exports.RowContext = exports["default"] = void 0;
|
|
7
7
|
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
9
|
|
|
@@ -14,5 +14,15 @@ var TableContext = /*#__PURE__*/_react["default"].createContext();
|
|
|
14
14
|
var RowContext = /*#__PURE__*/_react["default"].createContext();
|
|
15
15
|
|
|
16
16
|
exports.RowContext = RowContext;
|
|
17
|
+
|
|
18
|
+
var getArrayFromNumber = function getArrayFromNumber(number) {
|
|
19
|
+
return Array.from({
|
|
20
|
+
length: number
|
|
21
|
+
}, function (_, i) {
|
|
22
|
+
return i + 1;
|
|
23
|
+
});
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
exports.getArrayFromNumber = getArrayFromNumber;
|
|
17
27
|
var _default = TableContext;
|
|
18
28
|
exports["default"] = _default;
|