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.
Files changed (11) hide show
  1. package/app/styles/_sd-tag-input.scss +20 -1
  2. package/app-typescript/components/TreeSelect.tsx +229 -175
  3. package/dist/examples.bundle.js +2401 -1787
  4. package/dist/react/TreeSelect.tsx +88 -119
  5. package/dist/superdesk-ui.bundle.css +21 -2
  6. package/dist/superdesk-ui.bundle.js +2060 -1409
  7. package/dist/vendor.bundle.js +18 -18
  8. package/examples/pages/react/TreeSelect.tsx +88 -119
  9. package/package.json +1 -1
  10. package/react/components/TreeSelect.d.ts +9 -4
  11. package/react/components/TreeSelect.js +145 -99
package/react/components/TreeSelect.js CHANGED
@@ -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.componentDidMount = function () {
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: _this.props.loading ? _this.props.loading : false,
97
- invalid: _this.props.invalid ? _this.props.invalid : false,
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
- return arr.filter(function (item) {
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
- var labelClasses = (0, classnames_1.default)('sd-input__label', {
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
- React.createElement("button", { className: "tags-input__overlay-button", ref: this.openDropdownRef, onClick: function () { return _this.setState({ openDropdown: !_this.state.openDropdown }); } }),
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.singleLevelSearch ? 'Search this category...' : 'Search...', type: "text", className: "autocomplete__input", ref: function (input) { return input && input.focus(); }, value: this.state.searchFieldValue, onChange: function (event) {
387
- var value = event.target.value;
388
- if (_this.props.kind === 'asynchronous') {
389
- _this.setState({
390
- searchFieldValue: value,
391
- loading: true,
392
- }),
393
- _this.props.searchOptions(value, function (items) {
394
- _this.setState({ options: items, loading: false });
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 if (_this.props.kind === 'synchronous') {
398
- _this.setState({ searchFieldValue: value });
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.state.searchFieldValue === ''
418
- ? this.props.getOptions ?
419
- React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select" }, this.state.options
420
- .map(function (option, i) {
421
- var selectedItem = _this.state.value.some(function (obj) {
422
- return _this.props.getId(obj) === _this.props.getLabel(option.value);
423
- });
424
- return (React.createElement("li", { key: i, className: "suggestion-item suggestion-item--multi-select", onClick: function (event) {
425
- event.preventDefault();
426
- event.stopPropagation();
427
- _this.handleTree(event, option);
428
- } },
429
- _this.props.optionTemplate
430
- ? _this.props.optionTemplate(option.value)
431
- : React.createElement("span", { className: selectedItem
432
- ? 'suggestion-item--disabled' : undefined }, _this.props.getLabel(option.value)),
433
- option.children && React.createElement("span", { className: "suggestion-item__icon" },
434
- React.createElement(Icon_1.Icon, { name: "chevron-right-thin" }))));
435
- })) : null
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));