superdesk-ui-framework 3.0.1-beta.3 → 3.0.1-beta.30

package/react/components/TreeSelect.js

@@ -0,0 +1,521 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TreeSelect = void 0;
+var React = __importStar(require("react"));
+var Icon_1 = require("./Icon");
+var Loader_1 = require("./Loader");
+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 Label_1 = require("./Label");
+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({
+                    options: _this.state.activeTree.pop(),
+                });
+                return;
+            }
+            else {
+                return false;
+            }
+        };
+        _this.backButtonValue = function () {
+            _this.setState({
+                buttonValue: _this.state.buttonTree.pop(),
+            });
+        };
+        _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() : [],
+            firstBranchOptions: _this.props.getOptions ? _this.props.getOptions() : [],
+            activeTree: [],
+            filterArr: [],
+            searchFieldValue: '',
+            buttonTree: [],
+            buttonValue: [],
+            buttonMouseEvent: false,
+            openDropdown: false,
+            loading: false,
+            // provera: false
+        };
+        _this.removeClick = _this.removeClick.bind(_this);
+        _this.handleMultiLevel = _this.handleMultiLevel.bind(_this);
+        _this.backButton = _this.backButton.bind(_this);
+        _this.handleButton = _this.handleButton.bind(_this);
+        _this.backButtonValue = _this.backButtonValue.bind(_this);
+        _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);
+        this.setState({
+            value: newTags,
+        });
+        this.props.onChange(this.state.value);
+    };
+    TreeSelect.prototype.handleMultiLevel = function (item) {
+        if (item.children) {
+            this.setState({
+                activeTree: __spreadArray(__spreadArray([], this.state.activeTree, true), [this.state.options], false),
+                options: item.children,
+            });
+        }
+    };
+    TreeSelect.prototype.handleButton = function (item) {
+        this.setState({
+            buttonTree: __spreadArray(__spreadArray([], this.state.buttonTree, true), [this.state.buttonValue], false),
+            buttonValue: item,
+        });
+    };
+    TreeSelect.prototype.handleValue = function (event, item) {
+        var _this = this;
+        if (this.props.allowMultiple) {
+            var checkItem = this.state.value.find(function (valueItem) {
+                return _this.props.getId(valueItem) === _this.props.getId(item.value);
+            });
+            if (!checkItem) {
+                this.setState({ value: __spreadArray(__spreadArray([], this.state.value, true), [item.value], false) });
+            }
+            if (!event.ctrlKey) {
+                if (this.props.getOptions) {
+                    this.setState({ options: this.state.firstBranchOptions, activeTree: [], openDropdown: false });
+                }
+                else {
+                    this.setState({ activeTree: [], openDropdown: false });
+                }
+            }
+            this.setState({ buttonMouseEvent: false });
+        }
+        else {
+            var checkItem = this.state.value.find(function (valueItem) {
+                return _this.props.getId(valueItem) === _this.props.getId(item.value);
+            });
+            if (!checkItem) {
+                this.setState({ value: [item.value] });
+            }
+            if (!event.ctrlKey) {
+                this.setState({ options: this.state.firstBranchOptions, activeTree: [], openDropdown: false });
+            }
+            this.setState({ buttonMouseEvent: false });
+        }
+    };
+    TreeSelect.prototype.handleBranchValue = function (event, item) {
+        var _this = this;
+        if (this.props.allowMultiple) {
+            if (this.props.selectBranchWithChildren) {
+                var checkItem = this.state.value.find(function (valueItem) {
+                    return _this.props.getId(valueItem) === _this.props.getId(item.value);
+                });
+                if (!checkItem) {
+                    this.setState({ value: __spreadArray(__spreadArray([], this.state.value, true), [item.value], false) });
+                }
+                if (!event.ctrlKey) {
+                    this.setState({ options: this.state.firstBranchOptions, activeTree: [], openDropdown: false });
+                }
+                this.setState({ buttonMouseEvent: false });
+            }
+        }
+        else {
+            if (this.props.selectBranchWithChildren) {
+                var checkItem = this.state.value.find(function (valueItem) {
+                    return _this.props.getId(valueItem) === _this.props.getId(item.value);
+                });
+                if (!checkItem) {
+                    this.setState({ value: [item.value] });
+                }
+                if (!event.ctrlKey) {
+                    this.setState({ options: this.state.firstBranchOptions, activeTree: [], openDropdown: false });
+                }
+                this.setState({ buttonMouseEvent: false });
+            }
+        }
+    };
+    TreeSelect.prototype.handleTree = function (event, option) {
+        var _this = this;
+        if (option.children) {
+            this.handleButton(option);
+            this.handleMultiLevel(option);
+            if (event.altKey && this.props.allowMultiple) {
+                if (this.props.selectBranchWithChildren) {
+                    var filteredItems_1 = [];
+                    option.children.forEach(function (item) {
+                        if (!_this.state.value.includes(item.value)) {
+                            filteredItems_1.push(item.value);
+                        }
+                    });
+                    this.setState({
+                        value: __spreadArray(__spreadArray([], this.state.value, true), filteredItems_1, true),
+                        options: this.state.firstBranchOptions,
+                        openDropdown: false,
+                        activeTree: [],
+                    });
+                }
+                else {
+                    var filteredItems_2 = [];
+                    option.children.forEach(function (item) {
+                        if (!_this.state.value.includes(item.value)
+                            && !item.children) {
+                            filteredItems_2.push(item.value);
+                        }
+                    });
+                    if (filteredItems_2.length > 0) {
+                        this.setState({
+                            value: __spreadArray(__spreadArray([], this.state.value, true), filteredItems_2, true),
+                            options: this.state.firstBranchOptions,
+                            openDropdown: false,
+                            activeTree: [],
+                        });
+                    }
+                }
+            }
+        }
+        else {
+            this.handleValue(event, option);
+            if (!event.ctrlKey) {
+                this.setState({ openDropdown: false });
+            }
+        }
+    };
+    TreeSelect.prototype.recursion = function (arr) {
+        var _this = this;
+        arr.map(function (item) {
+            _this.state.filterArr.push(item);
+            if (item.children) {
+                _this.recursion(item.children);
+            }
+        });
+    };
+    TreeSelect.prototype.filteredItem = function (arr) {
+        var _this = this;
+        if (this.props.kind === 'synchronous') {
+            var filteredArr = arr.filter(function (item) {
+                if (_this.state.searchFieldValue) {
+                    if (_this.props.getLabel(item.value)
+                        .toLowerCase().includes(_this.state.searchFieldValue.toLowerCase())) {
+                        return item.value;
+                    }
+                    else {
+                        return;
+                    }
+                }
+                else {
+                    return item.value;
+                }
+            });
+            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.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
+                            ? _this.props.optionTemplate(option.value)
+                            : _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) {
+                var selectedItem = _this.state.value.some(function (obj) {
+                    return _this.props.getId(obj) === _this.props.getId(item.value);
+                });
+                return (React.createElement("li", { key: i, className: "suggestion-item suggestion-item--multi-select", onClick: function (event) {
+                        _this.handleValue(event, item);
+                    } }, _this.props.optionTemplate
+                    ? _this.props.optionTemplate(item.value)
+                    : React.createElement("span", { className: selectedItem
+                            ? 'suggestion-item--disabled' : undefined }, _this.props.getLabel(item.value))));
+            });
+        }
+        else {
+            return;
+        }
+    };
+    TreeSelect.prototype.banchButton = function () {
+        var _this = this;
+        var selectedButton = this.state.value.some(function (obj) {
+            return _this.props.getId(obj) === _this.props.getId(_this.state.buttonValue.value);
+        });
+        if (!selectedButton) {
+            return React.createElement("button", { className: 'autocomplete__button' + (this.props.selectBranchWithChildren ? ' autocomplete__button--multi-select' : ''), onMouseOver: function () { return _this.setState({ buttonMouseEvent: true }); }, onMouseOut: function () { return _this.setState({ buttonMouseEvent: false }); }, value: this.state.buttonValue, onClick: function (event) { return _this.handleBranchValue(event, _this.state.buttonValue); } }, "Choose entire category");
+        }
+        else {
+            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;
+        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" },
+                        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("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
+                                        ? { backgroundColor: backgroundColor }
+                                        : _this.props.getBackgroundColor
+                                            && { backgroundColor: _this.props.getBackgroundColor(item) } },
+                                    React.createElement("span", { style: { color: backgroundColor
+                                                ? (0, Label_1.getTextColor)(backgroundColor)
+                                                : _this.props.getBackgroundColor
+                                                    && (0, Label_1.getTextColor)(_this.props.getBackgroundColor(item)) }, className: "tags-input__helper-box" },
+                                        children,
+                                        !_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)
+                                : React.createElement(Wrapper, null,
+                                    React.createElement("span", null, _this.props.getLabel(item)))));
+                        })),
+                        this.state.value.length > 0
+                            ? this.props.readOnly
+                                || 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)
+                    : React.createElement("div", { className: "tags-input__tags" },
+                        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)),
+                        this.state.value.map(function (item, i) {
+                            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.getBorderColor
+                                        && React.createElement("div", { className: "item-border item-border-selected", style: borderColor
+                                                ? { backgroundColor: borderColor }
+                                                : { backgroundColor: _this.props.getBorderColor(item) } }),
+                                    React.createElement("span", { style: { color: backgroundColor && (0, Label_1.getTextColor)(backgroundColor) }, className: "tags-input__helper-box" },
+                                        React.createElement("span", { className: backgroundColor && "tags-input__tag-item", style: { backgroundColor: backgroundColor, margin: 0 } }, children),
+                                        _this.props.readOnly
+                                            || React.createElement("span", { className: "tags-input__remove-button" },
+                                                React.createElement(Icon_1.Icon, { name: 'remove-sign' })))));
+                            };
+                            return React.createElement(React.Fragment, { key: i }, _this.props.valueTemplate
+                                ? _this.props.valueTemplate(item, Wrapper)
+                                : React.createElement(Wrapper, null,
+                                    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 },
+                        React.createElement("div", { className: 'autocomplete__header' },
+                            React.createElement("div", { className: "autocomplete__icon", onClick: function () {
+                                    _this.backButtonValue();
+                                    _this.backButton();
+                                } },
+                                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: 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 {
+                                            return;
+                                        }
+                                        // if(!this.state.searchFieldValue) {
+                                        //     this.setState({provera: false});
+                                        // }
+                                    } }))),
+                        this.state.activeTree.length > 0
+                            && React.createElement("div", { className: 'autocomplete__category-header' },
+                                React.createElement("div", { className: "autocomplete__icon", onClick: function () {
+                                        _this.backButtonValue();
+                                        _this.backButton();
+                                    } },
+                                    React.createElement(Icon_1.Icon, { name: "arrow-left", className: "arrow-left" })),
+                                React.createElement("div", { className: 'autocomplete__filter' },
+                                    React.createElement("button", { className: 'autocomplete__category-title', value: this.state.buttonValue }, this.props.optionTemplate
+                                        ? this.props.optionTemplate(this.state.buttonValue.value)
+                                        : this.props.getLabel(this.state.buttonValue.value)),
+                                    this.props.selectBranchWithChildren && this.banchButton())),
+                        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.getBorderColor && !_this.props.allowMultiple) && React.createElement("div", { className: "item-border", style: { backgroundColor: _this.props.getBorderColor(option.value) } }),
+                                            React.createElement("span", { 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
+                                                ? _this.props.optionTemplate(option.value)
+                                                : _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));
+exports.TreeSelect = TreeSelect;

