superdesk-ui-framework 3.0.1-beta.10 → 3.0.1-beta.11
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 +20 -1
- package/app-typescript/components/TreeSelect.tsx +229 -175
- package/dist/examples.bundle.js +2401 -1787
- package/dist/react/TreeSelect.tsx +88 -119
- package/dist/superdesk-ui.bundle.css +21 -2
- package/dist/superdesk-ui.bundle.js +2060 -1409
- package/dist/vendor.bundle.js +18 -18
- package/examples/pages/react/TreeSelect.tsx +88 -119
- package/package.json +1 -1
- package/react/components/TreeSelect.d.ts +9 -4
- package/react/components/TreeSelect.js +145 -99
@@ -50,13 +50,25 @@ exports.TreeSelect = void 0;
|
|
50
50
|
var React = __importStar(require("react"));
|
51
51
|
var Icon_1 = require("./Icon");
|
52
52
|
var Loader_1 = require("./Loader");
|
53
|
-
var classnames_1 = __importDefault(require("classnames"));
|
54
53
|
var react_id_generator_1 = __importDefault(require("react-id-generator"));
|
54
|
+
var debounce_1 = __importDefault(require("lodash/debounce"));
|
55
|
+
var Form_1 = require("./Form");
|
56
|
+
var core_1 = require("@popperjs/core");
|
57
|
+
var lodash_1 = require("lodash");
|
55
58
|
var TreeSelect = /** @class */ (function (_super) {
|
56
59
|
__extends(TreeSelect, _super);
|
57
60
|
function TreeSelect(props) {
|
58
61
|
var _this = _super.call(this, props) || this;
|
59
62
|
_this.htmlId = (0, react_id_generator_1.default)();
|
63
|
+
_this.componentDidMount = function () {
|
64
|
+
_this.recursion(_this.state.options);
|
65
|
+
document.addEventListener("mousedown", function (event) {
|
66
|
+
if ((_this.dropdownRef.current && !_this.dropdownRef.current.contains(event.target))
|
67
|
+
&& (_this.openDropdownRef.current && !_this.openDropdownRef.current.contains(event.target))) {
|
68
|
+
_this.setState({ openDropdown: false });
|
69
|
+
}
|
70
|
+
});
|
71
|
+
};
|
60
72
|
_this.backButton = function () {
|
61
73
|
if (_this.state.activeTree.length > 0) {
|
62
74
|
_this.setState({
|
@@ -73,15 +85,7 @@ var TreeSelect = /** @class */ (function (_super) {
|
|
73
85
|
buttonValue: _this.state.buttonTree.pop(),
|
74
86
|
});
|
75
87
|
};
|
76
|
-
_this.
|
77
|
-
_this.recursion(_this.state.options);
|
78
|
-
document.addEventListener("mousedown", function (event) {
|
79
|
-
if ((_this.dropdownRef.current && !_this.dropdownRef.current.contains(event.target))
|
80
|
-
&& (_this.openDropdownRef.current && !_this.openDropdownRef.current.contains(event.target))) {
|
81
|
-
_this.setState({ openDropdown: false });
|
82
|
-
}
|
83
|
-
});
|
84
|
-
};
|
88
|
+
_this.debounceFn = (0, debounce_1.default)(_this.handleDebounce, 500);
|
85
89
|
_this.state = {
|
86
90
|
value: _this.props.value ? _this.props.value : [],
|
87
91
|
options: _this.props.getOptions ? _this.props.getOptions() : [],
|
@@ -93,8 +97,8 @@ var TreeSelect = /** @class */ (function (_super) {
|
|
93
97
|
buttonValue: [],
|
94
98
|
buttonMouseEvent: false,
|
95
99
|
openDropdown: false,
|
96
|
-
loading:
|
97
|
-
|
100
|
+
loading: false,
|
101
|
+
// provera: false
|
98
102
|
};
|
99
103
|
_this.removeClick = _this.removeClick.bind(_this);
|
100
104
|
_this.handleMultiLevel = _this.handleMultiLevel.bind(_this);
|
@@ -104,10 +108,47 @@ var TreeSelect = /** @class */ (function (_super) {
|
|
104
108
|
_this.handleTree = _this.handleTree.bind(_this);
|
105
109
|
_this.filteredItem = _this.filteredItem.bind(_this);
|
106
110
|
_this.banchButton = _this.banchButton.bind(_this);
|
111
|
+
_this.handleDebounce = _this.handleDebounce.bind(_this);
|
112
|
+
_this.toggleMenu = _this.toggleMenu.bind(_this);
|
107
113
|
_this.dropdownRef = React.createRef();
|
108
114
|
_this.openDropdownRef = React.createRef();
|
109
115
|
return _this;
|
110
116
|
}
|
117
|
+
TreeSelect.prototype.componentDidUpdate = function (prevProps, prevState) {
|
118
|
+
if (!(0, lodash_1.isEqual)(prevState.value, this.state.value)) {
|
119
|
+
this.props.onChange(this.state.value);
|
120
|
+
}
|
121
|
+
else if (!(0, lodash_1.isEqual)(prevProps.value, this.props.value)) {
|
122
|
+
this.props.onChange(this.state.value);
|
123
|
+
}
|
124
|
+
if (prevState.openDropdown !== this.state.openDropdown) {
|
125
|
+
this.toggleMenu();
|
126
|
+
}
|
127
|
+
if (this.props.kind === 'synchronous') {
|
128
|
+
if ((prevState.activeTree !== this.state.activeTree)
|
129
|
+
|| (prevState.filterArr !== this.state.filterArr)
|
130
|
+
|| (prevState.options !== this.state.options)) {
|
131
|
+
this.popperInstance.update();
|
132
|
+
}
|
133
|
+
}
|
134
|
+
};
|
135
|
+
TreeSelect.prototype.toggleMenu = function () {
|
136
|
+
if (this.state.openDropdown) {
|
137
|
+
if (this.openDropdownRef.current && this.dropdownRef.current) {
|
138
|
+
this.popperInstance = (0, core_1.createPopper)(this.openDropdownRef.current, this.dropdownRef.current, {
|
139
|
+
placement: 'bottom-start',
|
140
|
+
modifiers: [
|
141
|
+
{
|
142
|
+
name: 'offset',
|
143
|
+
options: {
|
144
|
+
offset: [-4, 4],
|
145
|
+
},
|
146
|
+
},
|
147
|
+
],
|
148
|
+
});
|
149
|
+
}
|
150
|
+
}
|
151
|
+
};
|
111
152
|
TreeSelect.prototype.removeClick = function (i) {
|
112
153
|
var newTags = this.state.value;
|
113
154
|
newTags === null || newTags === void 0 ? void 0 : newTags.splice(i, 1);
|
@@ -248,18 +289,10 @@ var TreeSelect = /** @class */ (function (_super) {
|
|
248
289
|
}
|
249
290
|
});
|
250
291
|
};
|
251
|
-
TreeSelect.prototype.componentDidUpdate = function (prevProps, prevState) {
|
252
|
-
if (prevState.value !== this.state.value) {
|
253
|
-
this.props.onChange(this.state.value);
|
254
|
-
}
|
255
|
-
else if (prevProps.value !== this.props.value) {
|
256
|
-
this.props.onChange(this.state.value);
|
257
|
-
}
|
258
|
-
};
|
259
292
|
TreeSelect.prototype.filteredItem = function (arr) {
|
260
293
|
var _this = this;
|
261
294
|
if (this.props.kind === 'synchronous') {
|
262
|
-
|
295
|
+
var filteredArr = arr.filter(function (item) {
|
263
296
|
if (_this.state.searchFieldValue) {
|
264
297
|
if (_this.props.getLabel(item.value)
|
265
298
|
.toLowerCase().includes(_this.state.searchFieldValue.toLowerCase())) {
|
@@ -272,25 +305,31 @@ var TreeSelect = /** @class */ (function (_super) {
|
|
272
305
|
else {
|
273
306
|
return item.value;
|
274
307
|
}
|
275
|
-
}).map(function (option, i) {
|
276
|
-
var selectedItem = _this.state.value.some(function (obj) {
|
277
|
-
return _this.props.getId(obj) === _this.props.getId(option.value);
|
278
|
-
});
|
279
|
-
return React.createElement("li", { key: i, className: "suggestion-item suggestion-item--multi-select", onClick: function (event) {
|
280
|
-
_this.setState({
|
281
|
-
searchFieldValue: '',
|
282
|
-
}),
|
283
|
-
event.preventDefault();
|
284
|
-
event.stopPropagation();
|
285
|
-
_this.handleTree(event, option);
|
286
|
-
} },
|
287
|
-
_this.props.optionTemplate
|
288
|
-
? _this.props.optionTemplate(option.value)
|
289
|
-
: React.createElement("span", { className: selectedItem
|
290
|
-
? 'suggestion-item--disabled' : undefined }, _this.props.getLabel(option.value)),
|
291
|
-
option.children && React.createElement("span", { className: "suggestion-item__icon" },
|
292
|
-
React.createElement(Icon_1.Icon, { name: "chevron-right-thin" })));
|
293
308
|
});
|
309
|
+
if (filteredArr.length === 0) {
|
310
|
+
return React.createElement("li", { className: "suggestion-item--nothing-found" }, "Nothing fonud");
|
311
|
+
}
|
312
|
+
else {
|
313
|
+
return filteredArr.map(function (option, i) {
|
314
|
+
var selectedItem = _this.state.value.some(function (obj) {
|
315
|
+
return _this.props.getId(obj) === _this.props.getId(option.value);
|
316
|
+
});
|
317
|
+
return React.createElement("li", { key: i, className: "suggestion-item suggestion-item--multi-select", onClick: function (event) {
|
318
|
+
_this.setState({
|
319
|
+
searchFieldValue: '',
|
320
|
+
}),
|
321
|
+
event.preventDefault();
|
322
|
+
event.stopPropagation();
|
323
|
+
_this.handleTree(event, option);
|
324
|
+
} },
|
325
|
+
_this.props.optionTemplate
|
326
|
+
? _this.props.optionTemplate(option.value)
|
327
|
+
: React.createElement("span", { className: selectedItem
|
328
|
+
? 'suggestion-item--disabled' : undefined }, _this.props.getLabel(option.value)),
|
329
|
+
option.children && React.createElement("span", { className: "suggestion-item__icon" },
|
330
|
+
React.createElement(Icon_1.Icon, { name: "chevron-right-thin" })));
|
331
|
+
});
|
332
|
+
}
|
294
333
|
}
|
295
334
|
else if (this.props.kind === 'asynchronous') {
|
296
335
|
return this.state.options.map(function (item, i) {
|
@@ -321,20 +360,29 @@ var TreeSelect = /** @class */ (function (_super) {
|
|
321
360
|
return React.createElement("button", { className: 'autocomplete__button' + (this.props.selectBranchWithChildren ? ' autocomplete__button--multi-select' : '') + ' autocomplete__button--disabled', value: this.state.buttonValue }, "Category selected");
|
322
361
|
}
|
323
362
|
};
|
363
|
+
TreeSelect.prototype.handleDebounce = function () {
|
364
|
+
var _this = this;
|
365
|
+
this.setState({ options: [] });
|
366
|
+
if (this.props.kind === 'asynchronous') {
|
367
|
+
if (this.state.searchFieldValue) {
|
368
|
+
this.setState({
|
369
|
+
loading: true,
|
370
|
+
// provera: false
|
371
|
+
});
|
372
|
+
this.ICancelFn = this.props.searchOptions(this.state.searchFieldValue, function (items) {
|
373
|
+
// if (items.length === 0) {
|
374
|
+
// this.setState({provera: true, loading: false})
|
375
|
+
// } else {
|
376
|
+
_this.setState({ options: items, loading: false });
|
377
|
+
_this.popperInstance.update();
|
378
|
+
// }
|
379
|
+
});
|
380
|
+
}
|
381
|
+
}
|
382
|
+
};
|
324
383
|
TreeSelect.prototype.render = function () {
|
325
384
|
var _this = this;
|
326
|
-
|
327
|
-
'a11y-only': this.props.labelHidden,
|
328
|
-
});
|
329
|
-
var classesLabel = (0, classnames_1.default)('sd-input', {
|
330
|
-
'sd-input--inline-label': this.props.inlineLabel,
|
331
|
-
'sd-input--required': this.props.required,
|
332
|
-
'sd-input--disabled': this.props.disabled,
|
333
|
-
'sd-input--full-width': this.props.fullWidth,
|
334
|
-
'sd-input--invalid': this.props.invalid || this.state.invalid,
|
335
|
-
});
|
336
|
-
return (React.createElement("div", { className: classesLabel },
|
337
|
-
React.createElement("label", { className: labelClasses, htmlFor: this.htmlId, id: this.htmlId + 'label', tabIndex: this.props.tabindex === undefined ? undefined : -1 }, this.props.label),
|
385
|
+
return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, required: this.props.required, disabled: this.props.disabled, invalid: this.props.invalid, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, fullWidth: this.props.fullWidth, htmlId: this.htmlId, tabindex: this.props.tabindex },
|
338
386
|
React.createElement("div", { className: "tags-input tags-input--".concat(this.props.allowMultiple ? 'multi-select' : 'single-select', " sd-input__input") },
|
339
387
|
this.props.allowMultiple
|
340
388
|
? React.createElement("div", { className: "tags-input__tags" },
|
@@ -353,12 +401,13 @@ var TreeSelect = /** @class */ (function (_super) {
|
|
353
401
|
|| React.createElement("span", { className: "tags-input__remove-button" },
|
354
402
|
React.createElement(Icon_1.Icon, { name: "close-small" })))));
|
355
403
|
})),
|
356
|
-
this.state.value.length > 0
|
357
|
-
this.props.readOnly
|
404
|
+
this.state.value.length > 0
|
405
|
+
? this.props.readOnly
|
358
406
|
|| React.createElement("button", { className: "tags-input__remove-value", onClick: function () { return _this.setState({ value: [] }); } },
|
359
407
|
React.createElement(Icon_1.Icon, { name: 'remove-sign' })) : null)
|
360
408
|
: React.createElement("div", { className: "tags-input__tags" },
|
361
|
-
|
409
|
+
this.props.readOnly
|
410
|
+
|| React.createElement("button", { className: "tags-input__overlay-button", ref: this.openDropdownRef, onClick: function () { return _this.setState({ openDropdown: !_this.state.openDropdown }); } }),
|
362
411
|
this.state.value.length < 1 && React.createElement("span", { className: 'tags-input__single-item'
|
363
412
|
+ (this.props.readOnly ? ' tags-input__tag-item--readonly' : '') },
|
364
413
|
React.createElement("span", { className: "tags-input__placeholder" }, this.props.placeholder)),
|
@@ -374,8 +423,8 @@ var TreeSelect = /** @class */ (function (_super) {
|
|
374
423
|
|| React.createElement("span", { className: "tags-input__remove-button" },
|
375
424
|
React.createElement(Icon_1.Icon, { name: 'remove-sign' })))));
|
376
425
|
})),
|
377
|
-
this.state.openDropdown
|
378
|
-
React.createElement("div", { className: "autocomplete autocomplete--multi-select" + (this.props.width === 'medium' ? ' autocomplete--fixed-width' : ''), ref: this.dropdownRef },
|
426
|
+
this.state.openDropdown
|
427
|
+
&& React.createElement("div", { className: "autocomplete autocomplete--multi-select" + (this.props.width === 'medium' ? ' autocomplete--fixed-width' : ''), ref: this.dropdownRef },
|
379
428
|
React.createElement("div", { className: 'autocomplete__header' },
|
380
429
|
React.createElement("div", { className: "autocomplete__icon", onClick: function () {
|
381
430
|
_this.backButtonValue();
|
@@ -383,23 +432,28 @@ var TreeSelect = /** @class */ (function (_super) {
|
|
383
432
|
} },
|
384
433
|
React.createElement(Icon_1.Icon, { name: "search", className: "search" })),
|
385
434
|
React.createElement("div", { className: 'autocomplete__filter' },
|
386
|
-
React.createElement("input", { placeholder: this.props.
|
387
|
-
|
388
|
-
|
389
|
-
_this.
|
390
|
-
|
391
|
-
|
392
|
-
|
393
|
-
_this.
|
394
|
-
|
395
|
-
|
435
|
+
React.createElement("input", { placeholder: this.props.searchPlaceholder, type: "text", className: "autocomplete__input", ref: function (input) { return input && input.focus(); }, value: this.state.searchFieldValue, onChange: function (event) {
|
436
|
+
if (_this.props.kind === 'synchronous') {
|
437
|
+
_this.setState({ searchFieldValue: event.target.value });
|
438
|
+
_this.popperInstance.update();
|
439
|
+
}
|
440
|
+
else if (_this.props.kind === 'asynchronous') {
|
441
|
+
if (_this.ICancelFn) {
|
442
|
+
_this.ICancelFn();
|
443
|
+
}
|
444
|
+
_this.setState({ searchFieldValue: event.target.value, options: [] });
|
445
|
+
_this.popperInstance.update();
|
446
|
+
_this.debounceFn();
|
396
447
|
}
|
397
|
-
else
|
398
|
-
|
448
|
+
else {
|
449
|
+
return;
|
399
450
|
}
|
451
|
+
// if(!this.state.searchFieldValue) {
|
452
|
+
// this.setState({provera: false});
|
453
|
+
// }
|
400
454
|
} }))),
|
401
|
-
this.state.activeTree.length > 0
|
402
|
-
React.createElement("div", { className: 'autocomplete__category-header' },
|
455
|
+
this.state.activeTree.length > 0
|
456
|
+
&& React.createElement("div", { className: 'autocomplete__category-header' },
|
403
457
|
React.createElement("div", { className: "autocomplete__icon", onClick: function () {
|
404
458
|
_this.backButtonValue();
|
405
459
|
_this.backButton();
|
@@ -413,35 +467,27 @@ var TreeSelect = /** @class */ (function (_super) {
|
|
413
467
|
this.state.loading
|
414
468
|
? React.createElement("ul", { className: "suggestion-list--loader" },
|
415
469
|
React.createElement(Loader_1.Loader, { overlay: true }))
|
416
|
-
:
|
417
|
-
this.
|
418
|
-
? this.
|
419
|
-
|
420
|
-
|
421
|
-
|
422
|
-
|
423
|
-
|
424
|
-
|
425
|
-
|
426
|
-
|
427
|
-
|
428
|
-
|
429
|
-
_this.props.optionTemplate
|
430
|
-
|
431
|
-
|
432
|
-
|
433
|
-
|
434
|
-
|
435
|
-
|
436
|
-
:
|
437
|
-
React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select" }, this.filteredItem(this.props.singleLevelSearch
|
438
|
-
? this.state.options : this.state.filterArr)))),
|
439
|
-
React.createElement("div", { className: 'sd-input__message-box' },
|
440
|
-
this.props.info && !this.props.invalid && !this.state.invalid ?
|
441
|
-
React.createElement("div", { className: 'sd-input__hint' }, this.props.info) : null,
|
442
|
-
this.props.invalid || this.state.invalid ?
|
443
|
-
React.createElement("div", { className: 'sd-input__message' }, this.props.error)
|
444
|
-
: null)));
|
470
|
+
: this.state.searchFieldValue === ''
|
471
|
+
? this.props.getOptions
|
472
|
+
? React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select" }, this.state.options
|
473
|
+
.map(function (option, i) {
|
474
|
+
var selectedItem = _this.state.value.some(function (obj) {
|
475
|
+
return _this.props.getId(obj) === _this.props.getLabel(option.value);
|
476
|
+
});
|
477
|
+
return (React.createElement("li", { key: i, className: "suggestion-item suggestion-item--multi-select", onClick: function (event) {
|
478
|
+
event.preventDefault();
|
479
|
+
event.stopPropagation();
|
480
|
+
_this.handleTree(event, option);
|
481
|
+
} },
|
482
|
+
_this.props.optionTemplate
|
483
|
+
? _this.props.optionTemplate(option.value)
|
484
|
+
: React.createElement("span", { className: selectedItem
|
485
|
+
? 'suggestion-item--disabled' : undefined }, _this.props.getLabel(option.value)),
|
486
|
+
option.children && React.createElement("span", { className: "suggestion-item__icon" },
|
487
|
+
React.createElement(Icon_1.Icon, { name: "chevron-right-thin" }))));
|
488
|
+
})) : null
|
489
|
+
: React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select" }, this.filteredItem(this.props.singleLevelSearch
|
490
|
+
? this.state.options : this.state.filterArr))))));
|
445
491
|
};
|
446
492
|
return TreeSelect;
|
447
493
|
}(React.Component));
|