yoyo-ng-modulewindy/src/abc/error-collect/error-collect.component.js

服务于52ABP模板的前端开源的相关组件内容。整合了ng-alain和你NG ZORRO的内容

import { Component, Input, HostBinding, ElementRef, Renderer2, HostListener, Inject, ChangeDetectionStrategy, ChangeDetectorRef, } from '@angular/core';
import { DOCUMENT } from '@angular/common';
import { toNumber } from 'yoyo-ng-module/util';
import { AdErrorCollectConfig } from './error-collect.config';
/**
 * 错误消息采集器
 * PS：虽然此法并不好看，但对响应式表单&模板表单有很好的效果。
 */
var ErrorCollectComponent = /** @class */ (function () {
    function ErrorCollectComponent(cog, el, renderer, cd, doc) {
        this.el = el;
        this.renderer = renderer;
        this.cd = cd;
        this.doc = doc;
        this.$time = null;
        this._freq = 500;
        this._offsetTop = 65 + 64 + 8 * 2;
        this._hiden = true;
        this.count = 0;
        Object.assign(this, cog);
    }
    Object.defineProperty(ErrorCollectComponent.prototype, "freq", {
        get: function () {
            return this._freq;
        },
        set: function (value) {
            this._freq = toNumber(value);
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(ErrorCollectComponent.prototype, "offsetTop", {
        get: function () {
            return this._offsetTop;
        },
        set: function (value) {
            this._offsetTop = toNumber(value);
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(ErrorCollectComponent.prototype, "errEls", {
        get: function () {
            return this.formEl.querySelectorAll('.has-error');
        },
        enumerable: true,
        configurable: true
    });
    ErrorCollectComponent.prototype.update = function () {
        var count = this.errEls.length;
        if (count === this.count)
            return;
        this.count = count;
        this._hiden = count === 0;
        this.cd.markForCheck();
    };
    ErrorCollectComponent.prototype._click = function () {
        if (this.count === 0)
            return false;
        // nz-form-control
        var els = this.errEls;
        var formItemEl = this.findParent(els[0], '[nz-form-control]') || els[0];
        formItemEl.scrollIntoView(true);
        // fix header height
        this.doc.documentElement.scrollTop -= this.offsetTop;
    };
    ErrorCollectComponent.prototype.install = function () {
        var _this = this;
        this.uninstall();
        this.$time = setInterval(function () { return _this.update(); }, this.freq);
        this.update();
    };
    ErrorCollectComponent.prototype.uninstall = function () {
        clearInterval(this.$time);
    };
    ErrorCollectComponent.prototype.findParent = function (el, selector) {
        var retEl = null;
        while (el) {
            if (el.querySelector(selector)) {
                retEl = el;
                break;
            }
            el = el.parentElement;
        }
        return retEl;
    };
    ErrorCollectComponent.prototype.ngOnInit = function () {
        this.formEl = this.findParent(this.el.nativeElement, 'form');
        if (this.formEl === null)
            throw new Error('未找到有效 form 元素');
        this.el.nativeElement.classList.add('error-collect', 'pr-lg', 'text-error', 'point');
        this.install();
    };
    ErrorCollectComponent.prototype.ngOnDestroy = function () {
        this.uninstall();
    };
    ErrorCollectComponent.decorators = [
        { type: Component, args: [{
                    selector: 'error-collect, [error-collect]',
                    template: "\n  <i class=\"anticon anticon-exclamation-circle\"></i>\n  <span class=\"pl-sm\">{{count}}</span>",
                    changeDetection: ChangeDetectionStrategy.OnPush,
                    preserveWhitespaces: false,
                },] },
    ];
    /** @nocollapse */
    ErrorCollectComponent.ctorParameters = function () { return [
        { type: AdErrorCollectConfig },
        { type: ElementRef },
        { type: Renderer2 },
        { type: ChangeDetectorRef },
        { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] }
    ]; };
    ErrorCollectComponent.propDecorators = {
        freq: [{ type: Input }],
        offsetTop: [{ type: Input }],
        _hiden: [{ type: HostBinding, args: ['class.d-none',] }],
        _click: [{ type: HostListener, args: ['click',] }]
    };
    return ErrorCollectComponent;
}());
export { ErrorCollectComponent };
//# sourceMappingURL=error-collect.component.js.map