package/react/index.d.ts

@@ -14,6 +14,8 @@ export { AvatarGroup } from './components/Avatar';
 export { IconButton } from './components/IconButton';
 export { IconLabel } from './components/IconLabel';
 export { Tooltip } from './components/Tooltip';
+export { DurationInput } from './components/DurationInput';
+export { getDurationString } from './components/DurationInput';
 export { DatePicker } from './components/DatePicker';
 export { DatePickerISO } from './components/DatePicker';
 export { DatePickerLocaleSettings } from './components/DatePicker';
@@ -77,5 +79,9 @@ export { Text } from './components/Text/Text';
 export { Time } from './components/Text/Time';
 export { Heading } from './components/Text/Heading';
 export { BottomNav } from './components/Navigation/BottomNav';
+export { TreeSelect } from './components/TreeSelect';
+export { TableList, TableListItem } from './components/Lists/TableList';
+export { ContentListItem } from './components/Lists/ContentList';
+export { MultiSelect } from './components/MultiSelect';
 export declare const ToggleBoxNext: any;
 export declare const reactToAngular1: any;

package/react/index.js

@@ -12,8 +12,9 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Dropdown = exports.DropdownDivider = exports.DropdownLabel = exports.DropdownItem = exports.DropdownFirst = exports.HeadingText = exports.ContentDivider = exports.Divider = exports.Icon = exports.Prop = exports.PropsList = exports.StrechBar = exports.SlidingToolbar = exports.SubNavDivider = exports.SubNav = exports.LeftMenu = exports.TabList = exports.Tab = exports.NavButton = exports.CheckButtonGroup = exports.CheckGroup = exports.CheckboxButton = exports.RadioButtonGroup = exports.Checkbox = exports.RadioGroup = exports.Loader = exports.ButtonGroup = exports.SwitchGroup = exports.Switch = exports.FormLabel = exports.TimePicker = exports.DatePickerISO = exports.DatePicker = exports.Tooltip = exports.IconLabel = exports.IconButton = exports.AvatarGroup = exports.AvatarContentImage = exports.AvatarContentText = exports.AvatarWrapper = exports.Alert = exports.Badge = exports.Label = exports.Popover = exports.SelectWithTemplate = exports.Option = exports.Select = exports.Input = exports.Button = exports.HelloWorld = void 0;
-exports.BottomNav = exports.Heading = exports.Time = exports.Text = exports.LoadingOverlay = exports.Spinner = exports.ListItemLoader = exports.Skeleton = exports.WithSizeObserver = exports.SearchBar = exports.CreateButton = exports.DropZone = exports.ThemeSelector = exports.IconPicker = exports.SelectGrid = exports.ToggleBox = exports.Menu = exports.toasted = exports.GridItemCheckWrapper = exports.GridItemTopActions = exports.GridItemFooterActions = exports.GridItemFooterBlock = exports.GridItemSlug = exports.GridItemText = exports.GridItemTitle = exports.GridItemTime = exports.GridItemContentBlock = exports.GridItemFooter = exports.GridItemMedia = exports.GridItemContent = exports.GridItem = exports.GridList = exports.TagInputTest = exports.TagInput = exports.Modal = exports.Carousel = exports.DonutChart = exports.Autocomplete = exports.EmptyState = exports.Tabs = exports.TabContent = exports.TabPanel = exports.TabLabel = exports.Tag = void 0;
+exports.DropdownLabel = exports.DropdownItem = exports.DropdownFirst = exports.HeadingText = exports.ContentDivider = exports.Divider = exports.Icon = exports.Prop = exports.PropsList = exports.StrechBar = exports.SlidingToolbar = exports.SubNavDivider = exports.SubNav = exports.LeftMenu = exports.TabList = exports.Tab = exports.NavButton = exports.CheckButtonGroup = exports.CheckGroup = exports.CheckboxButton = exports.RadioButtonGroup = exports.Checkbox = exports.RadioGroup = exports.Loader = exports.ButtonGroup = exports.SwitchGroup = exports.Switch = exports.FormLabel = exports.TimePicker = exports.DatePickerISO = exports.DatePicker = exports.getDurationString = exports.DurationInput = exports.Tooltip = exports.IconLabel = exports.IconButton = exports.AvatarGroup = exports.AvatarContentImage = exports.AvatarContentText = exports.AvatarWrapper = exports.Alert = exports.Badge = exports.Label = exports.Popover = exports.SelectWithTemplate = exports.Option = exports.Select = exports.Input = exports.Button = exports.HelloWorld = void 0;
+exports.ContentListItem = exports.TableListItem = exports.TableList = exports.TreeSelect = exports.BottomNav = exports.Heading = exports.Time = exports.Text = exports.LoadingOverlay = exports.Spinner = exports.ListItemLoader = exports.Skeleton = exports.WithSizeObserver = exports.SearchBar = exports.CreateButton = exports.DropZone = exports.ThemeSelector = exports.IconPicker = exports.SelectGrid = exports.ToggleBox = exports.Menu = exports.toasted = exports.GridItemCheckWrapper = exports.GridItemTopActions = exports.GridItemFooterActions = exports.GridItemFooterBlock = exports.GridItemSlug = exports.GridItemText = exports.GridItemTitle = exports.GridItemTime = exports.GridItemContentBlock = exports.GridItemFooter = exports.GridItemMedia = exports.GridItemContent = exports.GridItem = exports.GridList = exports.TagInputTest = exports.TagInput = exports.Modal = exports.Carousel = exports.DonutChart = exports.Autocomplete = exports.EmptyState = exports.Tabs = exports.TabContent = exports.TabPanel = exports.TabLabel = exports.Tag = exports.Dropdown = exports.DropdownDivider = void 0;
+exports.MultiSelect = void 0;
 var HelloWorld_1 = require("./components/HelloWorld");
 Object.defineProperty(exports, "HelloWorld", { enumerable: true, get: function () { return HelloWorld_1.HelloWorld; } });
 var Button_1 = require("./components/Button");
