superdesk-ui-framework 3.0.6 → 3.0.7
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/app/styles/_sd-tag-input.scss +29 -10
- package/app-typescript/components/MultiSelect.tsx +2 -3
- package/app-typescript/components/TreeSelect.tsx +506 -243
- package/dist/examples.bundle.js +385 -143
- package/dist/react/Dropdowns.tsx +134 -85
- package/dist/react/MultiSelect.tsx +2 -2
- package/dist/react/TreeSelect.tsx +39 -27
- package/dist/superdesk-ui.bundle.css +26 -9
- package/dist/superdesk-ui.bundle.js +283 -104
- package/examples/pages/react/Dropdowns.tsx +134 -85
- package/examples/pages/react/MultiSelect.tsx +2 -2
- package/examples/pages/react/TreeSelect.tsx +39 -27
- package/package.json +2 -2
- package/react/components/MultiSelect.d.ts +1 -1
- package/react/components/MultiSelect.js +1 -1
- package/react/components/TreeSelect.d.ts +17 -9
- package/react/components/TreeSelect.js +249 -74
|
@@ -61,30 +61,51 @@ var TreeSelect = /** @class */ (function (_super) {
|
|
|
61
61
|
function TreeSelect(props) {
|
|
62
62
|
var _this = _super.call(this, props) || this;
|
|
63
63
|
_this.htmlId = (0, react_id_generator_1.default)();
|
|
64
|
+
_this.inputFocus = function () {
|
|
65
|
+
var _a;
|
|
66
|
+
(_a = _this.inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
67
|
+
};
|
|
68
|
+
_this.listNavigation = function () {
|
|
69
|
+
var element = document.querySelector('.suggestion-item--btn');
|
|
70
|
+
element.focus();
|
|
71
|
+
};
|
|
72
|
+
_this.buttonFocus = function () {
|
|
73
|
+
var _a;
|
|
74
|
+
(_a = _this.categoryButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
75
|
+
};
|
|
64
76
|
_this.componentDidMount = function () {
|
|
65
77
|
_this.recursion(_this.state.options);
|
|
66
78
|
document.addEventListener("mousedown", function (event) {
|
|
79
|
+
if (!(event.target instanceof HTMLInputElement)) {
|
|
80
|
+
return;
|
|
81
|
+
}
|
|
67
82
|
if ((_this.dropdownRef.current && !_this.dropdownRef.current.contains(event.target))
|
|
68
83
|
&& (_this.openDropdownRef.current && !_this.openDropdownRef.current.contains(event.target))) {
|
|
69
84
|
_this.setState({ openDropdown: false });
|
|
70
85
|
}
|
|
71
86
|
});
|
|
87
|
+
document.addEventListener("keydown", function (e) {
|
|
88
|
+
if (_this.state.openDropdown && _this.ref.current) {
|
|
89
|
+
keyboardNavigation(e, _this.ref.current, _this.categoryButtonRef.current ? _this.buttonFocus : _this.inputFocus);
|
|
90
|
+
if (e.key === 'Backspace') {
|
|
91
|
+
_this.backButton();
|
|
92
|
+
var buttonTarget = _this.state.buttonTarget;
|
|
93
|
+
var className = buttonTarget.pop();
|
|
94
|
+
if (className != null) {
|
|
95
|
+
var element = document.getElementsByClassName(className)[0];
|
|
96
|
+
element.focus();
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
});
|
|
72
101
|
};
|
|
73
|
-
_this.
|
|
74
|
-
|
|
102
|
+
_this.backButtonValue = function () {
|
|
103
|
+
var item = _this.state.buttonTree.pop();
|
|
104
|
+
if (item != null) {
|
|
75
105
|
_this.setState({
|
|
76
|
-
|
|
106
|
+
buttonValue: item,
|
|
77
107
|
});
|
|
78
|
-
return;
|
|
79
108
|
}
|
|
80
|
-
else {
|
|
81
|
-
return false;
|
|
82
|
-
}
|
|
83
|
-
};
|
|
84
|
-
_this.backButtonValue = function () {
|
|
85
|
-
_this.setState({
|
|
86
|
-
buttonValue: _this.state.buttonTree.pop(),
|
|
87
|
-
});
|
|
88
109
|
};
|
|
89
110
|
_this.debounceFn = (0, debounce_1.default)(_this.handleDebounce, 500);
|
|
90
111
|
_this.state = {
|
|
@@ -95,11 +116,11 @@ var TreeSelect = /** @class */ (function (_super) {
|
|
|
95
116
|
filterArr: [],
|
|
96
117
|
searchFieldValue: '',
|
|
97
118
|
buttonTree: [],
|
|
98
|
-
buttonValue:
|
|
119
|
+
buttonValue: null,
|
|
99
120
|
buttonMouseEvent: false,
|
|
100
121
|
openDropdown: false,
|
|
101
122
|
loading: false,
|
|
102
|
-
|
|
123
|
+
buttonTarget: [],
|
|
103
124
|
};
|
|
104
125
|
_this.removeClick = _this.removeClick.bind(_this);
|
|
105
126
|
_this.handleMultiLevel = _this.handleMultiLevel.bind(_this);
|
|
@@ -108,14 +129,19 @@ var TreeSelect = /** @class */ (function (_super) {
|
|
|
108
129
|
_this.backButtonValue = _this.backButtonValue.bind(_this);
|
|
109
130
|
_this.handleTree = _this.handleTree.bind(_this);
|
|
110
131
|
_this.filteredItem = _this.filteredItem.bind(_this);
|
|
111
|
-
_this.
|
|
132
|
+
_this.branchButton = _this.branchButton.bind(_this);
|
|
112
133
|
_this.handleDebounce = _this.handleDebounce.bind(_this);
|
|
113
134
|
_this.toggleMenu = _this.toggleMenu.bind(_this);
|
|
114
135
|
_this.dropdownRef = React.createRef();
|
|
136
|
+
_this.ref = React.createRef();
|
|
137
|
+
_this.inputRef = React.createRef();
|
|
138
|
+
_this.categoryButtonRef = React.createRef();
|
|
115
139
|
_this.openDropdownRef = React.createRef();
|
|
140
|
+
_this.popperInstance = null;
|
|
116
141
|
return _this;
|
|
117
142
|
}
|
|
118
143
|
TreeSelect.prototype.componentDidUpdate = function (prevProps, prevState) {
|
|
144
|
+
var _a;
|
|
119
145
|
if (!(0, lodash_1.isEqual)(prevState.value, this.state.value)) {
|
|
120
146
|
this.props.onChange(this.state.value);
|
|
121
147
|
}
|
|
@@ -129,11 +155,13 @@ var TreeSelect = /** @class */ (function (_super) {
|
|
|
129
155
|
if ((prevState.activeTree !== this.state.activeTree)
|
|
130
156
|
|| (prevState.filterArr !== this.state.filterArr)
|
|
131
157
|
|| (prevState.options !== this.state.options)) {
|
|
132
|
-
this.popperInstance.update();
|
|
158
|
+
(_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.update();
|
|
133
159
|
}
|
|
134
160
|
}
|
|
135
161
|
};
|
|
136
162
|
TreeSelect.prototype.toggleMenu = function () {
|
|
163
|
+
var _this = this;
|
|
164
|
+
var _a, _b;
|
|
137
165
|
if (this.state.openDropdown) {
|
|
138
166
|
if (this.openDropdownRef.current && this.dropdownRef.current) {
|
|
139
167
|
this.popperInstance = (0, core_1.createPopper)(this.openDropdownRef.current, this.dropdownRef.current, {
|
|
@@ -148,6 +176,30 @@ var TreeSelect = /** @class */ (function (_super) {
|
|
|
148
176
|
],
|
|
149
177
|
});
|
|
150
178
|
}
|
|
179
|
+
(_a = this.inputRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('keydown', function (e) {
|
|
180
|
+
if (e.key === 'ArrowDown') {
|
|
181
|
+
e.preventDefault();
|
|
182
|
+
e.stopPropagation();
|
|
183
|
+
if (_this.categoryButtonRef.current) {
|
|
184
|
+
_this.buttonFocus();
|
|
185
|
+
}
|
|
186
|
+
else {
|
|
187
|
+
setTimeout(function () {
|
|
188
|
+
_this.listNavigation();
|
|
189
|
+
});
|
|
190
|
+
}
|
|
191
|
+
}
|
|
192
|
+
});
|
|
193
|
+
if (this.inputRef.current) {
|
|
194
|
+
this.inputFocus();
|
|
195
|
+
}
|
|
196
|
+
else {
|
|
197
|
+
var element = document.querySelector('.suggestion-item--btn');
|
|
198
|
+
element.focus();
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
else {
|
|
202
|
+
(_b = this.openDropdownRef.current) === null || _b === void 0 ? void 0 : _b.focus();
|
|
151
203
|
}
|
|
152
204
|
};
|
|
153
205
|
TreeSelect.prototype.removeClick = function (i) {
|
|
@@ -167,8 +219,12 @@ var TreeSelect = /** @class */ (function (_super) {
|
|
|
167
219
|
}
|
|
168
220
|
};
|
|
169
221
|
TreeSelect.prototype.handleButton = function (item) {
|
|
222
|
+
var buttonTreeNext = this.state.buttonTree;
|
|
223
|
+
if (this.state.buttonValue != null) {
|
|
224
|
+
buttonTreeNext = buttonTreeNext.concat(this.state.buttonValue);
|
|
225
|
+
}
|
|
170
226
|
this.setState({
|
|
171
|
-
buttonTree:
|
|
227
|
+
buttonTree: buttonTreeNext,
|
|
172
228
|
buttonValue: item,
|
|
173
229
|
});
|
|
174
230
|
};
|
|
@@ -183,10 +239,15 @@ var TreeSelect = /** @class */ (function (_super) {
|
|
|
183
239
|
}
|
|
184
240
|
if (!event.ctrlKey) {
|
|
185
241
|
if (this.props.getOptions) {
|
|
186
|
-
this.setState({
|
|
242
|
+
this.setState({
|
|
243
|
+
options: this.state.firstBranchOptions,
|
|
244
|
+
activeTree: [],
|
|
245
|
+
buttonTarget: [],
|
|
246
|
+
openDropdown: false,
|
|
247
|
+
});
|
|
187
248
|
}
|
|
188
249
|
else {
|
|
189
|
-
this.setState({ activeTree: [], openDropdown: false });
|
|
250
|
+
this.setState({ activeTree: [], buttonTarget: [], openDropdown: false });
|
|
190
251
|
}
|
|
191
252
|
}
|
|
192
253
|
this.setState({ buttonMouseEvent: false });
|
|
@@ -199,7 +260,12 @@ var TreeSelect = /** @class */ (function (_super) {
|
|
|
199
260
|
this.setState({ value: [item.value] });
|
|
200
261
|
}
|
|
201
262
|
if (!event.ctrlKey) {
|
|
202
|
-
this.setState({
|
|
263
|
+
this.setState({
|
|
264
|
+
options: this.state.firstBranchOptions,
|
|
265
|
+
activeTree: [],
|
|
266
|
+
buttonTarget: [],
|
|
267
|
+
openDropdown: false,
|
|
268
|
+
});
|
|
203
269
|
}
|
|
204
270
|
this.setState({ buttonMouseEvent: false });
|
|
205
271
|
}
|
|
@@ -215,7 +281,12 @@ var TreeSelect = /** @class */ (function (_super) {
|
|
|
215
281
|
this.setState({ value: __spreadArray(__spreadArray([], this.state.value, true), [item.value], false) });
|
|
216
282
|
}
|
|
217
283
|
if (!event.ctrlKey) {
|
|
218
|
-
this.setState({
|
|
284
|
+
this.setState({
|
|
285
|
+
options: this.state.firstBranchOptions,
|
|
286
|
+
activeTree: [],
|
|
287
|
+
buttonTarget: [],
|
|
288
|
+
openDropdown: false,
|
|
289
|
+
});
|
|
219
290
|
}
|
|
220
291
|
this.setState({ buttonMouseEvent: false });
|
|
221
292
|
}
|
|
@@ -229,7 +300,12 @@ var TreeSelect = /** @class */ (function (_super) {
|
|
|
229
300
|
this.setState({ value: [item.value] });
|
|
230
301
|
}
|
|
231
302
|
if (!event.ctrlKey) {
|
|
232
|
-
this.setState({
|
|
303
|
+
this.setState({
|
|
304
|
+
options: this.state.firstBranchOptions,
|
|
305
|
+
activeTree: [],
|
|
306
|
+
buttonTarget: [],
|
|
307
|
+
openDropdown: false,
|
|
308
|
+
});
|
|
233
309
|
}
|
|
234
310
|
this.setState({ buttonMouseEvent: false });
|
|
235
311
|
}
|
|
@@ -253,6 +329,7 @@ var TreeSelect = /** @class */ (function (_super) {
|
|
|
253
329
|
options: this.state.firstBranchOptions,
|
|
254
330
|
openDropdown: false,
|
|
255
331
|
activeTree: [],
|
|
332
|
+
buttonTarget: [],
|
|
256
333
|
});
|
|
257
334
|
}
|
|
258
335
|
else {
|
|
@@ -269,6 +346,7 @@ var TreeSelect = /** @class */ (function (_super) {
|
|
|
269
346
|
options: this.state.firstBranchOptions,
|
|
270
347
|
openDropdown: false,
|
|
271
348
|
activeTree: [],
|
|
349
|
+
buttonTarget: [],
|
|
272
350
|
});
|
|
273
351
|
}
|
|
274
352
|
}
|
|
@@ -280,6 +358,16 @@ var TreeSelect = /** @class */ (function (_super) {
|
|
|
280
358
|
this.setState({ openDropdown: false });
|
|
281
359
|
}
|
|
282
360
|
}
|
|
361
|
+
var element = document.querySelector('.suggestion-item--btn');
|
|
362
|
+
element.focus();
|
|
363
|
+
};
|
|
364
|
+
TreeSelect.prototype.backButton = function () {
|
|
365
|
+
var items = this.state.activeTree.pop();
|
|
366
|
+
if (items != null) {
|
|
367
|
+
this.setState({
|
|
368
|
+
options: items,
|
|
369
|
+
});
|
|
370
|
+
}
|
|
283
371
|
};
|
|
284
372
|
TreeSelect.prototype.recursion = function (arr) {
|
|
285
373
|
var _this = this;
|
|
@@ -315,7 +403,7 @@ var TreeSelect = /** @class */ (function (_super) {
|
|
|
315
403
|
var selectedItem = _this.state.value.some(function (obj) {
|
|
316
404
|
return _this.props.getId(obj) === _this.props.getId(option.value);
|
|
317
405
|
});
|
|
318
|
-
return React.createElement("li", { key: i, className: "suggestion-item suggestion-item--multi-select", onClick: function (event) {
|
|
406
|
+
return (React.createElement("li", { key: i, className: "suggestion-item suggestion-item--multi-select", onClick: function (event) {
|
|
319
407
|
_this.setState({
|
|
320
408
|
searchFieldValue: '',
|
|
321
409
|
}),
|
|
@@ -323,17 +411,19 @@ var TreeSelect = /** @class */ (function (_super) {
|
|
|
323
411
|
event.stopPropagation();
|
|
324
412
|
_this.handleTree(event, option);
|
|
325
413
|
} },
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
414
|
+
React.createElement("button", { className: "suggestion-item--btn" },
|
|
415
|
+
_this.props.getBorderColor
|
|
416
|
+
&& React.createElement("div", { className: "item-border", style: { backgroundColor: _this.props.getBorderColor(option.value) } }),
|
|
417
|
+
React.createElement("span", { style: _this.props.getBackgroundColor
|
|
418
|
+
? { backgroundColor: _this.props.getBackgroundColor(option.value),
|
|
419
|
+
color: (0, Label_1.getTextColor)(_this.props.getBackgroundColor(option.value)) }
|
|
420
|
+
: undefined, className: 'suggestion-item--bgcolor'
|
|
421
|
+
+ (selectedItem ? ' suggestion-item--disabled' : '') }, _this.props.optionTemplate
|
|
422
|
+
? _this.props.optionTemplate(option.value)
|
|
423
|
+
: _this.props.getLabel(option.value)),
|
|
424
|
+
option.children
|
|
425
|
+
&& React.createElement("span", { className: "suggestion-item__icon" },
|
|
426
|
+
React.createElement(Icon_1.Icon, { name: "chevron-right-thin" })))));
|
|
337
427
|
});
|
|
338
428
|
}
|
|
339
429
|
}
|
|
@@ -344,26 +434,47 @@ var TreeSelect = /** @class */ (function (_super) {
|
|
|
344
434
|
});
|
|
345
435
|
return (React.createElement("li", { key: i, className: "suggestion-item suggestion-item--multi-select", onClick: function (event) {
|
|
346
436
|
_this.handleValue(event, item);
|
|
347
|
-
} },
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
437
|
+
} },
|
|
438
|
+
React.createElement("button", { className: "suggestion-item--btn" }, _this.props.optionTemplate
|
|
439
|
+
? _this.props.optionTemplate(item.value)
|
|
440
|
+
: React.createElement("span", { className: selectedItem
|
|
441
|
+
? 'suggestion-item--disabled' : undefined }, _this.props.getLabel(item.value)))));
|
|
351
442
|
});
|
|
352
443
|
}
|
|
353
444
|
else {
|
|
354
445
|
return;
|
|
355
446
|
}
|
|
356
447
|
};
|
|
357
|
-
TreeSelect.prototype.
|
|
448
|
+
TreeSelect.prototype.branchButton = function (buttonValue) {
|
|
358
449
|
var _this = this;
|
|
450
|
+
setTimeout(function () {
|
|
451
|
+
var _a;
|
|
452
|
+
(_a = _this.categoryButtonRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('keydown', function (e) {
|
|
453
|
+
var _a;
|
|
454
|
+
if (e.key === 'ArrowDown') {
|
|
455
|
+
e.preventDefault();
|
|
456
|
+
e.stopPropagation();
|
|
457
|
+
setTimeout(function () {
|
|
458
|
+
var element = document.querySelector('.suggestion-item--btn');
|
|
459
|
+
element.focus();
|
|
460
|
+
});
|
|
461
|
+
}
|
|
462
|
+
if (e.key === 'ArrowUp') {
|
|
463
|
+
e.preventDefault();
|
|
464
|
+
e.stopPropagation();
|
|
465
|
+
(_a = _this.inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
466
|
+
}
|
|
467
|
+
});
|
|
468
|
+
});
|
|
359
469
|
var selectedButton = this.state.value.some(function (obj) {
|
|
360
|
-
return _this.props.getId(obj) === _this.props.getId(
|
|
470
|
+
return _this.props.getId(obj) === _this.props.getId(buttonValue.value);
|
|
361
471
|
});
|
|
362
472
|
if (!selectedButton) {
|
|
363
|
-
return React.createElement("button", { className: 'autocomplete__button' + (this.props.selectBranchWithChildren ? ' autocomplete__button--multi-select' : ''), onMouseOver: function () { return _this.setState({ buttonMouseEvent: true }); }, onMouseOut: function () { return _this.setState({ buttonMouseEvent: false }); },
|
|
473
|
+
return React.createElement("button", { ref: this.categoryButtonRef, className: 'autocomplete__button' + (this.props.selectBranchWithChildren ? ' autocomplete__button--multi-select' : ''), onMouseOver: function () { return _this.setState({ buttonMouseEvent: true }); }, onMouseOut: function () { return _this.setState({ buttonMouseEvent: false }); }, onClick: function (event) { return _this.handleBranchValue(event, buttonValue); } }, "Choose entire category");
|
|
364
474
|
}
|
|
365
475
|
else {
|
|
366
|
-
return React.createElement("button", { className: 'autocomplete__button'
|
|
476
|
+
return React.createElement("button", { className: 'autocomplete__button'
|
|
477
|
+
+ (this.props.selectBranchWithChildren ? ' autocomplete__button--multi-select' : '') + ' autocomplete__button--disabled' }, "Category selected");
|
|
367
478
|
}
|
|
368
479
|
};
|
|
369
480
|
TreeSelect.prototype.handleDebounce = function () {
|
|
@@ -373,15 +484,11 @@ var TreeSelect = /** @class */ (function (_super) {
|
|
|
373
484
|
if (this.state.searchFieldValue) {
|
|
374
485
|
this.setState({
|
|
375
486
|
loading: true,
|
|
376
|
-
// provera: false
|
|
377
487
|
});
|
|
378
488
|
this.ICancelFn = this.props.searchOptions(this.state.searchFieldValue, function (items) {
|
|
379
|
-
|
|
380
|
-
// this.setState({provera: true, loading: false})
|
|
381
|
-
// } else {
|
|
489
|
+
var _a;
|
|
382
490
|
_this.setState({ options: items, loading: false });
|
|
383
|
-
_this.popperInstance.update();
|
|
384
|
-
// }
|
|
491
|
+
(_a = _this.popperInstance) === null || _a === void 0 ? void 0 : _a.update();
|
|
385
492
|
});
|
|
386
493
|
}
|
|
387
494
|
}
|
|
@@ -419,13 +526,15 @@ var TreeSelect = /** @class */ (function (_super) {
|
|
|
419
526
|
this.state.value.length > 0
|
|
420
527
|
? this.props.readOnly
|
|
421
528
|
|| React.createElement("button", { className: "tags-input__remove-value", style: { position: 'relative', bottom: '2px' }, onClick: function () { return _this.setState({ value: [] }); } },
|
|
422
|
-
React.createElement(Icon_1.Icon, { name: 'remove-sign' }))
|
|
529
|
+
React.createElement(Icon_1.Icon, { name: 'remove-sign' }))
|
|
530
|
+
: null)
|
|
423
531
|
: React.createElement("div", { className: "tags-input__tags" },
|
|
424
532
|
this.props.readOnly
|
|
425
533
|
|| React.createElement("button", { className: "tags-input__overlay-button", ref: this.openDropdownRef, onClick: function () { return _this.setState({ openDropdown: !_this.state.openDropdown }); } }),
|
|
426
|
-
this.state.value.length < 1
|
|
427
|
-
|
|
428
|
-
|
|
534
|
+
this.state.value.length < 1
|
|
535
|
+
&& React.createElement("span", { className: 'tags-input__single-item'
|
|
536
|
+
+ (this.props.readOnly ? ' tags-input__tag-item--readonly' : '') },
|
|
537
|
+
React.createElement("span", { className: "tags-input__placeholder" }, this.props.placeholder)),
|
|
429
538
|
this.state.value.map(function (item, i) {
|
|
430
539
|
var Wrapper = function (_a) {
|
|
431
540
|
var backgroundColor = _a.backgroundColor, borderColor = _a.borderColor, children = _a.children;
|
|
@@ -455,27 +564,25 @@ var TreeSelect = /** @class */ (function (_super) {
|
|
|
455
564
|
} },
|
|
456
565
|
React.createElement(Icon_1.Icon, { name: "search", className: "search" })),
|
|
457
566
|
React.createElement("div", { className: 'autocomplete__filter' },
|
|
458
|
-
React.createElement("input", { placeholder: this.props.searchPlaceholder, type: "text", className: "autocomplete__input", ref:
|
|
567
|
+
React.createElement("input", { placeholder: this.props.searchPlaceholder, type: "text", className: "autocomplete__input", ref: this.inputRef, value: this.state.searchFieldValue, onChange: function (event) {
|
|
568
|
+
var _a, _b;
|
|
459
569
|
if (_this.props.kind === 'synchronous') {
|
|
460
570
|
_this.setState({ searchFieldValue: event.target.value });
|
|
461
|
-
_this.popperInstance.update();
|
|
571
|
+
(_a = _this.popperInstance) === null || _a === void 0 ? void 0 : _a.update();
|
|
462
572
|
}
|
|
463
573
|
else if (_this.props.kind === 'asynchronous') {
|
|
464
574
|
if (_this.ICancelFn) {
|
|
465
575
|
_this.ICancelFn();
|
|
466
576
|
}
|
|
467
577
|
_this.setState({ searchFieldValue: event.target.value, options: [] });
|
|
468
|
-
_this.popperInstance.update();
|
|
578
|
+
(_b = _this.popperInstance) === null || _b === void 0 ? void 0 : _b.update();
|
|
469
579
|
_this.debounceFn();
|
|
470
580
|
}
|
|
471
581
|
else {
|
|
472
582
|
return;
|
|
473
583
|
}
|
|
474
|
-
// if(!this.state.searchFieldValue) {
|
|
475
|
-
// this.setState({provera: false});
|
|
476
|
-
// }
|
|
477
584
|
} }))),
|
|
478
|
-
this.state.activeTree.length > 0
|
|
585
|
+
(this.state.activeTree.length > 0 && this.state.buttonValue != null)
|
|
479
586
|
&& React.createElement("div", { className: 'autocomplete__category-header' },
|
|
480
587
|
React.createElement("div", { className: "autocomplete__icon", onClick: function () {
|
|
481
588
|
_this.backButtonValue();
|
|
@@ -483,16 +590,17 @@ var TreeSelect = /** @class */ (function (_super) {
|
|
|
483
590
|
} },
|
|
484
591
|
React.createElement(Icon_1.Icon, { name: "arrow-left", className: "arrow-left" })),
|
|
485
592
|
React.createElement("div", { className: 'autocomplete__filter' },
|
|
486
|
-
React.createElement("button", { className: 'autocomplete__category-title'
|
|
593
|
+
React.createElement("button", { className: 'autocomplete__category-title' }, this.props.optionTemplate
|
|
487
594
|
? this.props.optionTemplate(this.state.buttonValue.value)
|
|
488
595
|
: this.props.getLabel(this.state.buttonValue.value)),
|
|
489
|
-
this.props.selectBranchWithChildren
|
|
596
|
+
this.props.selectBranchWithChildren
|
|
597
|
+
&& this.branchButton(this.state.buttonValue))),
|
|
490
598
|
this.state.loading
|
|
491
599
|
? React.createElement("ul", { className: "suggestion-list--loader" },
|
|
492
600
|
React.createElement(Loader_1.Loader, { overlay: true }))
|
|
493
601
|
: this.state.searchFieldValue === ''
|
|
494
602
|
? this.props.getOptions
|
|
495
|
-
? React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select" }, this.state.options
|
|
603
|
+
? React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select", ref: this.ref }, this.state.options
|
|
496
604
|
.map(function (option, i) {
|
|
497
605
|
var selectedItem = _this.state.value.some(function (obj) {
|
|
498
606
|
return _this.props.getId(obj) === _this.props.getLabel(option.value);
|
|
@@ -502,20 +610,87 @@ var TreeSelect = /** @class */ (function (_super) {
|
|
|
502
610
|
event.stopPropagation();
|
|
503
611
|
_this.handleTree(event, option);
|
|
504
612
|
} },
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
613
|
+
React.createElement("button", { className: "suggestion-item--btn ".concat(_this.props.getId(option.value)), onKeyDown: function (event) {
|
|
614
|
+
if (event.key === 'Enter' && option.children) {
|
|
615
|
+
_this.setState({
|
|
616
|
+
buttonTarget: __spreadArray(__spreadArray([], _this.state.buttonTarget, true), [
|
|
617
|
+
_this.props.getId(option.value),
|
|
618
|
+
], false),
|
|
619
|
+
});
|
|
620
|
+
}
|
|
621
|
+
} },
|
|
622
|
+
(_this.props.getBorderColor && !_this.props.allowMultiple)
|
|
623
|
+
&& React.createElement("div", { className: "item-border", style: {
|
|
624
|
+
backgroundColor: _this.props.getBorderColor(option.value),
|
|
625
|
+
} }),
|
|
626
|
+
React.createElement("span", { style: (_this.props.getBackgroundColor && option.value)
|
|
627
|
+
? {
|
|
628
|
+
backgroundColor: _this.props.getBackgroundColor(option.value),
|
|
629
|
+
color: (0, Label_1.getTextColor)(_this.props.getBackgroundColor(option.value)),
|
|
630
|
+
}
|
|
631
|
+
: undefined, className: 'suggestion-item--bgcolor'
|
|
632
|
+
+ (selectedItem ? ' suggestion-item--disabled' : '') }, _this.props.optionTemplate
|
|
633
|
+
? _this.props.optionTemplate(option.value)
|
|
634
|
+
: _this.props.getLabel(option.value)),
|
|
635
|
+
option.children
|
|
636
|
+
&& React.createElement("span", { className: "suggestion-item__icon" },
|
|
637
|
+
React.createElement(Icon_1.Icon, { name: "chevron-right-thin" })))));
|
|
638
|
+
}))
|
|
639
|
+
: null
|
|
640
|
+
: React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select", ref: this.ref }, this.filteredItem(this.props.singleLevelSearch
|
|
517
641
|
? this.state.options : this.state.filterArr))))));
|
|
518
642
|
};
|
|
519
643
|
return TreeSelect;
|
|
520
644
|
}(React.Component));
|
|
521
645
|
exports.TreeSelect = TreeSelect;
|
|
646
|
+
var getButtonList = function (menuRef) {
|
|
647
|
+
var _a;
|
|
648
|
+
var list = Array.from((_a = menuRef === null || menuRef === void 0 ? void 0 : menuRef.querySelectorAll(':scope > li')) !== null && _a !== void 0 ? _a : []);
|
|
649
|
+
var buttons = [];
|
|
650
|
+
if (list != null) {
|
|
651
|
+
__spreadArray([], list, true).filter(function (item) {
|
|
652
|
+
if (item.querySelectorAll('.suggestion-item--btn').length > 0) {
|
|
653
|
+
buttons.push(item.querySelector('.suggestion-item--btn'));
|
|
654
|
+
}
|
|
655
|
+
});
|
|
656
|
+
}
|
|
657
|
+
return buttons;
|
|
658
|
+
};
|
|
659
|
+
var keyboardNavigation = function (e, menuRef, ref) {
|
|
660
|
+
var buttons = getButtonList(menuRef);
|
|
661
|
+
var currentElement = document.activeElement;
|
|
662
|
+
var currentIndex = Array.prototype.indexOf.call(buttons, currentElement);
|
|
663
|
+
if (document.activeElement != null && buttons.includes(document.activeElement)) {
|
|
664
|
+
if ((e === null || e === void 0 ? void 0 : e.key) === 'ArrowDown') {
|
|
665
|
+
nextElement(buttons, currentIndex, e);
|
|
666
|
+
}
|
|
667
|
+
else if ((e === null || e === void 0 ? void 0 : e.key) === 'ArrowUp') {
|
|
668
|
+
prevElement(buttons, currentIndex, e, ref);
|
|
669
|
+
}
|
|
670
|
+
}
|
|
671
|
+
};
|
|
672
|
+
var nextElement = function (buttons, currentIndex, e) {
|
|
673
|
+
e.preventDefault();
|
|
674
|
+
e.stopPropagation();
|
|
675
|
+
if (buttons[currentIndex + 1]) {
|
|
676
|
+
buttons[currentIndex + 1].focus();
|
|
677
|
+
}
|
|
678
|
+
else {
|
|
679
|
+
buttons[0].focus();
|
|
680
|
+
}
|
|
681
|
+
};
|
|
682
|
+
var prevElement = function (buttons, currentIndex, e, ref) {
|
|
683
|
+
e.preventDefault();
|
|
684
|
+
e.stopPropagation();
|
|
685
|
+
if (buttons[currentIndex - 1]) {
|
|
686
|
+
buttons[currentIndex - 1].focus();
|
|
687
|
+
}
|
|
688
|
+
else if (currentIndex === 0) {
|
|
689
|
+
if (ref) {
|
|
690
|
+
ref();
|
|
691
|
+
}
|
|
692
|
+
}
|
|
693
|
+
else {
|
|
694
|
+
buttons[buttons.length - 1].focus();
|
|
695
|
+
}
|
|
696
|
+
};
|