linear-react-components-ui 0.4.76-beta.11 → 0.4.76-beta.12
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/.vscode/settings.json +2 -1
- package/README.md +0 -33
- package/lib/assets/styles/dropdown.scss +2 -28
- package/lib/assets/styles/effects.scss +0 -12
- package/lib/assets/styles/floatMenu.scss +1 -0
- package/lib/assets/styles/panel.scss +1 -0
- package/lib/assets/styles/progress.scss +1 -8
- package/lib/assets/styles/select.scss +0 -1
- package/lib/assets/styles/table.scss +5 -13
- package/lib/assets/styles/tabs.scss +44 -79
- package/lib/assets/styles/treeview.scss +0 -32
- package/lib/avatar/avatar.spec.js +6 -17
- package/lib/avatar/index.js +1 -1
- package/lib/buttons/DefaultButton.js +1 -7
- package/lib/checkbox/index.js +6 -20
- package/lib/dialog/base/index.js +6 -15
- package/lib/dialog/form/index.js +3 -16
- package/lib/drawer/index.js +1 -4
- package/lib/form/Field.js +0 -2
- package/lib/form/FieldNumber.js +2 -10
- package/lib/form/helpers.js +1 -9
- package/lib/form/index.js +222 -209
- package/lib/form/withFieldHOC.js +0 -2
- package/lib/icons/helper.js +0 -16
- package/lib/inputs/base/helpers.js +10 -15
- package/lib/inputs/date/Dropdown.js +3 -3
- package/lib/inputs/date/index.js +9 -10
- package/lib/inputs/number/BaseNumber.js +1 -1
- package/lib/inputs/number/index.js +5 -7
- package/lib/inputs/select/Dropdown.js +4 -4
- package/lib/inputs/select/index.js +3 -26
- package/lib/inputs/select/multiple/index.js +7 -9
- package/lib/inputs/select/simple/index.js +18 -30
- package/lib/internals/withTooltip.js +81 -85
- package/lib/list/Item.js +3 -3
- package/lib/list/index.js +10 -20
- package/lib/list/list.spec.js +85 -129
- package/lib/menus/float/MenuItem.js +8 -25
- package/lib/menus/sidenav/index.js +3 -7
- package/lib/menus/sidenav/popup_menu_search/index.js +1 -1
- package/lib/progress/Bar.js +9 -40
- package/lib/progress/index.js +4 -12
- package/lib/spinner/index.js +1 -6
- package/lib/split/Split.js +11 -5
- package/lib/table/Row.js +1 -1
- package/lib/tabs/Menu.js +5 -18
- package/lib/tabs/MenuItems.js +7 -7
- package/lib/tabs/Panel.js +3 -1
- package/lib/tabs/index.js +20 -151
- package/lib/tabs/tabs.spec.js +5 -8
- package/lib/toolbar/index.js +4 -8
- package/lib/tooltip/index.js +7 -20
- package/lib/treeview/Node.js +48 -347
- package/lib/treeview/index.js +35 -456
- package/package.json +8 -9
- package/.tool-versions +0 -1
- package/lib/assets/styles/multiSelect.scss +0 -105
- package/lib/assets/styles/periodpicker.scss +0 -65
- package/lib/checkbox/Label.js +0 -37
- package/lib/form/FieldPeriod.js +0 -100
- package/lib/form/withFormSecurity.js +0 -106
- package/lib/inputs/date/helpers.js +0 -36
- package/lib/inputs/multiSelect/ActionButtons.js +0 -68
- package/lib/inputs/multiSelect/Dropdown.js +0 -200
- package/lib/inputs/multiSelect/helper.js +0 -18
- package/lib/inputs/multiSelect/index.js +0 -343
- package/lib/inputs/period/Dialog.js +0 -38
- package/lib/inputs/period/Dropdown.js +0 -90
- package/lib/inputs/period/PeriodList.js +0 -79
- package/lib/inputs/period/helper.js +0 -118
- package/lib/inputs/period/index.js +0 -490
- package/lib/tabs/DropdownItems.js +0 -84
|
@@ -35,8 +35,6 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
35
35
|
|
|
36
36
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
37
37
|
|
|
38
|
-
var _uuid = _interopRequireDefault(require("uuid"));
|
|
39
|
-
|
|
40
38
|
var _NavMenuItem = _interopRequireDefault(require("./NavMenuItem"));
|
|
41
39
|
|
|
42
40
|
var _NavSubMenuItem = _interopRequireDefault(require("./NavSubMenuItem"));
|
|
@@ -235,9 +233,7 @@ var SideNav = function SideNav(props) {
|
|
|
235
233
|
};
|
|
236
234
|
|
|
237
235
|
var getPopupMenuSearch = function getPopupMenuSearch() {
|
|
238
|
-
return /*#__PURE__*/_react["default"].createElement(_NavMenuGroup["default"], {
|
|
239
|
-
key: "popup-menusearch-".concat(_uuid["default"].v1())
|
|
240
|
-
}, /*#__PURE__*/_react["default"].createElement(_NavMenuItem["default"], {
|
|
236
|
+
return /*#__PURE__*/_react["default"].createElement(_NavMenuGroup["default"], null, /*#__PURE__*/_react["default"].createElement(_NavMenuItem["default"], {
|
|
241
237
|
childrenIsSubMenu: false,
|
|
242
238
|
customClass: "-customsidenavitem"
|
|
243
239
|
}, /*#__PURE__*/_react["default"].createElement(_text["default"], _extends({
|
|
@@ -256,15 +252,15 @@ var SideNav = function SideNav(props) {
|
|
|
256
252
|
},
|
|
257
253
|
inputRef: searchFieldRef,
|
|
258
254
|
onChange: function onChange(e) {
|
|
259
|
-
setSearchContent(e.target.value);
|
|
260
255
|
setOpenSearchMenuPopup(e.target.value !== '');
|
|
261
256
|
setSideNavDimensions(sideNavRef.current.getBoundingClientRect());
|
|
257
|
+
setSearchContent(e.target.value);
|
|
262
258
|
}
|
|
263
259
|
}, returnLeftElements())), openSearchMenuPopup && /*#__PURE__*/_react["default"].createElement(_popup_menu_search["default"], _extends({}, props, {
|
|
264
260
|
style: getPopupMenuSearchStyle(),
|
|
265
261
|
searchContent: searchContent,
|
|
266
262
|
handlerClose: closeSearchMenuPopup,
|
|
267
|
-
menuItemsContent:
|
|
263
|
+
menuItemsContent: returnMenuItems()
|
|
268
264
|
}))));
|
|
269
265
|
};
|
|
270
266
|
|
|
@@ -84,7 +84,7 @@ var PopupMenuSearch = function PopupMenuSearch(props) {
|
|
|
84
84
|
|
|
85
85
|
var search = function search(value) {
|
|
86
86
|
var filter = value.toLowerCase();
|
|
87
|
-
var result = menuItemsContent
|
|
87
|
+
var result = menuItemsContent.filter(function (item) {
|
|
88
88
|
return item.content.toLowerCase().includes(filter);
|
|
89
89
|
});
|
|
90
90
|
setSearchFieldContent(value);
|
package/lib/progress/Bar.js
CHANGED
|
@@ -18,16 +18,6 @@ var getPercentage = function getPercentage(props) {
|
|
|
18
18
|
return Math.round(percentage * ROUND_PRECISION) / ROUND_PRECISION;
|
|
19
19
|
};
|
|
20
20
|
|
|
21
|
-
var getClass = function getClass(props) {
|
|
22
|
-
var style = 'bar';
|
|
23
|
-
if (props.customClass) style += "".concat(props.customClass);
|
|
24
|
-
if (props.type) style += " -".concat(props.type);
|
|
25
|
-
if (props.effect) style += ' -effect';
|
|
26
|
-
if (props.animated) style += ' -animated';
|
|
27
|
-
if (props.indeterminate) style += ' -indeterminate';
|
|
28
|
-
return style;
|
|
29
|
-
};
|
|
30
|
-
|
|
31
21
|
var getLabel = function getLabel(progress) {
|
|
32
22
|
var value = progress.label;
|
|
33
23
|
|
|
@@ -40,64 +30,43 @@ var getLabel = function getLabel(progress) {
|
|
|
40
30
|
}, value);
|
|
41
31
|
};
|
|
42
32
|
|
|
43
|
-
var getStyle = function getStyle(props) {
|
|
44
|
-
if (props.indeterminate) {
|
|
45
|
-
return {
|
|
46
|
-
width: props.progressWidth,
|
|
47
|
-
height: props.height,
|
|
48
|
-
animationDuration: "".concat(props.indeterminateDuration, "s"),
|
|
49
|
-
animationDelay: "".concat(props.indeterminateDelay, "s")
|
|
50
|
-
};
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
return {
|
|
54
|
-
width: "".concat(getPercentage(props), "%"),
|
|
55
|
-
height: props.height
|
|
56
|
-
};
|
|
57
|
-
};
|
|
58
|
-
|
|
59
33
|
var ProgressBar = function ProgressBar(props) {
|
|
60
34
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
61
35
|
role: "progressbar",
|
|
62
|
-
className:
|
|
63
|
-
style:
|
|
36
|
+
className: "bar -".concat(props.type, " ").concat(props.customClass, " -").concat(props.effect && '-effect', " -").concat(props.animated && '-animated'),
|
|
37
|
+
style: {
|
|
38
|
+
width: "".concat(getPercentage(props), "%"),
|
|
39
|
+
height: "".concat(props.height)
|
|
40
|
+
},
|
|
64
41
|
"aria-valuenow": props.value,
|
|
65
42
|
"aria-valuemin": props.min,
|
|
66
43
|
"aria-valuemax": props.max
|
|
67
|
-
}, props.showLabel &&
|
|
44
|
+
}, props.showLabel && getLabel(props));
|
|
68
45
|
};
|
|
69
46
|
|
|
70
47
|
ProgressBar.defaultProps = {
|
|
71
48
|
min: 0,
|
|
72
49
|
max: 100,
|
|
73
50
|
value: 0,
|
|
74
|
-
progressWidth: '100%',
|
|
75
51
|
height: '100%',
|
|
76
52
|
effect: false,
|
|
77
53
|
customClass: '',
|
|
78
54
|
type: '',
|
|
79
55
|
showLabel: true,
|
|
80
56
|
label: '',
|
|
81
|
-
animated: false
|
|
82
|
-
indeterminate: false,
|
|
83
|
-
indeterminateDuration: 1.5,
|
|
84
|
-
indeterminateDelay: 1
|
|
57
|
+
animated: false
|
|
85
58
|
};
|
|
86
59
|
ProgressBar.propTypes = {
|
|
87
60
|
label: _propTypes["default"].string,
|
|
88
61
|
min: _propTypes["default"].number,
|
|
89
62
|
value: _propTypes["default"].number,
|
|
90
63
|
max: _propTypes["default"].number,
|
|
91
|
-
|
|
92
|
-
height: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
|
|
64
|
+
height: _propTypes["default"].string,
|
|
93
65
|
showLabel: _propTypes["default"].bool,
|
|
94
66
|
effect: _propTypes["default"].bool,
|
|
95
67
|
type: _propTypes["default"].string,
|
|
96
68
|
customClass: _propTypes["default"].string,
|
|
97
|
-
animated: _propTypes["default"].bool
|
|
98
|
-
indeterminate: _propTypes["default"].bool,
|
|
99
|
-
indeterminateDuration: _propTypes["default"].number,
|
|
100
|
-
indeterminateDelay: _propTypes["default"].number
|
|
69
|
+
animated: _propTypes["default"].bool
|
|
101
70
|
};
|
|
102
71
|
var _default = ProgressBar;
|
|
103
72
|
exports["default"] = _default;
|
package/lib/progress/index.js
CHANGED
|
@@ -21,32 +21,24 @@ require("../assets/styles/progress.scss");
|
|
|
21
21
|
|
|
22
22
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
23
23
|
|
|
24
|
-
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); }
|
|
25
|
-
|
|
26
24
|
var ProgressBar = function ProgressBar(props) {
|
|
27
25
|
var style = props.style,
|
|
28
26
|
children = props.children;
|
|
29
|
-
|
|
30
|
-
var getStyle = _extends({}, style, {
|
|
31
|
-
width: props.width,
|
|
32
|
-
height: props.height
|
|
33
|
-
});
|
|
34
|
-
|
|
35
27
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
36
28
|
className: "container-progress",
|
|
37
|
-
style:
|
|
29
|
+
style: style
|
|
38
30
|
}, children || /*#__PURE__*/_react["default"].createElement(_Bar["default"], props));
|
|
39
31
|
};
|
|
40
32
|
|
|
41
33
|
ProgressBar.propTypes = {
|
|
42
|
-
width: _propTypes["default"].
|
|
43
|
-
height: _propTypes["default"].
|
|
34
|
+
width: _propTypes["default"].string,
|
|
35
|
+
height: _propTypes["default"].string,
|
|
44
36
|
style: _propTypes["default"].object,
|
|
45
37
|
children: _propTypes["default"].any
|
|
46
38
|
};
|
|
47
39
|
ProgressBar.defaultProps = {
|
|
48
40
|
width: '100%',
|
|
49
|
-
height: '
|
|
41
|
+
height: '100%',
|
|
50
42
|
children: null,
|
|
51
43
|
style: {}
|
|
52
44
|
};
|
package/lib/spinner/index.js
CHANGED
|
@@ -47,17 +47,12 @@ var Spinner = function Spinner(props) {
|
|
|
47
47
|
delay = _useState2[0],
|
|
48
48
|
setDelay = _useState2[1];
|
|
49
49
|
|
|
50
|
-
var delayTimeout = (0, _react.useRef)(null);
|
|
51
50
|
(0, _react.useEffect)(function () {
|
|
52
51
|
if (delayTime) {
|
|
53
|
-
|
|
52
|
+
setTimeout(function () {
|
|
54
53
|
setDelay(false);
|
|
55
54
|
}, delayTime);
|
|
56
55
|
}
|
|
57
|
-
|
|
58
|
-
return function () {
|
|
59
|
-
clearTimeout(delayTimeout.current);
|
|
60
|
-
};
|
|
61
56
|
}, []);
|
|
62
57
|
|
|
63
58
|
var getCssClass = function getCssClass() {
|
package/lib/split/Split.js
CHANGED
|
@@ -49,6 +49,8 @@ var Split = function Split(props) {
|
|
|
49
49
|
var hotKey = props.hotKey,
|
|
50
50
|
secondaryInitialSize = props.secondaryInitialSize,
|
|
51
51
|
onSecondaryPaneSizeChange = props.onSecondaryPaneSizeChange,
|
|
52
|
+
onDragStart = props.onDragStart,
|
|
53
|
+
onDragEnd = props.onDragEnd,
|
|
52
54
|
vertical = props.vertical,
|
|
53
55
|
primaryIndex = props.primaryIndex,
|
|
54
56
|
percentage = props.percentage,
|
|
@@ -269,6 +271,9 @@ var Split = function Split(props) {
|
|
|
269
271
|
(0, _react.useEffect)(function () {
|
|
270
272
|
if (state.resizing) {
|
|
271
273
|
document.addEventListener('mousemove', handleMouseMove);
|
|
274
|
+
if (onDragStart) onDragStart();
|
|
275
|
+
} else if (onDragEnd) {
|
|
276
|
+
onDragEnd();
|
|
272
277
|
}
|
|
273
278
|
|
|
274
279
|
return function () {
|
|
@@ -329,11 +334,8 @@ var Split = function Split(props) {
|
|
|
329
334
|
role: "button",
|
|
330
335
|
tabIndex: "-1",
|
|
331
336
|
onDoubleClick: function onDoubleClick() {
|
|
332
|
-
return
|
|
333
|
-
|
|
334
|
-
resizing: false
|
|
335
|
-
})) : setState(_extends({}, state, {
|
|
336
|
-
secondaryPaneSize: 100,
|
|
337
|
+
return setState(_extends({}, state, {
|
|
338
|
+
visibleSplitSide: !visibleSplitSide,
|
|
337
339
|
resizing: false
|
|
338
340
|
}));
|
|
339
341
|
},
|
|
@@ -352,6 +354,8 @@ Split.propTypes = {
|
|
|
352
354
|
secondaryInitialSize: _propTypes["default"].number,
|
|
353
355
|
secondaryMinSize: _propTypes["default"].number,
|
|
354
356
|
hideSplitSideOnToggleClick: _propTypes["default"].string,
|
|
357
|
+
onDragStart: _propTypes["default"].func,
|
|
358
|
+
onDragEnd: _propTypes["default"].func,
|
|
355
359
|
onSecondaryPaneSizeChange: _propTypes["default"].func,
|
|
356
360
|
children: _propTypes["default"].arrayOf(_propTypes["default"].node)
|
|
357
361
|
};
|
|
@@ -365,6 +369,8 @@ Split.defaultProps = {
|
|
|
365
369
|
secondaryInitialSize: undefined,
|
|
366
370
|
secondaryMinSize: 0,
|
|
367
371
|
hideSplitSideOnToggleClick: 'primary',
|
|
372
|
+
onDragStart: null,
|
|
373
|
+
onDragEnd: null,
|
|
368
374
|
onSecondaryPaneSizeChange: null,
|
|
369
375
|
children: [],
|
|
370
376
|
hotKey: false
|
package/lib/table/Row.js
CHANGED
|
@@ -59,7 +59,7 @@ Row.propTypes = {
|
|
|
59
59
|
children: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].arrayOf(_propTypes["default"].object)]).isRequired,
|
|
60
60
|
customClass: _propTypes["default"].string,
|
|
61
61
|
rowId: _propTypes["default"].string,
|
|
62
|
-
dataId: _propTypes["default"].
|
|
62
|
+
dataId: _propTypes["default"].number,
|
|
63
63
|
onClick: _propTypes["default"].func,
|
|
64
64
|
rowBorder: _propTypes["default"].bool,
|
|
65
65
|
height: _propTypes["default"].string
|
package/lib/tabs/Menu.js
CHANGED
|
@@ -11,23 +11,15 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
|
11
11
|
|
|
12
12
|
var _MenuItems = _interopRequireDefault(require("./MenuItems"));
|
|
13
13
|
|
|
14
|
-
var _DropdownItems = _interopRequireDefault(require("./DropdownItems"));
|
|
15
|
-
|
|
16
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
17
15
|
|
|
18
16
|
var Menu = function Menu(props) {
|
|
19
17
|
var toolbar = props.toolbar,
|
|
20
18
|
customClassForToolBar = props.customClassForToolBar,
|
|
21
|
-
menuRef = props.menuRef
|
|
22
|
-
toolBarRef = props.toolBarRef;
|
|
19
|
+
menuRef = props.menuRef;
|
|
23
20
|
|
|
24
21
|
if (!toolbar) {
|
|
25
|
-
return /*#__PURE__*/_react["default"].createElement("
|
|
26
|
-
className: "menucontainer",
|
|
27
|
-
ref: function ref(r) {
|
|
28
|
-
menuRef(r);
|
|
29
|
-
}
|
|
30
|
-
}, /*#__PURE__*/_react["default"].createElement(_MenuItems["default"], props), /*#__PURE__*/_react["default"].createElement(_DropdownItems["default"], props));
|
|
22
|
+
return /*#__PURE__*/_react["default"].createElement(_MenuItems["default"], props);
|
|
31
23
|
}
|
|
32
24
|
|
|
33
25
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
@@ -35,23 +27,18 @@ var Menu = function Menu(props) {
|
|
|
35
27
|
ref: function ref(r) {
|
|
36
28
|
menuRef(r);
|
|
37
29
|
}
|
|
38
|
-
}, /*#__PURE__*/_react["default"].createElement(_MenuItems["default"], props), /*#__PURE__*/_react["default"].
|
|
39
|
-
customClass: "menubar ".concat(customClassForToolBar)
|
|
40
|
-
innerRef: toolBarRef ? function (r) {
|
|
41
|
-
toolBarRef(r);
|
|
42
|
-
} : undefined
|
|
30
|
+
}, /*#__PURE__*/_react["default"].createElement(_MenuItems["default"], props), /*#__PURE__*/_react["default"].cloneElement(toolbar, {
|
|
31
|
+
customClass: "menubar ".concat(customClassForToolBar)
|
|
43
32
|
}));
|
|
44
33
|
};
|
|
45
34
|
|
|
46
35
|
Menu.propTypes = {
|
|
47
36
|
toolbar: _propTypes["default"].object,
|
|
48
37
|
customClassForToolBar: _propTypes["default"].string,
|
|
49
|
-
menuRef: _propTypes["default"].func.isRequired
|
|
50
|
-
toolBarRef: _propTypes["default"].func
|
|
38
|
+
menuRef: _propTypes["default"].func.isRequired
|
|
51
39
|
};
|
|
52
40
|
Menu.defaultProps = {
|
|
53
41
|
toolbar: undefined,
|
|
54
|
-
toolBarRef: null,
|
|
55
42
|
customClassForToolBar: ''
|
|
56
43
|
};
|
|
57
44
|
var _default = Menu;
|
package/lib/tabs/MenuItems.js
CHANGED
|
@@ -24,17 +24,17 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
24
24
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
25
25
|
|
|
26
26
|
var MenuItems = function MenuItems(_ref) {
|
|
27
|
-
var
|
|
27
|
+
var panels = _ref.panels,
|
|
28
|
+
selectedTabId = _ref.selectedTabId,
|
|
28
29
|
handlerClick = _ref.handlerClick,
|
|
29
30
|
handlerRemovePanel = _ref.handlerRemovePanel,
|
|
30
31
|
tabMenuAlign = _ref.tabMenuAlign,
|
|
31
32
|
firstTabIdent = _ref.firstTabIdent,
|
|
32
|
-
tabMenuSize = _ref.tabMenuSize
|
|
33
|
-
currentPanels = _ref.currentPanels;
|
|
33
|
+
tabMenuSize = _ref.tabMenuSize;
|
|
34
34
|
return /*#__PURE__*/_react["default"].createElement("ul", {
|
|
35
35
|
className: "menu ".concat(firstTabIdent && '-firsttabident'),
|
|
36
36
|
style: helpers.menuStyles(tabMenuAlign)
|
|
37
|
-
},
|
|
37
|
+
}, panels.map(function (panel, index) {
|
|
38
38
|
var _panel$props = panel.props,
|
|
39
39
|
id = _panel$props.id,
|
|
40
40
|
title = _panel$props.title,
|
|
@@ -63,10 +63,10 @@ var MenuItems = function MenuItems(_ref) {
|
|
|
63
63
|
disabled: disabled || onDenied.disabled,
|
|
64
64
|
label: title,
|
|
65
65
|
size: tabMenuSize,
|
|
66
|
-
tooltip: tooltip
|
|
66
|
+
tooltip: tooltip,
|
|
67
67
|
tooltipPosition: tooltipPosition,
|
|
68
68
|
tooltipWidth: tooltipWidth
|
|
69
|
-
}), closeable &&
|
|
69
|
+
}), closeable && panels.length > 1 && /*#__PURE__*/_react["default"].createElement("button", {
|
|
70
70
|
className: "closepanel",
|
|
71
71
|
onClick: function onClick() {
|
|
72
72
|
handlerRemovePanel(id, index);
|
|
@@ -76,7 +76,7 @@ var MenuItems = function MenuItems(_ref) {
|
|
|
76
76
|
};
|
|
77
77
|
|
|
78
78
|
MenuItems.propTypes = {
|
|
79
|
-
|
|
79
|
+
panels: _propTypes["default"].arrayOf(_propTypes["default"].element).isRequired,
|
|
80
80
|
selectedTabId: _propTypes["default"].string,
|
|
81
81
|
handlerClick: _propTypes["default"].func.isRequired,
|
|
82
82
|
handlerRemovePanel: _propTypes["default"].func,
|
package/lib/tabs/Panel.js
CHANGED
|
@@ -110,7 +110,8 @@ Panel.defaultProps = {
|
|
|
110
110
|
iconAlign: 'left',
|
|
111
111
|
customClass: '',
|
|
112
112
|
children: undefined,
|
|
113
|
-
|
|
113
|
+
tooltip: '',
|
|
114
|
+
tooltipPosition: 'top',
|
|
114
115
|
tooltipWidth: 'auto',
|
|
115
116
|
onEndReached: undefined,
|
|
116
117
|
onEndReachedThreshold: 0.1,
|
|
@@ -130,6 +131,7 @@ Panel.propTypes = {
|
|
|
130
131
|
icon: _propTypes["default"].instanceOf(Object),
|
|
131
132
|
iconName: _propTypes["default"].string,
|
|
132
133
|
iconAlign: _propTypes["default"].string,
|
|
134
|
+
tooltip: _propTypes["default"].string,
|
|
133
135
|
tooltipPosition: _propTypes["default"].string,
|
|
134
136
|
tooltipWidth: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
|
|
135
137
|
onEndReached: _propTypes["default"].func,
|
package/lib/tabs/index.js
CHANGED
|
@@ -33,14 +33,6 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
33
33
|
|
|
34
34
|
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); }
|
|
35
35
|
|
|
36
|
-
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
|
37
|
-
|
|
38
|
-
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
39
|
-
|
|
40
|
-
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
|
|
41
|
-
|
|
42
|
-
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
|
43
|
-
|
|
44
36
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
45
37
|
|
|
46
38
|
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
@@ -59,160 +51,48 @@ var Tabs = function Tabs(props) {
|
|
|
59
51
|
handlerCloseTab = props.handlerCloseTab,
|
|
60
52
|
tabMenuPosition = props.tabMenuPosition,
|
|
61
53
|
style = props.style,
|
|
62
|
-
selectedTab = props.selectedTab
|
|
63
|
-
toolbar = props.toolbar;
|
|
54
|
+
selectedTab = props.selectedTab;
|
|
64
55
|
|
|
65
56
|
var _useState = (0, _react.useState)((0, _tabHelpers.buildPanels)(children) || []),
|
|
66
57
|
_useState2 = _slicedToArray(_useState, 2),
|
|
67
58
|
panels = _useState2[0],
|
|
68
59
|
setPanels = _useState2[1];
|
|
69
60
|
|
|
70
|
-
var _useState3 = (0, _react.useState)([]),
|
|
61
|
+
var _useState3 = (0, _react.useState)(selectedTab || panels[0].props.id),
|
|
71
62
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
72
|
-
|
|
73
|
-
|
|
63
|
+
selectedTabId = _useState4[0],
|
|
64
|
+
setSelectedTabId = _useState4[1];
|
|
74
65
|
|
|
75
|
-
var _useState5 = (0, _react.useState)(
|
|
76
|
-
_useState6 = _slicedToArray(_useState5,
|
|
77
|
-
|
|
78
|
-
setDropdownPanels = _useState6[1];
|
|
66
|
+
var _useState5 = (0, _react.useState)(''),
|
|
67
|
+
_useState6 = _slicedToArray(_useState5, 1),
|
|
68
|
+
customClass = _useState6[0];
|
|
79
69
|
|
|
80
|
-
var _useState7 = (0, _react.useState)(
|
|
70
|
+
var _useState7 = (0, _react.useState)(undefined),
|
|
81
71
|
_useState8 = _slicedToArray(_useState7, 2),
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
var _useState9 = (0, _react.useState)(''),
|
|
86
|
-
_useState10 = _slicedToArray(_useState9, 1),
|
|
87
|
-
customClass = _useState10[0];
|
|
88
|
-
|
|
89
|
-
var _useState11 = (0, _react.useState)(undefined),
|
|
90
|
-
_useState12 = _slicedToArray(_useState11, 2),
|
|
91
|
-
contentHeight = _useState12[0],
|
|
92
|
-
setContentHeight = _useState12[1];
|
|
93
|
-
|
|
94
|
-
var _useState13 = (0, _react.useState)(0),
|
|
95
|
-
_useState14 = _slicedToArray(_useState13, 2),
|
|
96
|
-
tabsContentWidth = _useState14[0],
|
|
97
|
-
setTabsContentWidth = _useState14[1];
|
|
98
|
-
|
|
99
|
-
var _useState15 = (0, _react.useState)(false),
|
|
100
|
-
_useState16 = _slicedToArray(_useState15, 2),
|
|
101
|
-
hasMenuAttributes = _useState16[0],
|
|
102
|
-
setHasMenuAttributes = _useState16[1];
|
|
103
|
-
|
|
104
|
-
var _useState17 = (0, _react.useState)(0),
|
|
105
|
-
_useState18 = _slicedToArray(_useState17, 2),
|
|
106
|
-
dropdownWidth = _useState18[0],
|
|
107
|
-
setDropdownWidth = _useState18[1];
|
|
108
|
-
|
|
109
|
-
var componentRef = (0, _react.useRef)(null);
|
|
110
|
-
|
|
111
|
-
var _menuRef = (0, _react.useRef)(null);
|
|
112
|
-
|
|
113
|
-
var _toolBarRef = (0, _react.useRef)(null);
|
|
114
|
-
|
|
115
|
-
var getTabListWidth = function getTabListWidth() {
|
|
116
|
-
var tabMenu = _menuRef.current.children[0];
|
|
117
|
-
|
|
118
|
-
var tabList = _toConsumableArray(tabMenu.children);
|
|
119
|
-
|
|
120
|
-
var tabsListWidth = tabList.reduce(function (total, tab) {
|
|
121
|
-
return total + tab.clientWidth;
|
|
122
|
-
}, 0);
|
|
123
|
-
return tabsListWidth;
|
|
124
|
-
};
|
|
125
|
-
|
|
126
|
-
var getMenuAttributes = function getMenuAttributes() {
|
|
127
|
-
var menuSize = _menuRef.current.clientWidth;
|
|
128
|
-
var toolbarSize = toolbar && _toolBarRef ? _toolBarRef.current.clientWidth : 0;
|
|
129
|
-
var contentWidth = (toolbar ? menuSize - toolbarSize : menuSize) - dropdownWidth;
|
|
130
|
-
setTabsContentWidth(contentWidth);
|
|
131
|
-
};
|
|
132
|
-
|
|
133
|
-
var getTabsList = function getTabsList() {
|
|
134
|
-
var tabsListWidth = getTabListWidth();
|
|
72
|
+
contentHeight = _useState8[0],
|
|
73
|
+
setContentHeight = _useState8[1];
|
|
135
74
|
|
|
136
|
-
|
|
75
|
+
var componentRef = (0, _react.useRef)();
|
|
137
76
|
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
if (newDropdownPanels.length) {
|
|
141
|
-
var newDropdownPanelsIds = newDropdownPanels.map(function (dd) {
|
|
142
|
-
return dd.props.id;
|
|
143
|
-
});
|
|
144
|
-
newCurrentPanels = newCurrentPanels.filter(function (tab) {
|
|
145
|
-
return !newDropdownPanelsIds.includes(tab.props.id);
|
|
146
|
-
});
|
|
147
|
-
}
|
|
148
|
-
|
|
149
|
-
if (tabsListWidth > tabsContentWidth) {
|
|
150
|
-
var lastPanel = newCurrentPanels[newCurrentPanels.length - 1];
|
|
151
|
-
newDropdownPanels.push(lastPanel);
|
|
152
|
-
newCurrentPanels.pop();
|
|
153
|
-
} else if (tabsListWidth + 110 < tabsContentWidth && newDropdownPanels.length) {
|
|
154
|
-
newCurrentPanels.push(newDropdownPanels[0]);
|
|
155
|
-
newDropdownPanels.shift();
|
|
156
|
-
}
|
|
157
|
-
|
|
158
|
-
setCurrentPanels(newCurrentPanels);
|
|
159
|
-
setDropdownPanels(newDropdownPanels);
|
|
160
|
-
};
|
|
77
|
+
var _menuRef = (0, _react.useRef)();
|
|
161
78
|
|
|
162
79
|
var onMenuClick = function onMenuClick(tabId) {
|
|
163
|
-
var includedInDropdown = dropdownPanels.filter(function (item) {
|
|
164
|
-
return item.props.id === tabId;
|
|
165
|
-
});
|
|
166
|
-
|
|
167
|
-
if (includedInDropdown.length > 0 && getTabListWidth() > 0) {
|
|
168
|
-
var newDropdownPanels = dropdownPanels.filter(function (item) {
|
|
169
|
-
return item.props.id !== tabId;
|
|
170
|
-
});
|
|
171
|
-
var newPanels = panels.filter(function (item) {
|
|
172
|
-
return item.props.id !== tabId;
|
|
173
|
-
});
|
|
174
|
-
var newCurrentPanels = currentPanels.slice(0, -1);
|
|
175
|
-
newDropdownPanels.push(currentPanels.pop());
|
|
176
|
-
newPanels.unshift(includedInDropdown[0]);
|
|
177
|
-
newCurrentPanels.unshift(includedInDropdown[0]);
|
|
178
|
-
setPanels(newPanels);
|
|
179
|
-
setDropdownPanels(newDropdownPanels);
|
|
180
|
-
setCurrentPanels(newCurrentPanels);
|
|
181
|
-
}
|
|
182
|
-
|
|
183
|
-
if (handlerTabClick) handlerTabClick(tabId);
|
|
184
80
|
setSelectedTabId(tabId);
|
|
81
|
+
if (handlerTabClick) handlerTabClick(tabId);
|
|
185
82
|
};
|
|
186
83
|
|
|
187
84
|
var onRemovePanel = function onRemovePanel(closedPanelId, panelIndex) {
|
|
188
|
-
var
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
remainPanels = panels.filter(function (panel) {
|
|
194
|
-
return panel.props.id !== closedPanelId;
|
|
195
|
-
});
|
|
196
|
-
newSelectedTabId = selectedTabId === closedPanelId ? remainPanels[panelIndex - (panelIndex === 0 ? 0 : 1)].props.id : selectedTabId;
|
|
197
|
-
setSelectedTabId(newSelectedTabId);
|
|
198
|
-
} else {
|
|
199
|
-
remainPanels = dropdownPanels.filter(function (panel) {
|
|
200
|
-
return panel.props.id !== closedPanelId;
|
|
201
|
-
});
|
|
202
|
-
setDropdownPanels(remainPanels);
|
|
203
|
-
}
|
|
204
|
-
|
|
85
|
+
var remainPanels = panels.filter(function (panel) {
|
|
86
|
+
return panel.props.id !== closedPanelId;
|
|
87
|
+
});
|
|
88
|
+
var newSelectedTabId = selectedTabId === closedPanelId ? remainPanels[panelIndex - (panelIndex === 0 ? 0 : 1)].props.id : selectedTabId;
|
|
89
|
+
setSelectedTabId(newSelectedTabId);
|
|
205
90
|
if (handlerCloseTab) handlerCloseTab(closedPanelId, newSelectedTabId);
|
|
206
91
|
};
|
|
207
92
|
|
|
208
93
|
var onResize = function onResize() {
|
|
209
94
|
if (componentRef.current && _menuRef.current) {
|
|
210
95
|
setContentHeight(componentRef.current.offsetHeight - _menuRef.current.offsetHeight);
|
|
211
|
-
|
|
212
|
-
if (!hasMenuAttributes && _menuRef.current && _menuRef.current.clientWidth > 0 && dropdownWidth) {
|
|
213
|
-
getMenuAttributes();
|
|
214
|
-
setHasMenuAttributes(true);
|
|
215
|
-
}
|
|
216
96
|
}
|
|
217
97
|
};
|
|
218
98
|
|
|
@@ -221,12 +101,8 @@ var Tabs = function Tabs(props) {
|
|
|
221
101
|
menuRef: function menuRef(ref) {
|
|
222
102
|
_menuRef.current = ref;
|
|
223
103
|
},
|
|
224
|
-
toolBarRef: function toolBarRef(ref) {
|
|
225
|
-
_toolBarRef.current = ref;
|
|
226
|
-
},
|
|
227
104
|
customClass: customClass,
|
|
228
|
-
|
|
229
|
-
dropdownPanels: dropdownPanels,
|
|
105
|
+
panels: panels,
|
|
230
106
|
selectedTabId: selectedTabId,
|
|
231
107
|
handlerClick: onMenuClick,
|
|
232
108
|
handlerRemovePanel: onRemovePanel
|
|
@@ -249,18 +125,11 @@ var Tabs = function Tabs(props) {
|
|
|
249
125
|
return function () {
|
|
250
126
|
return window.removeEventListener('resize', onResize);
|
|
251
127
|
};
|
|
252
|
-
}, [
|
|
128
|
+
}, []);
|
|
253
129
|
(0, _react.useEffect)(function () {
|
|
254
130
|
if (selectedTab) setSelectedTabId(selectedTab);
|
|
255
131
|
if (children) setPanels((0, _tabHelpers.buildPanels)(children));
|
|
256
132
|
}, [selectedTab, children]);
|
|
257
|
-
(0, _react.useEffect)(function () {
|
|
258
|
-
getTabsList();
|
|
259
|
-
}, [panels.length, currentPanels.length, tabsContentWidth]);
|
|
260
|
-
(0, _react.useEffect)(function () {
|
|
261
|
-
var currentDropdownWidth = dropdownPanels.length > 0 ? _menuRef.current.children[1].clientWidth : 0;
|
|
262
|
-
setDropdownWidth(currentDropdownWidth);
|
|
263
|
-
}, [dropdownPanels.length]);
|
|
264
133
|
|
|
265
134
|
var getContextValues = function getContextValues() {
|
|
266
135
|
return {
|
package/lib/tabs/tabs.spec.js
CHANGED
|
@@ -135,7 +135,7 @@ describe('Tabs', function () {
|
|
|
135
135
|
container = _render10.container;
|
|
136
136
|
|
|
137
137
|
expect(container.querySelector('.tabs-component')).toHaveClass('menu-bottom');
|
|
138
|
-
expect(container.querySelector('.tabs-component').lastChild).toHaveClass('
|
|
138
|
+
expect(container.querySelector('.tabs-component').lastChild).toHaveClass('menu');
|
|
139
139
|
});
|
|
140
140
|
it('should apply tabMenuAlign', function () {
|
|
141
141
|
var _render11 = (0, _react2.render)(tabsMockRender({
|
|
@@ -328,8 +328,7 @@ describe('Tabs', function () {
|
|
|
328
328
|
})),
|
|
329
329
|
container = _render23.container;
|
|
330
330
|
|
|
331
|
-
|
|
332
|
-
expect(noPermissionComponent).toBeFalsy();
|
|
331
|
+
expect(container.querySelector('ul.menu li.menuitem button')).not.toHaveAttribute('disabled');
|
|
333
332
|
});
|
|
334
333
|
it('should check permission and be unavailable', function () {
|
|
335
334
|
Object.defineProperty(window, 'sessionStorage', {
|
|
@@ -337,13 +336,11 @@ describe('Tabs', function () {
|
|
|
337
336
|
});
|
|
338
337
|
|
|
339
338
|
var _render24 = (0, _react2.render)(tabsMockRender({}, {
|
|
340
|
-
permissionAttr: (0, _storageMock.permissionAttrMockUnauthorized)('
|
|
339
|
+
permissionAttr: (0, _storageMock.permissionAttrMockUnauthorized)('disabled')
|
|
341
340
|
})),
|
|
342
|
-
container = _render24.container;
|
|
341
|
+
container = _render24.container;
|
|
343
342
|
|
|
344
|
-
|
|
345
|
-
var noPermissionComponent = container.querySelector('.no-permission-component');
|
|
346
|
-
expect(noPermissionComponent).toBeTruthy();
|
|
343
|
+
expect(container.querySelector('ul.menu li.menuitem button')).toHaveAttribute('disabled');
|
|
347
344
|
});
|
|
348
345
|
});
|
|
349
346
|
});
|
package/lib/toolbar/index.js
CHANGED
|
@@ -49,12 +49,10 @@ var ToolBar = function ToolBar(_ref) {
|
|
|
49
49
|
var size = _ref.size,
|
|
50
50
|
customClass = _ref.customClass,
|
|
51
51
|
style = _ref.style,
|
|
52
|
-
children = _ref.children
|
|
53
|
-
innerRef = _ref.innerRef;
|
|
52
|
+
children = _ref.children;
|
|
54
53
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
55
54
|
className: "toolbar-component ".concat(size && "".concat(size, "-bar"), " ").concat(customClass),
|
|
56
|
-
style: style
|
|
57
|
-
ref: innerRef
|
|
55
|
+
style: style
|
|
58
56
|
}, children);
|
|
59
57
|
};
|
|
60
58
|
|
|
@@ -62,14 +60,12 @@ ToolBar.propTypes = {
|
|
|
62
60
|
size: _propTypes["default"].oneOf(['small', 'large']),
|
|
63
61
|
style: _propTypes["default"].object,
|
|
64
62
|
children: _propTypes["default"].any.isRequired,
|
|
65
|
-
customClass: _propTypes["default"].string
|
|
66
|
-
innerRef: _propTypes["default"].func
|
|
63
|
+
customClass: _propTypes["default"].string
|
|
67
64
|
};
|
|
68
65
|
ToolBar.defaultProps = {
|
|
69
66
|
size: null,
|
|
70
67
|
style: {},
|
|
71
|
-
customClass: ''
|
|
72
|
-
innerRef: null
|
|
68
|
+
customClass: ''
|
|
73
69
|
};
|
|
74
70
|
var _default = ToolBar;
|
|
75
71
|
exports["default"] = _default;
|