superdesk-ui-framework 3.0.35 → 3.0.38
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 +3 -5
- package/app/styles/_tag-labels.scss +0 -2
- package/app/styles/app.scss +1 -0
- package/app/styles/form-elements/_checkbox.scss +3 -0
- package/app/styles/form-elements/_input-preview.scss +70 -0
- package/app/styles/form-elements/_inputs.scss +10 -14
- package/app/styles/primereact/_pr-tag-input.scss +1 -1
- package/app-typescript/components/DatePicker.tsx +101 -101
- package/app-typescript/components/DurationInput.tsx +76 -76
- package/app-typescript/components/Form/InputNew.tsx +1 -1
- package/app-typescript/components/Form/InputWrapper.tsx +34 -18
- package/app-typescript/components/Input.tsx +38 -62
- package/app-typescript/components/MultiSelect.tsx +49 -47
- package/app-typescript/components/Select.tsx +13 -22
- package/app-typescript/components/SelectPreview.tsx +100 -0
- package/app-typescript/components/SelectWithTemplate.tsx +2 -12
- package/app-typescript/components/TagInput.tsx +25 -24
- package/app-typescript/components/TimePicker.tsx +13 -16
- package/app-typescript/components/TreeSelect.tsx +218 -158
- package/dist/examples.bundle.js +2400 -2258
- package/dist/react/Autocomplete.tsx +32 -31
- package/dist/react/DatePicker.tsx +56 -73
- package/dist/react/DurationInput.tsx +36 -47
- package/dist/react/Inputs.tsx +86 -248
- package/dist/react/MultiSelect.tsx +30 -23
- package/dist/react/Selects.tsx +12 -44
- package/dist/react/TagInputDocs.tsx +15 -21
- package/dist/react/TimePicker.tsx +25 -32
- package/dist/react/TreeSelect.tsx +97 -90
- package/dist/superdesk-ui.bundle.css +85 -18
- package/dist/superdesk-ui.bundle.js +1973 -1816
- package/dist/vendor.bundle.js +14 -14
- package/examples/pages/react/Autocomplete.tsx +32 -31
- package/examples/pages/react/DatePicker.tsx +56 -73
- package/examples/pages/react/DurationInput.tsx +36 -47
- package/examples/pages/react/Inputs.tsx +86 -248
- package/examples/pages/react/MultiSelect.tsx +30 -23
- package/examples/pages/react/Selects.tsx +12 -44
- package/examples/pages/react/TagInputDocs.tsx +15 -21
- package/examples/pages/react/TimePicker.tsx +25 -32
- package/examples/pages/react/TreeSelect.tsx +97 -90
- package/package.json +1 -1
- package/react/components/DatePicker.d.ts +2 -12
- package/react/components/DatePicker.js +14 -8
- package/react/components/DurationInput.d.ts +2 -11
- package/react/components/DurationInput.js +14 -4
- package/react/components/Form/InputNew.d.ts +1 -1
- package/react/components/Form/InputWrapper.d.ts +11 -5
- package/react/components/Form/InputWrapper.js +6 -9
- package/react/components/Input.d.ts +3 -19
- package/react/components/Input.js +8 -21
- package/react/components/MultiSelect.d.ts +4 -13
- package/react/components/MultiSelect.js +6 -2
- package/react/components/Select.d.ts +3 -15
- package/react/components/Select.js +7 -8
- package/react/components/SelectPreview.d.ts +17 -0
- package/react/components/SelectPreview.js +109 -0
- package/react/components/SelectWithTemplate.d.ts +2 -11
- package/react/components/SelectWithTemplate.js +0 -1
- package/react/components/TagInput.d.ts +3 -12
- package/react/components/TagInput.js +6 -2
- package/react/components/TimePicker.d.ts +2 -11
- package/react/components/TimePicker.js +6 -2
- package/react/components/TreeSelect.d.ts +5 -11
- package/react/components/TreeSelect.js +78 -47
@@ -60,6 +60,7 @@ var Form_1 = require("./Form");
|
|
60
60
|
var core_1 = require("@popperjs/core");
|
61
61
|
var lodash_1 = require("lodash");
|
62
62
|
var Label_1 = require("./Label");
|
63
|
+
var SelectPreview_1 = require("./SelectPreview");
|
63
64
|
var TreeSelect = /** @class */ (function (_super) {
|
64
65
|
__extends(TreeSelect, _super);
|
65
66
|
function TreeSelect(props) {
|
@@ -77,30 +78,32 @@ var TreeSelect = /** @class */ (function (_super) {
|
|
77
78
|
var _a;
|
78
79
|
(_a = _this.categoryButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
79
80
|
};
|
80
|
-
_this.
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
if (
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
var
|
97
|
-
|
98
|
-
var element = document.getElementsByClassName(className)[0];
|
99
|
-
element.focus();
|
100
|
-
}
|
81
|
+
_this.onMouseDown = function (event) {
|
82
|
+
var _a, _b;
|
83
|
+
if ((((_a = _this.dropdownRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) !== true)
|
84
|
+
&& (((_b = _this.openDropdownRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target)) !== true)) {
|
85
|
+
_this.setState({ openDropdown: false });
|
86
|
+
}
|
87
|
+
};
|
88
|
+
_this.onKeyDown = function (e) {
|
89
|
+
if (_this.state.openDropdown && _this.ref.current) {
|
90
|
+
keyboardNavigation(e, _this.ref.current, _this.categoryButtonRef.current ? _this.buttonFocus : _this.inputFocus);
|
91
|
+
if (e.key === 'Backspace') {
|
92
|
+
_this.backButton();
|
93
|
+
_this.backButtonValue();
|
94
|
+
var buttonTarget = _this.state.buttonTarget;
|
95
|
+
var className = "".concat(buttonTarget.pop(), "-focus");
|
96
|
+
if (className != null) {
|
97
|
+
var element = document.getElementsByClassName(className)[0];
|
98
|
+
element.focus();
|
101
99
|
}
|
102
100
|
}
|
103
|
-
}
|
101
|
+
}
|
102
|
+
};
|
103
|
+
_this.componentDidMount = function () {
|
104
|
+
_this.recursion(_this.state.options);
|
105
|
+
document.addEventListener("mousedown", _this.onMouseDown);
|
106
|
+
document.addEventListener("keydown", _this.onKeyDown);
|
104
107
|
};
|
105
108
|
_this.backButtonValue = function () {
|
106
109
|
var item = _this.state.buttonTree.pop();
|
@@ -135,6 +138,8 @@ var TreeSelect = /** @class */ (function (_super) {
|
|
135
138
|
_this.branchButton = _this.branchButton.bind(_this);
|
136
139
|
_this.handleDebounce = _this.handleDebounce.bind(_this);
|
137
140
|
_this.toggleMenu = _this.toggleMenu.bind(_this);
|
141
|
+
_this.onMouseDown = _this.onMouseDown.bind(_this);
|
142
|
+
_this.onKeyDown = _this.onKeyDown.bind(_this);
|
138
143
|
_this.dropdownRef = React.createRef();
|
139
144
|
_this.ref = React.createRef();
|
140
145
|
_this.inputRef = React.createRef();
|
@@ -143,6 +148,10 @@ var TreeSelect = /** @class */ (function (_super) {
|
|
143
148
|
_this.popperInstance = null;
|
144
149
|
return _this;
|
145
150
|
}
|
151
|
+
TreeSelect.prototype.componentWillUnmount = function () {
|
152
|
+
document.removeEventListener("mousedown", this.onMouseDown);
|
153
|
+
document.removeEventListener("keydown", this.onKeyDown);
|
154
|
+
};
|
146
155
|
TreeSelect.prototype.componentDidUpdate = function (prevProps, prevState) {
|
147
156
|
var _a;
|
148
157
|
if (!(0, lodash_1.isEqual)(prevState.value, this.state.value)) {
|
@@ -416,12 +425,16 @@ var TreeSelect = /** @class */ (function (_super) {
|
|
416
425
|
} },
|
417
426
|
React.createElement("button", { className: "suggestion-item--btn" },
|
418
427
|
_this.props.getBorderColor
|
419
|
-
&& React.createElement("div", { className: "item-border", style: {
|
420
|
-
|
421
|
-
|
422
|
-
|
423
|
-
|
424
|
-
|
428
|
+
&& React.createElement("div", { className: "item-border", style: {
|
429
|
+
backgroundColor: _this.props.getBorderColor(option.value),
|
430
|
+
} }),
|
431
|
+
React.createElement("span", { className: 'suggestion-item--bgcolor'
|
432
|
+
+ (selectedItem ? ' suggestion-item--disabled' : ''), style: _this.props.getBackgroundColor
|
433
|
+
? {
|
434
|
+
backgroundColor: _this.props.getBackgroundColor(option.value),
|
435
|
+
color: (0, Label_1.getTextColor)(_this.props.getBackgroundColor(option.value)),
|
436
|
+
}
|
437
|
+
: undefined }, _this.props.optionTemplate
|
425
438
|
? _this.props.optionTemplate(option.value)
|
426
439
|
: _this.props.getLabel(option.value)),
|
427
440
|
option.children
|
@@ -473,7 +486,7 @@ var TreeSelect = /** @class */ (function (_super) {
|
|
473
486
|
return _this.props.getId(obj) === _this.props.getId(buttonValue.value);
|
474
487
|
});
|
475
488
|
if (!selectedButton) {
|
476
|
-
return React.createElement("button", {
|
489
|
+
return React.createElement("button", { className: 'autocomplete__button' + (this.props.selectBranchWithChildren ? ' autocomplete__button--multi-select' : ''), ref: this.categoryButtonRef, 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");
|
477
490
|
}
|
478
491
|
else {
|
479
492
|
return React.createElement("button", { className: 'autocomplete__button'
|
@@ -498,28 +511,46 @@ var TreeSelect = /** @class */ (function (_super) {
|
|
498
511
|
};
|
499
512
|
TreeSelect.prototype.render = function () {
|
500
513
|
var _this = this;
|
501
|
-
|
502
|
-
React.createElement(
|
514
|
+
if (this.props.preview) {
|
515
|
+
return (React.createElement(SelectPreview_1.SelectPreview, { kind: this.props.allowMultiple
|
516
|
+
? {
|
517
|
+
mode: 'multi-select',
|
518
|
+
getBackgroundColor: this.props.getBackgroundColor,
|
519
|
+
}
|
520
|
+
: {
|
521
|
+
mode: 'single-select',
|
522
|
+
getBorderColor: this.props.getBorderColor,
|
523
|
+
}, items: this.state.value, valueTemplate: this.props.valueTemplate, getLabel: this.props.getLabel }));
|
524
|
+
}
|
525
|
+
return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, 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 },
|
526
|
+
React.createElement("div", { className: "tags-input sd-input__input tags-input--".concat(this.props.allowMultiple ? 'multi-select' : 'single-select') },
|
503
527
|
this.props.allowMultiple
|
504
528
|
? React.createElement("div", { className: "tags-input__tags" },
|
505
529
|
this.props.readOnly
|
506
|
-
|| React.createElement("button", { ref: this.openDropdownRef, className: "tags-input__add-button", onClick: function () {
|
530
|
+
|| React.createElement("button", { ref: this.openDropdownRef, className: "tags-input__add-button ".concat(this.props.disabled ? 'tags-input__add-button--disabled' : ''), onClick: function () {
|
531
|
+
if (!_this.props.disabled) {
|
532
|
+
_this.setState({ openDropdown: !_this.state.openDropdown });
|
533
|
+
}
|
534
|
+
} },
|
507
535
|
React.createElement("i", { className: "icon-plus-large" })),
|
508
536
|
React.createElement("ul", { className: "tags-input__tag-list" }, this.state.value.map(function (item, i) {
|
509
537
|
var Wrapper = function (_a) {
|
510
538
|
var backgroundColor = _a.backgroundColor, children = _a.children;
|
511
539
|
return (React.createElement("li", { className: "tags-input__tag-item tags-input__tag-item--multi-select"
|
512
|
-
+ (_this.props.readOnly ? ' tags-input__tag-item--readonly' : ''), onClick: function () { return !_this.props.readOnly && _this.
|
540
|
+
+ (_this.props.readOnly ? ' tags-input__tag-item--readonly' : ''), onClick: function () { return (!_this.props.readOnly && !_this.props.disabled)
|
541
|
+
&& _this.removeClick(i); }, style: _this.props.valueTemplate
|
513
542
|
? { backgroundColor: backgroundColor }
|
514
543
|
: _this.props.getBackgroundColor
|
515
544
|
&& { backgroundColor: _this.props.getBackgroundColor(item) } },
|
516
|
-
React.createElement("span", { style: { color: backgroundColor
|
545
|
+
React.createElement("span", { className: "tags-input__helper-box", style: { color: backgroundColor
|
517
546
|
? (0, Label_1.getTextColor)(backgroundColor)
|
518
547
|
: _this.props.getBackgroundColor
|
519
|
-
&& (0, Label_1.getTextColor)(_this.props.getBackgroundColor(item))
|
548
|
+
&& (0, Label_1.getTextColor)(_this.props.getBackgroundColor(item)),
|
549
|
+
} },
|
520
550
|
children,
|
521
|
-
!_this.props.readOnly
|
522
|
-
React.createElement(
|
551
|
+
!_this.props.readOnly
|
552
|
+
&& React.createElement("span", { className: "tags-input__remove-button" },
|
553
|
+
React.createElement(Icon_1.Icon, { name: "close-small" })))));
|
523
554
|
};
|
524
555
|
return (React.createElement(React.Fragment, { key: i }, _this.props.valueTemplate
|
525
556
|
? _this.props.valueTemplate(item, Wrapper)
|
@@ -527,7 +558,7 @@ var TreeSelect = /** @class */ (function (_super) {
|
|
527
558
|
React.createElement("span", null, _this.props.getLabel(item)))));
|
528
559
|
})),
|
529
560
|
this.state.value.length > 0
|
530
|
-
? this.props.readOnly
|
561
|
+
? (this.props.readOnly || this.props.disabled)
|
531
562
|
|| React.createElement("button", { className: "tags-input__remove-value", style: { position: 'relative', bottom: '2px' }, onClick: function () { return _this.setState({ value: [] }); } },
|
532
563
|
React.createElement(Icon_1.Icon, { name: 'remove-sign' }))
|
533
564
|
: null)
|
@@ -542,7 +573,7 @@ var TreeSelect = /** @class */ (function (_super) {
|
|
542
573
|
var Wrapper = function (_a) {
|
543
574
|
var backgroundColor = _a.backgroundColor, borderColor = _a.borderColor, children = _a.children;
|
544
575
|
return (React.createElement("span", { className: 'tags-input__single-item'
|
545
|
-
+ (_this.props.readOnly ? ' tags-input__tag-item--readonly' : ''), onClick: function () { return _this.props.readOnly
|
576
|
+
+ (_this.props.readOnly ? ' tags-input__tag-item--readonly' : ''), onClick: function () { return !_this.props.readOnly && _this.removeClick(i); } },
|
546
577
|
_this.props.getBorderColor
|
547
578
|
&& React.createElement("div", { className: "item-border item-border-selected", style: borderColor
|
548
579
|
? { backgroundColor: borderColor }
|
@@ -559,7 +590,8 @@ var TreeSelect = /** @class */ (function (_super) {
|
|
559
590
|
React.createElement("span", null, _this.props.getLabel(item))));
|
560
591
|
})),
|
561
592
|
this.state.openDropdown
|
562
|
-
&& React.createElement("div", { className: "autocomplete autocomplete--multi-select"
|
593
|
+
&& React.createElement("div", { className: "autocomplete autocomplete--multi-select"
|
594
|
+
+ (this.props.width === 'medium' ? ' autocomplete--fixed-width' : ''), style: { zIndex: this.props.zIndex }, ref: this.dropdownRef },
|
563
595
|
React.createElement("div", { className: 'autocomplete__header' },
|
564
596
|
React.createElement("div", { className: "autocomplete__icon", onClick: function () {
|
565
597
|
_this.backButtonValue();
|
@@ -567,7 +599,7 @@ var TreeSelect = /** @class */ (function (_super) {
|
|
567
599
|
} },
|
568
600
|
React.createElement(Icon_1.Icon, { name: "search", className: "search" })),
|
569
601
|
React.createElement("div", { className: 'autocomplete__filter' },
|
570
|
-
React.createElement("input", {
|
602
|
+
React.createElement("input", { className: "autocomplete__input", type: "text", placeholder: this.props.searchPlaceholder, ref: this.inputRef, value: this.state.searchFieldValue, onChange: function (event) {
|
571
603
|
var _a, _b;
|
572
604
|
if (_this.props.kind === 'synchronous') {
|
573
605
|
_this.setState({ searchFieldValue: event.target.value });
|
@@ -603,8 +635,7 @@ var TreeSelect = /** @class */ (function (_super) {
|
|
603
635
|
React.createElement(Loader_1.Loader, { overlay: true }))
|
604
636
|
: this.state.searchFieldValue === ''
|
605
637
|
? this.props.getOptions
|
606
|
-
? React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select", ref: this.ref }, this.state.options
|
607
|
-
.map(function (option, i) {
|
638
|
+
? React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select", ref: this.ref }, this.state.options.map(function (option, i) {
|
608
639
|
var selectedItem = _this.state.value.some(function (obj) {
|
609
640
|
return _this.props.getId(obj) === _this.props.getId(option.value);
|
610
641
|
});
|
@@ -613,7 +644,7 @@ var TreeSelect = /** @class */ (function (_super) {
|
|
613
644
|
event.stopPropagation();
|
614
645
|
_this.handleTree(event, option);
|
615
646
|
} },
|
616
|
-
React.createElement("button", { className: "suggestion-item--btn ".concat(_this.props.getId(option.value)), onKeyDown: function (event) {
|
647
|
+
React.createElement("button", { className: "suggestion-item--btn ".concat(_this.props.getId(option.value), "-focus"), onKeyDown: function (event) {
|
617
648
|
if (event.key === 'Enter' && option.children) {
|
618
649
|
_this.setState({
|
619
650
|
buttonTarget: __spreadArray(__spreadArray([], _this.state.buttonTarget, true), [
|
@@ -626,13 +657,13 @@ var TreeSelect = /** @class */ (function (_super) {
|
|
626
657
|
&& React.createElement("div", { className: "item-border", style: {
|
627
658
|
backgroundColor: _this.props.getBorderColor(option.value),
|
628
659
|
} }),
|
629
|
-
React.createElement("span", {
|
660
|
+
React.createElement("span", { className: 'suggestion-item--bgcolor'
|
661
|
+
+ (selectedItem ? ' suggestion-item--disabled' : ''), style: (_this.props.getBackgroundColor && option.value)
|
630
662
|
? {
|
631
663
|
backgroundColor: _this.props.getBackgroundColor(option.value),
|
632
664
|
color: (0, Label_1.getTextColor)(_this.props.getBackgroundColor(option.value)),
|
633
665
|
}
|
634
|
-
: undefined,
|
635
|
-
+ (selectedItem ? ' suggestion-item--disabled' : '') }, _this.props.optionTemplate
|
666
|
+
: undefined }, _this.props.optionTemplate
|
636
667
|
? _this.props.optionTemplate(option.value)
|
637
668
|
: _this.props.getLabel(option.value)),
|
638
669
|
option.children
|