jsl-ui 9.18.3 → 9.19.0

package/lib/components/select/SelectDDAreaComponent.js

@@ -0,0 +1,317 @@
+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));
+};
+import { VirtualRenderComponent } from "../virtual-render/VirtualRenderComponent";
+import { EventHandler } from "../../interaction/eventhandler";
+function isInternetExplorer() {
+    return window.navigator.userAgent.indexOf("MSIE ") > 0 || !!window.navigator.userAgent.match(/Trident.*rv\:11\./);
+}
+var SelectDDAreaComponent = /** @class */ (function () {
+    function SelectDDAreaComponent(options, component, args) {
+        this.options = options;
+        this.component = component;
+        this.args = args;
+        this.onRender = new EventHandler();
+        this.isScrolling = false;
+        if (args.searchTxt) {
+            this.search(args.searchTxt);
+        }
+        this.focusFirst();
+    }
+    SelectDDAreaComponent.prototype.onCreate = function (node) {
+        var _this = this;
+        var _a, _b;
+        this.dom = node.dom;
+        this.scrollContainer = this.dom.querySelector(".sel-dd-items");
+        var item = this.component.getSelected();
+        if (item != null) {
+            if (Array.isArray(item)) {
+                item = item[0];
+            }
+            if (item != null) {
+                var d = (_b = (_a = this.renderedData) !== null && _a !== void 0 ? _a : this.filteredData) !== null && _b !== void 0 ? _b : this.options.data;
+                var idx = d.indexOf(item);
+                this.scrollContainer.scrollTop = this.options.rowHeight * idx;
+            }
+        }
+        //bugfix for IE -> blur event of search box is called when user clicks scroll bar
+        if (isInternetExplorer()) {
+            this.scrollContainer.addEventListener("scroll", function (e) {
+                _this.isScrolling = true;
+                setTimeout(function () {
+                    _this.isScrolling = false;
+                    _this.dom.querySelector(".sel-search input").focus();
+                }, 20);
+            });
+            this.scrollContainer.addEventListener("mousedown", function (e) {
+                if (e.offsetX > _this.scrollContainer.clientWidth || e.offsetY > _this.scrollContainer.clientHeight) {
+                    _this.isScrolling = true;
+                    setTimeout(function () {
+                        _this.isScrolling = false;
+                        _this.dom.querySelector(".sel-search input").focus();
+                    }, 20);
+                }
+            });
+        }
+    };
+    SelectDDAreaComponent.prototype.render = function () {
+        var _this = this;
+        var _a;
+        var data = (_a = this.filteredData) !== null && _a !== void 0 ? _a : this.options.data;
+        if (this.options.groupProperty != null) {
+            var sortedData = __spreadArray([], data, true);
+            sortedData.sort(function (a, b) {
+                return a[_this.options.groupProperty] < b[_this.options.groupProperty] ? -1
+                    : a[_this.options.groupProperty] > b[_this.options.groupProperty] ? 1 : (data.indexOf(a) - data.indexOf(b) // preserve order if it is for same group
+                    );
+            });
+            data = [];
+            var prevGroupVal = NaN;
+            for (var _i = 0, sortedData_1 = sortedData; _i < sortedData_1.length; _i++) {
+                var x = sortedData_1[_i];
+                if (x[this.options.groupProperty] !== prevGroupVal) {
+                    // create group entry
+                    data.push({ __isGroup: true, __groupValue: x[this.options.groupProperty] });
+                    prevGroupVal = x[this.options.groupProperty];
+                }
+                data.push(x);
+            }
+        }
+        this.onRender.notify(data);
+        this.renderedData = data;
+        var ddNode = {
+            tag: "div", animation: this.options.enableAnimation ? { attr: "opacity", from: "0", to: "1", duration: 400 } : undefined, children: [
+                {
+                    tag: "div", attr: { class: "sel-search", style: this.options.enableSearch ? undefined : "height:0;padding:0;margin:0;border:none;" },
+                    children: [
+                        {
+                            tag: "input", attr: {
+                                type: "text", value: this.args.searchTxt, placeholder: "Search", blur: function (e) {
+                                    e.preventDefault();
+                                    if (isInternetExplorer()) {
+                                        requestAnimationFrame(function () {
+                                            if (!_this.isScrolling) {
+                                                _this.component.close();
+                                            }
+                                        });
+                                    }
+                                    else {
+                                        _this.component.close();
+                                    }
+                                    return false;
+                                }, input: function (e, node) {
+                                    if (!_this.options.enableSearch) {
+                                        return false;
+                                    }
+                                    var term = node.dom.value;
+                                    if (!term) {
+                                        _this.clearSearch();
+                                    }
+                                    else {
+                                        _this.search(term);
+                                    }
+                                }, keydown: function (e, node) {
+                                    var _a;
+                                    if (!_this.options.enableKeyboard) {
+                                        return;
+                                    }
+                                    if (e.which === SelectDDAreaComponent.ESCAPE_KEY) {
+                                        node.dom.blur();
+                                    }
+                                    else if (e.which === SelectDDAreaComponent.DOWN_KEY) {
+                                        _this.navigateDown();
+                                    }
+                                    else if (e.which === SelectDDAreaComponent.UP_KEY) {
+                                        _this.navigateUp();
+                                    }
+                                    else if (e.which === SelectDDAreaComponent.ENTER_KEY) { // TODO: multiselect
+                                        var focus_1 = _this.component.getFocus();
+                                        if (focus_1 == null) {
+                                            // if only 1 result is left then auto select this entry
+                                            var d = (_a = _this.filteredData) !== null && _a !== void 0 ? _a : _this.options.data;
+                                            if (d.length === 1) {
+                                                focus_1 = d[0];
+                                            }
+                                        }
+                                        if (_this.options.multiple) {
+                                            if (focus_1 != null) {
+                                                var currentSelection = _this.component.getSelected();
+                                                if (currentSelection.indexOf(focus_1) >= 0) {
+                                                    currentSelection.splice(currentSelection.indexOf(focus_1), 1);
+                                                }
+                                                else {
+                                                    currentSelection.push(focus_1);
+                                                }
+                                                _this.component.setSelected(currentSelection);
+                                            }
+                                        }
+                                        else {
+                                            if (focus_1 != null) {
+                                                _this.component.setSelected(focus_1);
+                                            }
+                                            node.dom.blur();
+                                        }
+                                    }
+                                    else if (e.which === SelectDDAreaComponent.TAB_KEY) {
+                                        e.preventDefault();
+                                        node.dom.blur();
+                                    }
+                                }
+                            }
+                        }
+                    ]
+                },
+                new VirtualRenderComponent({
+                    class: "sel-dd-items" + (this.options.multiple ? " multiple" : ""),
+                    data: data,
+                    style: this.options.enableSearch ? "height:calc(100% - 1.8rem)" : "height:100%",
+                    viewportSizeInPX: this.args.renderHeight + 20,
+                    bufferSizeInPx: 20,
+                    renderRow: function (args) {
+                        var result = { tag: "div", attr: { class: "sel-dd-item" } };
+                        if (_this.options.groupProperty && args.rowData.__isGroup) {
+                            result.attr.class += " sel-dd-group";
+                            var groupValue = args.rowData.__groupValue;
+                            var groupArgs = {
+                                groupValue: groupValue,
+                                node: result
+                            };
+                            var resGroup = _this.options.onRenderGroup(groupArgs);
+                            if (resGroup != null) {
+                                result.children = [resGroup];
+                            }
+                            result.attr.mousedown = function (evt) {
+                                evt.preventDefault();
+                                evt.stopPropagation();
+                                evt.stopImmediatePropagation();
+                            };
+                            return result;
+                        }
+                        var renderArg = {
+                            data: args.rowData,
+                            node: result,
+                            isFocused: _this.component.getFocus() === args.rowData,
+                            isSelected: _this.options.multiple ?
+                                _this.component.getSelected().indexOf(args.rowData) >= 0 :
+                                _this.component.getSelected() === args.rowData,
+                            isCurrent: false
+                        };
+                        if (renderArg.isFocused) {
+                            result.attr.class += " focused";
+                        }
+                        if (renderArg.isSelected) {
+                            result.attr.class += " selected";
+                        }
+                        result.attr.mousedown = function (evt) {
+                            if (_this.options.multiple) {
+                                evt.preventDefault();
+                                evt.stopPropagation();
+                                evt.stopImmediatePropagation();
+                                var currentSelection = _this.component.getSelected();
+                                if (currentSelection.indexOf(args.rowData) >= 0) {
+                                    currentSelection.splice(currentSelection.indexOf(args.rowData), 1);
+                                    _this.component.setSelected(currentSelection);
+                                }
+                                else {
+                                    _this.component.setSelected(args.rowData);
+                                }
+                            }
+                            else {
+                                _this.component.setSelected(args.rowData);
+                            }
+                        };
+                        var res = _this.options.onRender(renderArg);
+                        if (res != null) {
+                            result.children = [res];
+                        }
+                        return result;
+                    },
+                    rowHeight: this.options.rowHeight
+                })
+            ]
+        };
+        return ddNode;
+    };
+    SelectDDAreaComponent.prototype.navigateDown = function () {
+        var _a, _b, _c;
+        var d = (_b = (_a = this.renderedData) !== null && _a !== void 0 ? _a : this.filteredData) !== null && _b !== void 0 ? _b : this.options.data;
+        var selItem = (_c = this.component.getFocus()) !== null && _c !== void 0 ? _c : this.component.getSelected();
+        if (selItem == null) {
+            this.component.setFocus(d.filter(function (x) { return !x.__isGroup; })[0]);
+            return;
+        }
+        if (Array.isArray(selItem)) {
+            selItem = selItem[0];
+        }
+        var idx = d.indexOf(selItem);
+        if (idx < 0) {
+            this.component.setFocus(d.filter(function (x) { return !x.__isGroup; })[0]);
+        }
+        else {
+            while (idx < d.length - 1) {
+                idx++;
+                if (!d[idx].__isGroup) {
+                    this.component.setFocus(d[idx]);
+                    this.scrollContainer.scrollTop = this.options.rowHeight * idx;
+                    break;
+                }
+            }
+        }
+    };
+    SelectDDAreaComponent.prototype.navigateUp = function () {
+        var _a, _b, _c;
+        var d = (_b = (_a = this.renderedData) !== null && _a !== void 0 ? _a : this.filteredData) !== null && _b !== void 0 ? _b : this.options.data;
+        var selItem = (_c = this.component.getFocus()) !== null && _c !== void 0 ? _c : this.component.getSelected();
+        if (selItem == null) {
+            this.component.setFocus(d.filter(function (x) { return !x.__isGroup; })[0]);
+            return;
+        }
+        if (Array.isArray(selItem)) {
+            selItem = selItem[0];
+        }
+        var idx = d.indexOf(selItem);
+        while (idx > 0) {
+            idx--;
+            if (!d[idx].__isGroup) {
+                this.component.setFocus(d[idx]);
+                this.scrollContainer.scrollTop = this.options.rowHeight * idx;
+                return;
+            }
+        }
+        this.component.setFocus(d.filter(function (x) { return !x.__isGroup; })[0]);
+    };
+    SelectDDAreaComponent.prototype.search = function (term) {
+        var _this = this;
+        var _a, _b, _c, _d;
+        var oldLen = (_b = (_a = this.filteredData) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
+        this.filteredData = this.options.data.filter(function (d) { return _this.options.matchSearch(d, term); });
+        var newLen = (_d = (_c = this.filteredData) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0;
+        if (oldLen !== newLen && this.scrollContainer != null) {
+            this.scrollContainer.scrollTop = 0;
+        }
+        this.focusFirst();
+    };
+    SelectDDAreaComponent.prototype.clearSearch = function () {
+        this.filteredData = null;
+        this.focusFirst();
+    };
+    SelectDDAreaComponent.prototype.focusFirst = function () {
+        var _a;
+        if (this.options.focusFirstItem && (this.component.getSelected() == null || this.component.getSelected().length === 0)) /* TODO multiselect */ {
+            this.component.setFocus(((_a = this.filteredData) !== null && _a !== void 0 ? _a : this.options.data)[0]);
+        }
+    };
+    SelectDDAreaComponent.ESCAPE_KEY = 27;
+    SelectDDAreaComponent.DOWN_KEY = 40;
+    SelectDDAreaComponent.UP_KEY = 38;
+    SelectDDAreaComponent.ENTER_KEY = 13;
+    SelectDDAreaComponent.TAB_KEY = 9;
+    return SelectDDAreaComponent;
+}());
+export { SelectDDAreaComponent };

package/lib/components/select/SelectStyle.scss

@@ -0,0 +1,187 @@
+.select-comp {
+    border: solid 1px #bdbdbd;
+    border-radius: 0.2rem;
+    position: relative;
+    min-width: 8rem;
+    display: inline-block;
+    box-sizing: border-box;
+    padding-left: 0.2rem;
+    height: 1.6rem;
+    line-height: 1.6rem;
+    vertical-align: middle;
+
+    &.expanded {
+        border-color: #3B99FF;
+    }
+
+    &.disabled {
+        color:#999999;
+    }
+
+    .sel-result {
+
+        .clear-btn {
+            position: absolute;
+            right: 1.2rem;
+            top: 0;
+            font-size: 1.4rem;
+            line-height: 1.4rem;
+            font-weight: bold;
+            color: #999999;
+            font-family: sans-serif;
+            cursor: pointer;
+            opacity: 0.3;
+            z-index: 10;
+            border: none;
+            background: none;
+
+            &:not([disabled]):hover {
+                color:#d00000;
+            }
+        }
+
+        &:hover .clear-btn:not([disabled]) {
+            opacity: 1;
+        }
+    }
+
+    .sel-expander {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        width: 1.5rem;
+        box-sizing: border-box;
+        border: none;
+        // border-left: solid 2px #bdbdbd;
+        // border-bottom-left-radius: 3px;
+        // border-top-left-radius: 3px;
+        text-align: center;
+        border-bottom-right-radius: 0.2rem;
+        border-top-right-radius: 0.2rem;
+        background: white;
+        opacity: 0.7;
+        cursor: pointer;
+        font-size: 0.65em;
+
+        &:focus {
+            outline:0;
+            color: white;
+            background: #3b9aff;
+        }
+    }
+
+    .sel-expander::before {
+        content: "";
+        display: block;
+        position: absolute;
+        left: 0;
+        top: 2px;
+        bottom: 2px;
+        width: 0;
+        box-sizing: content-box;
+        padding: 0;
+        margin: 0;
+        border-left: solid 1px #bdbdbd;
+        // box-shadow: -1px 0px 1px 1px #f0f0f0;
+    }
+
+    .sel-dd-item {
+        overflow: hidden;
+        display: block;
+        height: 100%;
+        margin-right: 2.6rem;
+        white-space: nowrap;
+    }
+    
+    &:hover .sel-expander {
+        opacity: 1;
+        background: #dadada;
+    }
+}
+
+.sel-comp-dd {
+    position: absolute;
+    // overflow: hidden;
+    box-sizing: border-box;
+    background: white;
+    z-index:2010;
+
+    > div {
+        position: absolute;
+        top: 0; left: 0; right: 0; bottom: 0;
+        box-sizing: border-box;
+        border: solid 1px #bcbcbc;
+        border-radius: 2px;
+        white-space: nowrap;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .sel-search {
+        height: 1.8rem;
+        padding: 0.1rem;
+        overflow: hidden;
+        box-sizing: border-box;
+    }
+
+    .sel-search > input {
+        height: 1.6rem;
+        line-height: 1.6rem;
+        border: none;
+        border-bottom: 2px solid #c8c8c8;
+        margin: 0 2px;
+        width: calc(100% - 4px);
+        box-sizing: border-box;
+        
+        &:focus {
+            outline: none;
+        }
+    }
+
+    .sel-dd-item:not(.sel-dd-group) {
+        &:hover {
+            background: #d0d0d0;
+        }
+    }
+
+    .sel-dd-items {
+
+        .focused {
+            background: #CCE8FF;
+        }
+        .selected {
+            background: #3B99FF;
+        }
+    }
+
+    .sel-dd-items.multiple {
+        .sel-dd-item {
+            padding-left: 1rem;
+        }
+        .sel-dd-item.selected {
+            // padding-left: 0;
+            &::before {
+                content: "✓";
+                position: absolute;
+                color: #404040;
+                font-weight: bold;
+                left: 0;
+            }
+        }
+    }
+
+    .sel-dd-item {
+        height: 100%;
+        line-height: 26px;
+    }
+
+    .sel-dd-group {
+        font-weight: bold;
+        background: #e0e0e0;
+        text-align: center;
+        // &:hover {
+        //     background: #d0d0d0;
+        // }
+    }
+}