jpush-ui/dropdown/dropdown.component.js

极光大数据前端Angular组件（^6.1.0）

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var core_1 = require("@angular/core");
var dom_handler_service_1 = require("../util/dom-handler.service");
var DropdownComponent = /** @class */ (function () {
    function DropdownComponent(renderer) {
        this.renderer = renderer;
        this.selectChange = new core_1.EventEmitter();
        // 传递到父组件
        this.getDropdownVisible = new core_1.EventEmitter();
        this.dropdownVisible = false;
        this.isOpen = false;
    }
    Object.defineProperty(DropdownComponent.prototype, "maxHeight", {
        set: function (data) {
            if (typeof data === 'number') {
                this._maxHeight = data + 'px';
            }
        },
        enumerable: true,
        configurable: true
    });
    DropdownComponent.prototype.ngOnInit = function () {
        // pass
    };
    DropdownComponent.prototype.ngOnDestroy = function () {
        this.unbindDocument();
    };
    DropdownComponent.prototype.onMouseLeave = function (event, dropdown, container) {
        if (!this.trigger || this.trigger === 'hover') {
            this.dropdownVisible = false;
            // 传递到父组件
            this.getDropdownVisible.emit(this.dropdownVisible);
        }
    };
    DropdownComponent.prototype.onDropdownHandler = function (event, dropdown, container) {
        if (!this.trigger
            || (this.trigger === 'hover' && event.type === 'mouseenter')
            || event.type === this.trigger) {
            event.stopPropagation();
            this.dropdownVisible = !this.dropdownVisible;
            dom_handler_service_1.DomUtil.relativePosition(dropdown, container);
            dom_handler_service_1.DomUtil.fadeIn(dropdown, 100);
            if (this.dropdownVisible) {
                this.bindDocument();
            }
            // 传递到父组件
            this.getDropdownVisible.emit(this.dropdownVisible);
        }
    };
    DropdownComponent.prototype.itemClick = function (event, item) {
        if (item.disabled) {
            event.preventDefault();
            return;
        }
        this.selectChange.emit(item);
        this.chosen = item;
        if (!item.url || item.routerLink) {
            event.preventDefault();
        }
        if (item.command) {
            var data = {
                item: item,
                event: event
            };
            if (!item.eventEmitter) {
                item.eventEmitter = new core_1.EventEmitter();
                item.eventEmitter.subscribe(item.command);
            }
            item.eventEmitter.emit(data);
        }
        this.dropdownVisible = false;
        // 传递到父组件
        this.getDropdownVisible.emit(this.dropdownVisible);
        event.stopPropagation();
    };
    DropdownComponent.prototype.bindDocument = function () {
        var _this = this;
        if (!this.documentClickListener) {
            this.documentClickListener =
                dom_handler_service_1.DomUtil.bindBodyClick(this.renderer, function (e) {
                    _this.dropdownVisible = false;
                    // 传递到父组件
                    // 传递到父组件
                    _this.getDropdownVisible.emit(_this.dropdownVisible);
                    _this.unbindDocument();
                });
        }
    };
    DropdownComponent.prototype.unbindDocument = function () {
        if (this.documentClickListener) {
            this.documentClickListener();
            this.documentClickListener = null;
        }
    };
    DropdownComponent.decorators = [
        { type: core_1.Component, args: [{
                    selector: 'jui-dropdown',
                    template: "\n        <div class=\"ui-dropdown-container\" #container\n            (mouseenter)=\"onDropdownHandler($event, dropdown, container)\"\n            (mouseleave)=\"onMouseLeave($event, dropdown, container)\"\n            (click)=\"onDropdownHandler($event, dropdown, container)\">\n            <ng-content></ng-content>\n            <div class=\"ui-dropdown\" #dropdown\n                [style.display]=\"dropdownVisible ? 'block' : 'none'\"\n                [style.max-height]=\"_maxHeight\">\n                <ul class=\"ui-dropdown-items\">\n                    <li class=\"ui-dropdown-item\" *ngFor=\"let item of dataSource\"\n                        [class.active]=\"item===chosen\"\n                        [style.min-width.px]=\"width\">\n                        <a [href]=\"item.url||'javascript:void(0);'\" \n                        [ngClass]=\"{'ui-dropdown-item-link':true,\n                        'ui-dropdown-item-disabled':item.disabled}\" \n                        (click)=\"itemClick($event,item)\"\n                        [style.color]=\"item.color\">\n                            <span class=\"ui-dropdown-item-text\">{{item.label}}</span>\n                        </a>\n                    </li>\n                </ul>\n            </div>\n        </div>\n    ",
                    styles: ["\n      @font-face {\n        font-family: 'iconfont';\n        /* project id 290315 */\n        src: url(\"//at.alicdn.com/t/font_290315_x4r2fph1yvutbj4i.eot\");\n        src: url(\"//at.alicdn.com/t/font_290315_x4r2fph1yvutbj4i.eot?#iefix\") format(\"embedded-opentype\"), url(\"//at.alicdn.com/t/font_290315_x4r2fph1yvutbj4i.woff\") format(\"woff\"), url(\"//at.alicdn.com/t/font_290315_x4r2fph1yvutbj4i.ttf\") format(\"truetype\"), url(\"//at.alicdn.com/t/font_290315_x4r2fph1yvutbj4i.svg#iconfont\") format(\"svg\"); }\n\n      .iconfont {\n        display: inline-block;\n        vertical-align: baseline;\n        font-family: \"iconfont\" !important;\n        font-style: normal;\n        -webkit-font-smoothing: antialiased;\n        -moz-osx-font-smoothing: grayscale; }\n\n      .icon-jui-alert:before {\n        content: \"\\e600\"; }\n\n      .icon-jui-search:before {\n        content: \"\\e630\"; }\n\n      .icon-jui-paper3:before {\n        content: \"\\e652\"; }\n\n      .icon-jui-setting:before {\n        content: \"\\e602\"; }\n\n      .icon-jui-left2:before {\n        content: \"\\e697\"; }\n\n      .icon-jui-wrong:before {\n        content: \"\\e69a\"; }\n\n      .icon-jui-up2:before {\n        content: \"\\e6a5\"; }\n\n      .icon-jui-down2:before {\n        content: \"\\e6a6\"; }\n\n      .icon-jui-right2:before {\n        content: \"\\e6a7\"; }\n\n      .icon-jui-correct2:before {\n        content: \"\\e627\"; }\n\n      .icon-jui-qq:before {\n        content: \"\\e63a\"; }\n\n      .icon-jui-email:before {\n        content: \"\\e62a\"; }\n\n      .icon-jui-edit:before {\n        content: \"\\e686\"; }\n\n      .icon-jui-download2:before {\n        content: \"\\e714\"; }\n\n      .icon-jui-speaker:before {\n        content: \"\\e85c\"; }\n\n      .icon-jui-add:before {\n        content: \"\\e609\"; }\n\n      .icon-jui-msg:before {\n        content: \"\\e613\"; }\n\n      .icon-jui-minus:before {\n        content: \"\\e601\"; }\n\n      .icon-jui-up:before {\n        content: \"\\e658\"; }\n\n      .icon-jui-letter-open:before {\n        content: \"\\e61d\"; }\n\n      .icon-jui-down:before {\n        content: \"\\ed22\"; }\n\n      .icon-jui-info:before {\n        content: \"\\e685\"; }\n\n      .icon-jui-cross2:before {\n        content: \"\\e6b4\"; }\n\n      .icon-jui-paper2:before {\n        content: \"\\e71e\"; }\n\n      .icon-jui-loading:before {\n        content: \"\\eee3\"; }\n\n      .icon-jui-road-sign:before {\n        content: \"\\e604\"; }\n\n      .icon-jui-left:before {\n        content: \"\\e66a\"; }\n\n      .icon-jui-letter:before {\n        content: \"\\e605\"; }\n\n      .icon-jui-right:before {\n        content: \"\\e64d\"; }\n\n      .icon-jui-back-top:before {\n        content: \"\\e628\"; }\n\n      .icon-jui-dropdown:before {\n        content: \"\\e75a\"; }\n\n      .icon-jui-down3:before {\n        content: \"\\e629\"; }\n\n      .icon-jui-alarm:before {\n        content: \"\\e6c2\"; }\n\n      .icon-jui-paper:before {\n        content: \"\\e612\"; }\n\n      .icon-jui-cross:before {\n        content: \"\\e6b0\"; }\n\n      .icon-jui-correct:before {\n        content: \"\\e6b3\"; }\n\n      .icon-jui-up3:before {\n        content: \"\\eee4\"; }\n\n      .icon-jui-username:before {\n        content: \"\\e670\"; }\n\n      .icon-jui-password:before {\n        content: \"\\e615\"; }\n\n      .icon-jui-slideLeft:before {\n        content: \"\\e603\"; }\n\n      .icon-jui-slideRight:before {\n        content: \"\\e641\"; }\n\n      /* icon Animate */\n      .icon-doTurn {\n        -webkit-animation: doTurn 1s infinite linear;\n        animation: doTurn 1s infinite linear; }\n\n      @-webkit-keyframes doTurn {\n        0% {\n          -webkit-transform-origin: 50% 50%;\n          -webkit-transform: rotate(0deg); }\n        to {\n          -webkit-transform-origin: 50% 50%;\n          -webkit-transform: rotate(1turn); } }\n\n      @keyframes doTurn {\n        0% {\n          transform-origin: 50% 50%;\n          transform: rotate(0deg); }\n        to {\n          transform-origin: 50% 50%;\n          transform: rotate(1turn); } }\n      jui-dropdown .ui-dropdown-container {\n        position: relative;\n        display: inline-block;\n        cursor: pointer; }\n\n      jui-dropdown .ui-dropdown {\n        z-index: 1;\n        position: absolute;\n        left: -9999px;\n        top: -9999px;\n        font-size: 12px;\n        font-weight: 400;\n        line-height: 1.5; }\n\n      jui-dropdown .ui-dropdown-items {\n        outline: none;\n        position: relative;\n        list-style-type: none;\n        padding: 0;\n        margin: 0;\n        text-align: left;\n        background-color: #fff;\n        border-radius: 4px;\n        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);\n        background-clip: padding-box; }\n\n      jui-dropdown .ui-dropdown-item {\n        padding: 7px 16px;\n        margin: 0;\n        clear: both;\n        font-size: 12px;\n        font-weight: 400;\n        color: rgba(0, 0, 0, 0.65);\n        white-space: nowrap;\n        cursor: pointer;\n        -webkit-transition: all .3s;\n        transition: all .3s; }\n\n      jui-dropdown .ui-dropdown-item.active {\n        background: rgba(3, 102, 214, 0.2); }\n\n      jui-dropdown .ui-dropdown-item:first-child {\n        border-radius: 4px 4px 0 0; }\n\n      jui-dropdown .ui-dropdown-item:last-child {\n        border-radius: 0 0 4px 4px; }\n\n      jui-dropdown .ui-dropdown-item:hover {\n        background-color: #ecf6fd; }\n\n      jui-dropdown .ui-dropdown-item-link {\n        color: rgba(0, 0, 0, 0.65);\n        display: block;\n        padding: 7px 16px;\n        margin: -7px -16px;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap; }\n\n      jui-dropdown .ui-dropdown-item-disabled {\n        color: rgba(0, 0, 0, 0.25);\n        cursor: not-allowed; }\n\n      jui-dropdown .ui-dropdown-item-disabled:hover {\n        background-color: #fff; }\n\n      /* .ui-dropdown-item-text{\n\t\n      } */\n    "],
                    encapsulation: core_1.ViewEncapsulation.None
                },] },
    ];
    /** @nocollapse */
    DropdownComponent.ctorParameters = function () { return [
        { type: core_1.Renderer, },
    ]; };
    DropdownComponent.propDecorators = {
        "trigger": [{ type: core_1.Input },],
        "width": [{ type: core_1.Input },],
        "dataSource": [{ type: core_1.Input },],
        "maxHeight": [{ type: core_1.Input },],
        "selectChange": [{ type: core_1.Output },],
        "getDropdownVisible": [{ type: core_1.Output },],
        "chosen": [{ type: core_1.Input },],
    };
    return DropdownComponent;
}());
exports.DropdownComponent = DropdownComponent;
//# sourceMappingURL=dropdown.component.js.map