superdesk-ui-framework 3.0.53 → 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/styles/primereact/_pr-general.scss +2 -2
- 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/SelectWithTemplate.tsx +12 -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/app-typescript/components/avatar/avatar-image.tsx +17 -5
- package/dist/examples.bundle.js +114 -84
- package/dist/superdesk-ui.bundle.css +186 -202
- package/dist/superdesk-ui.bundle.js +113 -83
- 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/SelectWithTemplate.d.ts +3 -0
- package/react/components/SelectWithTemplate.js +7 -1
- 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
- package/react/components/avatar/avatar-image.js +19 -5
|
@@ -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));
|
|
@@ -14,6 +14,17 @@ var __extends = (this && this.__extends) || (function () {
|
|
|
14
14
|
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
15
15
|
};
|
|
16
16
|
})();
|
|
17
|
+
var __assign = (this && this.__assign) || function () {
|
|
18
|
+
__assign = Object.assign || function(t) {
|
|
19
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
20
|
+
s = arguments[i];
|
|
21
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
22
|
+
t[p] = s[p];
|
|
23
|
+
}
|
|
24
|
+
return t;
|
|
25
|
+
};
|
|
26
|
+
return __assign.apply(this, arguments);
|
|
27
|
+
};
|
|
17
28
|
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
18
29
|
if (k2 === undefined) k2 = k;
|
|
19
30
|
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
@@ -47,15 +58,18 @@ var AvatarContentImage = /** @class */ (function (_super) {
|
|
|
47
58
|
}
|
|
48
59
|
AvatarContentImage.prototype.render = function () {
|
|
49
60
|
var _a = this.props, imageUrl = _a.imageUrl, tooltipText = _a.tooltipText, onClick = _a.onClick;
|
|
50
|
-
var
|
|
61
|
+
var maybeButtonProps = onClick == null ? {} : {
|
|
62
|
+
role: 'button',
|
|
63
|
+
onClick: function () { return onClick(); },
|
|
64
|
+
};
|
|
51
65
|
if (imageUrl == null) {
|
|
52
|
-
return (React.createElement("span", { className: "sd-avatar-content sd-avatar-content--dummy-img", title: tooltipText
|
|
66
|
+
return (React.createElement("span", __assign({}, maybeButtonProps, { className: "sd-avatar-content sd-avatar-content--dummy-img", title: tooltipText }),
|
|
53
67
|
React.createElement("svg", { width: "200", height: "200", viewBox: "0 0 200 200", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
54
|
-
React.createElement("circle", { cx: "100", cy: "100", r: "100", fill: "white",
|
|
55
|
-
React.createElement("path", {
|
|
68
|
+
React.createElement("circle", { cx: "100", cy: "100", r: "100", fill: "white", fillOpacity: "0.01" }),
|
|
69
|
+
React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M40 153V145.384C40 141.557 41.16 137.981 43.16 135C49.14 126.057 66.24 119.711 77.14 118C82.74 117.115 90.16 116.538 100 116.538C109.84 116.538 117.26 117.115 122.86 118C133.76 119.711 150.86 126.057 156.84 135C158.84 137.981 160 141.557 160 145.384V153C150 165 130 180 100 180C70 180 50 165 40 153ZM100 30C122.08 30 140 47.2307 140 68.4614C140 89.6922 122.08 106.923 100 106.923C77.92 106.923 60 89.6922 60 68.4614C60 47.2307 77.92 30 100 30Z", fill: "var(--sd-colour-avatar-dummy)", fillOpacity: "1" }))));
|
|
56
70
|
}
|
|
57
71
|
else {
|
|
58
|
-
return (React.createElement("span", { className: "sd-avatar-content", title: tooltipText
|
|
72
|
+
return (React.createElement("span", __assign({}, maybeButtonProps, { className: "sd-avatar-content", title: tooltipText }),
|
|
59
73
|
React.createElement("img", { src: imageUrl })));
|
|
60
74
|
}
|
|
61
75
|
};
|