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.
Files changed (72) hide show
  1. package/.vscode/settings.json +2 -1
  2. package/README.md +0 -33
  3. package/lib/assets/styles/dropdown.scss +2 -28
  4. package/lib/assets/styles/effects.scss +0 -12
  5. package/lib/assets/styles/floatMenu.scss +1 -0
  6. package/lib/assets/styles/panel.scss +1 -0
  7. package/lib/assets/styles/progress.scss +1 -8
  8. package/lib/assets/styles/select.scss +0 -1
  9. package/lib/assets/styles/table.scss +5 -13
  10. package/lib/assets/styles/tabs.scss +44 -79
  11. package/lib/assets/styles/treeview.scss +0 -32
  12. package/lib/avatar/avatar.spec.js +6 -17
  13. package/lib/avatar/index.js +1 -1
  14. package/lib/buttons/DefaultButton.js +1 -7
  15. package/lib/checkbox/index.js +6 -20
  16. package/lib/dialog/base/index.js +6 -15
  17. package/lib/dialog/form/index.js +3 -16
  18. package/lib/drawer/index.js +1 -4
  19. package/lib/form/Field.js +0 -2
  20. package/lib/form/FieldNumber.js +2 -10
  21. package/lib/form/helpers.js +1 -9
  22. package/lib/form/index.js +222 -209
  23. package/lib/form/withFieldHOC.js +0 -2
  24. package/lib/icons/helper.js +0 -16
  25. package/lib/inputs/base/helpers.js +10 -15
  26. package/lib/inputs/date/Dropdown.js +3 -3
  27. package/lib/inputs/date/index.js +9 -10
  28. package/lib/inputs/number/BaseNumber.js +1 -1
  29. package/lib/inputs/number/index.js +5 -7
  30. package/lib/inputs/select/Dropdown.js +4 -4
  31. package/lib/inputs/select/index.js +3 -26
  32. package/lib/inputs/select/multiple/index.js +7 -9
  33. package/lib/inputs/select/simple/index.js +18 -30
  34. package/lib/internals/withTooltip.js +81 -85
  35. package/lib/list/Item.js +3 -3
  36. package/lib/list/index.js +10 -20
  37. package/lib/list/list.spec.js +85 -129
  38. package/lib/menus/float/MenuItem.js +8 -25
  39. package/lib/menus/sidenav/index.js +3 -7
  40. package/lib/menus/sidenav/popup_menu_search/index.js +1 -1
  41. package/lib/progress/Bar.js +9 -40
  42. package/lib/progress/index.js +4 -12
  43. package/lib/spinner/index.js +1 -6
  44. package/lib/split/Split.js +11 -5
  45. package/lib/table/Row.js +1 -1
  46. package/lib/tabs/Menu.js +5 -18
  47. package/lib/tabs/MenuItems.js +7 -7
  48. package/lib/tabs/Panel.js +3 -1
  49. package/lib/tabs/index.js +20 -151
  50. package/lib/tabs/tabs.spec.js +5 -8
  51. package/lib/toolbar/index.js +4 -8
  52. package/lib/tooltip/index.js +7 -20
  53. package/lib/treeview/Node.js +48 -347
  54. package/lib/treeview/index.js +35 -456
  55. package/package.json +8 -9
  56. package/.tool-versions +0 -1
  57. package/lib/assets/styles/multiSelect.scss +0 -105
  58. package/lib/assets/styles/periodpicker.scss +0 -65
  59. package/lib/checkbox/Label.js +0 -37
  60. package/lib/form/FieldPeriod.js +0 -100
  61. package/lib/form/withFormSecurity.js +0 -106
  62. package/lib/inputs/date/helpers.js +0 -36
  63. package/lib/inputs/multiSelect/ActionButtons.js +0 -68
  64. package/lib/inputs/multiSelect/Dropdown.js +0 -200
  65. package/lib/inputs/multiSelect/helper.js +0 -18
  66. package/lib/inputs/multiSelect/index.js +0 -343
  67. package/lib/inputs/period/Dialog.js +0 -38
  68. package/lib/inputs/period/Dropdown.js +0 -90
  69. package/lib/inputs/period/PeriodList.js +0 -79
  70. package/lib/inputs/period/helper.js +0 -118
  71. package/lib/inputs/period/index.js +0 -490
  72. 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: menuItemsContent && returnMenuItems()
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 && menuItemsContent.filter(function (item) {
87
+ var result = menuItemsContent.filter(function (item) {
88
88
  return item.content.toLowerCase().includes(filter);
89
89
  });
90
90
  setSearchFieldContent(value);
@@ -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: getClass(props),
63
- style: getStyle(props),
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 && !props.indeterminate && getLabel(props));
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
- progressWidth: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
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;
@@ -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: getStyle
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"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
43
- height: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
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: '24px',
41
+ height: '100%',
50
42
  children: null,
51
43
  style: {}
52
44
  };
@@ -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
- delayTimeout.current = setTimeout(function () {
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() {
@@ -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 state.secondaryPaneSize === 100 ? setState(_extends({}, state, {
333
- secondaryPaneSize: 50,
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"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
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("div", {
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"].createElement(_DropdownItems["default"], props), /*#__PURE__*/_react["default"].cloneElement(toolbar, {
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;
@@ -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 selectedTabId = _ref.selectedTabId,
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
- }, currentPanels.map(function (panel, index) {
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 || title,
66
+ tooltip: tooltip,
67
67
  tooltipPosition: tooltipPosition,
68
68
  tooltipWidth: tooltipWidth
69
- }), closeable && currentPanels.length > 1 && /*#__PURE__*/_react["default"].createElement("button", {
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
- currentPanels: _propTypes["default"].arrayOf(_propTypes["default"].element).isRequired,
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
- tooltipPosition: 'bottom',
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
- currentPanels = _useState4[0],
73
- setCurrentPanels = _useState4[1];
63
+ selectedTabId = _useState4[0],
64
+ setSelectedTabId = _useState4[1];
74
65
 
75
- var _useState5 = (0, _react.useState)([]),
76
- _useState6 = _slicedToArray(_useState5, 2),
77
- dropdownPanels = _useState6[0],
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)(selectedTab || panels[0].props.id),
70
+ var _useState7 = (0, _react.useState)(undefined),
81
71
  _useState8 = _slicedToArray(_useState7, 2),
82
- selectedTabId = _useState8[0],
83
- setSelectedTabId = _useState8[1];
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
- var newDropdownPanels = _toConsumableArray(dropdownPanels);
75
+ var componentRef = (0, _react.useRef)();
137
76
 
138
- var newCurrentPanels = _toConsumableArray(panels);
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 fromDropdownPanels = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
189
- var newSelectedTabId = selectedTabId;
190
- var remainPanels;
191
-
192
- if (!fromDropdownPanels) {
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
- currentPanels: currentPanels,
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
- }, [_menuRef.current, dropdownWidth]);
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 {
@@ -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('menucontainer');
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
- var noPermissionComponent = container.querySelector('.no-permission-component');
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)('hideContent')
339
+ permissionAttr: (0, _storageMock.permissionAttrMockUnauthorized)('disabled')
341
340
  })),
342
- container = _render24.container; // debug();
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
  });
@@ -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;