linear-react-components-ui 0.4.73 → 0.4.75-beta.10
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/sidenav.scss +4 -3
- package/lib/assets/styles/treeview.scss +32 -0
- package/lib/buttons/DefaultButton.js +7 -1
- package/lib/checkbox/Label.js +37 -0
- package/lib/checkbox/index.js +20 -6
- package/lib/menus/sidenav/NavMenuItem.js +19 -5
- package/lib/permissionValidations.js +1 -1
- package/lib/treeview/Node.js +282 -16
- package/lib/treeview/index.js +444 -35
- package/package.json +1 -1
|
@@ -190,7 +190,7 @@ que utilizam. Em caso de mudança, ficar atento para os refatores.
|
|
|
190
190
|
animation: 0.5s ease-in 0s 1 slideLeft;
|
|
191
191
|
background-color: #eee ;
|
|
192
192
|
height: auto;
|
|
193
|
-
width:
|
|
193
|
+
width: auto;
|
|
194
194
|
float: right;
|
|
195
195
|
padding: 10px 20px 20px;
|
|
196
196
|
position: absolute;
|
|
@@ -211,10 +211,11 @@ que utilizam. Em caso de mudança, ficar atento para os refatores.
|
|
|
211
211
|
display: grid;
|
|
212
212
|
grid-template-columns: repeat(2, 1fr);
|
|
213
213
|
align-content: center;
|
|
214
|
-
align-items:
|
|
214
|
+
align-items: flex-start;
|
|
215
215
|
> .item {
|
|
216
216
|
display: grid;
|
|
217
|
-
height: 40px;
|
|
217
|
+
min-height: 40px;
|
|
218
|
+
/* height: 40px; */
|
|
218
219
|
align-content: center;
|
|
219
220
|
display: grid;
|
|
220
221
|
margin-left: 20px;
|
|
@@ -42,6 +42,25 @@
|
|
|
42
42
|
animation: revealelement 0.3s forwards ease-in-out;
|
|
43
43
|
> .label {
|
|
44
44
|
width: auto;
|
|
45
|
+
display: flex;
|
|
46
|
+
justify-content: flex-start;
|
|
47
|
+
align-items: center;
|
|
48
|
+
>.node-menu {
|
|
49
|
+
animation: revealelement 0.3s forwards ease-in-out;
|
|
50
|
+
margin-left: 10px;
|
|
51
|
+
}
|
|
52
|
+
>.node-rightelements {
|
|
53
|
+
animation: revealelement 0.3s forwards ease-in-out;
|
|
54
|
+
display: flex;
|
|
55
|
+
justify-content: flex-start;
|
|
56
|
+
align-items: center;
|
|
57
|
+
}
|
|
58
|
+
>.node-toolbarelements {
|
|
59
|
+
animation: revealelement 0.3s forwards ease-in-out;
|
|
60
|
+
width: auto;
|
|
61
|
+
height: 100%;
|
|
62
|
+
margin-left: 10px;
|
|
63
|
+
}
|
|
45
64
|
&:hover {
|
|
46
65
|
background-color: rgb(209, 209, 209);
|
|
47
66
|
}
|
|
@@ -53,3 +72,16 @@
|
|
|
53
72
|
float: left;
|
|
54
73
|
}
|
|
55
74
|
}
|
|
75
|
+
|
|
76
|
+
.nodelist > .treeviewitem > .label > .node-rightelements > .element,
|
|
77
|
+
.treeview-component > .treeviewcontainer > .treeviewitem > .label > .node-rightelements > .element {
|
|
78
|
+
margin-left: 10px;
|
|
79
|
+
display: flex;
|
|
80
|
+
align-items: center;
|
|
81
|
+
height: 100%;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.nodelist > .treeviewitem > .label > .node-toolbarelements > .toolbar-group > .buttonbar,
|
|
85
|
+
.treeview-component > .treeviewcontainer > .treeviewitem > .label > .node-toolbarelements > .toolbar-group > .buttonbar {
|
|
86
|
+
border: none;
|
|
87
|
+
}
|
|
@@ -69,7 +69,8 @@ var DefaultButton = function DefaultButton(props) {
|
|
|
69
69
|
boxShadow = props.boxShadow,
|
|
70
70
|
transparent = props.transparent,
|
|
71
71
|
round = props.round,
|
|
72
|
-
permissionAttr = props.permissionAttr
|
|
72
|
+
permissionAttr = props.permissionAttr,
|
|
73
|
+
_onBlur = props.onBlur;
|
|
73
74
|
|
|
74
75
|
var _useState = (0, _react.useState)(false),
|
|
75
76
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -147,6 +148,9 @@ var DefaultButton = function DefaultButton(props) {
|
|
|
147
148
|
if (dropdown) showDropdown();
|
|
148
149
|
if (_onClick && toggleable) setActiveButton(!activeButton);
|
|
149
150
|
},
|
|
151
|
+
onBlur: function onBlur(e) {
|
|
152
|
+
if (_onBlur) _onBlur(e);
|
|
153
|
+
},
|
|
150
154
|
disabled: shouldDisable(),
|
|
151
155
|
className: "".concat(getClass(), " ").concat(activeButton ? '-toggleable' : ''),
|
|
152
156
|
ref: function ref(r) {
|
|
@@ -176,6 +180,7 @@ DefaultButton.propTypes = {
|
|
|
176
180
|
boxShadow: _propTypes["default"].bool,
|
|
177
181
|
icon: _propTypes["default"].instanceOf(Object),
|
|
178
182
|
onClick: _propTypes["default"].func,
|
|
183
|
+
onBlur: _propTypes["default"].func,
|
|
179
184
|
targetRef: _propTypes["default"].func,
|
|
180
185
|
tabIndex: _propTypes["default"].string,
|
|
181
186
|
dropdown: _propTypes["default"].bool,
|
|
@@ -211,6 +216,7 @@ DefaultButton.defaultProps = {
|
|
|
211
216
|
icon: null,
|
|
212
217
|
content: null,
|
|
213
218
|
onClick: null,
|
|
219
|
+
onBlur: null,
|
|
214
220
|
targetRef: undefined,
|
|
215
221
|
tabIndex: undefined,
|
|
216
222
|
isLoading: false,
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports["default"] = void 0;
|
|
7
|
+
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
|
|
10
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
+
|
|
12
|
+
var _withTooltip = _interopRequireDefault(require("../internals/withTooltip"));
|
|
13
|
+
|
|
14
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
15
|
+
|
|
16
|
+
var Label = function Label(_ref) {
|
|
17
|
+
var label = _ref.label,
|
|
18
|
+
targetRef = _ref.targetRef;
|
|
19
|
+
return /*#__PURE__*/_react["default"].createElement("span", {
|
|
20
|
+
className: "checkbox-description",
|
|
21
|
+
ref: function ref(r) {
|
|
22
|
+
return targetRef && targetRef(r);
|
|
23
|
+
}
|
|
24
|
+
}, label);
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
Label.propTypes = {
|
|
28
|
+
label: _propTypes["default"].string.isRequired,
|
|
29
|
+
targetRef: _propTypes["default"].func
|
|
30
|
+
};
|
|
31
|
+
Label.defaultProps = {
|
|
32
|
+
targetRef: undefined
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
var _default = (0, _withTooltip["default"])(Label);
|
|
36
|
+
|
|
37
|
+
exports["default"] = _default;
|
package/lib/checkbox/index.js
CHANGED
|
@@ -13,6 +13,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
|
13
13
|
|
|
14
14
|
var _gridlayout = _interopRequireDefault(require("../gridlayout"));
|
|
15
15
|
|
|
16
|
+
var _Label = _interopRequireDefault(require("./Label"));
|
|
17
|
+
|
|
16
18
|
require("../assets/styles/checkbox.scss");
|
|
17
19
|
|
|
18
20
|
var _permissionValidations = require("../permissionValidations");
|
|
@@ -52,7 +54,10 @@ var CheckBox = function CheckBox(props) {
|
|
|
52
54
|
id = props.id,
|
|
53
55
|
gridLayout = props.gridLayout,
|
|
54
56
|
checked = props.checked,
|
|
55
|
-
permissionAttr = props.permissionAttr
|
|
57
|
+
permissionAttr = props.permissionAttr,
|
|
58
|
+
tooltip = props.tooltip,
|
|
59
|
+
tooltipPosition = props.tooltipPosition,
|
|
60
|
+
tooltipWidth = props.tooltipWidth;
|
|
56
61
|
|
|
57
62
|
var _useState = (0, _react.useState)(checked),
|
|
58
63
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -121,9 +126,12 @@ var CheckBox = function CheckBox(props) {
|
|
|
121
126
|
value: value,
|
|
122
127
|
id: id,
|
|
123
128
|
onChange: function onChange() {}
|
|
124
|
-
}), /*#__PURE__*/_react["default"].createElement("span", null), label && /*#__PURE__*/_react["default"].createElement("
|
|
125
|
-
|
|
126
|
-
|
|
129
|
+
}), /*#__PURE__*/_react["default"].createElement("span", null), label && /*#__PURE__*/_react["default"].createElement(_Label["default"], {
|
|
130
|
+
label: label,
|
|
131
|
+
tooltip: tooltip,
|
|
132
|
+
tooltipWidth: tooltipWidth,
|
|
133
|
+
tooltipPosition: tooltipPosition
|
|
134
|
+
})), hint && /*#__PURE__*/_react["default"].createElement("div", {
|
|
127
135
|
className: "checkbox-hint"
|
|
128
136
|
}, hint));
|
|
129
137
|
};
|
|
@@ -148,7 +156,10 @@ CheckBox.propTypes = {
|
|
|
148
156
|
autofocus: _propTypes["default"].bool,
|
|
149
157
|
hint: _propTypes["default"].string,
|
|
150
158
|
gridLayout: _propTypes["default"].string,
|
|
151
|
-
permissionAttr: _propTypes["default"].oneOfType([_propTypes["default"].object, _propTypes["default"].arrayOf(_propTypes["default"].object)])
|
|
159
|
+
permissionAttr: _propTypes["default"].oneOfType([_propTypes["default"].object, _propTypes["default"].arrayOf(_propTypes["default"].object)]),
|
|
160
|
+
tooltip: _propTypes["default"].string,
|
|
161
|
+
tooltipPosition: _propTypes["default"].string,
|
|
162
|
+
tooltipWidth: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])
|
|
152
163
|
};
|
|
153
164
|
CheckBox.defaultProps = {
|
|
154
165
|
label: '',
|
|
@@ -163,7 +174,10 @@ CheckBox.defaultProps = {
|
|
|
163
174
|
hint: undefined,
|
|
164
175
|
id: undefined,
|
|
165
176
|
gridLayout: undefined,
|
|
166
|
-
permissionAttr: undefined
|
|
177
|
+
permissionAttr: undefined,
|
|
178
|
+
tooltip: '',
|
|
179
|
+
tooltipPosition: 'top',
|
|
180
|
+
tooltipWidth: 'auto'
|
|
167
181
|
};
|
|
168
182
|
var _default = CheckBox;
|
|
169
183
|
exports["default"] = _default;
|
|
@@ -46,7 +46,10 @@ var NavMenuItem = function NavMenuItem(props) {
|
|
|
46
46
|
childrenIsSubMenu = props.childrenIsSubMenu,
|
|
47
47
|
url = props.url,
|
|
48
48
|
customClass = props.customClass,
|
|
49
|
-
permissionAttr = props.permissionAttr
|
|
49
|
+
permissionAttr = props.permissionAttr,
|
|
50
|
+
maxWidth = props.maxWidth,
|
|
51
|
+
minWidth = props.minWidth,
|
|
52
|
+
columnsQtty = props.columnsQtty;
|
|
50
53
|
|
|
51
54
|
var _useState = (0, _react.useState)(false),
|
|
52
55
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -109,12 +112,17 @@ var NavMenuItem = function NavMenuItem(props) {
|
|
|
109
112
|
className: "submenu-container",
|
|
110
113
|
style: {
|
|
111
114
|
marginLeft: targetDimensions.width,
|
|
112
|
-
top: targetDimensions.top
|
|
115
|
+
top: targetDimensions.top,
|
|
116
|
+
minWidth: minWidth,
|
|
117
|
+
maxWidth: maxWidth
|
|
113
118
|
}
|
|
114
119
|
}, /*#__PURE__*/_react["default"].createElement("h1", {
|
|
115
120
|
className: "title"
|
|
116
121
|
}, title), /*#__PURE__*/_react["default"].createElement("div", {
|
|
117
|
-
className: "submenu"
|
|
122
|
+
className: "submenu",
|
|
123
|
+
style: {
|
|
124
|
+
gridTemplateColumns: "repeat(".concat(columnsQtty, ", 1fr)")
|
|
125
|
+
}
|
|
118
126
|
}, children))));
|
|
119
127
|
};
|
|
120
128
|
|
|
@@ -125,7 +133,10 @@ NavMenuItem.propTypes = {
|
|
|
125
133
|
childrenIsSubMenu: _propTypes["default"].bool,
|
|
126
134
|
url: _propTypes["default"].string,
|
|
127
135
|
customClass: _propTypes["default"].string,
|
|
128
|
-
permissionAttr: _propTypes["default"].oneOfType([_propTypes["default"].object, _propTypes["default"].arrayOf(_propTypes["default"].object)])
|
|
136
|
+
permissionAttr: _propTypes["default"].oneOfType([_propTypes["default"].object, _propTypes["default"].arrayOf(_propTypes["default"].object)]),
|
|
137
|
+
minWidth: _propTypes["default"].oneOf([_propTypes["default"].string, _propTypes["default"].number]),
|
|
138
|
+
maxWidth: _propTypes["default"].oneOf([_propTypes["default"].string, _propTypes["default"].number]),
|
|
139
|
+
columnsQtty: _propTypes["default"].number
|
|
129
140
|
};
|
|
130
141
|
NavMenuItem.defaultProps = {
|
|
131
142
|
childrenIsSubMenu: true,
|
|
@@ -134,7 +145,10 @@ NavMenuItem.defaultProps = {
|
|
|
134
145
|
children: null,
|
|
135
146
|
url: undefined,
|
|
136
147
|
customClass: '',
|
|
137
|
-
permissionAttr: undefined
|
|
148
|
+
permissionAttr: undefined,
|
|
149
|
+
minWidth: 500,
|
|
150
|
+
maxWidth: '90%',
|
|
151
|
+
columnsQtty: 2
|
|
138
152
|
};
|
|
139
153
|
var _default = NavMenuItem;
|
|
140
154
|
exports["default"] = _default;
|
|
@@ -59,7 +59,7 @@ var actionsOnPermissionDenied = function actionsOnPermissionDenied(permissionAtt
|
|
|
59
59
|
|
|
60
60
|
var result = {};
|
|
61
61
|
options.forEach(function (option) {
|
|
62
|
-
result[option] = hasPermission ? false : option ===
|
|
62
|
+
result[option] = hasPermission ? false : option === permissionsAttr[0].onDenied;
|
|
63
63
|
});
|
|
64
64
|
return result;
|
|
65
65
|
};
|
package/lib/treeview/Node.js
CHANGED
|
@@ -11,18 +11,42 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
11
11
|
|
|
12
12
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
13
13
|
|
|
14
|
+
var _uuid = _interopRequireDefault(require("uuid"));
|
|
15
|
+
|
|
16
|
+
var _lodash = _interopRequireDefault(require("lodash"));
|
|
17
|
+
|
|
14
18
|
var _checkbox = _interopRequireDefault(require("../checkbox"));
|
|
15
19
|
|
|
16
20
|
var _icons = _interopRequireDefault(require("../icons"));
|
|
17
21
|
|
|
18
22
|
var _constants = require("./constants");
|
|
19
23
|
|
|
24
|
+
var _buttons = _interopRequireDefault(require("../buttons"));
|
|
25
|
+
|
|
26
|
+
var _list = _interopRequireWildcard(require("../list"));
|
|
27
|
+
|
|
28
|
+
var _toolbar = _interopRequireWildcard(require("../toolbar"));
|
|
29
|
+
|
|
20
30
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
21
31
|
|
|
22
32
|
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); }
|
|
23
33
|
|
|
24
34
|
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
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 _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
41
|
+
|
|
42
|
+
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
|
|
43
|
+
|
|
44
|
+
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
|
45
|
+
|
|
46
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
47
|
+
|
|
48
|
+
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); }
|
|
49
|
+
|
|
26
50
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
27
51
|
|
|
28
52
|
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
|
|
@@ -69,7 +93,9 @@ var TreeNode = /*#__PURE__*/function (_Component) {
|
|
|
69
93
|
tabIndex: 0,
|
|
70
94
|
role: "button",
|
|
71
95
|
className: "opencloseicon",
|
|
72
|
-
onClick:
|
|
96
|
+
onClick: function onClick() {
|
|
97
|
+
return _this.openCloseTree(node);
|
|
98
|
+
}
|
|
73
99
|
}, /*#__PURE__*/_react["default"].createElement(_icons["default"], {
|
|
74
100
|
name: _this.state.isVisible ? 'up' : 'down',
|
|
75
101
|
size: 10
|
|
@@ -80,52 +106,278 @@ var TreeNode = /*#__PURE__*/function (_Component) {
|
|
|
80
106
|
}
|
|
81
107
|
});
|
|
82
108
|
Object.defineProperty(_assertThisInitialized(_this), "openCloseTree", {
|
|
109
|
+
configurable: true,
|
|
110
|
+
enumerable: true,
|
|
111
|
+
writable: true,
|
|
112
|
+
value: function value(node) {
|
|
113
|
+
var _this$state = _this.state,
|
|
114
|
+
isVisible = _this$state.isVisible,
|
|
115
|
+
wasOpened = _this$state.wasOpened;
|
|
116
|
+
var handlerOnNodeOpen = _this.props.handlerOnNodeOpen;
|
|
117
|
+
var nextState = {
|
|
118
|
+
isVisible: !isVisible
|
|
119
|
+
};
|
|
120
|
+
|
|
121
|
+
if (!wasOpened && handlerOnNodeOpen) {
|
|
122
|
+
nextState = _extends({}, nextState, {
|
|
123
|
+
wasOpened: true
|
|
124
|
+
});
|
|
125
|
+
handlerOnNodeOpen(node);
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
_this.setState(nextState);
|
|
129
|
+
}
|
|
130
|
+
});
|
|
131
|
+
Object.defineProperty(_assertThisInitialized(_this), "handleShowNodeElements", {
|
|
132
|
+
configurable: true,
|
|
133
|
+
enumerable: true,
|
|
134
|
+
writable: true,
|
|
135
|
+
value: function value() {
|
|
136
|
+
var _this$state2 = _this.state,
|
|
137
|
+
showNodeElements = _this$state2.showNodeElements,
|
|
138
|
+
keepMenuOpened = _this$state2.keepMenuOpened;
|
|
139
|
+
if (!showNodeElements) _this.setState({
|
|
140
|
+
showNodeElements: true
|
|
141
|
+
});else if (showNodeElements && !keepMenuOpened) {
|
|
142
|
+
_this.setState({
|
|
143
|
+
showNodeElements: false
|
|
144
|
+
});
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
});
|
|
148
|
+
Object.defineProperty(_assertThisInitialized(_this), "updateElements", {
|
|
149
|
+
configurable: true,
|
|
150
|
+
enumerable: true,
|
|
151
|
+
writable: true,
|
|
152
|
+
value: function value(elements) {
|
|
153
|
+
var _this$props = _this.props,
|
|
154
|
+
node = _this$props.node,
|
|
155
|
+
nodeElementsValidations = _this$props.nodeElementsValidations;
|
|
156
|
+
var updatedElements = [];
|
|
157
|
+
|
|
158
|
+
if (elements) {
|
|
159
|
+
updatedElements = _react["default"].Children.map(elements, function (element) {
|
|
160
|
+
if ( /*#__PURE__*/_react["default"].isValidElement(element) && element.props) {
|
|
161
|
+
var _element$props = element.props,
|
|
162
|
+
validationKey = _element$props.validationKey,
|
|
163
|
+
onNodeElementClick = _element$props.onNodeElementClick;
|
|
164
|
+
var elementBehavior;
|
|
165
|
+
var newProps = {};
|
|
166
|
+
|
|
167
|
+
if (nodeElementsValidations && validationKey) {
|
|
168
|
+
elementBehavior = _this.validateNodeElement(validationKey);
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
if (onNodeElementClick) {
|
|
172
|
+
newProps = _extends({}, newProps, {
|
|
173
|
+
onClick: function onClick(e) {
|
|
174
|
+
onNodeElementClick(node);
|
|
175
|
+
if (e.stopPropagation) e.stopPropagation();
|
|
176
|
+
},
|
|
177
|
+
onNodeElementClick: null
|
|
178
|
+
});
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
return /*#__PURE__*/_react["default"].cloneElement(element, _extends({}, elementBehavior, newProps));
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
return element;
|
|
185
|
+
});
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
return updatedElements;
|
|
189
|
+
}
|
|
190
|
+
});
|
|
191
|
+
Object.defineProperty(_assertThisInitialized(_this), "returnNodeRightElements", {
|
|
83
192
|
configurable: true,
|
|
84
193
|
enumerable: true,
|
|
85
194
|
writable: true,
|
|
86
195
|
value: function value() {
|
|
87
|
-
_this.
|
|
88
|
-
|
|
196
|
+
var nodeRightElements = _this.props.nodeRightElements;
|
|
197
|
+
|
|
198
|
+
var updatedNodeRightElements = _this.updateElements(nodeRightElements).map(function (element) {
|
|
199
|
+
var unvisible = element.props && 'visible' in element.props && !element.props.visible;
|
|
200
|
+
var style = unvisible ? {
|
|
201
|
+
display: 'none'
|
|
202
|
+
} : {};
|
|
203
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
204
|
+
style: style,
|
|
205
|
+
key: "element-".concat(_uuid["default"].v1()),
|
|
206
|
+
className: "element"
|
|
207
|
+
}, element);
|
|
89
208
|
});
|
|
209
|
+
|
|
210
|
+
return updatedNodeRightElements.length > 0 ? /*#__PURE__*/_react["default"].createElement("div", {
|
|
211
|
+
className: "node-rightelements"
|
|
212
|
+
}, updatedNodeRightElements) : null;
|
|
213
|
+
}
|
|
214
|
+
});
|
|
215
|
+
Object.defineProperty(_assertThisInitialized(_this), "returnNodeToolbarElements", {
|
|
216
|
+
configurable: true,
|
|
217
|
+
enumerable: true,
|
|
218
|
+
writable: true,
|
|
219
|
+
value: function value() {
|
|
220
|
+
var nodeToolbarElements = _this.props.nodeToolbarElements;
|
|
221
|
+
|
|
222
|
+
var updatedNodeRightElements = _this.updateElements(nodeToolbarElements);
|
|
223
|
+
|
|
224
|
+
return updatedNodeRightElements.length > 0 ? /*#__PURE__*/_react["default"].createElement(_toolbar["default"], {
|
|
225
|
+
customClass: "node-toolbarelements"
|
|
226
|
+
}, /*#__PURE__*/_react["default"].createElement(_toolbar.ToolBarGroup, null, updatedNodeRightElements)) : null;
|
|
90
227
|
}
|
|
91
228
|
});
|
|
229
|
+
Object.defineProperty(_assertThisInitialized(_this), "validateNodeElement", {
|
|
230
|
+
configurable: true,
|
|
231
|
+
enumerable: true,
|
|
232
|
+
writable: true,
|
|
233
|
+
value: function value(validationKey) {
|
|
234
|
+
var _this$props2 = _this.props,
|
|
235
|
+
nodeElementsValidations = _this$props2.nodeElementsValidations,
|
|
236
|
+
node = _this$props2.node;
|
|
237
|
+
var validations = nodeElementsValidations[validationKey];
|
|
238
|
+
var options = {
|
|
239
|
+
disabled: {
|
|
240
|
+
disabled: true
|
|
241
|
+
},
|
|
242
|
+
unvisible: {
|
|
243
|
+
visible: false
|
|
244
|
+
}
|
|
245
|
+
};
|
|
246
|
+
var elementBehavior = {};
|
|
247
|
+
|
|
248
|
+
if (validations) {
|
|
249
|
+
validations.forEach(function (validation) {
|
|
250
|
+
var validator = validation.validator,
|
|
251
|
+
applyBehavior = validation.applyBehavior;
|
|
252
|
+
|
|
253
|
+
if (_lodash["default"].isEmpty(elementBehavior) && validator && validator(node)) {
|
|
254
|
+
elementBehavior = options[applyBehavior] || options.unvisible;
|
|
255
|
+
}
|
|
256
|
+
});
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
return elementBehavior;
|
|
260
|
+
}
|
|
261
|
+
});
|
|
262
|
+
_this.labelRef = /*#__PURE__*/_react["default"].createRef();
|
|
92
263
|
_this.state = {
|
|
93
|
-
isVisible: context.startNodesOpened
|
|
264
|
+
isVisible: context.startNodesOpened,
|
|
265
|
+
wasOpened: context.startNodesOpened,
|
|
266
|
+
showNodeElements: false,
|
|
267
|
+
keepMenuOpened: false
|
|
94
268
|
};
|
|
95
269
|
return _this;
|
|
96
270
|
}
|
|
97
271
|
|
|
98
272
|
_createClass(TreeNode, [{
|
|
273
|
+
key: "componentDidMount",
|
|
274
|
+
value: function componentDidMount() {
|
|
275
|
+
var _this$props3 = this.props,
|
|
276
|
+
isParent = _this$props3.isParent,
|
|
277
|
+
nodeToolbarElements = _this$props3.nodeToolbarElements,
|
|
278
|
+
nodeRightElements = _this$props3.nodeRightElements;
|
|
279
|
+
|
|
280
|
+
if (isParent || nodeRightElements || nodeToolbarElements) {
|
|
281
|
+
this.labelRef.current.addEventListener('mouseenter', this.handleShowNodeElements);
|
|
282
|
+
this.labelRef.current.addEventListener('mouseleave', this.handleShowNodeElements);
|
|
283
|
+
}
|
|
284
|
+
}
|
|
285
|
+
}, {
|
|
286
|
+
key: "componentWillUnmount",
|
|
287
|
+
value: function componentWillUnmount() {
|
|
288
|
+
var _this$props4 = this.props,
|
|
289
|
+
isParent = _this$props4.isParent,
|
|
290
|
+
nodeToolbarElements = _this$props4.nodeToolbarElements,
|
|
291
|
+
nodeRightElements = _this$props4.nodeRightElements;
|
|
292
|
+
|
|
293
|
+
if (isParent || nodeRightElements || nodeToolbarElements) {
|
|
294
|
+
this.labelRef.current.removeEventListener('mouseenter', this.handleShowNodeElements);
|
|
295
|
+
this.labelRef.current.removeEventListener('mouseleave', this.handleShowNodeElements);
|
|
296
|
+
}
|
|
297
|
+
}
|
|
298
|
+
}, {
|
|
99
299
|
key: "render",
|
|
100
300
|
value: function render() {
|
|
101
301
|
var _this2 = this;
|
|
102
302
|
|
|
103
|
-
var _this$
|
|
104
|
-
node = _this$
|
|
105
|
-
children = _this$
|
|
303
|
+
var _this$props5 = this.props,
|
|
304
|
+
node = _this$props5.node,
|
|
305
|
+
children = _this$props5.children,
|
|
306
|
+
isParent = _this$props5.isParent,
|
|
307
|
+
onNodeClick = _this$props5.onNodeClick,
|
|
308
|
+
nodeMenuButtonSize = _this$props5.nodeMenuButtonSize;
|
|
309
|
+
var showNodeElements = this.state.showNodeElements;
|
|
106
310
|
return /*#__PURE__*/_react["default"].createElement(_constants.TreeviewContext.Consumer, null, function (_ref) {
|
|
107
311
|
var valuePropName = _ref.valuePropName,
|
|
108
312
|
labelPropName = _ref.labelPropName,
|
|
109
313
|
selectedIds = _ref.selectedIds,
|
|
110
|
-
|
|
314
|
+
handlerUpdateSelectedIds = _ref.handlerUpdateSelectedIds,
|
|
111
315
|
showCheckBox = _ref.showCheckBox,
|
|
112
316
|
requiredIds = _ref.requiredIds,
|
|
113
|
-
disabled = _ref.disabled
|
|
114
|
-
|
|
317
|
+
disabled = _ref.disabled,
|
|
318
|
+
handlerToggleCheckChildren = _ref.handlerToggleCheckChildren,
|
|
319
|
+
allowCheckAllChildren = _ref.allowCheckAllChildren,
|
|
320
|
+
requiredParentsIds = _ref.requiredParentsIds,
|
|
321
|
+
defaultDisabledTooltip = _ref.defaultDisabledTooltip;
|
|
322
|
+
var requiredNodes = [].concat(_toConsumableArray(requiredIds), _toConsumableArray(requiredParentsIds));
|
|
323
|
+
var required = requiredNodes.includes(node[valuePropName]);
|
|
115
324
|
var checked = selectedIds.includes(node[valuePropName]) || required;
|
|
116
325
|
return /*#__PURE__*/_react["default"].createElement("li", {
|
|
117
326
|
className: "treeviewitem"
|
|
118
327
|
}, _this2.getSpan(), /*#__PURE__*/_react["default"].createElement("div", {
|
|
119
|
-
className: "label"
|
|
328
|
+
className: "label",
|
|
329
|
+
ref: _this2.labelRef,
|
|
330
|
+
role: "button",
|
|
331
|
+
onKeyPress: null,
|
|
332
|
+
tabIndex: "-1",
|
|
333
|
+
onClick: onNodeClick ? function () {
|
|
334
|
+
return onNodeClick(node);
|
|
335
|
+
} : null
|
|
120
336
|
}, showCheckBox ? /*#__PURE__*/_react["default"].createElement(_checkbox["default"], {
|
|
121
337
|
checked: checked,
|
|
122
338
|
disabled: required || disabled,
|
|
123
339
|
value: "".concat(node[valuePropName]),
|
|
124
340
|
label: node[labelPropName],
|
|
125
|
-
|
|
126
|
-
|
|
341
|
+
tooltip: required ? defaultDisabledTooltip : '',
|
|
342
|
+
onChange: disabled || required ? undefined : function (e) {
|
|
343
|
+
handlerUpdateSelectedIds(node.id, e.target.checked, isParent);
|
|
344
|
+
}
|
|
345
|
+
}) : node[labelPropName], allowCheckAllChildren && showNodeElements && isParent ? /*#__PURE__*/_react["default"].createElement(_buttons["default"], {
|
|
346
|
+
dropdown: true,
|
|
347
|
+
dropdownAlign: "left",
|
|
348
|
+
size: nodeMenuButtonSize,
|
|
349
|
+
onClick: function onClick() {
|
|
350
|
+
_this2.setState({
|
|
351
|
+
keepMenuOpened: !_this2.state.keepMenuOpened
|
|
352
|
+
});
|
|
353
|
+
},
|
|
354
|
+
showIconDropdown: false,
|
|
355
|
+
iconName: "menu",
|
|
356
|
+
customClass: "node-menu",
|
|
357
|
+
boxShadow: false
|
|
358
|
+
}, /*#__PURE__*/_react["default"].createElement(_list["default"], {
|
|
359
|
+
condensed: true
|
|
360
|
+
}, /*#__PURE__*/_react["default"].createElement(_list.ListItem, {
|
|
361
|
+
text: "Marcar todos",
|
|
362
|
+
onClick: function onClick() {
|
|
363
|
+
handlerToggleCheckChildren(node.id, true);
|
|
364
|
+
|
|
365
|
+
_this2.setState({
|
|
366
|
+
showNodeElements: false,
|
|
367
|
+
keepMenuOpened: false
|
|
368
|
+
});
|
|
369
|
+
}
|
|
370
|
+
}), /*#__PURE__*/_react["default"].createElement(_list.ListItem, {
|
|
371
|
+
text: "Desmarcar todos",
|
|
372
|
+
onClick: function onClick() {
|
|
373
|
+
handlerToggleCheckChildren(node.id, false, required);
|
|
374
|
+
|
|
375
|
+
_this2.setState({
|
|
376
|
+
showNodeElements: false,
|
|
377
|
+
keepMenuOpened: false
|
|
378
|
+
});
|
|
127
379
|
}
|
|
128
|
-
}) :
|
|
380
|
+
}))) : null, showNodeElements && _this2.returnNodeRightElements(), showNodeElements && _this2.returnNodeToolbarElements()), /*#__PURE__*/_react["default"].createElement("ul", {
|
|
129
381
|
className: "nodelist"
|
|
130
382
|
}, _this2.state.isVisible && children));
|
|
131
383
|
});
|
|
@@ -140,12 +392,26 @@ TreeNode.propTypes = {
|
|
|
140
392
|
children: _propTypes["default"].any.isRequired,
|
|
141
393
|
childrenIds: _propTypes["default"].arrayOf(_propTypes["default"].number),
|
|
142
394
|
parentId: _propTypes["default"].number,
|
|
143
|
-
disabled: _propTypes["default"].bool
|
|
395
|
+
disabled: _propTypes["default"].bool,
|
|
396
|
+
isParent: _propTypes["default"].bool,
|
|
397
|
+
nodeRightElements: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].object), _propTypes["default"].element, _propTypes["default"].object]),
|
|
398
|
+
nodeToolbarElements: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].object), _propTypes["default"].element, _propTypes["default"].object]),
|
|
399
|
+
nodeMenuButtonSize: _propTypes["default"].oneOf(['mini', 'small', 'medium', 'large', 'default']),
|
|
400
|
+
onNodeClick: _propTypes["default"].func,
|
|
401
|
+
handlerOnNodeOpen: _propTypes["default"].func,
|
|
402
|
+
nodeElementsValidations: _propTypes["default"].object
|
|
144
403
|
};
|
|
145
404
|
TreeNode.defaultProps = {
|
|
146
405
|
childrenIds: [],
|
|
147
406
|
parentId: undefined,
|
|
148
|
-
disabled: false
|
|
407
|
+
disabled: false,
|
|
408
|
+
isParent: false,
|
|
409
|
+
nodeRightElements: undefined,
|
|
410
|
+
nodeToolbarElements: undefined,
|
|
411
|
+
nodeMenuButtonSize: 'small',
|
|
412
|
+
onNodeClick: undefined,
|
|
413
|
+
handlerOnNodeOpen: undefined,
|
|
414
|
+
nodeElementsValidations: undefined
|
|
149
415
|
};
|
|
150
416
|
TreeNode.contextType = _constants.TreeviewContext;
|
|
151
417
|
var _default = TreeNode;
|
package/lib/treeview/index.js
CHANGED
|
@@ -78,47 +78,368 @@ var TreeView = /*#__PURE__*/function (_Component) {
|
|
|
78
78
|
|
|
79
79
|
var _super = _createSuper(TreeView);
|
|
80
80
|
|
|
81
|
-
function TreeView() {
|
|
82
|
-
var
|
|
81
|
+
function TreeView(props) {
|
|
82
|
+
var _this;
|
|
83
83
|
|
|
84
84
|
_classCallCheck(this, TreeView);
|
|
85
85
|
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
86
|
+
_this = _super.call(this, props);
|
|
87
|
+
Object.defineProperty(_assertThisInitialized(_this), "getContextValues", {
|
|
88
|
+
configurable: true,
|
|
89
|
+
enumerable: true,
|
|
90
|
+
writable: true,
|
|
91
|
+
value: function value() {
|
|
92
|
+
return _extends({}, _this.props, _this.state, {
|
|
93
|
+
handlerUpdateSelectedIds: _this.updateSelectedIds,
|
|
94
|
+
handlerToggleCheckChildren: _this.toggleCheckChildren
|
|
95
|
+
});
|
|
96
|
+
}
|
|
97
|
+
});
|
|
98
|
+
Object.defineProperty(_assertThisInitialized(_this), "handleNewSelectedIds", {
|
|
99
|
+
configurable: true,
|
|
100
|
+
enumerable: true,
|
|
101
|
+
writable: true,
|
|
102
|
+
value: function value(selectedIds) {
|
|
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
|
+
});
|
|
89
113
|
|
|
90
|
-
|
|
114
|
+
_this.setState({
|
|
115
|
+
requiredParentsIds: _lodash["default"].uniq(requiredIds),
|
|
116
|
+
selectedIds: _lodash["default"].uniq(newSelectedIds)
|
|
117
|
+
});
|
|
118
|
+
}
|
|
119
|
+
});
|
|
120
|
+
Object.defineProperty(_assertThisInitialized(_this), "returnParentId", {
|
|
91
121
|
configurable: true,
|
|
92
122
|
enumerable: true,
|
|
93
123
|
writable: true,
|
|
94
|
-
value: {
|
|
95
|
-
|
|
96
|
-
|
|
124
|
+
value: function value(nodeId) {
|
|
125
|
+
var parentId = Object.keys(_this.idsWithChildren).find(function (id) {
|
|
126
|
+
return _this.idsWithChildren[id].find(function (childId) {
|
|
127
|
+
return childId === nodeId;
|
|
128
|
+
});
|
|
129
|
+
});
|
|
130
|
+
return Number(parentId);
|
|
97
131
|
}
|
|
98
|
-
})
|
|
132
|
+
});
|
|
133
|
+
Object.defineProperty(_assertThisInitialized(_this), "returnAllAncestryIds", {
|
|
99
134
|
configurable: true,
|
|
100
135
|
enumerable: true,
|
|
101
136
|
writable: true,
|
|
102
|
-
value: function value() {
|
|
103
|
-
|
|
104
|
-
|
|
137
|
+
value: function value(nodeId) {
|
|
138
|
+
var ancestryIds = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
|
|
139
|
+
|
|
140
|
+
var parentId = _this.returnParentId(nodeId);
|
|
141
|
+
|
|
142
|
+
if (parentId) {
|
|
143
|
+
var currentAncestryIds = [].concat(_toConsumableArray(ancestryIds), [Number(parentId)]);
|
|
144
|
+
return _this.returnAllAncestryIds(Number(parentId), currentAncestryIds);
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
return ancestryIds;
|
|
148
|
+
}
|
|
149
|
+
});
|
|
150
|
+
Object.defineProperty(_assertThisInitialized(_this), "returnChildrenIds", {
|
|
151
|
+
configurable: true,
|
|
152
|
+
enumerable: true,
|
|
153
|
+
writable: true,
|
|
154
|
+
value: function value(nodeId) {
|
|
155
|
+
var returnRequiredIds = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
|
156
|
+
var nodeChildrenIds = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
|
|
157
|
+
var requiredIds = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
|
|
158
|
+
|
|
159
|
+
if (_this.idsWithChildren[nodeId] !== undefined) {
|
|
160
|
+
nodeChildrenIds.push(nodeId);
|
|
161
|
+
if (returnRequiredIds) requiredIds.push(nodeId);
|
|
162
|
+
|
|
163
|
+
_this.idsWithChildren[nodeId].forEach(function (childId) {
|
|
164
|
+
return _this.returnChildrenIds(childId, returnRequiredIds, nodeChildrenIds, requiredIds);
|
|
165
|
+
});
|
|
166
|
+
} else nodeChildrenIds.push(nodeId);
|
|
167
|
+
|
|
168
|
+
return returnRequiredIds ? {
|
|
169
|
+
nodeChildrenIds: nodeChildrenIds,
|
|
170
|
+
requiredIds: requiredIds
|
|
171
|
+
} : nodeChildrenIds;
|
|
172
|
+
}
|
|
173
|
+
});
|
|
174
|
+
Object.defineProperty(_assertThisInitialized(_this), "returnRequiredAncestryIds", {
|
|
175
|
+
configurable: true,
|
|
176
|
+
enumerable: true,
|
|
177
|
+
writable: true,
|
|
178
|
+
value: function value(nodeId) {
|
|
179
|
+
var requiredAncestryIds = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
|
|
180
|
+
var previousParentId = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
|
|
181
|
+
var selectedSiblingsIds = [];
|
|
182
|
+
var selectedIds = _this.state.selectedIds;
|
|
183
|
+
|
|
184
|
+
var parentId = _this.returnParentId(nodeId);
|
|
185
|
+
|
|
186
|
+
if (parentId) {
|
|
187
|
+
var nodeSiblingsIds = _this.idsWithChildren[parentId].filter(function (childId) {
|
|
188
|
+
return childId !== nodeId;
|
|
189
|
+
});
|
|
190
|
+
|
|
191
|
+
var isPreviousParentSelected = selectedIds.includes(previousParentId);
|
|
192
|
+
|
|
193
|
+
if (nodeSiblingsIds && nodeSiblingsIds.length > 0) {
|
|
194
|
+
selectedSiblingsIds = selectedIds.filter(function (id) {
|
|
195
|
+
return nodeSiblingsIds.includes(id);
|
|
196
|
+
});
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
var requiredIds = isPreviousParentSelected || selectedSiblingsIds.length > 0 ? _toConsumableArray(requiredAncestryIds) : [].concat(_toConsumableArray(requiredAncestryIds), [parentId]);
|
|
200
|
+
|
|
201
|
+
if (selectedSiblingsIds.length === 0 && !isPreviousParentSelected) {
|
|
202
|
+
return _this.returnRequiredAncestryIds(parentId, requiredIds, parentId);
|
|
203
|
+
}
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
return requiredAncestryIds;
|
|
207
|
+
}
|
|
208
|
+
});
|
|
209
|
+
Object.defineProperty(_assertThisInitialized(_this), "toggleCheckChildren", {
|
|
210
|
+
configurable: true,
|
|
211
|
+
enumerable: true,
|
|
212
|
+
writable: true,
|
|
213
|
+
value: function value(nodeId, check) {
|
|
214
|
+
var required = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
|
|
215
|
+
|
|
216
|
+
_this.setState({
|
|
217
|
+
isHandlingSelectedIds: true
|
|
218
|
+
}, function () {
|
|
219
|
+
_this.updateSelectedIds(nodeId, check, true, required);
|
|
220
|
+
});
|
|
221
|
+
}
|
|
222
|
+
});
|
|
223
|
+
Object.defineProperty(_assertThisInitialized(_this), "checkAllAncestry", {
|
|
224
|
+
configurable: true,
|
|
225
|
+
enumerable: true,
|
|
226
|
+
writable: true,
|
|
227
|
+
value: function value(nodeId, codigos) {
|
|
228
|
+
var returnRequiredParentsIds = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
|
|
229
|
+
var updateState = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
|
|
230
|
+
var selectedIds = _this.state.selectedIds;
|
|
231
|
+
var requiredParentsIds = _this.state.requiredParentsIds;
|
|
232
|
+
|
|
233
|
+
var nodeAncestryIds = _this.returnAllAncestryIds(nodeId);
|
|
234
|
+
|
|
235
|
+
var notRequiredAncestryIds = nodeAncestryIds.filter(function (id) {
|
|
236
|
+
return !requiredParentsIds.includes(id);
|
|
237
|
+
});
|
|
238
|
+
var notSelectedAncestryIds = nodeAncestryIds.filter(function (id) {
|
|
239
|
+
return !selectedIds.includes(id);
|
|
240
|
+
});
|
|
241
|
+
selectedIds = [].concat(_toConsumableArray(selectedIds), _toConsumableArray(codigos), _toConsumableArray(notSelectedAncestryIds));
|
|
242
|
+
requiredParentsIds = [].concat(_toConsumableArray(requiredParentsIds), _toConsumableArray(notRequiredAncestryIds));
|
|
243
|
+
if (updateState) _this.setState({
|
|
244
|
+
requiredParentsIds: requiredParentsIds
|
|
245
|
+
});
|
|
246
|
+
return !returnRequiredParentsIds ? selectedIds : {
|
|
247
|
+
updatedIdsWithAncestryIds: selectedIds,
|
|
248
|
+
requiredParentsIds: requiredParentsIds
|
|
249
|
+
};
|
|
250
|
+
}
|
|
251
|
+
});
|
|
252
|
+
Object.defineProperty(_assertThisInitialized(_this), "updateAncestryAndSelectedIds", {
|
|
253
|
+
configurable: true,
|
|
254
|
+
enumerable: true,
|
|
255
|
+
writable: true,
|
|
256
|
+
value: function value(nodeId, codigos, requiredParentsIds) {
|
|
257
|
+
var selectedIds = _this.state.selectedIds;
|
|
258
|
+
|
|
259
|
+
var ancestryIds = _this.returnRequiredAncestryIds(nodeId);
|
|
260
|
+
|
|
261
|
+
var remainRequiredParentsIds = requiredParentsIds.filter(function (id) {
|
|
262
|
+
return !ancestryIds.includes(id);
|
|
263
|
+
});
|
|
264
|
+
selectedIds = selectedIds.filter(function (selectedId) {
|
|
265
|
+
return !codigos.includes(selectedId);
|
|
266
|
+
});
|
|
267
|
+
|
|
268
|
+
_this.setState({
|
|
269
|
+
requiredParentsIds: remainRequiredParentsIds
|
|
105
270
|
});
|
|
271
|
+
|
|
272
|
+
return selectedIds;
|
|
106
273
|
}
|
|
107
|
-
})
|
|
274
|
+
});
|
|
275
|
+
Object.defineProperty(_assertThisInitialized(_this), "checkAllChildren", {
|
|
108
276
|
configurable: true,
|
|
109
277
|
enumerable: true,
|
|
110
278
|
writable: true,
|
|
111
|
-
value: function value(
|
|
279
|
+
value: function value(nodeId) {
|
|
280
|
+
var returnRequiredIds = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
|
281
|
+
var currentRequiredIds = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
|
|
282
|
+
var _this$state = _this.state,
|
|
283
|
+
selectedIds = _this$state.selectedIds,
|
|
284
|
+
requiredParentsIds = _this$state.requiredParentsIds;
|
|
285
|
+
var childrenIds;
|
|
286
|
+
|
|
287
|
+
if (returnRequiredIds) {
|
|
288
|
+
var _this$returnChildrenI = _this.returnChildrenIds(nodeId, returnRequiredIds),
|
|
289
|
+
nodeChildrenIds = _this$returnChildrenI.nodeChildrenIds,
|
|
290
|
+
requiredIds = _this$returnChildrenI.requiredIds;
|
|
291
|
+
|
|
292
|
+
var newRequiredIds = requiredIds.filter(function (id) {
|
|
293
|
+
return !currentRequiredIds.includes(id);
|
|
294
|
+
});
|
|
295
|
+
requiredParentsIds = [].concat(_toConsumableArray(currentRequiredIds), _toConsumableArray(newRequiredIds));
|
|
296
|
+
childrenIds = nodeChildrenIds;
|
|
297
|
+
} else childrenIds = _this.returnChildrenIds(nodeId);
|
|
298
|
+
|
|
299
|
+
var notSelectedChildrenIds = childrenIds.filter(function (id) {
|
|
300
|
+
return !selectedIds.includes(id);
|
|
301
|
+
});
|
|
302
|
+
selectedIds = [].concat(_toConsumableArray(selectedIds), _toConsumableArray(notSelectedChildrenIds));
|
|
303
|
+
|
|
304
|
+
_this.setState({
|
|
305
|
+
isHandlingSelectedIds: false,
|
|
306
|
+
requiredParentsIds: requiredParentsIds
|
|
307
|
+
});
|
|
308
|
+
|
|
309
|
+
return selectedIds;
|
|
310
|
+
}
|
|
311
|
+
});
|
|
312
|
+
Object.defineProperty(_assertThisInitialized(_this), "uncheckAllChildren", {
|
|
313
|
+
configurable: true,
|
|
314
|
+
enumerable: true,
|
|
315
|
+
writable: true,
|
|
316
|
+
value: function value(nodeId) {
|
|
317
|
+
var remainSelectedIds = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
|
|
318
|
+
var selectedIds = remainSelectedIds.length > 0 ? remainSelectedIds : _this.state.selectedIds;
|
|
319
|
+
|
|
320
|
+
var childrenIds = _this.returnChildrenIds(nodeId);
|
|
321
|
+
|
|
322
|
+
selectedIds = selectedIds.filter(function (selectedId) {
|
|
323
|
+
return !childrenIds.includes(selectedId);
|
|
324
|
+
});
|
|
325
|
+
|
|
326
|
+
_this.setState({
|
|
327
|
+
isHandlingSelectedIds: false
|
|
328
|
+
});
|
|
329
|
+
|
|
330
|
+
return selectedIds;
|
|
331
|
+
}
|
|
332
|
+
});
|
|
333
|
+
Object.defineProperty(_assertThisInitialized(_this), "uncheckRequiredChildren", {
|
|
334
|
+
configurable: true,
|
|
335
|
+
enumerable: true,
|
|
336
|
+
writable: true,
|
|
337
|
+
value: function value(nodeId, codigos, requiredParentsIds) {
|
|
338
|
+
var childrenIds = _this.returnChildrenIds(nodeId);
|
|
339
|
+
|
|
340
|
+
var remainRequiredIds = requiredParentsIds.filter(function (id) {
|
|
341
|
+
return !childrenIds.includes(id);
|
|
342
|
+
});
|
|
343
|
+
|
|
344
|
+
_this.setState({
|
|
345
|
+
requiredParentsIds: _toConsumableArray(remainRequiredIds)
|
|
346
|
+
}, function () {
|
|
347
|
+
return _this.updateAncestryAndSelectedIds(nodeId, codigos, remainRequiredIds);
|
|
348
|
+
});
|
|
349
|
+
}
|
|
350
|
+
});
|
|
351
|
+
Object.defineProperty(_assertThisInitialized(_this), "handleOnNodeOpen", {
|
|
352
|
+
configurable: true,
|
|
353
|
+
enumerable: true,
|
|
354
|
+
writable: true,
|
|
355
|
+
value: function value(node) {
|
|
356
|
+
var id = node.id;
|
|
357
|
+
var onNodeOpen = _this.props.onNodeOpen;
|
|
358
|
+
var alreadyOpenedIds = _this.state.alreadyOpenedIds;
|
|
359
|
+
|
|
360
|
+
if (!alreadyOpenedIds.includes(id) && onNodeOpen) {
|
|
361
|
+
alreadyOpenedIds = [].concat(_toConsumableArray(alreadyOpenedIds), [id]);
|
|
362
|
+
onNodeOpen(node);
|
|
363
|
+
}
|
|
364
|
+
|
|
365
|
+
_this.setState({
|
|
366
|
+
alreadyOpenedIds: alreadyOpenedIds
|
|
367
|
+
});
|
|
368
|
+
}
|
|
369
|
+
});
|
|
370
|
+
Object.defineProperty(_assertThisInitialized(_this), "handleCheck", {
|
|
371
|
+
configurable: true,
|
|
372
|
+
enumerable: true,
|
|
373
|
+
writable: true,
|
|
374
|
+
value: function value(nodeId, isParent) {
|
|
375
|
+
var selectedIds = _this.state.selectedIds;
|
|
376
|
+
var codigos = _lodash["default"].isArray(nodeId) ? nodeId : [nodeId];
|
|
377
|
+
var isHandlingSelectedIds = _this.state.isHandlingSelectedIds;
|
|
378
|
+
var _this$props = _this.props,
|
|
379
|
+
allowCheckAllChildren = _this$props.allowCheckAllChildren,
|
|
380
|
+
allowCheckAllAncestry = _this$props.allowCheckAllAncestry;
|
|
381
|
+
selectedIds = [].concat(_toConsumableArray(selectedIds), _toConsumableArray(codigos));
|
|
382
|
+
|
|
383
|
+
if (isParent && isHandlingSelectedIds && allowCheckAllChildren) {
|
|
384
|
+
if (allowCheckAllAncestry) {
|
|
385
|
+
var _this$checkAllAncestr2 = _this.checkAllAncestry(nodeId, codigos, true),
|
|
386
|
+
updatedIdsWithAncestryIds = _this$checkAllAncestr2.updatedIdsWithAncestryIds,
|
|
387
|
+
requiredParentsIds = _this$checkAllAncestr2.requiredParentsIds;
|
|
388
|
+
|
|
389
|
+
var updatedIdsWithChidlrenIds = _this.checkAllChildren(nodeId, true, requiredParentsIds);
|
|
390
|
+
|
|
391
|
+
selectedIds = [].concat(_toConsumableArray(updatedIdsWithAncestryIds), _toConsumableArray(updatedIdsWithChidlrenIds));
|
|
392
|
+
} else selectedIds = _this.checkAllChildren(nodeId);
|
|
393
|
+
} else if (allowCheckAllAncestry) {
|
|
394
|
+
selectedIds = _this.checkAllAncestry(nodeId, codigos);
|
|
395
|
+
}
|
|
396
|
+
|
|
397
|
+
return selectedIds;
|
|
398
|
+
}
|
|
399
|
+
});
|
|
400
|
+
Object.defineProperty(_assertThisInitialized(_this), "handleUncheck", {
|
|
401
|
+
configurable: true,
|
|
402
|
+
enumerable: true,
|
|
403
|
+
writable: true,
|
|
404
|
+
value: function value(nodeId, isParent, required) {
|
|
405
|
+
var selectedIds = _this.state.selectedIds;
|
|
406
|
+
var _this$state2 = _this.state,
|
|
407
|
+
isHandlingSelectedIds = _this$state2.isHandlingSelectedIds,
|
|
408
|
+
requiredParentsIds = _this$state2.requiredParentsIds;
|
|
409
|
+
var _this$props2 = _this.props,
|
|
410
|
+
allowCheckAllChildren = _this$props2.allowCheckAllChildren,
|
|
411
|
+
allowCheckAllAncestry = _this$props2.allowCheckAllAncestry;
|
|
412
|
+
var codigos = _lodash["default"].isArray(nodeId) ? nodeId : [nodeId];
|
|
413
|
+
selectedIds = selectedIds.filter(function (id) {
|
|
414
|
+
return !codigos.includes(id);
|
|
415
|
+
});
|
|
416
|
+
|
|
417
|
+
if (isParent && isHandlingSelectedIds && allowCheckAllChildren) {
|
|
418
|
+
if (allowCheckAllAncestry) {
|
|
419
|
+
var updatedSelectedIds = _this.updateAncestryAndSelectedIds(nodeId, codigos, requiredParentsIds);
|
|
420
|
+
|
|
421
|
+
selectedIds = _this.uncheckAllChildren(nodeId, updatedSelectedIds);
|
|
422
|
+
if (required) _this.uncheckRequiredChildren(nodeId, codigos, requiredParentsIds);
|
|
423
|
+
} else selectedIds = _this.uncheckAllChildren(nodeId);
|
|
424
|
+
} else if (allowCheckAllAncestry) {
|
|
425
|
+
selectedIds = _this.updateAncestryAndSelectedIds(nodeId, codigos, requiredParentsIds);
|
|
426
|
+
}
|
|
427
|
+
|
|
428
|
+
return selectedIds;
|
|
429
|
+
}
|
|
430
|
+
});
|
|
431
|
+
Object.defineProperty(_assertThisInitialized(_this), "updateSelectedIds", {
|
|
432
|
+
configurable: true,
|
|
433
|
+
enumerable: true,
|
|
434
|
+
writable: true,
|
|
435
|
+
value: function value(nodeId, checked, isParent, required) {
|
|
112
436
|
var selectedIds = _this.state.selectedIds;
|
|
113
437
|
var onSelectedIdsChange = _this.props.onSelectedIdsChange;
|
|
114
|
-
var codigos = _lodash["default"].isArray(ids) ? ids : [ids];
|
|
115
438
|
|
|
116
439
|
if (checked) {
|
|
117
|
-
selectedIds =
|
|
440
|
+
selectedIds = _this.handleCheck(nodeId, isParent);
|
|
118
441
|
} else {
|
|
119
|
-
selectedIds =
|
|
120
|
-
return !codigos.includes(id);
|
|
121
|
-
});
|
|
442
|
+
selectedIds = _this.handleUncheck(nodeId, isParent, required);
|
|
122
443
|
}
|
|
123
444
|
|
|
124
445
|
_this.setState({
|
|
@@ -127,37 +448,88 @@ var TreeView = /*#__PURE__*/function (_Component) {
|
|
|
127
448
|
|
|
128
449
|
if (onSelectedIdsChange) onSelectedIdsChange(selectedIds);
|
|
129
450
|
}
|
|
130
|
-
})
|
|
451
|
+
});
|
|
452
|
+
Object.defineProperty(_assertThisInitialized(_this), "buildTree", {
|
|
131
453
|
configurable: true,
|
|
132
454
|
enumerable: true,
|
|
133
455
|
writable: true,
|
|
134
456
|
value: function value(node) {
|
|
135
457
|
var parentId = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
|
|
136
|
-
var
|
|
458
|
+
var ids = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
|
|
459
|
+
var _this$props3 = _this.props,
|
|
460
|
+
nodeRightElements = _this$props3.nodeRightElements,
|
|
461
|
+
onNodeClick = _this$props3.onNodeClick,
|
|
462
|
+
nodeElementsValidations = _this$props3.nodeElementsValidations,
|
|
463
|
+
nodeToolbarElements = _this$props3.nodeToolbarElements,
|
|
464
|
+
nodeMenuButtonSize = _this$props3.nodeMenuButtonSize;
|
|
137
465
|
var childrenIds = [];
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
466
|
+
|
|
467
|
+
if (node.itens && node.itens.length > 0) {
|
|
468
|
+
childrenIds = node.itens.map(function (i) {
|
|
469
|
+
return i.id;
|
|
470
|
+
});
|
|
471
|
+
|
|
472
|
+
if (ids) {
|
|
473
|
+
var idWithChildren = {};
|
|
474
|
+
idWithChildren[node.id] = childrenIds;
|
|
475
|
+
Object.assign(ids, idWithChildren);
|
|
476
|
+
}
|
|
477
|
+
}
|
|
478
|
+
|
|
141
479
|
return /*#__PURE__*/_react["default"].createElement(_Node["default"], {
|
|
142
480
|
key: "node-".concat(node.id),
|
|
143
481
|
node: node,
|
|
144
482
|
childrenIds: childrenIds,
|
|
145
|
-
|
|
483
|
+
isParent: node.itens && node.itens.length > 0,
|
|
484
|
+
parentId: parentId,
|
|
485
|
+
nodeRightElements: nodeRightElements,
|
|
486
|
+
nodeToolbarElements: nodeToolbarElements,
|
|
487
|
+
nodeElementsValidations: nodeElementsValidations,
|
|
488
|
+
nodeMenuButtonSize: nodeMenuButtonSize,
|
|
489
|
+
onNodeClick: onNodeClick,
|
|
490
|
+
handlerOnNodeOpen: _this.handleOnNodeOpen
|
|
146
491
|
}, childrenIds.length > 0 && node.itens.map(function (nodeitem) {
|
|
147
|
-
return _this.buildTree(nodeitem,
|
|
492
|
+
return _this.buildTree(nodeitem, node.id, ids);
|
|
148
493
|
}));
|
|
149
494
|
}
|
|
150
|
-
})
|
|
495
|
+
});
|
|
496
|
+
_this.idsWithChildren = {};
|
|
497
|
+
_this.state = {
|
|
498
|
+
data: _this.props.data,
|
|
499
|
+
propSelectedIds: _this.props.selectedIds,
|
|
500
|
+
selectedIds: _this.props.selectedIds,
|
|
501
|
+
isHandlingSelectedIds: false,
|
|
502
|
+
requiredParentsIds: [],
|
|
503
|
+
alreadyOpenedIds: []
|
|
504
|
+
};
|
|
505
|
+
return _this;
|
|
151
506
|
}
|
|
152
507
|
|
|
153
508
|
_createClass(TreeView, [{
|
|
509
|
+
key: "componentDidMount",
|
|
510
|
+
value: function componentDidMount() {
|
|
511
|
+
this.buildTree(this.state.data, undefined, this.idsWithChildren);
|
|
512
|
+
}
|
|
513
|
+
}, {
|
|
514
|
+
key: "componentDidUpdate",
|
|
515
|
+
value: function componentDidUpdate(prevProps, prevState) {
|
|
516
|
+
var _this$state3 = this.state,
|
|
517
|
+
selectedIds = _this$state3.selectedIds,
|
|
518
|
+
propSelectedIds = _this$state3.propSelectedIds;
|
|
519
|
+
var allowCheckAllAncestry = this.props.allowCheckAllAncestry;
|
|
520
|
+
|
|
521
|
+
var isSameSelectedIds = _lodash["default"].isEqual(propSelectedIds.sort(), prevState.propSelectedIds.sort());
|
|
522
|
+
|
|
523
|
+
if (allowCheckAllAncestry && !isSameSelectedIds) this.handleNewSelectedIds(selectedIds);
|
|
524
|
+
}
|
|
525
|
+
}, {
|
|
154
526
|
key: "render",
|
|
155
527
|
value: function render() {
|
|
156
|
-
var _this$
|
|
157
|
-
customClass = _this$
|
|
158
|
-
bordered = _this$
|
|
159
|
-
children = _this$
|
|
160
|
-
styleForContainer = _this$
|
|
528
|
+
var _this$props4 = this.props,
|
|
529
|
+
customClass = _this$props4.customClass,
|
|
530
|
+
bordered = _this$props4.bordered,
|
|
531
|
+
children = _this$props4.children,
|
|
532
|
+
styleForContainer = _this$props4.styleForContainer;
|
|
161
533
|
var data = this.state.data;
|
|
162
534
|
return /*#__PURE__*/_react["default"].createElement(_constants.TreeviewContext.Provider, {
|
|
163
535
|
value: this.getContextValues()
|
|
@@ -168,6 +540,25 @@ var TreeView = /*#__PURE__*/function (_Component) {
|
|
|
168
540
|
className: "treeviewcontainer ".concat(bordered && '-bordered')
|
|
169
541
|
}, this.buildTree(data))));
|
|
170
542
|
}
|
|
543
|
+
}], [{
|
|
544
|
+
key: "getDerivedStateFromProps",
|
|
545
|
+
value: function getDerivedStateFromProps(props, state) {
|
|
546
|
+
var data = props.data,
|
|
547
|
+
selectedIds = props.selectedIds;
|
|
548
|
+
var propSelectedIds = state.propSelectedIds;
|
|
549
|
+
|
|
550
|
+
var isSameSelectedIds = _lodash["default"].isEqual(propSelectedIds.sort(), selectedIds.sort());
|
|
551
|
+
|
|
552
|
+
if (data !== state.data || !isSameSelectedIds) {
|
|
553
|
+
return {
|
|
554
|
+
data: data,
|
|
555
|
+
selectedIds: selectedIds,
|
|
556
|
+
propSelectedIds: selectedIds
|
|
557
|
+
};
|
|
558
|
+
}
|
|
559
|
+
|
|
560
|
+
return null;
|
|
561
|
+
}
|
|
171
562
|
}]);
|
|
172
563
|
|
|
173
564
|
return TreeView;
|
|
@@ -186,7 +577,16 @@ TreeView.propTypes = {
|
|
|
186
577
|
showCheckBox: _propTypes["default"].bool,
|
|
187
578
|
onSelectedIdsChange: _propTypes["default"].func,
|
|
188
579
|
children: _propTypes["default"].instanceOf(Object),
|
|
189
|
-
styleForContainer: _propTypes["default"].object
|
|
580
|
+
styleForContainer: _propTypes["default"].object,
|
|
581
|
+
allowCheckAllChildren: _propTypes["default"].bool,
|
|
582
|
+
allowCheckAllAncestry: _propTypes["default"].bool,
|
|
583
|
+
defaultDisabledTooltip: _propTypes["default"].string,
|
|
584
|
+
nodeRightElements: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].object), _propTypes["default"].element, _propTypes["default"].object]),
|
|
585
|
+
nodeToolbarElements: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].object), _propTypes["default"].element, _propTypes["default"].object]),
|
|
586
|
+
nodeMenuButtonSize: _propTypes["default"].oneOf(['mini', 'small', 'medium', 'large', 'default']),
|
|
587
|
+
onNodeClick: _propTypes["default"].func,
|
|
588
|
+
onNodeOpen: _propTypes["default"].func,
|
|
589
|
+
nodeElementsValidations: _propTypes["default"].object
|
|
190
590
|
};
|
|
191
591
|
TreeView.defaultProps = {
|
|
192
592
|
customClass: '',
|
|
@@ -197,7 +597,16 @@ TreeView.defaultProps = {
|
|
|
197
597
|
showCheckBox: false,
|
|
198
598
|
onSelectedIdsChange: undefined,
|
|
199
599
|
children: undefined,
|
|
200
|
-
styleForContainer: {}
|
|
600
|
+
styleForContainer: {},
|
|
601
|
+
allowCheckAllChildren: false,
|
|
602
|
+
allowCheckAllAncestry: false,
|
|
603
|
+
defaultDisabledTooltip: '',
|
|
604
|
+
nodeRightElements: undefined,
|
|
605
|
+
nodeToolbarElements: undefined,
|
|
606
|
+
nodeMenuButtonSize: 'small',
|
|
607
|
+
onNodeClick: undefined,
|
|
608
|
+
onNodeOpen: undefined,
|
|
609
|
+
nodeElementsValidations: undefined
|
|
201
610
|
};
|
|
202
611
|
var _default = TreeView;
|
|
203
612
|
exports["default"] = _default;
|