superdesk-ui-framework 3.0.1-beta.10 → 3.0.1-beta.12

package/react/components/TreeSelect.js

@@ -50,13 +50,25 @@ exports.TreeSelect = void 0;
 var React = __importStar(require("react"));
 var Icon_1 = require("./Icon");
 var Loader_1 = require("./Loader");
-var classnames_1 = __importDefault(require("classnames"));
 var react_id_generator_1 = __importDefault(require("react-id-generator"));
+var debounce_1 = __importDefault(require("lodash/debounce"));
+var Form_1 = require("./Form");
+var core_1 = require("@popperjs/core");
+var lodash_1 = require("lodash");
 var TreeSelect = /** @class */ (function (_super) {
     __extends(TreeSelect, _super);
     function TreeSelect(props) {
         var _this = _super.call(this, props) || this;
         _this.htmlId = (0, react_id_generator_1.default)();
+        _this.componentDidMount = function () {
+            _this.recursion(_this.state.options);
+            document.addEventListener("mousedown", function (event) {
+                if ((_this.dropdownRef.current && !_this.dropdownRef.current.contains(event.target))
+                    && (_this.openDropdownRef.current && !_this.openDropdownRef.current.contains(event.target))) {
+                    _this.setState({ openDropdown: false });
+                }
+            });
+        };
         _this.backButton = function () {
             if (_this.state.activeTree.length > 0) {
                 _this.setState({
@@ -73,15 +85,7 @@ var TreeSelect = /** @class */ (function (_super) {
                 buttonValue: _this.state.buttonTree.pop(),
             });
         };
-        _this.componentDidMount = function () {
-            _this.recursion(_this.state.options);
-            document.addEventListener("mousedown", function (event) {
-                if ((_this.dropdownRef.current && !_this.dropdownRef.current.contains(event.target))
-                    && (_this.openDropdownRef.current && !_this.openDropdownRef.current.contains(event.target))) {
-                    _this.setState({ openDropdown: false });
-                }
-            });
-        };
+        _this.debounceFn = (0, debounce_1.default)(_this.handleDebounce, 500);
         _this.state = {
             value: _this.props.value ? _this.props.value : [],
             options: _this.props.getOptions ? _this.props.getOptions() : [],
@@ -93,8 +97,8 @@ var TreeSelect = /** @class */ (function (_super) {
             buttonValue: [],
             buttonMouseEvent: false,
             openDropdown: false,
-            loading: _this.props.loading ? _this.props.loading : false,
-            invalid: _this.props.invalid ? _this.props.invalid : false,
+            loading: false,
+            // provera: false
         };
         _this.removeClick = _this.removeClick.bind(_this);
         _this.handleMultiLevel = _this.handleMultiLevel.bind(_this);
@@ -104,10 +108,47 @@ var TreeSelect = /** @class */ (function (_super) {
         _this.handleTree = _this.handleTree.bind(_this);
         _this.filteredItem = _this.filteredItem.bind(_this);
         _this.banchButton = _this.banchButton.bind(_this);
+        _this.handleDebounce = _this.handleDebounce.bind(_this);
+        _this.toggleMenu = _this.toggleMenu.bind(_this);
         _this.dropdownRef = React.createRef();
         _this.openDropdownRef = React.createRef();
         return _this;
     }
+    TreeSelect.prototype.componentDidUpdate = function (prevProps, prevState) {
+        if (!(0, lodash_1.isEqual)(prevState.value, this.state.value)) {
+            this.props.onChange(this.state.value);
+        }
+        else if (!(0, lodash_1.isEqual)(prevProps.value, this.props.value)) {
+            this.props.onChange(this.state.value);
+        }
+        if (prevState.openDropdown !== this.state.openDropdown) {
+            this.toggleMenu();
+        }
+        if (this.props.kind === 'synchronous') {
+            if ((prevState.activeTree !== this.state.activeTree)
+                || (prevState.filterArr !== this.state.filterArr)
+                || (prevState.options !== this.state.options)) {
+                this.popperInstance.update();
+            }
+        }
+    };
+    TreeSelect.prototype.toggleMenu = function () {
+        if (this.state.openDropdown) {
+            if (this.openDropdownRef.current && this.dropdownRef.current) {
+                this.popperInstance = (0, core_1.createPopper)(this.openDropdownRef.current, this.dropdownRef.current, {
+                    placement: 'bottom-start',
+                    modifiers: [
+                        {
+                            name: 'offset',
+                            options: {
+                                offset: [-4, 4],
+                            },
+                        },
+                    ],
+                });
+            }
+        }
+    };
     TreeSelect.prototype.removeClick = function (i) {
         var newTags = this.state.value;
         newTags === null || newTags === void 0 ? void 0 : newTags.splice(i, 1);
@@ -248,18 +289,10 @@ var TreeSelect = /** @class */ (function (_super) {
             }
         });
     };
-    TreeSelect.prototype.componentDidUpdate = function (prevProps, prevState) {
-        if (prevState.value !== this.state.value) {
-            this.props.onChange(this.state.value);
-        }
-        else if (prevProps.value !== this.props.value) {
-            this.props.onChange(this.state.value);
-        }
-    };
     TreeSelect.prototype.filteredItem = function (arr) {
         var _this = this;
         if (this.props.kind === 'synchronous') {
-            return arr.filter(function (item) {
+            var filteredArr = arr.filter(function (item) {
                 if (_this.state.searchFieldValue) {
                     if (_this.props.getLabel(item.value)
                         .toLowerCase().includes(_this.state.searchFieldValue.toLowerCase())) {
@@ -272,25 +305,31 @@ var TreeSelect = /** @class */ (function (_super) {
                 else {
                     return item.value;
                 }
-            }).map(function (option, i) {
-                var selectedItem = _this.state.value.some(function (obj) {
-                    return _this.props.getId(obj) === _this.props.getId(option.value);
-                });
-                return React.createElement("li", { key: i, className: "suggestion-item suggestion-item--multi-select", onClick: function (event) {
-                        _this.setState({
-                            searchFieldValue: '',
-                        }),
-                            event.preventDefault();
-                        event.stopPropagation();
-                        _this.handleTree(event, option);
-                    } },
-                    _this.props.optionTemplate
-                        ? _this.props.optionTemplate(option.value)
-                        : React.createElement("span", { className: selectedItem
-                                ? 'suggestion-item--disabled' : undefined }, _this.props.getLabel(option.value)),
-                    option.children && React.createElement("span", { className: "suggestion-item__icon" },
-                        React.createElement(Icon_1.Icon, { name: "chevron-right-thin" })));
             });
+            if (filteredArr.length === 0) {
+                return React.createElement("li", { className: "suggestion-item--nothing-found" }, "Nothing fonud");
+            }
+            else {
+                return filteredArr.map(function (option, i) {
+                    var selectedItem = _this.state.value.some(function (obj) {
+                        return _this.props.getId(obj) === _this.props.getId(option.value);
+                    });
+                    return React.createElement("li", { key: i, className: "suggestion-item suggestion-item--multi-select", onClick: function (event) {
+                            _this.setState({
+                                searchFieldValue: '',
+                            }),
+                                event.preventDefault();
+                            event.stopPropagation();
+                            _this.handleTree(event, option);
+                        } },
+                        _this.props.optionTemplate
+                            ? _this.props.optionTemplate(option.value)
+                            : React.createElement("span", { className: selectedItem
+                                    ? 'suggestion-item--disabled' : undefined }, _this.props.getLabel(option.value)),
+                        option.children && React.createElement("span", { className: "suggestion-item__icon" },
+                            React.createElement(Icon_1.Icon, { name: "chevron-right-thin" })));
+                });
+            }
         }
         else if (this.props.kind === 'asynchronous') {
             return this.state.options.map(function (item, i) {
@@ -321,20 +360,29 @@ var TreeSelect = /** @class */ (function (_super) {
             return React.createElement("button", { className: 'autocomplete__button' + (this.props.selectBranchWithChildren ? ' autocomplete__button--multi-select' : '') + ' autocomplete__button--disabled', value: this.state.buttonValue }, "Category selected");
         }
     };
+    TreeSelect.prototype.handleDebounce = function () {
+        var _this = this;
+        this.setState({ options: [] });
+        if (this.props.kind === 'asynchronous') {
+            if (this.state.searchFieldValue) {
+                this.setState({
+                    loading: true,
+                    // provera: false
+                });
+                this.ICancelFn = this.props.searchOptions(this.state.searchFieldValue, function (items) {
+                    // if (items.length === 0) {
+                    //     this.setState({provera: true, loading: false})
+                    // } else {
+                    _this.setState({ options: items, loading: false });
+                    _this.popperInstance.update();
+                    // }
+                });
+            }
+        }
+    };
     TreeSelect.prototype.render = function () {
         var _this = this;
-        var labelClasses = (0, classnames_1.default)('sd-input__label', {
-            'a11y-only': this.props.labelHidden,
-        });
-        var classesLabel = (0, classnames_1.default)('sd-input', {
-            'sd-input--inline-label': this.props.inlineLabel,
-            'sd-input--required': this.props.required,
-            'sd-input--disabled': this.props.disabled,
-            'sd-input--full-width': this.props.fullWidth,
-            'sd-input--invalid': this.props.invalid || this.state.invalid,
-        });
-        return (React.createElement("div", { className: classesLabel },
-            React.createElement("label", { className: labelClasses, htmlFor: this.htmlId, id: this.htmlId + 'label', tabIndex: this.props.tabindex === undefined ? undefined : -1 }, this.props.label),
+        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") },
                 this.props.allowMultiple
                     ? React.createElement("div", { className: "tags-input__tags" },
@@ -353,12 +401,13 @@ var TreeSelect = /** @class */ (function (_super) {
                                             || React.createElement("span", { className: "tags-input__remove-button" },
                                                 React.createElement(Icon_1.Icon, { name: "close-small" })))));
                         })),
-                        this.state.value.length > 0 ?
-                            this.props.readOnly
+                        this.state.value.length > 0
+                            ? this.props.readOnly
                                 || React.createElement("button", { className: "tags-input__remove-value", onClick: function () { return _this.setState({ value: [] }); } },
                                     React.createElement(Icon_1.Icon, { name: 'remove-sign' })) : null)
                     : React.createElement("div", { className: "tags-input__tags" },
-                        React.createElement("button", { className: "tags-input__overlay-button", ref: this.openDropdownRef, onClick: function () { return _this.setState({ openDropdown: !_this.state.openDropdown }); } }),
+                        this.props.readOnly
+                            || React.createElement("button", { className: "tags-input__overlay-button", ref: this.openDropdownRef, onClick: function () { return _this.setState({ openDropdown: !_this.state.openDropdown }); } }),
                         this.state.value.length < 1 && React.createElement("span", { className: 'tags-input__single-item'
                                 + (this.props.readOnly ? ' tags-input__tag-item--readonly' : '') },
                             React.createElement("span", { className: "tags-input__placeholder" }, this.props.placeholder)),
@@ -374,8 +423,8 @@ var TreeSelect = /** @class */ (function (_super) {
                                             || React.createElement("span", { className: "tags-input__remove-button" },
                                                 React.createElement(Icon_1.Icon, { name: 'remove-sign' })))));
                         })),
-                this.state.openDropdown &&
-                    React.createElement("div", { className: "autocomplete autocomplete--multi-select" + (this.props.width === 'medium' ? ' autocomplete--fixed-width' : ''), ref: this.dropdownRef },
+                this.state.openDropdown
+                    && React.createElement("div", { className: "autocomplete autocomplete--multi-select" + (this.props.width === 'medium' ? ' autocomplete--fixed-width' : ''), ref: this.dropdownRef },
                         React.createElement("div", { className: 'autocomplete__header' },
                             React.createElement("div", { className: "autocomplete__icon", onClick: function () {
                                     _this.backButtonValue();
@@ -383,23 +432,28 @@ 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.singleLevelSearch ? 'Search this category...' : 'Search...', type: "text", className: "autocomplete__input", ref: function (input) { return input && input.focus(); }, value: this.state.searchFieldValue, onChange: function (event) {
-                                        var value = event.target.value;
-                                        if (_this.props.kind === 'asynchronous') {
-                                            _this.setState({
-                                                searchFieldValue: value,
-                                                loading: true,
-                                            }),
-                                                _this.props.searchOptions(value, function (items) {
-                                                    _this.setState({ options: items, loading: false });
-                                                });
+                                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) {
+                                        if (_this.props.kind === 'synchronous') {
+                                            _this.setState({ searchFieldValue: event.target.value });
+                                            _this.popperInstance.update();
+                                        }
+                                        else if (_this.props.kind === 'asynchronous') {
+                                            if (_this.ICancelFn) {
+                                                _this.ICancelFn();
+                                            }
+                                            _this.setState({ searchFieldValue: event.target.value, options: [] });
+                                            _this.popperInstance.update();
+                                            _this.debounceFn();
                                         }
-                                        else if (_this.props.kind === 'synchronous') {
-                                            _this.setState({ searchFieldValue: value });
+                                        else {
+                                            return;
                                         }
+                                        // if(!this.state.searchFieldValue) {
+                                        //     this.setState({provera: false});
+                                        // }
                                     } }))),
-                        this.state.activeTree.length > 0 &&
-                            React.createElement("div", { className: 'autocomplete__category-header' },
+                        this.state.activeTree.length > 0
+                            && React.createElement("div", { className: 'autocomplete__category-header' },
                                 React.createElement("div", { className: "autocomplete__icon", onClick: function () {
                                         _this.backButtonValue();
                                         _this.backButton();
@@ -413,35 +467,27 @@ var TreeSelect = /** @class */ (function (_super) {
                         this.state.loading
                             ? React.createElement("ul", { className: "suggestion-list--loader" },
                                 React.createElement(Loader_1.Loader, { overlay: true }))
-                            :
-                                this.state.searchFieldValue === ''
-                                    ? this.props.getOptions ?
-                                        React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select" }, this.state.options
-                                            .map(function (option, i) {
-                                            var selectedItem = _this.state.value.some(function (obj) {
-                                                return _this.props.getId(obj) === _this.props.getLabel(option.value);
-                                            });
-                                            return (React.createElement("li", { key: i, className: "suggestion-item suggestion-item--multi-select", onClick: function (event) {
-                                                    event.preventDefault();
-                                                    event.stopPropagation();
-                                                    _this.handleTree(event, option);
-                                                } },
-                                                _this.props.optionTemplate
-                                                    ? _this.props.optionTemplate(option.value)
-                                                    : React.createElement("span", { className: selectedItem
-                                                            ? 'suggestion-item--disabled' : undefined }, _this.props.getLabel(option.value)),
-                                                option.children && React.createElement("span", { className: "suggestion-item__icon" },
-                                                    React.createElement(Icon_1.Icon, { name: "chevron-right-thin" }))));
-                                        })) : null
-                                    :
-                                        React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select" }, this.filteredItem(this.props.singleLevelSearch
-                                            ? this.state.options : this.state.filterArr)))),
-            React.createElement("div", { className: 'sd-input__message-box' },
-                this.props.info && !this.props.invalid && !this.state.invalid ?
-                    React.createElement("div", { className: 'sd-input__hint' }, this.props.info) : null,
-                this.props.invalid || this.state.invalid ?
-                    React.createElement("div", { className: 'sd-input__message' }, this.props.error)
-                    : null)));
+                            : this.state.searchFieldValue === ''
+                                ? this.props.getOptions
+                                    ? React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select" }, this.state.options
+                                        .map(function (option, i) {
+                                        var selectedItem = _this.state.value.some(function (obj) {
+                                            return _this.props.getId(obj) === _this.props.getLabel(option.value);
+                                        });
+                                        return (React.createElement("li", { key: i, className: "suggestion-item suggestion-item--multi-select", onClick: function (event) {
+                                                event.preventDefault();
+                                                event.stopPropagation();
+                                                _this.handleTree(event, option);
+                                            } },
+                                            _this.props.optionTemplate
+                                                ? _this.props.optionTemplate(option.value)
+                                                : React.createElement("span", { className: selectedItem
+                                                        ? 'suggestion-item--disabled' : undefined }, _this.props.getLabel(option.value)),
+                                            option.children && React.createElement("span", { className: "suggestion-item__icon" },
+                                                React.createElement(Icon_1.Icon, { name: "chevron-right-thin" }))));
+                                    })) : null
+                                : React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select" }, this.filteredItem(this.props.singleLevelSearch
+                                    ? this.state.options : this.state.filterArr))))));
     };
     return TreeSelect;
 }(React.Component));