@@ -47,6 +48,10 @@ var IconLabel_1 = require("./components/IconLabel");
 Object.defineProperty(exports, "IconLabel", { enumerable: true, get: function () { return IconLabel_1.IconLabel; } });
 var Tooltip_1 = require("./components/Tooltip");
 Object.defineProperty(exports, "Tooltip", { enumerable: true, get: function () { return Tooltip_1.Tooltip; } });
+var DurationInput_1 = require("./components/DurationInput");
+Object.defineProperty(exports, "DurationInput", { enumerable: true, get: function () { return DurationInput_1.DurationInput; } });
+var DurationInput_2 = require("./components/DurationInput");
+Object.defineProperty(exports, "getDurationString", { enumerable: true, get: function () { return DurationInput_2.getDurationString; } });
 var DatePicker_1 = require("./components/DatePicker");
 Object.defineProperty(exports, "DatePicker", { enumerable: true, get: function () { return DatePicker_1.DatePicker; } });
 var DatePicker_2 = require("./components/DatePicker");
@@ -163,7 +168,6 @@ var DropZone_1 = require("./components/DropZone");
 Object.defineProperty(exports, "DropZone", { enumerable: true, get: function () { return DropZone_1.DropZone; } });
 var CreateButton_1 = require("./components/CreateButton");
 Object.defineProperty(exports, "CreateButton", { enumerable: true, get: function () { return CreateButton_1.CreateButton; } });
