@duoduo-oba/ng-devui
Version:
DevUI components based on Angular
361 lines (353 loc) • 12.6 kB
JavaScript
import { Component, ElementRef, Renderer2, Input, HostBinding, HostListener, Directive, ComponentFactoryResolver, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PositionService, PositioningModule } from '@duoduo-oba/ng-devui/position';
import { fromEvent } from 'rxjs';
import { directionFadeInOut } from '@duoduo-oba/ng-devui/utils';
import { PortalModule } from '@duoduo-oba/ng-devui/portal';
import { OverlayContainerRef } from '@duoduo-oba/ng-devui/overlay-container';
import { WindowRef, DocumentRef } from '@duoduo-oba/ng-devui/window-ref';
/**
* @fileoverview added by tsickle
* Generated from: tooltip.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class TooltipComponent {
/**
* @param {?} positionService
* @param {?} tooltip
* @param {?} renderer2
*/
constructor(positionService, tooltip, renderer2) {
this.positionService = positionService;
this.tooltip = tooltip;
this.renderer2 = renderer2;
this.position = 'bottom';
this.showAnimate = false;
this.animateState = this.showAnimate ? 'void' : 'visible';
this.display = 'block';
}
/**
* @return {?}
*/
get class() {
return 'devui-tooltip ' + this.position;
}
/**
* @return {?}
*/
get state() {
return this.animateState;
}
/**
* @return {?}
*/
ngAfterViewInit() {
this.updatePosition();
this.scrollElement = this.positionService.getScrollParent(this.triggerElementRef.nativeElement);
this._onScroll = fromEvent((this.scrollElement || window), 'scroll')
.subscribe((/**
* @return {?}
*/
() => {
this.updatePosition();
}));
}
/**
* @return {?}
*/
ngOnDestroy() {
if (this._onScroll) {
this._onScroll.unsubscribe();
}
}
/**
* @return {?}
*/
onShow() {
this.animateState = this.position;
}
/**
* @return {?}
*/
onHide() {
this.animateState = 'void';
}
// will be overwrite by tooltip directive
/**
* @return {?}
*/
onHidden() {
}
/**
* @param {?} event
* @return {?}
*/
onAnimationEnd(event) {
if (event.toState === 'void') {
this.onHidden();
}
}
/**
* @return {?}
*/
updatePosition() {
// 解决tooltip自身大小导致出现滚动条，影响位置计算
this.renderer2.setStyle(this.tooltip.nativeElement, 'visibility', 'hidden');
this.renderer2.setStyle(this.tooltip.nativeElement, 'transform', 'translate(0, -99999px)');
/** @type {?} */
const rect = this.positionService.positionElements(this.triggerElementRef.nativeElement, this.tooltip.nativeElement, this.position, true);
this.renderer2.setStyle(this.tooltip.nativeElement, 'left', `${rect.left}px`);
this.renderer2.setStyle(this.tooltip.nativeElement, 'top', `${rect.top}px`);
// 移除样式
this.renderer2.setStyle(this.tooltip.nativeElement, 'visibility', null);
this.renderer2.setStyle(this.tooltip.nativeElement, 'transform', null);
}
}
TooltipComponent.decorators = [
{ type: Component, args: [{
selector: 'd-tooltip',
template: "<div class=\"devui-tooltip-arrow\"></div>\r\n<div class=\"devui-tooltip-inner\" [innerHTML]=\"content\"></div>\r\n",
animations: [
directionFadeInOut
],
styles: [":host-context(.devui-tooltip){position:absolute;z-index:1070;display:block;font-style:normal;font-weight:400;line-height:1.42857143;line-break:auto;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;word-wrap:normal;white-space:normal;font-size:12px;opacity:1}:host-context(.devui-tooltip).top{margin-top:-5px;padding:0;box-shadow:-5px 5px 20px 0 rgba(37,43,58,.2)}:host-context(.devui-tooltip).top .devui-tooltip-arrow{bottom:-5px;left:50%;margin-left:-5px;border-width:5px 5px 0;border-top-color:#464d6e}:host-context(.devui-tooltip).bottom{margin-top:5px;padding:0;box-shadow:5px -5px 20px 0 rgba(37,43,58,.2)}:host-context(.devui-tooltip).bottom .devui-tooltip-arrow{top:-5px;left:50%;margin-left:-5px;border-width:0 5px 5px;border-bottom-color:#464d6e}:host-context(.devui-tooltip).left{margin-left:-5px;padding:0;box-shadow:5px -5px 20px 0 rgba(37,43,58,.2)}:host-context(.devui-tooltip).left .devui-tooltip-arrow{top:50%;right:-5px;margin-top:-5px;border-width:5px 0 5px 5px;border-left-color:#464d6e}:host-context(.devui-tooltip).right{margin-left:5px;padding:0;box-shadow:-5px 5px 20px 0 rgba(37,43,58,.2)}:host-context(.devui-tooltip).right .devui-tooltip-arrow{top:50%;left:-5px;margin-top:-5px;border-width:5px 5px 5px 0;border-right-color:#464d6e}:host-context(.devui-tooltip) .devui-tooltip-inner{max-width:200px;padding:5px 10px;font-size:14px;color:#dfe1e6;letter-spacing:0;line-height:20px;background:#464d6e;box-shadow:none;overflow-wrap:break-word;text-align:start}:host-context(.devui-tooltip) .devui-tooltip-arrow{display:block;position:absolute;width:0;height:0;border-color:transparent;border-style:solid}"]
}] }
];
/** @nocollapse */
TooltipComponent.ctorParameters = () => [
{ type: PositionService },
{ type: ElementRef },
{ type: Renderer2 }
];
TooltipComponent.propDecorators = {
content: [{ type: Input }],
position: [{ type: Input }],
triggerElementRef: [{ type: Input }],
showAnimate: [{ type: Input }],
display: [{ type: HostBinding, args: ['style.display',] }],
class: [{ type: HostBinding, args: ['class',] }],
state: [{ type: HostBinding, args: ['@directionFadeInOut',] }],
onAnimationEnd: [{ type: HostListener, args: ['@directionFadeInOut.done', ['$event'],] }]
};
if (false) {
/** @type {?} */
TooltipComponent.prototype.content;
/** @type {?} */
TooltipComponent.prototype.position;
/** @type {?} */
TooltipComponent.prototype.triggerElementRef;
/** @type {?} */
TooltipComponent.prototype.showAnimate;
/** @type {?} */
TooltipComponent.prototype.scrollElement;
/** @type {?} */
TooltipComponent.prototype.animateState;
/** @type {?} */
TooltipComponent.prototype.display;
/** @type {?} */
TooltipComponent.prototype._onScroll;
/**
* @type {?}
* @private
*/
TooltipComponent.prototype.positionService;
/**
* @type {?}
* @private
*/
TooltipComponent.prototype.tooltip;
/**
* @type {?}
* @private
*/
TooltipComponent.prototype.renderer2;
}
/**
* @fileoverview added by tsickle
* Generated from: tooltip.directive.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class TooltipDirective {
/**
* @param {?} triggerElementRef
* @param {?} overlayContainerRef
* @param {?} componentFactoryResolver
*/
constructor(triggerElementRef, overlayContainerRef, componentFactoryResolver) {
this.triggerElementRef = triggerElementRef;
this.overlayContainerRef = overlayContainerRef;
this.componentFactoryResolver = componentFactoryResolver;
this.position = 'bottom';
}
/**
* @return {?}
*/
onMouseEnter() {
this.show();
}
/**
* @return {?}
*/
onMouseLeave() {
this.hide();
}
/**
* @return {?}
*/
onFocus() {
this.show();
}
/**
* @return {?}
*/
onBlur() {
this.hide();
}
/**
* @return {?}
*/
createTooltip() {
this.tooltipComponentRef = this.overlayContainerRef.createComponent(this.componentFactoryResolver.resolveComponentFactory(TooltipComponent));
Object.assign(this.tooltipComponentRef.instance, {
content: this.content,
position: this.position,
showAnimate: this.showAnimate,
triggerElementRef: this.triggerElementRef,
});
}
/**
* @return {?}
*/
show() {
if (!this.content) {
return;
}
if (this.tooltipComponentRef) {
this.destroy();
}
this.createTooltip();
if (this.showAnimate) {
this.tooltipComponentRef.instance.onShow();
}
}
/**
* @return {?}
*/
destroy() {
if (this.tooltipComponentRef) {
this.tooltipComponentRef.destroy();
this.tooltipComponentRef = null;
}
}
/**
* @return {?}
*/
hide() {
if (this.tooltipComponentRef) {
this.tooltipComponentRef.instance.onHide();
if (!this.showAnimate) {
this.destroy();
return;
}
this.tooltipComponentRef.instance.onHidden = (/**
* @return {?}
*/
() => {
this.destroy();
});
}
}
/**
* @return {?}
*/
ngOnDestroy() {
this.destroy();
}
}
TooltipDirective.decorators = [
{ type: Directive, args: [{
selector: '[dTooltip]',
exportAs: 'dTooltip',
},] }
];
/** @nocollapse */
TooltipDirective.ctorParameters = () => [
{ type: ElementRef },
{ type: OverlayContainerRef },
{ type: ComponentFactoryResolver }
];
TooltipDirective.propDecorators = {
content: [{ type: Input }],
position: [{ type: Input }],
showAnimate: [{ type: Input }],
onMouseEnter: [{ type: HostListener, args: ['mouseenter',] }],
onMouseLeave: [{ type: HostListener, args: ['mouseleave',] }],
onFocus: [{ type: HostListener, args: ['focus',] }],
onBlur: [{ type: HostListener, args: ['blur',] }]
};
if (false) {
/** @type {?} */
TooltipDirective.prototype.content;
/** @type {?} */
TooltipDirective.prototype.position;
/** @type {?} */
TooltipDirective.prototype.showAnimate;
/** @type {?} */
TooltipDirective.prototype.tooltipComponentRef;
/**
* @type {?}
* @private
*/
TooltipDirective.prototype.triggerElementRef;
/**
* @type {?}
* @private
*/
TooltipDirective.prototype.overlayContainerRef;
/**
* @type {?}
* @private
*/
TooltipDirective.prototype.componentFactoryResolver;
}
/**
* @fileoverview added by tsickle
* Generated from: tooltip.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class TooltipModule {
}
TooltipModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
PortalModule,
PositioningModule
],
exports: [TooltipComponent, TooltipDirective],
declarations: [TooltipComponent, TooltipDirective],
providers: [
WindowRef,
DocumentRef,
OverlayContainerRef,
],
entryComponents: [TooltipComponent]
},] }
];
/**
* @fileoverview added by tsickle
* Generated from: tooltip.types.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* Generated from: public-api.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* Generated from: ng-devui-tooltip.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { TooltipComponent, TooltipDirective, TooltipModule };
//# sourceMappingURL=ng-devui-tooltip.js.map