linear-react-components-ui 0.4.76-beta.20 → 0.4.76-beta.21
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/panel.scss +1 -4
- package/lib/assets/styles/table.scss +0 -12
- package/lib/assets/styles/tabs.scss +44 -49
- package/lib/icons/helper.js +4 -0
- package/lib/inputs/select/Dropdown.js +2 -5
- package/lib/inputs/select/multiple/index.js +1 -1
- package/lib/internals/withTooltip.js +2 -2
- package/lib/table/Body.js +4 -39
- package/lib/table/Header.js +1 -12
- package/lib/table/HeaderColumn.js +2 -4
- package/lib/table/Row.js +7 -14
- package/lib/table/RowColumn.js +3 -4
- package/lib/table/helpers.js +1 -11
- package/lib/table/index.js +12 -25
- package/lib/tabs/Menu.js +11 -1
- package/lib/tabs/index.js +1 -1
- package/lib/treeview/index.js +16 -26
- package/package.json +1 -1
|
@@ -6,8 +6,6 @@
|
|
|
6
6
|
height: 100%;
|
|
7
7
|
margin-bottom: 20px;
|
|
8
8
|
border: solid 1px $component-border-color;
|
|
9
|
-
display: flex;
|
|
10
|
-
flex-direction: column;
|
|
11
9
|
&.panel-shadow {
|
|
12
10
|
box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
|
|
13
11
|
}
|
|
@@ -49,8 +47,7 @@
|
|
|
49
47
|
}
|
|
50
48
|
}
|
|
51
49
|
> .panel-content {
|
|
52
|
-
|
|
53
|
-
overflow: auto;
|
|
50
|
+
height: auto;
|
|
54
51
|
padding: 15px;
|
|
55
52
|
}
|
|
56
53
|
}
|
|
@@ -19,18 +19,6 @@
|
|
|
19
19
|
> .bodycontainer {
|
|
20
20
|
overflow-y: auto;
|
|
21
21
|
}
|
|
22
|
-
> .bodycontainer > .innertable > .tbody,
|
|
23
|
-
> .tbody {
|
|
24
|
-
position: relative;
|
|
25
|
-
> .skeleton-transparency {
|
|
26
|
-
position: absolute;
|
|
27
|
-
width: 100%;
|
|
28
|
-
height: 100%;
|
|
29
|
-
background: rgb(255,255,255);
|
|
30
|
-
background: linear-gradient( 180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 30%,
|
|
31
|
-
rgba(255,255,255,0.6) 70%,rgba(255,255,255,0.8) 100%);
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
22
|
> .headercontainer > .innertable > .theader > .trow,
|
|
35
23
|
> .bodycontainer > .innertable > .tbody > .trow,
|
|
36
24
|
> .theader > .trow,
|
|
@@ -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
|
-
> .
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
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
|
-
.
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
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
|
-
.
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
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/icons/helper.js
CHANGED
|
@@ -554,6 +554,10 @@ function getIcons() {
|
|
|
554
554
|
flipVertical4: {
|
|
555
555
|
viewbox: '0 0 16 16',
|
|
556
556
|
paths: ['M0.854 5.146c-0.143-0.143-0.358-0.186-0.545-0.108s-0.309 0.26-0.309 0.462v10c0 0.202 0.122 0.385 0.309 0.462 0.062 0.026 0.127 0.038 0.191 0.038 0.13 0 0.258-0.051 0.354-0.146l5-5c0.195-0.195 0.195-0.512 0-0.707l-5-5z', 'M7.5 7c-0.276 0-0.5-0.224-0.5-0.5v-1c0-0.276 0.224-0.5 0.5-0.5s0.5 0.224 0.5 0.5v1c0 0.276-0.224 0.5-0.5 0.5z', 'M7.5 10c-0.276 0-0.5-0.224-0.5-0.5v-1c0-0.276 0.224-0.5 0.5-0.5s0.5 0.224 0.5 0.5v1c0 0.276-0.224 0.5-0.5 0.5z', 'M7.5 13c-0.276 0-0.5-0.224-0.5-0.5v-1c0-0.276 0.224-0.5 0.5-0.5s0.5 0.224 0.5 0.5v1c0 0.276-0.224 0.5-0.5 0.5z', 'M7.5 16c-0.276 0-0.5-0.224-0.5-0.5v-1c0-0.276 0.224-0.5 0.5-0.5s0.5 0.224 0.5 0.5v1c0 0.276-0.224 0.5-0.5 0.5z', 'M14.691 5.038c-0.062-0.026-0.127-0.038-0.191-0.038-0.13 0-0.258 0.051-0.354 0.146l-5 5c-0.195 0.195-0.195 0.512 0 0.707l5 5c0.143 0.143 0.358 0.186 0.545 0.108s0.309-0.26 0.309-0.462v-10c0-0.202-0.122-0.385-0.309-0.462zM13.875 13.991l-3.491-3.491 3.491-3.491v6.982z', 'M11.5 3c-0.943-1.257-2.419-2-4-2-1.672 0-3.226 0.831-4.158 2.222-0.154 0.229-0.092 0.54 0.137 0.694s0.54 0.092 0.694-0.137c0.745-1.113 1.989-1.778 3.327-1.778 1.313 0 2.534 0.64 3.284 1.716l-1.284 1.284h3.5v-3.5l-1.5 1.5z']
|
|
557
|
+
},
|
|
558
|
+
checkmarkCircle: {
|
|
559
|
+
viewbox: '0 0 16 16',
|
|
560
|
+
paths: ['M8 0c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8zM6.5 12.031l-2.813-3.344 1.031-1.031 1.781 1.75 5.156-4.5 0.719 0.719-5.875 6.406z']
|
|
557
561
|
}
|
|
558
562
|
};
|
|
559
563
|
return icons;
|
|
@@ -85,8 +85,7 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
85
85
|
imgSrcKey = _ref.imgSrcKey,
|
|
86
86
|
gridWrapperStyle = _ref.gridWrapperStyle,
|
|
87
87
|
selectFieldRef = _ref.selectFieldRef,
|
|
88
|
-
dropdownMaxHeight = _ref.dropdownMaxHeight
|
|
89
|
-
inputValue = _ref.inputValue;
|
|
88
|
+
dropdownMaxHeight = _ref.dropdownMaxHeight;
|
|
90
89
|
|
|
91
90
|
var _useState = (0, _react.useState)(returnDropdownDynamicStyles(selectFieldRef, dropdownMaxHeight)),
|
|
92
91
|
_useState2 = _slicedToArray(_useState, 1),
|
|
@@ -103,7 +102,6 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
103
102
|
}, /*#__PURE__*/_react["default"].createElement("input", {
|
|
104
103
|
className: "filterinput",
|
|
105
104
|
type: "text",
|
|
106
|
-
value: inputValue,
|
|
107
105
|
onFocus: function onFocus() {
|
|
108
106
|
handleOnFocus();
|
|
109
107
|
},
|
|
@@ -176,8 +174,7 @@ Dropdown.propTypes = {
|
|
|
176
174
|
striped: _propTypes["default"].bool,
|
|
177
175
|
gridWrapperStyle: _propTypes["default"].object,
|
|
178
176
|
selectFieldRef: _propTypes["default"].object,
|
|
179
|
-
dropdownMaxHeight: _propTypes["default"].number
|
|
180
|
-
inputValue: _propTypes["default"].string.isRequired
|
|
177
|
+
dropdownMaxHeight: _propTypes["default"].number
|
|
181
178
|
};
|
|
182
179
|
Dropdown.defaultProps = {
|
|
183
180
|
selected: null,
|
|
@@ -397,7 +397,7 @@ Object.defineProperty(MultipleSelect, "getDerivedStateFromProps", {
|
|
|
397
397
|
var dataCombo = remoteSearch ? dataSource : (0, _helper.getFilteredMultipleDataCombo)(_extends({}, props, state));
|
|
398
398
|
return {
|
|
399
399
|
dataCombo: dataCombo,
|
|
400
|
-
selected:
|
|
400
|
+
selected: dataSource.length > 0 && remoteSearch ? dataSource[0] : null
|
|
401
401
|
};
|
|
402
402
|
}
|
|
403
403
|
|
|
@@ -112,12 +112,12 @@ var withTooltip = function withTooltip(WrappedComponent) {
|
|
|
112
112
|
};
|
|
113
113
|
}, []);
|
|
114
114
|
(0, _react.useEffect)(function () {
|
|
115
|
-
if (targetElement.current
|
|
115
|
+
if (targetElement.current) {
|
|
116
116
|
var width = tooltipDimensions.width,
|
|
117
117
|
height = tooltipDimensions.height;
|
|
118
118
|
var targetDimensions = targetElement.current.getBoundingClientRect();
|
|
119
119
|
var targetVerticalCenter = (targetDimensions.top + targetDimensions.bottom) / 2;
|
|
120
|
-
var tooltipClientWidth = tooltipElement.current.clientWidth;
|
|
120
|
+
var tooltipClientWidth = tooltipElement.current && tooltipElement.current.clientWidth;
|
|
121
121
|
var style = "width: ".concat(typeof width === 'string' ? width : "".concat(width, "px"));
|
|
122
122
|
var left = targetDimensions.left + targetDimensions.width / 2 - tooltipClientWidth / 2;
|
|
123
123
|
left = Math.min(left, document.body.clientWidth - tooltipClientWidth - space);
|
package/lib/table/Body.js
CHANGED
|
@@ -11,11 +11,7 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
11
11
|
|
|
12
12
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
13
13
|
|
|
14
|
-
var _helpers =
|
|
15
|
-
|
|
16
|
-
var _skeleton = _interopRequireDefault(require("../skeleton"));
|
|
17
|
-
|
|
18
|
-
var _index = require("./index");
|
|
14
|
+
var _helpers = _interopRequireDefault(require("./helpers"));
|
|
19
15
|
|
|
20
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
21
17
|
|
|
@@ -23,44 +19,13 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
|
23
19
|
|
|
24
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; }
|
|
25
21
|
|
|
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 () {
|
|
31
|
-
return /*#__PURE__*/_react["default"].createElement(_index.TRow, null, columns.map(function () {
|
|
32
|
-
return /*#__PURE__*/_react["default"].createElement(_index.Td, null, /*#__PURE__*/_react["default"].createElement(_skeleton["default"], {
|
|
33
|
-
height: 16,
|
|
34
|
-
style: {
|
|
35
|
-
marginBottom: 0,
|
|
36
|
-
opacity: 1
|
|
37
|
-
}
|
|
38
|
-
}));
|
|
39
|
-
}));
|
|
40
|
-
});
|
|
41
|
-
return skeletonChildrens;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
return children;
|
|
45
|
-
};
|
|
46
|
-
|
|
47
|
-
var renderSkeletonTransparency = function renderSkeletonTransparency(skeletonize, skeletonInRows) {
|
|
48
|
-
var skeletonized = skeletonize && skeletonInRows;
|
|
49
|
-
return skeletonized && /*#__PURE__*/_react["default"].createElement("div", {
|
|
50
|
-
className: "skeleton-transparency"
|
|
51
|
-
});
|
|
52
|
-
};
|
|
53
|
-
|
|
54
22
|
var TableBody = function TableBody(_ref) {
|
|
55
23
|
var children = _ref.children,
|
|
56
24
|
customClass = _ref.customClass;
|
|
57
25
|
|
|
58
26
|
var _useContext = (0, _react.useContext)(_helpers["default"]),
|
|
59
27
|
bodyScrollable = _useContext.bodyScrollable,
|
|
60
|
-
bodyContainerRef = _useContext.bodyContainerRef
|
|
61
|
-
columnsCount = _useContext.columnsCount,
|
|
62
|
-
skeletonize = _useContext.skeletonize,
|
|
63
|
-
skeletonInRows = _useContext.skeletonInRows;
|
|
28
|
+
bodyContainerRef = _useContext.bodyContainerRef;
|
|
64
29
|
|
|
65
30
|
return bodyScrollable ? /*#__PURE__*/_react["default"].createElement("div", {
|
|
66
31
|
className: "bodycontainer",
|
|
@@ -72,9 +37,9 @@ var TableBody = function TableBody(_ref) {
|
|
|
72
37
|
}
|
|
73
38
|
}, /*#__PURE__*/_react["default"].createElement("tbody", {
|
|
74
39
|
className: "tbody ".concat(customClass)
|
|
75
|
-
},
|
|
40
|
+
}, children))) : /*#__PURE__*/_react["default"].createElement("tbody", {
|
|
76
41
|
className: "tbody ".concat(customClass)
|
|
77
|
-
},
|
|
42
|
+
}, children);
|
|
78
43
|
};
|
|
79
44
|
|
|
80
45
|
TableBody.propTypes = {
|
package/lib/table/Header.js
CHANGED
|
@@ -41,15 +41,6 @@ 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
|
-
|
|
53
44
|
var Header = function Header(_ref) {
|
|
54
45
|
var customClass = _ref.customClass,
|
|
55
46
|
children = _ref.children;
|
|
@@ -57,12 +48,10 @@ var Header = function Header(_ref) {
|
|
|
57
48
|
var _useContext = (0, _react.useContext)(_helpers["default"]),
|
|
58
49
|
bodyScrollWidth = _useContext.bodyScrollWidth,
|
|
59
50
|
bodyScrollable = _useContext.bodyScrollable,
|
|
60
|
-
handlerSetColumnsWidth = _useContext.handlerSetColumnsWidth
|
|
61
|
-
handlerSetColumnsCount = _useContext.handlerSetColumnsCount;
|
|
51
|
+
handlerSetColumnsWidth = _useContext.handlerSetColumnsWidth;
|
|
62
52
|
|
|
63
53
|
(0, _react.useEffect)(function () {
|
|
64
54
|
handlerSetColumnsWidth(getColumnsWidth(children));
|
|
65
|
-
handlerSetColumnsCount(getColumnsCount(children));
|
|
66
55
|
}, []);
|
|
67
56
|
return bodyScrollable ? /*#__PURE__*/_react["default"].createElement("div", {
|
|
68
57
|
className: "headercontainer",
|
|
@@ -30,15 +30,13 @@ 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
|
|
34
|
-
skeletonInHeader = _useContext.skeletonInHeader,
|
|
35
|
-
skeletonInRows = _useContext.skeletonInRows;
|
|
33
|
+
vertical = _useContext.vertical;
|
|
36
34
|
|
|
37
35
|
if (!visible) return null;
|
|
38
36
|
return /*#__PURE__*/_react["default"].createElement("th", {
|
|
39
37
|
className: "headercolumn ".concat(customClass, " text-align-").concat(textAlign),
|
|
40
38
|
style: style
|
|
41
|
-
}, skeletonize &&
|
|
39
|
+
}, skeletonize && !vertical ? /*#__PURE__*/_react["default"].createElement(_skeleton["default"], {
|
|
42
40
|
height: style.height ? null : 16,
|
|
43
41
|
style: {
|
|
44
42
|
marginBottom: 0
|
package/lib/table/Row.js
CHANGED
|
@@ -19,8 +19,6 @@ 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
|
-
|
|
24
22
|
var Row = function Row(props) {
|
|
25
23
|
var customClass = props.customClass,
|
|
26
24
|
children = props.children,
|
|
@@ -28,8 +26,7 @@ var Row = function Row(props) {
|
|
|
28
26
|
dataId = props.dataId,
|
|
29
27
|
_onClick = props.onClick,
|
|
30
28
|
height = props.height,
|
|
31
|
-
rowBorder = props.rowBorder
|
|
32
|
-
style = props.style;
|
|
29
|
+
rowBorder = props.rowBorder;
|
|
33
30
|
|
|
34
31
|
var _useContext = (0, _react.useContext)(_helpers["default"]),
|
|
35
32
|
selectedRowId = _useContext.selectedRowId,
|
|
@@ -37,16 +34,14 @@ var Row = function Row(props) {
|
|
|
37
34
|
handleTableRowClick = _useContext.handleTableRowClick,
|
|
38
35
|
handleTableColClick = _useContext.handleTableColClick,
|
|
39
36
|
vertical = _useContext.vertical,
|
|
40
|
-
skeletonize = _useContext.skeletonize
|
|
41
|
-
skeletonInRows = _useContext.skeletonInRows;
|
|
37
|
+
skeletonize = _useContext.skeletonize;
|
|
42
38
|
|
|
43
39
|
var contextValues = {
|
|
44
40
|
dataId: dataId,
|
|
45
41
|
rowBorder: rowBorder,
|
|
46
42
|
handleTableColClick: handleTableColClick,
|
|
47
43
|
vertical: vertical,
|
|
48
|
-
skeletonize: skeletonize
|
|
49
|
-
skeletonInRows: skeletonInRows
|
|
44
|
+
skeletonize: skeletonize
|
|
50
45
|
};
|
|
51
46
|
return /*#__PURE__*/_react["default"].createElement(_helpers.RowContext.Provider, {
|
|
52
47
|
value: contextValues
|
|
@@ -58,9 +53,9 @@ var Row = function Row(props) {
|
|
|
58
53
|
if (_onClick) _onClick(e, dataId);
|
|
59
54
|
},
|
|
60
55
|
id: rowId,
|
|
61
|
-
style:
|
|
56
|
+
style: {
|
|
62
57
|
height: height
|
|
63
|
-
}
|
|
58
|
+
}
|
|
64
59
|
}, children));
|
|
65
60
|
};
|
|
66
61
|
|
|
@@ -71,8 +66,7 @@ Row.propTypes = {
|
|
|
71
66
|
dataId: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
|
|
72
67
|
onClick: _propTypes["default"].func,
|
|
73
68
|
rowBorder: _propTypes["default"].bool,
|
|
74
|
-
height: _propTypes["default"].string
|
|
75
|
-
style: _propTypes["default"].object
|
|
69
|
+
height: _propTypes["default"].string
|
|
76
70
|
};
|
|
77
71
|
Row.defaultProps = {
|
|
78
72
|
customClass: '',
|
|
@@ -80,8 +74,7 @@ Row.defaultProps = {
|
|
|
80
74
|
onClick: undefined,
|
|
81
75
|
rowId: undefined,
|
|
82
76
|
rowBorder: true,
|
|
83
|
-
height: undefined
|
|
84
|
-
style: null
|
|
77
|
+
height: undefined
|
|
85
78
|
};
|
|
86
79
|
var _default = Row;
|
|
87
80
|
exports["default"] = _default;
|
package/lib/table/RowColumn.js
CHANGED
|
@@ -52,12 +52,11 @@ 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
|
|
56
|
-
skeletonInRows = context.skeletonInRows;
|
|
55
|
+
vertical = context.vertical;
|
|
57
56
|
var hiddenContent = displayContent !== 'always';
|
|
58
57
|
|
|
59
58
|
var renderContent = function renderContent() {
|
|
60
|
-
if (skeletonize
|
|
59
|
+
if (skeletonize) {
|
|
61
60
|
return /*#__PURE__*/_react["default"].createElement(_skeleton["default"], {
|
|
62
61
|
height: 16,
|
|
63
62
|
style: {
|
|
@@ -72,7 +71,7 @@ var RowColumn = function RowColumn(props) {
|
|
|
72
71
|
};
|
|
73
72
|
|
|
74
73
|
if (!visible) return null;
|
|
75
|
-
if (skeletonize && !
|
|
74
|
+
if (skeletonize && !vertical) return null;
|
|
76
75
|
return /*#__PURE__*/_react["default"].createElement("td", {
|
|
77
76
|
className: "rowcolumn ".concat(customClass, " text-align-").concat(textAlign, " ").concat(!context.rowBorder && ' -noborder'),
|
|
78
77
|
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
|
|
6
|
+
exports["default"] = exports.RowContext = void 0;
|
|
7
7
|
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
9
|
|
|
@@ -14,15 +14,5 @@ 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;
|
|
27
17
|
var _default = TableContext;
|
|
28
18
|
exports["default"] = _default;
|
package/lib/table/index.js
CHANGED
|
@@ -63,8 +63,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
|
63
63
|
|
|
64
64
|
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; }
|
|
65
65
|
|
|
66
|
-
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); }
|
|
67
|
-
|
|
68
66
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
69
67
|
|
|
70
68
|
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."); }
|
|
@@ -87,16 +85,17 @@ var getClass = function getClass(_ref) {
|
|
|
87
85
|
headerColored = _ref.headerColored,
|
|
88
86
|
condensed = _ref.condensed,
|
|
89
87
|
vertical = _ref.vertical,
|
|
90
|
-
bodyScrollable = _ref.bodyScrollable
|
|
91
|
-
|
|
92
|
-
return "table-component ".concat(customClass, " ").concat(striped && '-striped', " \n ").concat(bordered && '-bordered', " ").concat(hovered && '-hovered', " ").concat(headerColored && '-headercolor', "\n ").concat(condensed && '-condensed', "\n ").concat(vertical && '-vertical', "\n ").concat(skeletonize && !skeletonInRows ? '-skeletonized' : '', "\n ").concat(bodyScrollable ? '-scrollable' : '');
|
|
88
|
+
bodyScrollable = _ref.bodyScrollable;
|
|
89
|
+
return "table-component ".concat(customClass, " ").concat(striped && '-striped', " \n ").concat(bordered && '-bordered', " ").concat(hovered && '-hovered', " ").concat(headerColored && '-headercolor', "\n ").concat(condensed && '-condensed', "\n ").concat(vertical && '-vertical', "\n ").concat(skeletonize ? '-skeletonized' : '', "\n ").concat(bodyScrollable ? '-scrollable' : '');
|
|
93
90
|
};
|
|
94
91
|
|
|
95
92
|
var Table = function Table(props) {
|
|
96
93
|
var onColClick = props.onColClick,
|
|
97
94
|
onRowClick = props.onRowClick,
|
|
98
95
|
bodyScrollable = props.bodyScrollable,
|
|
99
|
-
children = props.children
|
|
96
|
+
children = props.children,
|
|
97
|
+
vertical = props.vertical,
|
|
98
|
+
skeletonize = props.skeletonize;
|
|
100
99
|
|
|
101
100
|
var _useState = (0, _react.useState)(props.selectedRowId),
|
|
102
101
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -113,11 +112,6 @@ var Table = function Table(props) {
|
|
|
113
112
|
columnsWidth = _useState6[0],
|
|
114
113
|
setColumnsWidth = _useState6[1];
|
|
115
114
|
|
|
116
|
-
var _useState7 = (0, _react.useState)(undefined),
|
|
117
|
-
_useState8 = _slicedToArray(_useState7, 2),
|
|
118
|
-
columnsCount = _useState8[0],
|
|
119
|
-
setColumnsCount = _useState8[1];
|
|
120
|
-
|
|
121
115
|
var bodyContainerRef = (0, _react.useRef)(undefined);
|
|
122
116
|
(0, _react.useEffect)(function () {
|
|
123
117
|
if (bodyScrollable && bodyContainerRef && bodyContainerRef.current) {
|
|
@@ -131,12 +125,13 @@ var Table = function Table(props) {
|
|
|
131
125
|
(0, _react.useEffect)(function () {
|
|
132
126
|
setSelectedRowId(props.selectedRowId);
|
|
133
127
|
}, [props.selectedRowId]);
|
|
134
|
-
|
|
135
|
-
var contextValues = _extends({}, props, {
|
|
128
|
+
var contextValues = {
|
|
136
129
|
bodyContainerRef: bodyContainerRef,
|
|
130
|
+
bodyScrollable: bodyScrollable,
|
|
137
131
|
bodyScrollWidth: bodyScrollWidth,
|
|
138
132
|
selectedRowId: selectedRowId,
|
|
139
|
-
|
|
133
|
+
vertical: vertical,
|
|
134
|
+
skeletonize: skeletonize,
|
|
140
135
|
handleSelectRow: function handleSelectRow(selectedId) {
|
|
141
136
|
setSelectedRowId(selectedId);
|
|
142
137
|
},
|
|
@@ -144,12 +139,8 @@ var Table = function Table(props) {
|
|
|
144
139
|
handleTableRowClick: onRowClick,
|
|
145
140
|
handlerSetColumnsWidth: function handlerSetColumnsWidth(widths) {
|
|
146
141
|
if (!_lodash["default"].isEmpty(widths) && _lodash["default"].isEmpty(columnsWidth)) setColumnsWidth(widths);
|
|
147
|
-
},
|
|
148
|
-
handlerSetColumnsCount: function handlerSetColumnsCount(count) {
|
|
149
|
-
return setColumnsCount(count);
|
|
150
142
|
}
|
|
151
|
-
}
|
|
152
|
-
|
|
143
|
+
};
|
|
153
144
|
return /*#__PURE__*/_react["default"].createElement(_helpers["default"].Provider, {
|
|
154
145
|
value: contextValues
|
|
155
146
|
}, bodyScrollable ? /*#__PURE__*/_react["default"].createElement("div", {
|
|
@@ -172,9 +163,7 @@ Table.propTypes = {
|
|
|
172
163
|
vertical: _propTypes["default"].bool,
|
|
173
164
|
selectedRowId: _propTypes["default"].string,
|
|
174
165
|
bodyScrollable: _propTypes["default"].bool,
|
|
175
|
-
skeletonize: _propTypes["default"].bool
|
|
176
|
-
skeletonInRows: _propTypes["default"].number,
|
|
177
|
-
skeletonInHeader: _propTypes["default"].bool
|
|
166
|
+
skeletonize: _propTypes["default"].bool
|
|
178
167
|
};
|
|
179
168
|
Table.defaultProps = {
|
|
180
169
|
striped: false,
|
|
@@ -188,9 +177,7 @@ Table.defaultProps = {
|
|
|
188
177
|
vertical: false,
|
|
189
178
|
selectedRowId: null,
|
|
190
179
|
bodyScrollable: false,
|
|
191
|
-
skeletonize: false
|
|
192
|
-
skeletonInRows: undefined,
|
|
193
|
-
skeletonInHeader: true
|
|
180
|
+
skeletonize: false
|
|
194
181
|
};
|
|
195
182
|
var _default = Table;
|
|
196
183
|
exports["default"] = _default;
|
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),
|
|
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
|
|
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/index.js
CHANGED
|
@@ -100,26 +100,20 @@ var TreeView = /*#__PURE__*/function (_Component) {
|
|
|
100
100
|
enumerable: true,
|
|
101
101
|
writable: true,
|
|
102
102
|
value: function value(selectedIds) {
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
var
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
newSelectedIds = [].concat(_toConsumableArray(newSelectedIds), _toConsumableArray(updatedIdsWithAncestryIds));
|
|
115
|
-
requiredIds = [].concat(_toConsumableArray(requiredIds), _toConsumableArray(requiredParentsIds));
|
|
116
|
-
});
|
|
103
|
+
var requiredIds = [];
|
|
104
|
+
var newSelectedIds = [];
|
|
105
|
+
selectedIds.forEach(function (id) {
|
|
106
|
+
var _this$checkAllAncestr = _this.checkAllAncestry(id, [], true, false),
|
|
107
|
+
requiredParentsIds = _this$checkAllAncestr.requiredParentsIds,
|
|
108
|
+
updatedIdsWithAncestryIds = _this$checkAllAncestr.updatedIdsWithAncestryIds;
|
|
109
|
+
|
|
110
|
+
newSelectedIds = [].concat(_toConsumableArray(newSelectedIds), _toConsumableArray(updatedIdsWithAncestryIds));
|
|
111
|
+
requiredIds = [].concat(_toConsumableArray(requiredIds), _toConsumableArray(requiredParentsIds));
|
|
112
|
+
});
|
|
117
113
|
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
selectedIdsUpdatedOnMount: selectedIdsUpdatedOnMount || true
|
|
122
|
-
});
|
|
114
|
+
_this.setState({
|
|
115
|
+
requiredParentsIds: _lodash["default"].uniq(requiredIds),
|
|
116
|
+
selectedIds: _lodash["default"].uniq(newSelectedIds)
|
|
123
117
|
});
|
|
124
118
|
}
|
|
125
119
|
});
|
|
@@ -510,8 +504,7 @@ var TreeView = /*#__PURE__*/function (_Component) {
|
|
|
510
504
|
selectedIds: _this.props.selectedIds,
|
|
511
505
|
isHandlingSelectedIds: false,
|
|
512
506
|
requiredParentsIds: [],
|
|
513
|
-
alreadyOpenedIds: []
|
|
514
|
-
selectedIdsUpdatedOnMount: false
|
|
507
|
+
alreadyOpenedIds: []
|
|
515
508
|
};
|
|
516
509
|
return _this;
|
|
517
510
|
}
|
|
@@ -526,15 +519,12 @@ var TreeView = /*#__PURE__*/function (_Component) {
|
|
|
526
519
|
value: function componentDidUpdate(prevProps, prevState) {
|
|
527
520
|
var _this$state3 = this.state,
|
|
528
521
|
selectedIds = _this$state3.selectedIds,
|
|
529
|
-
propSelectedIds = _this$state3.propSelectedIds
|
|
530
|
-
selectedIdsUpdatedOnMount = _this$state3.selectedIdsUpdatedOnMount;
|
|
522
|
+
propSelectedIds = _this$state3.propSelectedIds;
|
|
531
523
|
var allowCheckAllAncestry = this.props.allowCheckAllAncestry;
|
|
532
524
|
|
|
533
525
|
var isSameSelectedIds = _lodash["default"].isEqual(propSelectedIds.sort(), prevState.propSelectedIds.sort());
|
|
534
526
|
|
|
535
|
-
if (allowCheckAllAncestry &&
|
|
536
|
-
this.handleNewSelectedIds(selectedIds);
|
|
537
|
-
}
|
|
527
|
+
if (allowCheckAllAncestry && !isSameSelectedIds) this.handleNewSelectedIds(selectedIds);
|
|
538
528
|
}
|
|
539
529
|
}, {
|
|
540
530
|
key: "render",
|