-// export { TreeSelect } from './components/TreeSelect';
 var SearchBar_1 = require("./components/SearchBar");
 Object.defineProperty(exports, "SearchBar", { enumerable: true, get: function () { return SearchBar_1.SearchBar; } });
 var WithSizeObserver_1 = require("./components/WithSizeObserver");
@@ -187,3 +191,12 @@ var Heading_1 = require("./components/Text/Heading");
 Object.defineProperty(exports, "Heading", { enumerable: true, get: function () { return Heading_1.Heading; } });
 var BottomNav_1 = require("./components/Navigation/BottomNav");
 Object.defineProperty(exports, "BottomNav", { enumerable: true, get: function () { return BottomNav_1.BottomNav; } });
+var TreeSelect_1 = require("./components/TreeSelect");
+Object.defineProperty(exports, "TreeSelect", { enumerable: true, get: function () { return TreeSelect_1.TreeSelect; } });
+var TableList_1 = require("./components/Lists/TableList");
+Object.defineProperty(exports, "TableList", { enumerable: true, get: function () { return TableList_1.TableList; } });
+Object.defineProperty(exports, "TableListItem", { enumerable: true, get: function () { return TableList_1.TableListItem; } });
+var ContentList_1 = require("./components/Lists/ContentList");
+Object.defineProperty(exports, "ContentListItem", { enumerable: true, get: function () { return ContentList_1.ContentListItem; } });
+var MultiSelect_1 = require("./components/MultiSelect");
+Object.defineProperty(exports, "MultiSelect", { enumerable: true, get: function () { return MultiSelect_1.MultiSelect; } });

package/.vscode/settings.json

@@ -1,5 +0,0 @@
-{
-    "cSpell.words": [
-        "qcode"
-    ]
-}

package/app-typescript/dist/components/Alert.d.ts

@@ -1,16 +0,0 @@
-import * as React from 'react';
-interface IProps {
-    type?: 'primary' | 'success' | 'warning' | 'alert' | 'highlight' | 'sd-green';
-    style?: 'filled' | 'hollow';
-    size?: 'normal' | 'small';
-    restoreIcon?: 'info' | 'help';
-}
-interface IState {
-    open: boolean;
-}
-export declare class Alert extends React.PureComponent<IProps, IState> {
-    constructor(props: IProps);
-    onToggle(): void;
-    render(): JSX.Element;
-}
-export {};