linear-react-components-ui 0.4.76-beta.14 → 0.4.76-beta.16

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 (7) hide show
  1. package/lib/assets/styles/tabs.scss +44 -49
  2. package/lib/assets/styles/treeview.scss +3 -0
  3. package/lib/tabs/Menu.js +11 -1
  4. package/lib/tabs/index.js +1 -1
  5. package/lib/treeview/Node.js +16 -4
  6. package/lib/treeview/index.js +7 -3
  7. package/package.json +1 -1
package/lib/assets/styles/tabs.scss CHANGED
@@ -48,6 +48,7 @@
48
48
  margin-right: 1px;
49
49
  padding: 0;
50
50
  width: auto;
51
+ min-width: 100px;
51
52
  display: flex;
52
53
  justify-content: space-between;
53
54
  align-items: center;
@@ -121,27 +122,25 @@
121
122
  .tabs-component.menu-left {
122
123
  grid-template-columns: auto 1fr;
123
124
  grid-template-rows: none;
124
- > .menucontainer {
125
- > .menu {
126
- box-shadow: -1px 0px 0px 0px $component-border-color inset;
127
- flex-direction: column;
128
- justify-content: center;
129
- }
130
- > .menu > .menuitem {
131
- border-radius: 5px 0px 0px 5px;
132
- -moz-border-radius: 5px 0px 0px 5px;
133
- -webkit-border-radius: 5px 0px 0px 5px;
134
- &.selected {
135
- border: 1px solid $component-border-color;
136
- border-right: 1px solid $font-color-second;
137
- border-left: 2px solid $component-selected-color;
138
- width: 100%;
139
- }
140
- }
141
- > .menu > .menuitem > .closepanel {
142
- float: left;
125
+ > .menu {
126
+ box-shadow: -1px 0px 0px 0px $component-border-color inset;
127
+ flex-direction: column;
128
+ justify-content: center;
129
+ }
130
+ > .menu > .menuitem {
131
+ border-radius: 5px 0px 0px 5px;
132
+ -moz-border-radius: 5px 0px 0px 5px;
133
+ -webkit-border-radius: 5px 0px 0px 5px;
134
+ &.selected {
135
+ border: 1px solid $component-border-color;
136
+ border-right: 1px solid $font-color-second;
137
+ border-left: 2px solid $component-selected-color;
138
+ width: 100%;
143
139
  }
144
140
  }
141
+ > .menu > .menuitem > .closepanel {
142
+ float: left;
143
+ }
145
144
  > .panel {
146
145
  border-top: 1px solid $component-border-color;
147
146
  border-left: 0;
@@ -153,20 +152,18 @@
153
152
  */
154
153
  .tabs-component.menu-bottom {
155
154
  grid-template-rows: 1fr auto;
156
- .menucontainer {
157
- > .menu {
158
- box-shadow: 0 1px 1px 0px $component-border-color inset;
159
- }
160
- > .menu > .menuitem {
161
- border-radius: 0px 0px 5px 5px;
162
- -moz-border-radius: 0px 0px 5px 5px;
163
- -webkit-border-radius: 0px 0px 5px 5px;
164
- &.selected {
165
- border: 1px solid $component-border-color;
166
- border-top: 1px solid $font-color-second;
167
- border-bottom: 2px solid $component-selected-color;
168
- height: 100%;
169
- }
155
+ > .menu {
156
+ box-shadow: 0 1px 1px 0px $component-border-color inset;
157
+ }
158
+ > .menu > .menuitem {
159
+ border-radius: 0px 0px 5px 5px;
160
+ -moz-border-radius: 0px 0px 5px 5px;
161
+ -webkit-border-radius: 0px 0px 5px 5px;
162
+ &.selected {
163
+ border: 1px solid $component-border-color;
164
+ border-top: 1px solid $font-color-second;
165
+ border-bottom: 2px solid $component-selected-color;
166
+ height: 100%;
170
167
  }
171
168
  }
172
169
  > .panel {
@@ -181,22 +178,20 @@
181
178
  .tabs-component.menu-right {
182
179
  grid-template-columns: 1fr auto;
183
180
  grid-template-rows: none;
184
- .menucontainer{
185
- > .menu {
186
- box-shadow: 2px 0 0px -1px $component-border-color inset;
187
- flex-direction: column;
188
- justify-content: center;
189
- }
190
- > .menu > .menuitem {
191
- border-radius: 0px 5px 5px 0px;
192
- -moz-border-radius: 0px 5px 5px 0px;
193
- -webkit-border-radius: 0px 5px 5px 0px;
194
- &.selected {
195
- border: 1px solid $component-border-color;
196
- border-left: 1px solid $font-color-second;
197
- border-right: 2px solid $component-selected-color;
198
- width: 100%;
199
- }
181
+ > .menu {
182
+ box-shadow: 2px 0 0px -1px $component-border-color inset;
183
+ flex-direction: column;
184
+ justify-content: center;
185
+ }
186
+ > .menu > .menuitem {
187
+ border-radius: 0px 5px 5px 0px;
188
+ -moz-border-radius: 0px 5px 5px 0px;
189
+ -webkit-border-radius: 0px 5px 5px 0px;
190
+ &.selected {
191
+ border: 1px solid $component-border-color;
192
+ border-left: 1px solid $font-color-second;
193
+ border-right: 2px solid $component-selected-color;
194
+ width: 100%;
200
195
  }
201
196
  }
202
197
  > .panel {
package/lib/assets/styles/treeview.scss CHANGED
@@ -45,6 +45,7 @@
45
45
  display: flex;
46
46
  justify-content: flex-start;
47
47
  align-items: center;
48
+ color: $font-color-soft;
48
49
  >.node-menu {
49
50
  animation: revealelement 0.3s forwards ease-in-out;
50
51
  margin-left: 10px;
@@ -62,7 +63,9 @@
62
63
  margin-left: 10px;
63
64
  }
64
65
  &:hover {
66
+ cursor: pointer;
65
67
  background-color: rgb(209, 209, 209);
68
+ text-decoration: underline;
66
69
  }
67
70
  }
68
71
  > .nodelist {
package/lib/tabs/Menu.js CHANGED
@@ -20,12 +20,22 @@ var Menu = function Menu(props) {
20
20
  customClassForToolBar = props.customClassForToolBar,
21
21
  menuRef = props.menuRef,
22
22
  toolBarRef = props.toolBarRef;
23
+
24
+ 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));
31
+ }
32
+
23
33
  return /*#__PURE__*/_react["default"].createElement("div", {
24
34
  className: "menucontainer",
25
35
  ref: function ref(r) {
26
36
  menuRef(r);
27
37
  }
28
- }, /*#__PURE__*/_react["default"].createElement(_MenuItems["default"], props), /*#__PURE__*/_react["default"].createElement(_DropdownItems["default"], props), toolbar && /*#__PURE__*/_react["default"].cloneElement(toolbar, {
38
+ }, /*#__PURE__*/_react["default"].createElement(_MenuItems["default"], props), /*#__PURE__*/_react["default"].createElement(_DropdownItems["default"], props), /*#__PURE__*/_react["default"].cloneElement(toolbar, {
29
39
  customClass: "menubar ".concat(customClassForToolBar),
30
40
  innerRef: toolBarRef ? function (r) {
31
41
  toolBarRef(r);
package/lib/tabs/index.js CHANGED
@@ -254,7 +254,7 @@ var Tabs = function Tabs(props) {
254
254
  return function () {
255
255
  return window.removeEventListener('resize', onResize);
256
256
  };
257
- }, [_menuRef.current, tabMenuPosition]);
257
+ }, [_menuRef.current]);
258
258
  (0, _react.useEffect)(function () {
259
259
  if (selectedTab) setSelectedTabId(selectedTab);
260
260
  if (children) setPanels((0, _tabHelpers.buildPanels)(children));
package/lib/treeview/Node.js CHANGED
@@ -27,6 +27,8 @@ var _list = _interopRequireWildcard(require("../list"));
27
27
 
28
28
  var _toolbar = _interopRequireWildcard(require("../toolbar"));
29
29
 
30
+ var _SpinnerLoading = _interopRequireDefault(require("../spinner/SpinnerLoading"));
31
+
30
32
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
31
33
 
32
34
  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); }
@@ -155,6 +157,9 @@ var TreeNode = /*#__PURE__*/function (_Component) {
155
157
  className: "treeviewitem"
156
158
  }, _this2.getSpan(), /*#__PURE__*/_react["default"].createElement("div", {
157
159
  className: "label",
160
+ style: !onNodeClick ? {
161
+ textDecoration: 'none'
162
+ } : null,
158
163
  ref: _this2.labelRef,
159
164
  role: "button",
160
165
  onKeyPress: null,
@@ -240,8 +245,11 @@ var _initialiseProps = function _initialiseProps() {
240
245
  enumerable: true,
241
246
  writable: true,
242
247
  value: function value() {
243
- var alwaysShowArrow = _this3.props.alwaysShowArrow;
248
+ var _this3$props = _this3.props,
249
+ alwaysShowArrow = _this3$props.alwaysShowArrow,
250
+ idsInLoading = _this3$props.idsInLoading;
244
251
  var node = _this3.state.node;
252
+ var isLoading = idsInLoading.includes(node.id);
245
253
 
246
254
  var span = /*#__PURE__*/_react["default"].createElement("noscript", null);
247
255
 
@@ -254,7 +262,9 @@ var _initialiseProps = function _initialiseProps() {
254
262
  onClick: function onClick() {
255
263
  return _this3.openCloseTree(node);
256
264
  }
257
- }, /*#__PURE__*/_react["default"].createElement(_icons["default"], {
265
+ }, isLoading ? /*#__PURE__*/_react["default"].createElement(_SpinnerLoading["default"], {
266
+ size: "30px"
267
+ }) : /*#__PURE__*/_react["default"].createElement(_icons["default"], {
258
268
  name: _this3.state.isVisible ? 'up' : 'down',
259
269
  size: 10
260
270
  }));
@@ -431,7 +441,8 @@ TreeNode.propTypes = {
431
441
  onNodeClick: _propTypes["default"].func,
432
442
  handlerOnNodeOpen: _propTypes["default"].func,
433
443
  nodeElementsValidations: _propTypes["default"].object,
434
- startNodesOpened: _propTypes["default"].bool.isRequired
444
+ startNodesOpened: _propTypes["default"].bool.isRequired,
445
+ idsInLoading: _propTypes["default"].arrayOf(_propTypes["default"].number)
435
446
  };
436
447
  TreeNode.defaultProps = {
437
448
  childrenIds: [],
@@ -444,7 +455,8 @@ TreeNode.defaultProps = {
444
455
  nodeMenuButtonSize: 'small',
445
456
  onNodeClick: undefined,
446
457
  handlerOnNodeOpen: undefined,
447
- nodeElementsValidations: undefined
458
+ nodeElementsValidations: undefined,
459
+ idsInLoading: []
448
460
  };
449
461
  TreeNode.contextType = _constants.TreeviewContext;
450
462
  var _default = TreeNode;
package/lib/treeview/index.js CHANGED
@@ -463,7 +463,8 @@ var TreeView = /*#__PURE__*/function (_Component) {
463
463
  nodeToolbarElements = _this$props3.nodeToolbarElements,
464
464
  nodeMenuButtonSize = _this$props3.nodeMenuButtonSize,
465
465
  alwaysShowArrow = _this$props3.alwaysShowArrow,
466
- startNodesOpened = _this$props3.startNodesOpened;
466
+ startNodesOpened = _this$props3.startNodesOpened,
467
+ idsInLoading = _this$props3.idsInLoading;
467
468
  var childrenIds = [];
468
469
 
469
470
  if (node.itens && node.itens.length > 0) {
@@ -481,6 +482,7 @@ var TreeView = /*#__PURE__*/function (_Component) {
481
482
  return /*#__PURE__*/_react["default"].createElement(_Node["default"], {
482
483
  key: "node-".concat(node.id),
483
484
  node: node,
485
+ idsInLoading: idsInLoading,
484
486
  startNodesOpened: startNodesOpened,
485
487
  alwaysShowArrow: alwaysShowArrow,
486
488
  childrenIds: childrenIds,
@@ -596,7 +598,8 @@ TreeView.propTypes = {
596
598
  onNodeClick: _propTypes["default"].func,
597
599
  onNodeOpen: _propTypes["default"].func,
598
600
  nodeElementsValidations: _propTypes["default"].object,
599
- enableDynamicData: _propTypes["default"].bool
601
+ enableDynamicData: _propTypes["default"].bool,
602
+ idsInLoading: _propTypes["default"].arrayOf(_propTypes["default"].number)
600
603
  };
601
604
  TreeView.defaultProps = {
602
605
  customClass: '',
@@ -618,7 +621,8 @@ TreeView.defaultProps = {
618
621
  onNodeClick: undefined,
619
622
  onNodeOpen: undefined,
620
623
  nodeElementsValidations: undefined,
621
- enableDynamicData: false
624
+ enableDynamicData: false,
625
+ idsInLoading: []
622
626
  };
623
627
  var _default = TreeView;
624
628
  exports["default"] = _default;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "linear-react-components-ui",
3
- "version": "0.4.76-beta.14",
3
+ "version": "0.4.76-beta.16",
4
4
  "description": "Linear Sistemas ReactJs Components",
5
5
  "main": "lib/index.js",
6
6
  "scripts": {