jpush-ui
Version:
极光大数据前端Angular组件（^6.1.0）
200 lines • 9.75 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var core_1 = require("@angular/core");
var animations_1 = require("@angular/animations");
var Subject_1 = require("rxjs/Subject");
var debounceTime_1 = require("rxjs/operator/debounceTime");
var menu_component_1 = require("./menu.component");
var SubMenuComponent = /** @class */ (function () {
function SubMenuComponent(menuComponent) {
this.menuComponent = menuComponent;
this.level = 1;
this.padding = menu_component_1.PADDING_BASE;
this._$mouseSubject = new Subject_1.Subject();
this.disabled = false;
this.isShowMoreIcon = true;
// two way binding
this.isOpen = false;
this.isOpenChange = new core_1.EventEmitter();
this.menuComponent.setHasSubMenu(true);
this.menuComponent.subMenus.push(this);
}
Object.defineProperty(SubMenuComponent.prototype, "expandState", {
get: function () {
if (this.isOpen && this.menuComponent.mode !== 'vertical') {
return 'expand';
}
return null;
},
enumerable: true,
configurable: true
});
Object.defineProperty(SubMenuComponent.prototype, "subItemSelected", {
get: function () {
var _this = this;
return !!this.menuComponent.menuItems.find(function (e) {
return e.selected && e.subMenuComponent === _this;
});
},
enumerable: true,
configurable: true
});
Object.defineProperty(SubMenuComponent.prototype, "submenuSelected", {
get: function () {
var _this = this;
return !!this.subMenus._results.find(function (e) {
return e !== _this && e.subItemSelected;
});
},
enumerable: true,
configurable: true
});
Object.defineProperty(SubMenuComponent.prototype, "setMenuSubMenuClass", {
get: function () {
return true;
},
enumerable: true,
configurable: true
});
Object.defineProperty(SubMenuComponent.prototype, "setMenuDisableClass", {
get: function () {
return this.disabled;
},
enumerable: true,
configurable: true
});
Object.defineProperty(SubMenuComponent.prototype, "setMenuHorizontalClass", {
get: function () {
return (this.menuComponent.mode === 'horizontal');
},
enumerable: true,
configurable: true
});
Object.defineProperty(SubMenuComponent.prototype, "setMenuVerticalClass", {
get: function () {
return (this.menuComponent.mode === 'vertical');
},
enumerable: true,
configurable: true
});
Object.defineProperty(SubMenuComponent.prototype, "setMenuInlineClass", {
get: function () {
return (this.menuComponent.mode === 'inline');
},
enumerable: true,
configurable: true
});
Object.defineProperty(SubMenuComponent.prototype, "setMenuSubmenuSelectedClass", {
get: function () {
return this.submenuSelected || this.subItemSelected;
},
enumerable: true,
configurable: true
});
SubMenuComponent.prototype.ngOnInit = function () {
var _this = this;
debounceTime_1.debounceTime.call(this._$mouseSubject, 300)
.subscribe(function (data) {
_this.isOpen = data;
});
};
SubMenuComponent.prototype.ngAfterViewInit = function () {
var _this = this;
if (this.subMenus.length && (this.menuComponent.mode === 'inline')) {
this.subMenus.filter(function (x) { return x !== _this; }).forEach(function (menu) {
setTimeout(function () {
menu.level = _this.level + 1;
}, 0);
});
}
};
SubMenuComponent.prototype.ngOnDestroy = function () {
this._$mouseSubject.unsubscribe();
};
SubMenuComponent.prototype.onMouseEnterEvent = function (e) {
if (this.disabled) {
return false;
}
if ((this.menuComponent.mode === 'horizontal') || (this.menuComponent.mode === 'vertical')) {
this._$mouseSubject.next(true);
}
};
SubMenuComponent.prototype.onMouseLeaveEvent = function (e) {
if (this.disabled) {
return false;
}
if ((this.menuComponent.mode === 'horizontal') || (this.menuComponent.mode === 'vertical')) {
this._$mouseSubject.next(false);
}
};
SubMenuComponent.prototype.clickSubMenuTitle = function () {
if (this.disabled) {
return false;
}
if (this.menuComponent.mode === 'inline') {
this.isOpen = !this.isOpen;
this.isOpenChange.emit(this.isOpen);
}
};
SubMenuComponent.prototype.clickSubMenuDropDown = function () {
if (this.disabled) {
return false;
}
if ((this.menuComponent.mode === 'vertical') || (this.menuComponent.mode === 'horizontal')) {
this._$mouseSubject.next(false);
this.isOpen = false;
this.isOpenChange.emit(this.isOpen);
}
};
SubMenuComponent.decorators = [
{ type: core_1.Component, args: [{
selector: '[jui-submenu]',
animations: [
animations_1.trigger('fadeAnimation', [
animations_1.state('*', animations_1.style({ opacity: 1 })),
animations_1.transition('* => void', [
animations_1.animate(150, animations_1.style({ opacity: 0, display: 'none' }))
]),
animations_1.transition('void => *', [
animations_1.style({ opacity: '0' }),
animations_1.animate(150, animations_1.style({ opacity: 1 }))
])
]),
animations_1.trigger('expandAnimation', [
animations_1.transition('expand => void', [
animations_1.style({ height: '*', overflow: 'hidden' }),
animations_1.animate(150, animations_1.style({ height: 0 }))
]),
animations_1.transition('void => expand', [
animations_1.style({ height: 0, overflow: 'hidden' }),
animations_1.animate(150, animations_1.style({ height: '*' }))
])
])
],
template: "\n <div class=\"jui-menu-submenu-title\"\n [style.paddingLeft.px]=\"(menuComponent.mode === 'inline') ? (level*padding) : null\"\n (mouseenter)=\"onMouseEnterEvent($event)\"\n (mouseleave)=\"onMouseLeaveEvent($event)\"\n (click)=\"clickSubMenuTitle()\">\n <ng-content select=\"[title]\"></ng-content>\n <ng-template [ngIf]=\"isShowMoreIcon\">\n <i *ngIf=\"menuComponent.mode === 'vertical'\"\n [class.active]=\"isOpen\"\n class=\"iconfont icon-jui-right2 icon-more\"></i>\n <i *ngIf=\"menuComponent.mode === 'horizontal' || menuComponent.mode === 'inline'\"\n [class.active]=\"isOpen\"\n class=\"iconfont icon-jui-down2 icon-more\"></i>\n </ng-template>\n </div>\n <ul class=\"jui-menu jui-menu-submenu-sub\"\n *ngIf=\"isOpen\"\n [@fadeAnimation]\n [@expandAnimation]=\"expandState\"\n [class.jui-menu-vertical]=\"menuComponent.mode!=='inline'\"\n [class.jui-menu-inline]=\"menuComponent.mode==='inline'\"\n (mouseenter)=\"onMouseEnterEvent($event)\"\n (mouseleave)=\"onMouseLeaveEvent($event)\"\n (click)=\"clickSubMenuDropDown()\">\n <ng-content></ng-content>\n </ul>\n ",
encapsulation: core_1.ViewEncapsulation.None
},] },
];
/** @nocollapse */
SubMenuComponent.ctorParameters = function () { return [
{ type: menu_component_1.MenuComponent, },
]; };
SubMenuComponent.propDecorators = {
"disabled": [{ type: core_1.Input },],
"isShowMoreIcon": [{ type: core_1.Input },],
"isOpen": [{ type: core_1.Input },],
"isOpenChange": [{ type: core_1.Output },],
"setMenuSubMenuClass": [{ type: core_1.HostBinding, args: ['class.jui-menu-submenu',] },],
"setMenuDisableClass": [{ type: core_1.HostBinding, args: ['class.jui-menu-submenu-disabled',] },],
"setMenuHorizontalClass": [{ type: core_1.HostBinding, args: ['class.jui-menu-submenu-horizontal',] },],
"setMenuVerticalClass": [{ type: core_1.HostBinding, args: ['class.jui-menu-submenu-vertical',] },],
"setMenuInlineClass": [{ type: core_1.HostBinding, args: ['class.jui-menu-submenu-inline',] },],
"setMenuSubmenuSelectedClass": [{ type: core_1.HostBinding, args: ['class.jui-menu-submenu-selected',] },],
"subMenus": [{ type: core_1.ContentChildren, args: [SubMenuComponent,] },],
"onMouseEnterEvent": [{ type: core_1.HostListener, args: ['mouseenter', ['$event'],] },],
"onMouseLeaveEvent": [{ type: core_1.HostListener, args: ['mouseleave', ['$event'],] },],
};
return SubMenuComponent;
}());
exports.SubMenuComponent = SubMenuComponent;
//# sourceMappingURL=submenu.component.js.map