@nbxx/nb-input/dist/nbinput/nbinput-file.component.js

Angular - nbinput

import { Component, EventEmitter, forwardRef, Input, Output } from '@angular/core';
import { NG_VALIDATORS, NG_VALUE_ACCESSOR } from "@angular/forms";
import { NbinputConfig, SystemAttachment, NbFieldType } from "./nbinput.entity";
import { NbinputUploadService } from "./nbinput-upload";
export class NbinputFileComponent {
    constructor(uploader) {
        this.uploader = uploader;
        this.config = new NbinputConfig();
        this.onTouchedCallback = () => { };
        this.onChangeCallback = (_) => { };
        this.data = [];
        this.readonly = false;
        this.type = NbFieldType.File;
        this.fileChanged = new EventEmitter();
    }
    validate(c) {
        this.data.forEach(e => {
            if (!e.completed || !e.success) {
                return {
                    FilesOnUploading: {
                        valid: false,
                    },
                };
            }
        });
        return null;
    }
    registerOnValidatorChange(fn) { }
    writeValue(obj) {
        if (obj && Array.isArray(obj)) {
            this.data = obj;
        }
    }
    setDisabledState(isDisabled) {
        this.disabled = isDisabled;
    }
    registerOnChange(fn) {
        this.onChangeCallback = fn;
    }
    registerOnTouched(fn) { this.onTouchedCallback = fn; }
    onBlur() {
        this.onTouchedCallback();
    }
    get value() {
        return this.data;
    }
    ;
    set value(v) {
        if (v !== this.data) {
            this.data = v;
            this.onChangeCallback(v);
        }
    }
    submit() {
        const out = this.data.filter(e => e.completed && e.success);
        this.fileChanged.emit(out);
        this.onChangeCallback(out);
    }
    onChange(event) {
        for (let i = 0; i < event.target.files.length; i++) {
            // event.target.data[i].callback = this.submit;
            const a = new SystemAttachment(event.target.files[i]);
            this.data.push(a);
            this.uploader.upload(event.target.files[i], this.config.uploadAPI)
                .subscribe(e => {
                Object.assign(a, e);
                if (e.completed) {
                    this.submit();
                }
            });
        }
        event.target.value = '';
        event.target.files = [];
    }
    delFile(img) {
        for (let i = 0; i < this.data.length; i++) {
            if (this.data[i] == img) {
                this.data.splice(i, 1);
                this.submit();
                break;
            }
        }
    }
}
NbinputFileComponent.decorators = [
    { type: Component, args: [{
                selector: 'nbinput-file',
                template: `
    <div class="filer-box">
      <div class="filer" *ngIf="!readonly">
        <div class="item btn">
          <input [disabled]="disabled" type="file" (change)="onChange($event)" multiple />选择文件
        </div>
      </div>
      <div class="filer">
        <div *ngIf="!data||data.length <= 0" class="item">未选择任何文件</div>
        <div class="item" *ngFor="let item of data">
          <div [ngClass]="{'text-muted':!readonly&&!disabled&&!item.completed}">
            <a [href]="item.url?config.downloadAPI+item.url:'javascript:;'">{{item.name}} ({{item.size | filesize}})</a>
          </div>
          <ng-container *ngIf="!readonly&&!disabled">
            <div class="progress" *ngIf="!item.completed">
              <div class="progress-bar bg-warning"
                   role="progressbar"
                   [style.width]="item.progressStyle"
                   aria-valuenow="item.progress"
                   aria-valuemin="0"
                   aria-valuemax="100"></div>
            </div>
            <div><i class="fa fa-minus-circle text-danger tool" (click)="delFile(item)"></i></div>
            <div><i [ngClass]="{'text-danger':!item.success,'text-success':item.success}">{{item.status}}</i></div>
          </ng-container>
        </div>
      </div>
      <div class="clearfix"></div>
    </div>
  `,
                styles: [`
    .filer-box{display:flex;position:relative}.filer-box .filer{position:relative;display:flex;flex-flow:column nowrap}.filer-box .filer .item{margin:0 10px 0 0;display:flex;align-items:center;font-size:0.875rem;height:1.8rem;position:relative}.filer-box .filer .item input{position:absolute;cursor:pointer;left:0;top:0;width:100%;height:100%;z-index:200;opacity:0;filter:alpha(opacity=0);-ms-filter:'alpha(opacity=0)'}.filer-box .filer .item input+span{cursor:pointer}.filer-box .filer .item div{margin-left:5px}.filer-box .filer .item .uploading{color:#9faecb}.filer-box .filer .item .progress{width:100px;height:16px}.filer-box .filer .item .tool{font-size:16px;cursor:pointer;padding:5px}.filer-box .filer .btn{background:#f6f6f6;border:1px solid #cccccc}
  `],
                providers: [
                    {
                        provide: NG_VALUE_ACCESSOR,
                        useExisting: forwardRef(() => NbinputFileComponent),
                        multi: true
                    },
                    {
                        provide: NG_VALIDATORS,
                        useExisting: forwardRef(() => NbinputFileComponent),
                        multi: true,
                    }
                ]
            },] },
];
/** @nocollapse */
NbinputFileComponent.ctorParameters = () => [
    { type: NbinputUploadService }
];
NbinputFileComponent.propDecorators = {
    config: [{ type: Input }],
    disabled: [{ type: Input }],
    data: [{ type: Input }],
    readonly: [{ type: Input }],
    type: [{ type: Input }],
    fileChanged: [{ type: Output }]
};
//# sourceMappingURL=nbinput-file.component.js.map