linear-react-components-ui 0.4.76-rc.9 → 0.4.76
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/.husky/pre-commit +2 -2
- package/.tool-versions +1 -0
- package/.vscode/settings.json +1 -2
- package/README.md +40 -5
- package/lib/assets/styles/button.scss +19 -10
- package/lib/assets/styles/checkbox.scss +92 -70
- package/lib/assets/styles/commons.scss +36 -0
- package/lib/assets/styles/drawers.scss +22 -6
- package/lib/assets/styles/dropdown.scss +28 -2
- package/lib/assets/styles/effects.scss +32 -0
- package/lib/assets/styles/floatMenu.scss +0 -1
- package/lib/assets/styles/gridlayout.scss +2 -1
- package/lib/assets/styles/input.scss +21 -0
- package/lib/assets/styles/label.scss +9 -1
- package/lib/assets/styles/list.scss +8 -0
- package/lib/assets/styles/multiSelect.scss +105 -0
- package/lib/assets/styles/panel.scss +3 -1
- package/lib/assets/styles/periodpicker.scss +65 -0
- package/lib/assets/styles/progress.scss +8 -1
- package/lib/assets/styles/radio.scss +19 -0
- package/lib/assets/styles/select.scss +4 -3
- package/lib/assets/styles/sidenav.scss +11 -1
- package/lib/assets/styles/skeleton.scss +48 -0
- package/lib/assets/styles/table.scss +25 -5
- package/lib/assets/styles/tabs.scss +116 -75
- package/lib/assets/styles/treeview.scss +41 -0
- package/lib/assets/styles/uitour.scss +112 -0
- package/lib/avatar/avatar.spec.js +17 -6
- package/lib/avatar/index.js +1 -1
- package/lib/buttons/DefaultButton.js +13 -4
- package/lib/buttons/split_button/index.js +8 -4
- package/lib/checkbox/Label.js +37 -0
- package/lib/checkbox/checkbox.spec.js +16 -16
- package/lib/checkbox/index.js +33 -12
- package/lib/dialog/base/index.js +15 -6
- package/lib/dialog/form/index.js +24 -4
- package/lib/drawer/Drawer.js +9 -5
- package/lib/drawer/Header.js +15 -5
- package/lib/drawer/index.js +4 -1
- package/lib/dropdown/Popup.js +3 -2
- package/lib/form/Field.js +2 -0
- package/lib/form/FieldNumber.js +11 -3
- package/lib/form/FieldPeriod.js +100 -0
- package/lib/form/form.spec.js +8 -0
- package/lib/form/helpers.js +20 -1
- package/lib/form/index.js +220 -218
- package/lib/form/withFieldHOC.js +5 -1
- package/lib/form/withFormSecurity.js +106 -0
- package/lib/icons/helper.js +24 -0
- package/lib/inputs/base/InputTextBase.js +30 -5
- package/lib/inputs/base/helpers.js +13 -9
- package/lib/inputs/date/Dropdown.js +3 -3
- package/lib/inputs/date/date.spec.js +46 -36
- package/lib/inputs/date/helpers.js +36 -0
- package/lib/inputs/date/index.js +12 -10
- package/lib/inputs/mask/Phone.js +10 -1
- package/lib/inputs/mask/imaskHOC.js +2 -1
- package/lib/inputs/mask/input_mask.spec.js +21 -4
- package/lib/inputs/multiSelect/ActionButtons.js +68 -0
- package/lib/inputs/multiSelect/Dropdown.js +200 -0
- package/lib/inputs/multiSelect/helper.js +18 -0
- package/lib/inputs/multiSelect/index.js +343 -0
- package/lib/inputs/number/BaseNumber.js +1 -1
- package/lib/inputs/number/index.js +7 -5
- package/lib/inputs/period/Dialog.js +38 -0
- package/lib/inputs/period/Dropdown.js +90 -0
- package/lib/inputs/period/PeriodList.js +79 -0
- package/lib/inputs/period/helper.js +118 -0
- package/lib/inputs/period/index.js +490 -0
- package/lib/inputs/search/index.js +2 -0
- package/lib/inputs/select/Dropdown.js +55 -65
- package/lib/inputs/select/helper.js +65 -2
- package/lib/inputs/select/index.js +26 -3
- package/lib/inputs/select/multiple/index.js +16 -11
- package/lib/inputs/select/simple/index.js +39 -24
- package/lib/internals/constants.js +4 -3
- package/lib/internals/withTooltip.js +86 -82
- package/lib/labels/DefaultLabel.js +7 -4
- package/lib/list/Item.js +35 -9
- package/lib/list/helpers.js +8 -3
- package/lib/list/index.js +172 -14
- package/lib/list/list.spec.js +290 -89
- package/lib/menus/float/MenuItem.js +25 -8
- package/lib/menus/sidenav/NavMenuItem.js +17 -8
- package/lib/menus/sidenav/index.js +59 -86
- package/lib/menus/sidenav/popup_menu_search/index.js +26 -17
- package/lib/menus/sidenav/sidenav.spec.js +86 -19
- package/lib/panel/Header.js +4 -3
- package/lib/progress/Bar.js +40 -9
- package/lib/progress/index.js +12 -4
- package/lib/radio/index.js +9 -6
- package/lib/skeleton/SkeletonContainer.js +42 -0
- package/lib/skeleton/index.js +84 -0
- package/lib/spinner/index.js +6 -1
- package/lib/split/Split.js +5 -11
- package/lib/table/Body.js +55 -11
- package/lib/table/Header.js +14 -1
- package/lib/table/HeaderColumn.js +26 -3
- package/lib/table/Row.js +19 -8
- package/lib/table/RowColumn.js +23 -3
- package/lib/table/helpers.js +11 -1
- package/lib/table/index.js +41 -8
- package/lib/tabs/DropdownItems.js +84 -0
- package/lib/tabs/Menu.js +12 -9
- package/lib/tabs/MenuItems.js +15 -9
- package/lib/tabs/Panel.js +1 -3
- package/lib/tabs/index.js +156 -22
- package/lib/tabs/tabs.spec.js +8 -5
- package/lib/toolbar/ButtonBar.js +30 -24
- package/lib/toolbar/LabelBar.js +22 -27
- package/lib/toolbar/helpers.js +12 -0
- package/lib/toolbar/index.js +24 -9
- package/lib/tooltip/index.js +20 -7
- package/lib/treeview/Node.js +364 -49
- package/lib/treeview/index.js +475 -36
- package/lib/treeview/treeview.spec.js +18 -0
- package/lib/uitour/helpers.js +15 -0
- package/lib/uitour/index.js +271 -0
- package/lib/uitour/uitour.spec.js +176 -0
- package/package.json +9 -8
package/lib/treeview/index.js
CHANGED
|
@@ -78,47 +78,374 @@ 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
|
+
_this.setState({
|
|
104
|
+
requiredParentsIds: []
|
|
105
|
+
}, function () {
|
|
106
|
+
var requiredIds = [];
|
|
107
|
+
var newSelectedIds = [];
|
|
108
|
+
var selectedIdsUpdatedOnMount = _this.state.selectedIdsUpdatedOnMount;
|
|
109
|
+
selectedIds.forEach(function (id) {
|
|
110
|
+
var _this$checkAllAncestr = _this.checkAllAncestry(id, [], true, false),
|
|
111
|
+
requiredParentsIds = _this$checkAllAncestr.requiredParentsIds,
|
|
112
|
+
updatedIdsWithAncestryIds = _this$checkAllAncestr.updatedIdsWithAncestryIds;
|
|
113
|
+
|
|
114
|
+
newSelectedIds = [].concat(_toConsumableArray(newSelectedIds), _toConsumableArray(updatedIdsWithAncestryIds));
|
|
115
|
+
requiredIds = [].concat(_toConsumableArray(requiredIds), _toConsumableArray(requiredParentsIds));
|
|
116
|
+
});
|
|
89
117
|
|
|
90
|
-
|
|
118
|
+
_this.setState({
|
|
119
|
+
requiredParentsIds: _lodash["default"].uniq(requiredIds),
|
|
120
|
+
selectedIds: _lodash["default"].uniq(newSelectedIds),
|
|
121
|
+
selectedIdsUpdatedOnMount: selectedIdsUpdatedOnMount || true
|
|
122
|
+
});
|
|
123
|
+
});
|
|
124
|
+
}
|
|
125
|
+
});
|
|
126
|
+
Object.defineProperty(_assertThisInitialized(_this), "returnParentId", {
|
|
91
127
|
configurable: true,
|
|
92
128
|
enumerable: true,
|
|
93
129
|
writable: true,
|
|
94
|
-
value: {
|
|
95
|
-
|
|
96
|
-
|
|
130
|
+
value: function value(nodeId) {
|
|
131
|
+
var parentId = Object.keys(_this.idsWithChildren).find(function (id) {
|
|
132
|
+
return _this.idsWithChildren[id].find(function (childId) {
|
|
133
|
+
return childId === nodeId;
|
|
134
|
+
});
|
|
135
|
+
});
|
|
136
|
+
return Number(parentId);
|
|
97
137
|
}
|
|
98
|
-
})
|
|
138
|
+
});
|
|
139
|
+
Object.defineProperty(_assertThisInitialized(_this), "returnAllAncestryIds", {
|
|
99
140
|
configurable: true,
|
|
100
141
|
enumerable: true,
|
|
101
142
|
writable: true,
|
|
102
|
-
value: function value() {
|
|
103
|
-
|
|
104
|
-
|
|
143
|
+
value: function value(nodeId) {
|
|
144
|
+
var ancestryIds = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
|
|
145
|
+
|
|
146
|
+
var parentId = _this.returnParentId(nodeId);
|
|
147
|
+
|
|
148
|
+
if (parentId) {
|
|
149
|
+
var currentAncestryIds = [].concat(_toConsumableArray(ancestryIds), [Number(parentId)]);
|
|
150
|
+
return _this.returnAllAncestryIds(Number(parentId), currentAncestryIds);
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
return ancestryIds;
|
|
154
|
+
}
|
|
155
|
+
});
|
|
156
|
+
Object.defineProperty(_assertThisInitialized(_this), "returnChildrenIds", {
|
|
157
|
+
configurable: true,
|
|
158
|
+
enumerable: true,
|
|
159
|
+
writable: true,
|
|
160
|
+
value: function value(nodeId) {
|
|
161
|
+
var returnRequiredIds = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
|
162
|
+
var nodeChildrenIds = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
|
|
163
|
+
var requiredIds = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
|
|
164
|
+
|
|
165
|
+
if (_this.idsWithChildren[nodeId] !== undefined) {
|
|
166
|
+
nodeChildrenIds.push(nodeId);
|
|
167
|
+
if (returnRequiredIds) requiredIds.push(nodeId);
|
|
168
|
+
|
|
169
|
+
_this.idsWithChildren[nodeId].forEach(function (childId) {
|
|
170
|
+
return _this.returnChildrenIds(childId, returnRequiredIds, nodeChildrenIds, requiredIds);
|
|
171
|
+
});
|
|
172
|
+
} else nodeChildrenIds.push(nodeId);
|
|
173
|
+
|
|
174
|
+
return returnRequiredIds ? {
|
|
175
|
+
nodeChildrenIds: nodeChildrenIds,
|
|
176
|
+
requiredIds: requiredIds
|
|
177
|
+
} : nodeChildrenIds;
|
|
178
|
+
}
|
|
179
|
+
});
|
|
180
|
+
Object.defineProperty(_assertThisInitialized(_this), "returnRequiredAncestryIds", {
|
|
181
|
+
configurable: true,
|
|
182
|
+
enumerable: true,
|
|
183
|
+
writable: true,
|
|
184
|
+
value: function value(nodeId) {
|
|
185
|
+
var requiredAncestryIds = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
|
|
186
|
+
var previousParentId = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
|
|
187
|
+
var selectedSiblingsIds = [];
|
|
188
|
+
var selectedIds = _this.state.selectedIds;
|
|
189
|
+
|
|
190
|
+
var parentId = _this.returnParentId(nodeId);
|
|
191
|
+
|
|
192
|
+
if (parentId) {
|
|
193
|
+
var nodeSiblingsIds = _this.idsWithChildren[parentId].filter(function (childId) {
|
|
194
|
+
return childId !== nodeId;
|
|
195
|
+
});
|
|
196
|
+
|
|
197
|
+
var isPreviousParentSelected = selectedIds.includes(previousParentId);
|
|
198
|
+
|
|
199
|
+
if (nodeSiblingsIds && nodeSiblingsIds.length > 0) {
|
|
200
|
+
selectedSiblingsIds = selectedIds.filter(function (id) {
|
|
201
|
+
return nodeSiblingsIds.includes(id);
|
|
202
|
+
});
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
var requiredIds = isPreviousParentSelected || selectedSiblingsIds.length > 0 ? _toConsumableArray(requiredAncestryIds) : [].concat(_toConsumableArray(requiredAncestryIds), [parentId]);
|
|
206
|
+
|
|
207
|
+
if (selectedSiblingsIds.length === 0 && !isPreviousParentSelected) {
|
|
208
|
+
return _this.returnRequiredAncestryIds(parentId, requiredIds, parentId);
|
|
209
|
+
}
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
return requiredAncestryIds;
|
|
213
|
+
}
|
|
214
|
+
});
|
|
215
|
+
Object.defineProperty(_assertThisInitialized(_this), "toggleCheckChildren", {
|
|
216
|
+
configurable: true,
|
|
217
|
+
enumerable: true,
|
|
218
|
+
writable: true,
|
|
219
|
+
value: function value(nodeId, check) {
|
|
220
|
+
var required = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
|
|
221
|
+
|
|
222
|
+
_this.setState({
|
|
223
|
+
isHandlingSelectedIds: true
|
|
224
|
+
}, function () {
|
|
225
|
+
_this.updateSelectedIds(nodeId, check, true, required);
|
|
226
|
+
});
|
|
227
|
+
}
|
|
228
|
+
});
|
|
229
|
+
Object.defineProperty(_assertThisInitialized(_this), "checkAllAncestry", {
|
|
230
|
+
configurable: true,
|
|
231
|
+
enumerable: true,
|
|
232
|
+
writable: true,
|
|
233
|
+
value: function value(nodeId, codigos) {
|
|
234
|
+
var returnRequiredParentsIds = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
|
|
235
|
+
var updateState = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
|
|
236
|
+
var selectedIds = _this.state.selectedIds;
|
|
237
|
+
var requiredParentsIds = _this.state.requiredParentsIds;
|
|
238
|
+
|
|
239
|
+
var nodeAncestryIds = _this.returnAllAncestryIds(nodeId);
|
|
240
|
+
|
|
241
|
+
var notRequiredAncestryIds = nodeAncestryIds.filter(function (id) {
|
|
242
|
+
return !requiredParentsIds.includes(id);
|
|
243
|
+
});
|
|
244
|
+
var notSelectedAncestryIds = nodeAncestryIds.filter(function (id) {
|
|
245
|
+
return !selectedIds.includes(id);
|
|
246
|
+
});
|
|
247
|
+
selectedIds = [].concat(_toConsumableArray(selectedIds), _toConsumableArray(codigos), _toConsumableArray(notSelectedAncestryIds));
|
|
248
|
+
requiredParentsIds = [].concat(_toConsumableArray(requiredParentsIds), _toConsumableArray(notRequiredAncestryIds));
|
|
249
|
+
if (updateState) _this.setState({
|
|
250
|
+
requiredParentsIds: requiredParentsIds
|
|
251
|
+
});
|
|
252
|
+
return !returnRequiredParentsIds ? selectedIds : {
|
|
253
|
+
updatedIdsWithAncestryIds: selectedIds,
|
|
254
|
+
requiredParentsIds: requiredParentsIds
|
|
255
|
+
};
|
|
256
|
+
}
|
|
257
|
+
});
|
|
258
|
+
Object.defineProperty(_assertThisInitialized(_this), "updateAncestryAndSelectedIds", {
|
|
259
|
+
configurable: true,
|
|
260
|
+
enumerable: true,
|
|
261
|
+
writable: true,
|
|
262
|
+
value: function value(nodeId, codigos, requiredParentsIds) {
|
|
263
|
+
var selectedIds = _this.state.selectedIds;
|
|
264
|
+
|
|
265
|
+
var ancestryIds = _this.returnRequiredAncestryIds(nodeId);
|
|
266
|
+
|
|
267
|
+
var remainRequiredParentsIds = requiredParentsIds.filter(function (id) {
|
|
268
|
+
return !ancestryIds.includes(id);
|
|
269
|
+
});
|
|
270
|
+
selectedIds = selectedIds.filter(function (selectedId) {
|
|
271
|
+
return !codigos.includes(selectedId);
|
|
272
|
+
});
|
|
273
|
+
|
|
274
|
+
_this.setState({
|
|
275
|
+
requiredParentsIds: remainRequiredParentsIds
|
|
105
276
|
});
|
|
277
|
+
|
|
278
|
+
return selectedIds;
|
|
106
279
|
}
|
|
107
|
-
})
|
|
280
|
+
});
|
|
281
|
+
Object.defineProperty(_assertThisInitialized(_this), "checkAllChildren", {
|
|
108
282
|
configurable: true,
|
|
109
283
|
enumerable: true,
|
|
110
284
|
writable: true,
|
|
111
|
-
value: function value(
|
|
285
|
+
value: function value(nodeId) {
|
|
286
|
+
var returnRequiredIds = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
|
287
|
+
var currentRequiredIds = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
|
|
288
|
+
var _this$state = _this.state,
|
|
289
|
+
selectedIds = _this$state.selectedIds,
|
|
290
|
+
requiredParentsIds = _this$state.requiredParentsIds;
|
|
291
|
+
var childrenIds;
|
|
292
|
+
|
|
293
|
+
if (returnRequiredIds) {
|
|
294
|
+
var _this$returnChildrenI = _this.returnChildrenIds(nodeId, returnRequiredIds),
|
|
295
|
+
nodeChildrenIds = _this$returnChildrenI.nodeChildrenIds,
|
|
296
|
+
requiredIds = _this$returnChildrenI.requiredIds;
|
|
297
|
+
|
|
298
|
+
var newRequiredIds = requiredIds.filter(function (id) {
|
|
299
|
+
return !currentRequiredIds.includes(id);
|
|
300
|
+
});
|
|
301
|
+
requiredParentsIds = [].concat(_toConsumableArray(currentRequiredIds), _toConsumableArray(newRequiredIds));
|
|
302
|
+
childrenIds = nodeChildrenIds;
|
|
303
|
+
} else childrenIds = _this.returnChildrenIds(nodeId);
|
|
304
|
+
|
|
305
|
+
var notSelectedChildrenIds = childrenIds.filter(function (id) {
|
|
306
|
+
return !selectedIds.includes(id);
|
|
307
|
+
});
|
|
308
|
+
selectedIds = [].concat(_toConsumableArray(selectedIds), _toConsumableArray(notSelectedChildrenIds));
|
|
309
|
+
|
|
310
|
+
_this.setState({
|
|
311
|
+
isHandlingSelectedIds: false,
|
|
312
|
+
requiredParentsIds: requiredParentsIds
|
|
313
|
+
});
|
|
314
|
+
|
|
315
|
+
return selectedIds;
|
|
316
|
+
}
|
|
317
|
+
});
|
|
318
|
+
Object.defineProperty(_assertThisInitialized(_this), "uncheckAllChildren", {
|
|
319
|
+
configurable: true,
|
|
320
|
+
enumerable: true,
|
|
321
|
+
writable: true,
|
|
322
|
+
value: function value(nodeId) {
|
|
323
|
+
var remainSelectedIds = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
|
|
324
|
+
var selectedIds = remainSelectedIds.length > 0 ? remainSelectedIds : _this.state.selectedIds;
|
|
325
|
+
|
|
326
|
+
var childrenIds = _this.returnChildrenIds(nodeId);
|
|
327
|
+
|
|
328
|
+
selectedIds = selectedIds.filter(function (selectedId) {
|
|
329
|
+
return !childrenIds.includes(selectedId);
|
|
330
|
+
});
|
|
331
|
+
|
|
332
|
+
_this.setState({
|
|
333
|
+
isHandlingSelectedIds: false
|
|
334
|
+
});
|
|
335
|
+
|
|
336
|
+
return selectedIds;
|
|
337
|
+
}
|
|
338
|
+
});
|
|
339
|
+
Object.defineProperty(_assertThisInitialized(_this), "uncheckRequiredChildren", {
|
|
340
|
+
configurable: true,
|
|
341
|
+
enumerable: true,
|
|
342
|
+
writable: true,
|
|
343
|
+
value: function value(nodeId, codigos, requiredParentsIds) {
|
|
344
|
+
var childrenIds = _this.returnChildrenIds(nodeId);
|
|
345
|
+
|
|
346
|
+
var remainRequiredIds = requiredParentsIds.filter(function (id) {
|
|
347
|
+
return !childrenIds.includes(id);
|
|
348
|
+
});
|
|
349
|
+
|
|
350
|
+
_this.setState({
|
|
351
|
+
requiredParentsIds: _toConsumableArray(remainRequiredIds)
|
|
352
|
+
}, function () {
|
|
353
|
+
return _this.updateAncestryAndSelectedIds(nodeId, codigos, remainRequiredIds);
|
|
354
|
+
});
|
|
355
|
+
}
|
|
356
|
+
});
|
|
357
|
+
Object.defineProperty(_assertThisInitialized(_this), "handleOnNodeOpen", {
|
|
358
|
+
configurable: true,
|
|
359
|
+
enumerable: true,
|
|
360
|
+
writable: true,
|
|
361
|
+
value: function value(node) {
|
|
362
|
+
var id = node.id;
|
|
363
|
+
var onNodeOpen = _this.props.onNodeOpen;
|
|
364
|
+
var alreadyOpenedIds = _this.state.alreadyOpenedIds;
|
|
365
|
+
|
|
366
|
+
if (!alreadyOpenedIds.includes(id) && onNodeOpen) {
|
|
367
|
+
alreadyOpenedIds = [].concat(_toConsumableArray(alreadyOpenedIds), [id]);
|
|
368
|
+
onNodeOpen(node);
|
|
369
|
+
}
|
|
370
|
+
|
|
371
|
+
_this.setState({
|
|
372
|
+
alreadyOpenedIds: alreadyOpenedIds
|
|
373
|
+
});
|
|
374
|
+
}
|
|
375
|
+
});
|
|
376
|
+
Object.defineProperty(_assertThisInitialized(_this), "handleCheck", {
|
|
377
|
+
configurable: true,
|
|
378
|
+
enumerable: true,
|
|
379
|
+
writable: true,
|
|
380
|
+
value: function value(nodeId, isParent) {
|
|
381
|
+
var selectedIds = _this.state.selectedIds;
|
|
382
|
+
var codigos = _lodash["default"].isArray(nodeId) ? nodeId : [nodeId];
|
|
383
|
+
var isHandlingSelectedIds = _this.state.isHandlingSelectedIds;
|
|
384
|
+
var _this$props = _this.props,
|
|
385
|
+
allowCheckAllChildren = _this$props.allowCheckAllChildren,
|
|
386
|
+
allowCheckAllAncestry = _this$props.allowCheckAllAncestry;
|
|
387
|
+
selectedIds = [].concat(_toConsumableArray(selectedIds), _toConsumableArray(codigos));
|
|
388
|
+
|
|
389
|
+
if (isParent && isHandlingSelectedIds && allowCheckAllChildren) {
|
|
390
|
+
if (allowCheckAllAncestry) {
|
|
391
|
+
var _this$checkAllAncestr2 = _this.checkAllAncestry(nodeId, codigos, true),
|
|
392
|
+
updatedIdsWithAncestryIds = _this$checkAllAncestr2.updatedIdsWithAncestryIds,
|
|
393
|
+
requiredParentsIds = _this$checkAllAncestr2.requiredParentsIds;
|
|
394
|
+
|
|
395
|
+
var updatedIdsWithChidlrenIds = _this.checkAllChildren(nodeId, true, requiredParentsIds);
|
|
396
|
+
|
|
397
|
+
selectedIds = [].concat(_toConsumableArray(updatedIdsWithAncestryIds), _toConsumableArray(updatedIdsWithChidlrenIds));
|
|
398
|
+
} else selectedIds = _this.checkAllChildren(nodeId);
|
|
399
|
+
} else if (allowCheckAllAncestry) {
|
|
400
|
+
selectedIds = _this.checkAllAncestry(nodeId, codigos);
|
|
401
|
+
}
|
|
402
|
+
|
|
403
|
+
return selectedIds;
|
|
404
|
+
}
|
|
405
|
+
});
|
|
406
|
+
Object.defineProperty(_assertThisInitialized(_this), "handleUncheck", {
|
|
407
|
+
configurable: true,
|
|
408
|
+
enumerable: true,
|
|
409
|
+
writable: true,
|
|
410
|
+
value: function value(nodeId, isParent, required) {
|
|
411
|
+
var selectedIds = _this.state.selectedIds;
|
|
412
|
+
var _this$state2 = _this.state,
|
|
413
|
+
isHandlingSelectedIds = _this$state2.isHandlingSelectedIds,
|
|
414
|
+
requiredParentsIds = _this$state2.requiredParentsIds;
|
|
415
|
+
var _this$props2 = _this.props,
|
|
416
|
+
allowCheckAllChildren = _this$props2.allowCheckAllChildren,
|
|
417
|
+
allowCheckAllAncestry = _this$props2.allowCheckAllAncestry;
|
|
418
|
+
var codigos = _lodash["default"].isArray(nodeId) ? nodeId : [nodeId];
|
|
419
|
+
selectedIds = selectedIds.filter(function (id) {
|
|
420
|
+
return !codigos.includes(id);
|
|
421
|
+
});
|
|
422
|
+
|
|
423
|
+
if (isParent && isHandlingSelectedIds && allowCheckAllChildren) {
|
|
424
|
+
if (allowCheckAllAncestry) {
|
|
425
|
+
var updatedSelectedIds = _this.updateAncestryAndSelectedIds(nodeId, codigos, requiredParentsIds);
|
|
426
|
+
|
|
427
|
+
selectedIds = _this.uncheckAllChildren(nodeId, updatedSelectedIds);
|
|
428
|
+
if (required) _this.uncheckRequiredChildren(nodeId, codigos, requiredParentsIds);
|
|
429
|
+
} else selectedIds = _this.uncheckAllChildren(nodeId);
|
|
430
|
+
} else if (allowCheckAllAncestry) {
|
|
431
|
+
selectedIds = _this.updateAncestryAndSelectedIds(nodeId, codigos, requiredParentsIds);
|
|
432
|
+
}
|
|
433
|
+
|
|
434
|
+
return selectedIds;
|
|
435
|
+
}
|
|
436
|
+
});
|
|
437
|
+
Object.defineProperty(_assertThisInitialized(_this), "updateSelectedIds", {
|
|
438
|
+
configurable: true,
|
|
439
|
+
enumerable: true,
|
|
440
|
+
writable: true,
|
|
441
|
+
value: function value(nodeId, checked, isParent, required) {
|
|
112
442
|
var selectedIds = _this.state.selectedIds;
|
|
113
443
|
var onSelectedIdsChange = _this.props.onSelectedIdsChange;
|
|
114
|
-
var codigos = _lodash["default"].isArray(ids) ? ids : [ids];
|
|
115
444
|
|
|
116
445
|
if (checked) {
|
|
117
|
-
selectedIds =
|
|
446
|
+
selectedIds = _this.handleCheck(nodeId, isParent);
|
|
118
447
|
} else {
|
|
119
|
-
selectedIds =
|
|
120
|
-
return !codigos.includes(id);
|
|
121
|
-
});
|
|
448
|
+
selectedIds = _this.handleUncheck(nodeId, isParent, required);
|
|
122
449
|
}
|
|
123
450
|
|
|
124
451
|
_this.setState({
|
|
@@ -127,37 +454,100 @@ var TreeView = /*#__PURE__*/function (_Component) {
|
|
|
127
454
|
|
|
128
455
|
if (onSelectedIdsChange) onSelectedIdsChange(selectedIds);
|
|
129
456
|
}
|
|
130
|
-
})
|
|
457
|
+
});
|
|
458
|
+
Object.defineProperty(_assertThisInitialized(_this), "buildTree", {
|
|
131
459
|
configurable: true,
|
|
132
460
|
enumerable: true,
|
|
133
461
|
writable: true,
|
|
134
462
|
value: function value(node) {
|
|
135
463
|
var parentId = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
|
|
136
|
-
var
|
|
464
|
+
var ids = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
|
|
465
|
+
var _this$props3 = _this.props,
|
|
466
|
+
nodeRightElements = _this$props3.nodeRightElements,
|
|
467
|
+
onNodeClick = _this$props3.onNodeClick,
|
|
468
|
+
nodeElementsValidations = _this$props3.nodeElementsValidations,
|
|
469
|
+
nodeToolbarElements = _this$props3.nodeToolbarElements,
|
|
470
|
+
nodeMenuButtonSize = _this$props3.nodeMenuButtonSize,
|
|
471
|
+
alwaysShowArrow = _this$props3.alwaysShowArrow,
|
|
472
|
+
startNodesOpened = _this$props3.startNodesOpened,
|
|
473
|
+
idsInLoading = _this$props3.idsInLoading,
|
|
474
|
+
selectedNodeId = _this$props3.selectedNodeId;
|
|
137
475
|
var childrenIds = [];
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
476
|
+
|
|
477
|
+
if (node.itens && node.itens.length > 0) {
|
|
478
|
+
childrenIds = node.itens.map(function (i) {
|
|
479
|
+
return i.id;
|
|
480
|
+
});
|
|
481
|
+
|
|
482
|
+
if (ids) {
|
|
483
|
+
var idWithChildren = {};
|
|
484
|
+
idWithChildren[node.id] = childrenIds;
|
|
485
|
+
Object.assign(ids, idWithChildren);
|
|
486
|
+
}
|
|
487
|
+
}
|
|
488
|
+
|
|
141
489
|
return /*#__PURE__*/_react["default"].createElement(_Node["default"], {
|
|
142
490
|
key: "node-".concat(node.id),
|
|
143
491
|
node: node,
|
|
492
|
+
idsInLoading: idsInLoading,
|
|
493
|
+
startNodesOpened: startNodesOpened,
|
|
494
|
+
alwaysShowArrow: alwaysShowArrow,
|
|
144
495
|
childrenIds: childrenIds,
|
|
145
|
-
|
|
496
|
+
isParent: node.itens && node.itens.length > 0,
|
|
497
|
+
parentId: parentId,
|
|
498
|
+
nodeRightElements: nodeRightElements,
|
|
499
|
+
nodeToolbarElements: nodeToolbarElements,
|
|
500
|
+
nodeElementsValidations: nodeElementsValidations,
|
|
501
|
+
nodeMenuButtonSize: nodeMenuButtonSize,
|
|
502
|
+
onNodeClick: onNodeClick,
|
|
503
|
+
selectedNodeId: selectedNodeId,
|
|
504
|
+
handlerOnNodeOpen: _this.handleOnNodeOpen
|
|
146
505
|
}, childrenIds.length > 0 && node.itens.map(function (nodeitem) {
|
|
147
|
-
return _this.buildTree(nodeitem,
|
|
506
|
+
return _this.buildTree(nodeitem, node.id, ids);
|
|
148
507
|
}));
|
|
149
508
|
}
|
|
150
|
-
})
|
|
509
|
+
});
|
|
510
|
+
_this.idsWithChildren = {};
|
|
511
|
+
_this.state = {
|
|
512
|
+
data: _this.props.data,
|
|
513
|
+
propSelectedIds: _this.props.selectedIds,
|
|
514
|
+
selectedIds: _this.props.selectedIds,
|
|
515
|
+
isHandlingSelectedIds: false,
|
|
516
|
+
requiredParentsIds: [],
|
|
517
|
+
alreadyOpenedIds: [],
|
|
518
|
+
selectedIdsUpdatedOnMount: false
|
|
519
|
+
};
|
|
520
|
+
return _this;
|
|
151
521
|
}
|
|
152
522
|
|
|
153
523
|
_createClass(TreeView, [{
|
|
524
|
+
key: "componentDidMount",
|
|
525
|
+
value: function componentDidMount() {
|
|
526
|
+
this.buildTree(this.state.data, undefined, this.idsWithChildren);
|
|
527
|
+
}
|
|
528
|
+
}, {
|
|
529
|
+
key: "componentDidUpdate",
|
|
530
|
+
value: function componentDidUpdate(prevProps, prevState) {
|
|
531
|
+
var _this$state3 = this.state,
|
|
532
|
+
selectedIds = _this$state3.selectedIds,
|
|
533
|
+
propSelectedIds = _this$state3.propSelectedIds,
|
|
534
|
+
selectedIdsUpdatedOnMount = _this$state3.selectedIdsUpdatedOnMount;
|
|
535
|
+
var allowCheckAllAncestry = this.props.allowCheckAllAncestry;
|
|
536
|
+
|
|
537
|
+
var isSameSelectedIds = _lodash["default"].isEqual(propSelectedIds.sort(), prevState.propSelectedIds.sort());
|
|
538
|
+
|
|
539
|
+
if (allowCheckAllAncestry && (!selectedIdsUpdatedOnMount || !isSameSelectedIds)) {
|
|
540
|
+
this.handleNewSelectedIds(selectedIds);
|
|
541
|
+
}
|
|
542
|
+
}
|
|
543
|
+
}, {
|
|
154
544
|
key: "render",
|
|
155
545
|
value: function render() {
|
|
156
|
-
var _this$
|
|
157
|
-
customClass = _this$
|
|
158
|
-
bordered = _this$
|
|
159
|
-
children = _this$
|
|
160
|
-
styleForContainer = _this$
|
|
546
|
+
var _this$props4 = this.props,
|
|
547
|
+
customClass = _this$props4.customClass,
|
|
548
|
+
bordered = _this$props4.bordered,
|
|
549
|
+
children = _this$props4.children,
|
|
550
|
+
styleForContainer = _this$props4.styleForContainer;
|
|
161
551
|
var data = this.state.data;
|
|
162
552
|
return /*#__PURE__*/_react["default"].createElement(_constants.TreeviewContext.Provider, {
|
|
163
553
|
value: this.getContextValues()
|
|
@@ -168,6 +558,29 @@ var TreeView = /*#__PURE__*/function (_Component) {
|
|
|
168
558
|
className: "treeviewcontainer ".concat(bordered && '-bordered')
|
|
169
559
|
}, this.buildTree(data))));
|
|
170
560
|
}
|
|
561
|
+
}], [{
|
|
562
|
+
key: "getDerivedStateFromProps",
|
|
563
|
+
value: function getDerivedStateFromProps(props, state) {
|
|
564
|
+
var data = props.data,
|
|
565
|
+
selectedIds = props.selectedIds,
|
|
566
|
+
enableDynamicData = props.enableDynamicData;
|
|
567
|
+
var propSelectedIds = state.propSelectedIds;
|
|
568
|
+
|
|
569
|
+
var isSameSelectedIds = _lodash["default"].isEqual(propSelectedIds.sort(), selectedIds.sort());
|
|
570
|
+
|
|
571
|
+
if (enableDynamicData && data !== state.data) {
|
|
572
|
+
return {
|
|
573
|
+
data: data
|
|
574
|
+
};
|
|
575
|
+
} else if (!isSameSelectedIds) {
|
|
576
|
+
return {
|
|
577
|
+
selectedIds: selectedIds,
|
|
578
|
+
propSelectedIds: selectedIds
|
|
579
|
+
};
|
|
580
|
+
}
|
|
581
|
+
|
|
582
|
+
return null;
|
|
583
|
+
}
|
|
171
584
|
}]);
|
|
172
585
|
|
|
173
586
|
return TreeView;
|
|
@@ -181,23 +594,49 @@ TreeView.propTypes = {
|
|
|
181
594
|
labelPropName: _propTypes["default"].string.isRequired,
|
|
182
595
|
parentPropName: _propTypes["default"].string.isRequired,
|
|
183
596
|
startNodesOpened: _propTypes["default"].bool,
|
|
597
|
+
alwaysShowArrow: _propTypes["default"].bool,
|
|
184
598
|
selectedIds: _propTypes["default"].arrayOf(_propTypes["default"].number),
|
|
185
|
-
requiredIds: _propTypes["default"].arrayOf(_propTypes["default"].number),
|
|
599
|
+
requiredIds: _propTypes["default"].arrayOf(_propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])),
|
|
186
600
|
showCheckBox: _propTypes["default"].bool,
|
|
187
601
|
onSelectedIdsChange: _propTypes["default"].func,
|
|
188
602
|
children: _propTypes["default"].instanceOf(Object),
|
|
189
|
-
styleForContainer: _propTypes["default"].object
|
|
603
|
+
styleForContainer: _propTypes["default"].object,
|
|
604
|
+
allowCheckAllChildren: _propTypes["default"].bool,
|
|
605
|
+
allowCheckAllAncestry: _propTypes["default"].bool,
|
|
606
|
+
defaultDisabledTooltip: _propTypes["default"].string,
|
|
607
|
+
nodeRightElements: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].object), _propTypes["default"].element, _propTypes["default"].object]),
|
|
608
|
+
nodeToolbarElements: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].object), _propTypes["default"].element, _propTypes["default"].object]),
|
|
609
|
+
nodeMenuButtonSize: _propTypes["default"].oneOf(['mini', 'small', 'medium', 'large', 'default']),
|
|
610
|
+
onNodeClick: _propTypes["default"].func,
|
|
611
|
+
onNodeOpen: _propTypes["default"].func,
|
|
612
|
+
nodeElementsValidations: _propTypes["default"].object,
|
|
613
|
+
enableDynamicData: _propTypes["default"].bool,
|
|
614
|
+
idsInLoading: _propTypes["default"].arrayOf(_propTypes["default"].number),
|
|
615
|
+
selectedNodeId: _propTypes["default"].number
|
|
190
616
|
};
|
|
191
617
|
TreeView.defaultProps = {
|
|
192
618
|
customClass: '',
|
|
193
619
|
bordered: false,
|
|
194
620
|
startNodesOpened: false,
|
|
621
|
+
alwaysShowArrow: false,
|
|
195
622
|
selectedIds: [],
|
|
196
623
|
requiredIds: [],
|
|
197
624
|
showCheckBox: false,
|
|
198
625
|
onSelectedIdsChange: undefined,
|
|
199
626
|
children: undefined,
|
|
200
|
-
styleForContainer: {}
|
|
627
|
+
styleForContainer: {},
|
|
628
|
+
allowCheckAllChildren: false,
|
|
629
|
+
allowCheckAllAncestry: false,
|
|
630
|
+
defaultDisabledTooltip: '',
|
|
631
|
+
nodeRightElements: undefined,
|
|
632
|
+
nodeToolbarElements: undefined,
|
|
633
|
+
nodeMenuButtonSize: 'small',
|
|
634
|
+
onNodeClick: undefined,
|
|
635
|
+
onNodeOpen: undefined,
|
|
636
|
+
nodeElementsValidations: undefined,
|
|
637
|
+
enableDynamicData: false,
|
|
638
|
+
idsInLoading: [],
|
|
639
|
+
selectedNodeId: undefined
|
|
201
640
|
};
|
|
202
641
|
var _default = TreeView;
|
|
203
642
|
exports["default"] = _default;
|
|
@@ -257,5 +257,23 @@ describe('Treeview', function () {
|
|
|
257
257
|
|
|
258
258
|
expect(container.querySelector('ul')).toHaveStyle('background-color: #000');
|
|
259
259
|
});
|
|
260
|
+
it('should apply idsInLoading', function () {
|
|
261
|
+
var _render13 = (0, _react.render)(treeviewRenderMock({
|
|
262
|
+
idsInLoading: [1]
|
|
263
|
+
})),
|
|
264
|
+
container = _render13.container;
|
|
265
|
+
|
|
266
|
+
var li = container.querySelector('li').firstChild;
|
|
267
|
+
expect(li.firstChild).toHaveClass('spinnerloading');
|
|
268
|
+
});
|
|
269
|
+
it('should apply selectedNodeId', function () {
|
|
270
|
+
var _render14 = (0, _react.render)(treeviewRenderMock({
|
|
271
|
+
selectedNodeId: 1
|
|
272
|
+
})),
|
|
273
|
+
container = _render14.container;
|
|
274
|
+
|
|
275
|
+
var filhosLi = container.querySelector('li').children;
|
|
276
|
+
expect(filhosLi[1]).toHaveStyle('background-color: rgb(209, 209, 209)');
|
|
277
|
+
});
|
|
260
278
|
});
|
|
261
279
|
});
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.STEP_POSITIONS = exports.ARROW_HEIGHT = exports.ARROW_WIDTH = void 0;
|
|
7
|
+
var ARROW_WIDTH = 26;
|
|
8
|
+
exports.ARROW_WIDTH = ARROW_WIDTH;
|
|
9
|
+
var ARROW_HEIGHT = 20;
|
|
10
|
+
exports.ARROW_HEIGHT = ARROW_HEIGHT;
|
|
11
|
+
var STEP_POSITIONS = {
|
|
12
|
+
right: 'right',
|
|
13
|
+
left: 'left'
|
|
14
|
+
};
|
|
15
|
+
exports.STEP_POSITIONS = STEP_POSITIONS;
|