superdesk-ui-framework 3.0.54 → 3.0.55
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 +213 -215
- package/app-typescript/components/DatePicker.tsx +8 -0
- package/app-typescript/components/Input.tsx +2 -0
- package/app-typescript/components/RadioButtonGroup.tsx +8 -2
- package/app-typescript/components/TabCustom.tsx +9 -2
- package/app-typescript/components/TimePicker.tsx +2 -0
- package/app-typescript/components/TreeSelect/TreeSelect.tsx +120 -107
- package/dist/examples.bundle.js +88 -78
- package/dist/superdesk-ui.bundle.css +183 -199
- package/dist/superdesk-ui.bundle.js +87 -77
- package/package.json +1 -1
- package/react/components/DatePicker.d.ts +1 -0
- package/react/components/DatePicker.js +4 -0
- package/react/components/Input.d.ts +1 -0
- package/react/components/Input.js +1 -1
- package/react/components/RadioButtonGroup.d.ts +1 -0
- package/react/components/RadioButtonGroup.js +2 -2
- package/react/components/TabCustom.d.ts +2 -1
- package/react/components/TabCustom.js +9 -9
- package/react/components/TimePicker.d.ts +1 -0
- package/react/components/TimePicker.js +1 -1
- package/react/components/TreeSelect/TreeSelect.d.ts +1 -0
- package/react/components/TreeSelect/TreeSelect.js +70 -64
|
@@ -63,6 +63,7 @@ var Label_1 = require("../Label");
|
|
|
63
63
|
var SelectPreview_1 = require("../SelectPreview");
|
|
64
64
|
var TreeSelectPill_1 = require("./TreeSelectPill");
|
|
65
65
|
var TreeSelectItem_1 = require("./TreeSelectItem");
|
|
66
|
+
var react_dom_1 = require("react-dom");
|
|
66
67
|
var TreeSelect = /** @class */ (function (_super) {
|
|
67
68
|
__extends(TreeSelect, _super);
|
|
68
69
|
function TreeSelect(props) {
|
|
@@ -81,8 +82,9 @@ var TreeSelect = /** @class */ (function (_super) {
|
|
|
81
82
|
(_a = _this.categoryButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
82
83
|
};
|
|
83
84
|
_this.onMouseDown = function (event) {
|
|
84
|
-
var _a;
|
|
85
|
-
if ((((_a = _this.
|
|
85
|
+
var _a, _b;
|
|
86
|
+
if ((((_a = _this.dropdownRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) !== true)
|
|
87
|
+
&& (((_b = _this.treeSelectRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target)) !== true)
|
|
86
88
|
&& _this.state.openDropdown) {
|
|
87
89
|
_this.setState({ openDropdown: false });
|
|
88
90
|
}
|
|
@@ -485,6 +487,7 @@ var TreeSelect = /** @class */ (function (_super) {
|
|
|
485
487
|
};
|
|
486
488
|
TreeSelect.prototype.render = function () {
|
|
487
489
|
var _this = this;
|
|
490
|
+
var _a;
|
|
488
491
|
if (this.props.preview) {
|
|
489
492
|
return (React.createElement(SelectPreview_1.SelectPreview, { kind: this.props.allowMultiple
|
|
490
493
|
? {
|
|
@@ -497,67 +500,70 @@ var TreeSelect = /** @class */ (function (_super) {
|
|
|
497
500
|
}, items: this.state.value, valueTemplate: this.props.valueTemplate, getLabel: this.props.getLabel }));
|
|
498
501
|
}
|
|
499
502
|
return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, invalid: this.props.error != null, required: this.props.required, disabled: this.props.disabled, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, htmlId: this.htmlId, tabindex: this.props.tabindex },
|
|
500
|
-
React.createElement("div", { className: "tags-input sd-input__input tags-input--".concat(this.props.allowMultiple ? 'multi-select' : 'single-select'), ref: this.treeSelectRef },
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
this.props.
|
|
504
|
-
|
|
503
|
+
React.createElement("div", { className: "tags-input sd-input__input tags-input--".concat(this.props.allowMultiple ? 'multi-select' : 'single-select'), ref: this.treeSelectRef }, this.props.allowMultiple
|
|
504
|
+
? React.createElement("div", { className: "tags-input__tags" },
|
|
505
|
+
this.props.readOnly
|
|
506
|
+
|| React.createElement("button", { ref: this.openDropdownRef, className: "tags-input__add-button ".concat(this.props.disabled ? 'tags-input__add-button--disabled' : ''), onClick: function (e) {
|
|
507
|
+
e.stopPropagation();
|
|
508
|
+
if (!_this.props.disabled) {
|
|
509
|
+
_this.setState({ openDropdown: !_this.state.openDropdown });
|
|
510
|
+
}
|
|
511
|
+
} },
|
|
512
|
+
React.createElement("i", { className: "icon-plus-large" })),
|
|
513
|
+
React.createElement("ul", { className: "tags-input__tag-list" }, this.state.value.map(function (item, i) {
|
|
514
|
+
var Wrapper = function (_a) {
|
|
515
|
+
var backgroundColor = _a.backgroundColor, children = _a.children;
|
|
516
|
+
return (React.createElement(TreeSelectPill_1.TreeSelectPill, { item: item, readOnly: _this.props.readOnly, disabled: _this.props.disabled, valueTemplate: _this.props.valueTemplate, backgroundColor: backgroundColor, onRemove: function () { return _this.removeClick(i); }, getBackgroundColor: _this.props.getBackgroundColor }, children));
|
|
517
|
+
};
|
|
518
|
+
return (React.createElement(React.Fragment, { key: i }, _this.props.valueTemplate
|
|
519
|
+
? _this.props.valueTemplate(item, Wrapper)
|
|
520
|
+
: (React.createElement(Wrapper, null,
|
|
521
|
+
React.createElement("span", null, _this.props.getLabel(item))))));
|
|
522
|
+
})),
|
|
523
|
+
this.state.value.length > 0
|
|
524
|
+
? (this.props.readOnly || this.props.disabled)
|
|
525
|
+
|| React.createElement("button", { className: "tags-input__remove-value", style: { position: 'relative', bottom: '2px' }, onClick: function (e) {
|
|
505
526
|
e.stopPropagation();
|
|
506
|
-
|
|
507
|
-
_this.setState({ openDropdown: !_this.state.openDropdown });
|
|
508
|
-
}
|
|
527
|
+
_this.setState({ value: [] });
|
|
509
528
|
} },
|
|
510
|
-
React.createElement(
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
React.createElement(
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
_this.
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
React.createElement("span", { className: backgroundColor && "tags-input__tag-item", style: { backgroundColor: backgroundColor, margin: 0 } }, children),
|
|
549
|
-
_this.props.readOnly
|
|
550
|
-
|| React.createElement("span", { className: "tags-input__remove-button" },
|
|
551
|
-
React.createElement(Icon_1.Icon, { name: 'remove-sign' })))));
|
|
552
|
-
};
|
|
553
|
-
return React.createElement(React.Fragment, { key: i }, _this.props.valueTemplate
|
|
554
|
-
? _this.props.valueTemplate(item, Wrapper)
|
|
555
|
-
: (React.createElement(Wrapper, null,
|
|
556
|
-
React.createElement("span", null, _this.props.getLabel(item)))));
|
|
557
|
-
})),
|
|
558
|
-
this.state.openDropdown
|
|
559
|
-
&& React.createElement("div", { className: "autocomplete autocomplete--multi-select"
|
|
560
|
-
+ (this.props.width === 'medium' ? ' autocomplete--fixed-width' : ''), style: { zIndex: this.props.zIndex }, ref: this.dropdownRef },
|
|
529
|
+
React.createElement(Icon_1.Icon, { name: 'remove-sign' }))
|
|
530
|
+
: null)
|
|
531
|
+
: React.createElement("div", { className: "tags-input__tags" },
|
|
532
|
+
this.props.readOnly
|
|
533
|
+
|| React.createElement("button", { className: "tags-input__overlay-button", ref: this.openDropdownRef, onClick: function () {
|
|
534
|
+
_this.setState({ openDropdown: !_this.state.openDropdown });
|
|
535
|
+
}, "data-test-id": this.state.openDropdown ? undefined : this.props['data-test-id'] }),
|
|
536
|
+
this.state.value.length < 1
|
|
537
|
+
&& React.createElement("span", { className: 'tags-input__single-item'
|
|
538
|
+
+ (this.props.readOnly ? ' tags-input__tag-item--readonly' : '') },
|
|
539
|
+
React.createElement("span", { className: "tags-input__placeholder" }, this.props.placeholder)),
|
|
540
|
+
this.state.value.map(function (item, i) {
|
|
541
|
+
var Wrapper = function (_a) {
|
|
542
|
+
var backgroundColor = _a.backgroundColor, borderColor = _a.borderColor, children = _a.children;
|
|
543
|
+
return (React.createElement("span", { className: 'tags-input__single-item'
|
|
544
|
+
+ (_this.props.readOnly ? ' tags-input__tag-item--readonly' : ''), onClick: function () { return !_this.props.readOnly && _this.removeClick(i); } },
|
|
545
|
+
_this.props.getBorderColor
|
|
546
|
+
&& React.createElement("div", { className: "item-border item-border-selected", style: borderColor
|
|
547
|
+
? { backgroundColor: borderColor }
|
|
548
|
+
: { backgroundColor: _this.props.getBorderColor(item) } }),
|
|
549
|
+
React.createElement("span", { className: "tags-input__helper-box", style: { color: backgroundColor && (0, Label_1.getTextColor)(backgroundColor) } },
|
|
550
|
+
React.createElement("span", { className: backgroundColor && "tags-input__tag-item", style: { backgroundColor: backgroundColor, margin: 0 } }, children),
|
|
551
|
+
_this.props.readOnly
|
|
552
|
+
|| React.createElement("span", { className: "tags-input__remove-button" },
|
|
553
|
+
React.createElement(Icon_1.Icon, { name: 'remove-sign' })))));
|
|
554
|
+
};
|
|
555
|
+
return React.createElement(React.Fragment, { key: i }, _this.props.valueTemplate
|
|
556
|
+
? _this.props.valueTemplate(item, Wrapper)
|
|
557
|
+
: (React.createElement(Wrapper, null,
|
|
558
|
+
React.createElement("span", null, _this.props.getLabel(item)))));
|
|
559
|
+
}))),
|
|
560
|
+
(0, react_dom_1.createPortal)(this.state.openDropdown
|
|
561
|
+
&& React.createElement("div", { id: 'TREESELECT_DROPDOWN', "data-test-id": this.props['data-test-id'] },
|
|
562
|
+
React.createElement("div", { className: "autocomplete autocomplete--multi-select"
|
|
563
|
+
+ (this.props.width === 'medium' ? ' autocomplete--fixed-width' : ''), style: {
|
|
564
|
+
zIndex: this.props.zIndex,
|
|
565
|
+
width: (_a = this.treeSelectRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth,
|
|
566
|
+
}, ref: this.dropdownRef },
|
|
561
567
|
React.createElement("div", { className: 'autocomplete__header' },
|
|
562
568
|
React.createElement("div", { className: "autocomplete__icon", onClick: function () {
|
|
563
569
|
_this.backButton();
|
|
@@ -581,7 +587,7 @@ var TreeSelect = /** @class */ (function (_super) {
|
|
|
581
587
|
else {
|
|
582
588
|
return;
|
|
583
589
|
}
|
|
584
|
-
} }))),
|
|
590
|
+
}, "data-test-id": "filter-input" }))),
|
|
585
591
|
(this.state.activeTree.length > 0 && this.state.buttonValue != null)
|
|
586
592
|
&& React.createElement("div", { className: 'autocomplete__category-header' },
|
|
587
593
|
React.createElement("div", { className: "autocomplete__icon", onClick: function () {
|
|
@@ -599,7 +605,7 @@ var TreeSelect = /** @class */ (function (_super) {
|
|
|
599
605
|
React.createElement(Loader_1.Loader, { overlay: true }))
|
|
600
606
|
: this.state.searchFieldValue === ''
|
|
601
607
|
? this.props.getOptions
|
|
602
|
-
? React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select", ref: this.ref }, this.state.options.map(function (option, i) {
|
|
608
|
+
? React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select", ref: this.ref, "data-test-id": "options" }, this.state.options.map(function (option, i) {
|
|
603
609
|
var selectedItem = _this.state.value.some(function (obj) {
|
|
604
610
|
return _this.props.getId(obj) === _this.props.getId(option.value);
|
|
605
611
|
});
|
|
@@ -612,7 +618,7 @@ var TreeSelect = /** @class */ (function (_super) {
|
|
|
612
618
|
: null
|
|
613
619
|
: React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select", ref: this.ref }, this.filteredItem(this.props.singleLevelSearch
|
|
614
620
|
? this.state.options
|
|
615
|
-
: this.state.filterArr))))));
|
|
621
|
+
: this.state.filterArr)))), document.body)));
|
|
616
622
|
};
|
|
617
623
|
return TreeSelect;
|
|
618
624
|
}(React.Component));
|