superdesk-ui-framework 3.0.35 → 3.0.38

package/react/components/TreeSelect.js

@@ -60,6 +60,7 @@ var Form_1 = require("./Form");
 var core_1 = require("@popperjs/core");
 var lodash_1 = require("lodash");
 var Label_1 = require("./Label");
+var SelectPreview_1 = require("./SelectPreview");
 var TreeSelect = /** @class */ (function (_super) {
     __extends(TreeSelect, _super);
     function TreeSelect(props) {
@@ -77,30 +78,32 @@ var TreeSelect = /** @class */ (function (_super) {
             var _a;
             (_a = _this.categoryButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         };
-        _this.componentDidMount = function () {
-            _this.recursion(_this.state.options);
-            document.addEventListener("mousedown", function (event) {
-                var _a, _b;
-                if ((((_a = _this.dropdownRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) !== true)
-                    && (((_b = _this.openDropdownRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target)) !== true)) {
-                    _this.setState({ openDropdown: false });
-                }
-            });
-            document.addEventListener("keydown", function (e) {
-                if (_this.state.openDropdown && _this.ref.current) {
-                    keyboardNavigation(e, _this.ref.current, _this.categoryButtonRef.current ? _this.buttonFocus : _this.inputFocus);
-                    if (e.key === 'Backspace') {
-                        _this.backButton();
-                        _this.backButtonValue();
-                        var buttonTarget = _this.state.buttonTarget;
-                        var className = buttonTarget.pop();
-                        if (className != null) {
-                            var element = document.getElementsByClassName(className)[0];
-                            element.focus();
-                        }
+        _this.onMouseDown = function (event) {
+            var _a, _b;
+            if ((((_a = _this.dropdownRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) !== true)
+                && (((_b = _this.openDropdownRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target)) !== true)) {
+                _this.setState({ openDropdown: false });
+            }
+        };
+        _this.onKeyDown = function (e) {
+            if (_this.state.openDropdown && _this.ref.current) {
+                keyboardNavigation(e, _this.ref.current, _this.categoryButtonRef.current ? _this.buttonFocus : _this.inputFocus);
+                if (e.key === 'Backspace') {
+                    _this.backButton();
+                    _this.backButtonValue();
+                    var buttonTarget = _this.state.buttonTarget;
+                    var className = "".concat(buttonTarget.pop(), "-focus");
+                    if (className != null) {
+                        var element = document.getElementsByClassName(className)[0];
+                        element.focus();
                     }
                 }
-            });
+            }
+        };
+        _this.componentDidMount = function () {
+            _this.recursion(_this.state.options);
+            document.addEventListener("mousedown", _this.onMouseDown);
+            document.addEventListener("keydown", _this.onKeyDown);
         };
         _this.backButtonValue = function () {
             var item = _this.state.buttonTree.pop();
@@ -135,6 +138,8 @@ var TreeSelect = /** @class */ (function (_super) {
         _this.branchButton = _this.branchButton.bind(_this);
         _this.handleDebounce = _this.handleDebounce.bind(_this);
         _this.toggleMenu = _this.toggleMenu.bind(_this);
+        _this.onMouseDown = _this.onMouseDown.bind(_this);
+        _this.onKeyDown = _this.onKeyDown.bind(_this);
         _this.dropdownRef = React.createRef();
         _this.ref = React.createRef();
         _this.inputRef = React.createRef();
@@ -143,6 +148,10 @@ var TreeSelect = /** @class */ (function (_super) {
         _this.popperInstance = null;
         return _this;
     }
+    TreeSelect.prototype.componentWillUnmount = function () {
+        document.removeEventListener("mousedown", this.onMouseDown);
+        document.removeEventListener("keydown", this.onKeyDown);
+    };
     TreeSelect.prototype.componentDidUpdate = function (prevProps, prevState) {
         var _a;
         if (!(0, lodash_1.isEqual)(prevState.value, this.state.value)) {
@@ -416,12 +425,16 @@ var TreeSelect = /** @class */ (function (_super) {
                         } },
                         React.createElement("button", { className: "suggestion-item--btn" },
                             _this.props.getBorderColor
-                                && React.createElement("div", { className: "item-border", style: { backgroundColor: _this.props.getBorderColor(option.value) } }),
-                            React.createElement("span", { style: _this.props.getBackgroundColor
-                                    ? { backgroundColor: _this.props.getBackgroundColor(option.value),
-                                        color: (0, Label_1.getTextColor)(_this.props.getBackgroundColor(option.value)) }
-                                    : undefined, className: 'suggestion-item--bgcolor'
-                                    + (selectedItem ? ' suggestion-item--disabled' : '') }, _this.props.optionTemplate
+                                && React.createElement("div", { className: "item-border", style: {
+                                        backgroundColor: _this.props.getBorderColor(option.value),
+                                    } }),
+                            React.createElement("span", { className: 'suggestion-item--bgcolor'
+                                    + (selectedItem ? ' suggestion-item--disabled' : ''), style: _this.props.getBackgroundColor
+                                    ? {
+                                        backgroundColor: _this.props.getBackgroundColor(option.value),
+                                        color: (0, Label_1.getTextColor)(_this.props.getBackgroundColor(option.value)),
+                                    }
+                                    : undefined }, _this.props.optionTemplate
                                 ? _this.props.optionTemplate(option.value)
                                 : _this.props.getLabel(option.value)),
                             option.children
@@ -473,7 +486,7 @@ var TreeSelect = /** @class */ (function (_super) {
             return _this.props.getId(obj) === _this.props.getId(buttonValue.value);
         });
         if (!selectedButton) {
-            return React.createElement("button", { ref: this.categoryButtonRef, className: 'autocomplete__button' + (this.props.selectBranchWithChildren ? ' autocomplete__button--multi-select' : ''), 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");
+            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");
         }
         else {
             return React.createElement("button", { className: 'autocomplete__button'
@@ -498,28 +511,46 @@ var TreeSelect = /** @class */ (function (_super) {
     };
     TreeSelect.prototype.render = function () {
         var _this = this;
-        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 },
-            React.createElement("div", { className: "tags-input tags-input--".concat(this.props.allowMultiple ? 'multi-select' : 'single-select', " sd-input__input") },
+        if (this.props.preview) {
+            return (React.createElement(SelectPreview_1.SelectPreview, { kind: this.props.allowMultiple
+                    ? {
+                        mode: 'multi-select',
+                        getBackgroundColor: this.props.getBackgroundColor,
+                    }
+                    : {
+                        mode: 'single-select',
+                        getBorderColor: this.props.getBorderColor,
+                    }, items: this.state.value, valueTemplate: this.props.valueTemplate, getLabel: this.props.getLabel }));
+        }
+        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 },
+            React.createElement("div", { className: "tags-input sd-input__input tags-input--".concat(this.props.allowMultiple ? 'multi-select' : 'single-select') },
                 this.props.allowMultiple
                     ? React.createElement("div", { className: "tags-input__tags" },
                         this.props.readOnly
-                            || React.createElement("button", { ref: this.openDropdownRef, className: "tags-input__add-button", onClick: function () { return _this.setState({ openDropdown: !_this.state.openDropdown }); } },
+                            || React.createElement("button", { ref: this.openDropdownRef, className: "tags-input__add-button ".concat(this.props.disabled ? 'tags-input__add-button--disabled' : ''), onClick: function () {
+                                    if (!_this.props.disabled) {
+                                        _this.setState({ openDropdown: !_this.state.openDropdown });
+                                    }
+                                } },
                                 React.createElement("i", { className: "icon-plus-large" })),
                         React.createElement("ul", { className: "tags-input__tag-list" }, this.state.value.map(function (item, i) {
                             var Wrapper = function (_a) {
                                 var backgroundColor = _a.backgroundColor, children = _a.children;
                                 return (React.createElement("li", { className: "tags-input__tag-item tags-input__tag-item--multi-select"
-                                        + (_this.props.readOnly ? ' tags-input__tag-item--readonly' : ''), onClick: function () { return !_this.props.readOnly && _this.removeClick(i); }, style: _this.props.valueTemplate
+                                        + (_this.props.readOnly ? ' tags-input__tag-item--readonly' : ''), onClick: function () { return (!_this.props.readOnly && !_this.props.disabled)
+                                        && _this.removeClick(i); }, style: _this.props.valueTemplate
                                         ? { backgroundColor: backgroundColor }
                                         : _this.props.getBackgroundColor
                                             && { backgroundColor: _this.props.getBackgroundColor(item) } },
-                                    React.createElement("span", { style: { color: backgroundColor
+                                    React.createElement("span", { className: "tags-input__helper-box", style: { color: backgroundColor
                                                 ? (0, Label_1.getTextColor)(backgroundColor)
                                                 : _this.props.getBackgroundColor
-                                                    && (0, Label_1.getTextColor)(_this.props.getBackgroundColor(item)) }, className: "tags-input__helper-box" },
+                                                    && (0, Label_1.getTextColor)(_this.props.getBackgroundColor(item)),
+                                        } },
                                         children,
-                                        !_this.props.readOnly && React.createElement("span", { className: "tags-input__remove-button" },
-                                            React.createElement(Icon_1.Icon, { name: "close-small" })))));
+                                        !_this.props.readOnly
+                                            && React.createElement("span", { className: "tags-input__remove-button" },
+                                                React.createElement(Icon_1.Icon, { name: "close-small" })))));
                             };
                             return (React.createElement(React.Fragment, { key: i }, _this.props.valueTemplate
                                 ? _this.props.valueTemplate(item, Wrapper)
@@ -527,7 +558,7 @@ var TreeSelect = /** @class */ (function (_super) {
                                     React.createElement("span", null, _this.props.getLabel(item)))));
                         })),
                         this.state.value.length > 0
-                            ? this.props.readOnly
+                            ? (this.props.readOnly || this.props.disabled)
                                 || React.createElement("button", { className: "tags-input__remove-value", style: { position: 'relative', bottom: '2px' }, onClick: function () { return _this.setState({ value: [] }); } },
                                     React.createElement(Icon_1.Icon, { name: 'remove-sign' }))
                             : null)
@@ -542,7 +573,7 @@ var TreeSelect = /** @class */ (function (_super) {
                             var Wrapper = function (_a) {
                                 var backgroundColor = _a.backgroundColor, borderColor = _a.borderColor, children = _a.children;
                                 return (React.createElement("span", { className: 'tags-input__single-item'
-                                        + (_this.props.readOnly ? ' tags-input__tag-item--readonly' : ''), onClick: function () { return _this.props.readOnly || _this.removeClick(i); } },
+                                        + (_this.props.readOnly ? ' tags-input__tag-item--readonly' : ''), onClick: function () { return !_this.props.readOnly && _this.removeClick(i); } },
                                     _this.props.getBorderColor
                                         && React.createElement("div", { className: "item-border item-border-selected", style: borderColor
                                                 ? { backgroundColor: borderColor }
@@ -559,7 +590,8 @@ var TreeSelect = /** @class */ (function (_super) {
                                     React.createElement("span", null, _this.props.getLabel(item))));
                         })),
                 this.state.openDropdown
-                    && React.createElement("div", { className: "autocomplete autocomplete--multi-select" + (this.props.width === 'medium' ? ' autocomplete--fixed-width' : ''), ref: this.dropdownRef, style: { zIndex: this.props.zIndex } },
+                    && React.createElement("div", { className: "autocomplete autocomplete--multi-select"
+                            + (this.props.width === 'medium' ? ' autocomplete--fixed-width' : ''), style: { zIndex: this.props.zIndex }, ref: this.dropdownRef },
                         React.createElement("div", { className: 'autocomplete__header' },
                             React.createElement("div", { className: "autocomplete__icon", onClick: function () {
                                     _this.backButtonValue();
@@ -567,7 +599,7 @@ var TreeSelect = /** @class */ (function (_super) {
                                 } },
                                 React.createElement(Icon_1.Icon, { name: "search", className: "search" })),
                             React.createElement("div", { className: 'autocomplete__filter' },
-                                React.createElement("input", { placeholder: this.props.searchPlaceholder, type: "text", className: "autocomplete__input", ref: this.inputRef, value: this.state.searchFieldValue, onChange: function (event) {
+                                React.createElement("input", { className: "autocomplete__input", type: "text", placeholder: this.props.searchPlaceholder, ref: this.inputRef, value: this.state.searchFieldValue, onChange: function (event) {
                                         var _a, _b;
                                         if (_this.props.kind === 'synchronous') {
                                             _this.setState({ searchFieldValue: event.target.value });
@@ -603,8 +635,7 @@ var TreeSelect = /** @class */ (function (_super) {
                                 React.createElement(Loader_1.Loader, { overlay: true }))
                             : this.state.searchFieldValue === ''
                                 ? this.props.getOptions
-                                    ? React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select", ref: this.ref }, this.state.options
-                                        .map(function (option, i) {
+                                    ? React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select", ref: this.ref }, this.state.options.map(function (option, i) {
                                         var selectedItem = _this.state.value.some(function (obj) {
                                             return _this.props.getId(obj) === _this.props.getId(option.value);
                                         });
@@ -613,7 +644,7 @@ var TreeSelect = /** @class */ (function (_super) {
                                                 event.stopPropagation();
                                                 _this.handleTree(event, option);
                                             } },
-                                            React.createElement("button", { className: "suggestion-item--btn ".concat(_this.props.getId(option.value)), onKeyDown: function (event) {
+                                            React.createElement("button", { className: "suggestion-item--btn ".concat(_this.props.getId(option.value), "-focus"), onKeyDown: function (event) {
                                                     if (event.key === 'Enter' && option.children) {
                                                         _this.setState({
                                                             buttonTarget: __spreadArray(__spreadArray([], _this.state.buttonTarget, true), [
@@ -626,13 +657,13 @@ var TreeSelect = /** @class */ (function (_super) {
                                                     && React.createElement("div", { className: "item-border", style: {
                                                             backgroundColor: _this.props.getBorderColor(option.value),
                                                         } }),
-                                                React.createElement("span", { style: (_this.props.getBackgroundColor && option.value)
+                                                React.createElement("span", { className: 'suggestion-item--bgcolor'
+                                                        + (selectedItem ? ' suggestion-item--disabled' : ''), style: (_this.props.getBackgroundColor && option.value)
                                                         ? {
                                                             backgroundColor: _this.props.getBackgroundColor(option.value),
                                                             color: (0, Label_1.getTextColor)(_this.props.getBackgroundColor(option.value)),
                                                         }
-                                                        : undefined, className: 'suggestion-item--bgcolor'
-                                                        + (selectedItem ? ' suggestion-item--disabled' : '') }, _this.props.optionTemplate
+                                                        : undefined }, _this.props.optionTemplate
                                                     ? _this.props.optionTemplate(option.value)
                                                     : _this.props.getLabel(option.value)),
                                                 option.children