-
Notifications
You must be signed in to change notification settings - Fork 672
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor(abc:reuse-tab): refactor reuse-tab component
- Loading branch information
Showing
20 changed files
with
1,338 additions
and
389 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
50 changes: 50 additions & 0 deletions
50
src/core/abc/reuse-tab/reuse-tab-context-menu.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| import { Component, Input, EventEmitter, Output, HostListener } from '@angular/core'; | ||
|
|
||
| import { ReuseContextI18n, ReuseContextCloseEvent, ReuseItem, CloseType } from './interface'; | ||
|
|
||
| @Component({ | ||
| selector: 'reuse-tab-context-menu', | ||
| template: ` | ||
| <ul nz-menu> | ||
| <li nz-menu-item (click)="click($event, 'close')" data-type="close" [nzDisable]="!item.closable" [innerHTML]="i18n.close"></li> | ||
| <li nz-menu-item (click)="click($event, 'closeOther')" data-type="closeOther" [innerHTML]="i18n.closeOther"></li> | ||
| <li nz-menu-item (click)="click($event, 'closeRight')" data-type="closeRight" [nzDisable]="item.last" [innerHTML]="i18n.closeRight"></li> | ||
| <li nz-menu-item (click)="click($event, 'clear')" data-type="clear" [innerHTML]="i18n.clear"></li> | ||
| </ul>`, | ||
| preserveWhitespaces: false | ||
| }) | ||
| export class ReuseTabContextMenuComponent { | ||
|
|
||
| private _i18n: ReuseContextI18n; | ||
| @Input() | ||
| set i18n(value: ReuseContextI18n) { | ||
| this._i18n = Object.assign({ | ||
| close: '关闭标签', | ||
| closeOther: '关闭其它标签', | ||
| closeRight: '关闭右侧标签', | ||
| clear: '清空' | ||
| }, value); | ||
| } | ||
| get i18n() { | ||
| return this._i18n; | ||
| } | ||
|
|
||
| @Input() item: ReuseItem; | ||
|
|
||
| @Output() close = new EventEmitter<ReuseContextCloseEvent>(); | ||
|
|
||
| click(e: MouseEvent, type: CloseType) { | ||
| e.preventDefault(); | ||
| e.stopPropagation(); | ||
| if (type === 'close' && !this.item.closable) return; | ||
| if (type === 'closeRight' && this.item.last) return; | ||
| this.close.next({ type, item: this.item }); | ||
| } | ||
|
|
||
| @HostListener('document:click', ['$event']) | ||
| @HostListener('document:contextmenu', ['$event']) | ||
| closeMenu(event: MouseEvent): void { | ||
| if (event.type === 'click' && event.button === 2) return; | ||
| this.close.next({ type: null, item: null }); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| import { Component, Input, Output, EventEmitter, OnDestroy } from '@angular/core'; | ||
| import { Subscription } from 'rxjs/Subscription'; | ||
|
|
||
| import { ReuseContextI18n, ReuseContextCloseEvent } from './interface'; | ||
| import { ReuseTabContextService } from './reuse-tab-context.service'; | ||
|
|
||
| @Component({ | ||
| selector: 'reuse-tab-context', | ||
| template: ``, | ||
| preserveWhitespaces: false | ||
| }) | ||
| export class ReuseTabContextComponent implements OnDestroy { | ||
|
|
||
| private sub$: Subscription = new Subscription(); | ||
|
|
||
| @Input() | ||
| set i18n(value: ReuseContextI18n) { | ||
| this.srv.i18n = value; | ||
| } | ||
|
|
||
| @Output() change = new EventEmitter<ReuseContextCloseEvent>(); | ||
|
|
||
| constructor( | ||
| private srv: ReuseTabContextService | ||
| ) { | ||
| this.sub$.add(srv.show.subscribe(context => this.srv.open(context))); | ||
| this.sub$.add(srv.close.subscribe(res => this.change.emit(res))); | ||
| } | ||
|
|
||
| ngOnDestroy(): void { | ||
| this.sub$.unsubscribe(); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| import { Directive, HostListener, Input } from '@angular/core'; | ||
|
|
||
| import { ReuseTabContextService } from './reuse-tab-context.service'; | ||
| import { ReuseItem } from './interface'; | ||
|
|
||
| @Directive({ | ||
| selector: '[context-menu]' | ||
| }) | ||
| export class ReuseTabContextDirective { | ||
|
|
||
| @Input('context-menu') item: ReuseItem; | ||
|
|
||
| constructor(private srv: ReuseTabContextService) { } | ||
|
|
||
| @HostListener('contextmenu', ['$event']) | ||
| onContextMenu(event: MouseEvent): void { | ||
| this.srv.show.next({ | ||
| event, | ||
| item: this.item | ||
| }); | ||
| event.preventDefault(); | ||
| event.stopPropagation(); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| import { Injectable } from '@angular/core'; | ||
| import { Overlay, OverlayRef, ScrollStrategyOptions } from '@angular/cdk/overlay'; | ||
| import { ComponentPortal } from '@angular/cdk/portal'; | ||
| import { Subscription } from 'rxjs/Subscription'; | ||
| import { Subject } from 'rxjs/Subject'; | ||
|
|
||
| import { ReuseContextEvent, ReuseContextI18n, ReuseContextCloseEvent } from './interface'; | ||
| import { ReuseTabContextMenuComponent } from './reuse-tab-context-menu.component'; | ||
|
|
||
| @Injectable() | ||
| export class ReuseTabContextService { | ||
| private ref: OverlayRef; | ||
| i18n: ReuseContextI18n; | ||
|
|
||
| show: Subject<ReuseContextEvent> = new Subject<ReuseContextEvent>(); | ||
| close: Subject<ReuseContextCloseEvent> = new Subject<ReuseContextCloseEvent>(); | ||
|
|
||
| constructor(private overlay: Overlay) {} | ||
|
|
||
| remove() { | ||
| if (!this.ref) return; | ||
| this.ref.detach(); | ||
| this.ref.dispose(); | ||
| this.ref = null; | ||
| } | ||
|
|
||
| open(context: ReuseContextEvent) { | ||
| this.remove(); | ||
| const { event, item } = context; | ||
| const fakeElement = { | ||
| getBoundingClientRect: (): ClientRect => ({ | ||
| bottom: event.clientY, | ||
| height: 0, | ||
| left: event.clientX, | ||
| right: event.clientX, | ||
| top: event.clientY, | ||
| width: 0, | ||
| }) | ||
| }; | ||
| const positionStrategy = this.overlay.position().connectedTo( | ||
| { nativeElement: fakeElement }, | ||
| { originX: 'start', originY: 'bottom' }, | ||
| { overlayX: 'start', overlayY: 'top' }) | ||
| .withFallbackPosition( | ||
| { originX: 'start', originY: 'top' }, | ||
| { overlayX: 'start', overlayY: 'bottom' }) | ||
| .withFallbackPosition( | ||
| { originX: 'end', originY: 'top' }, | ||
| { overlayX: 'start', overlayY: 'top' }) | ||
| .withFallbackPosition( | ||
| { originX: 'start', originY: 'top' }, | ||
| { overlayX: 'end', overlayY: 'top' }) | ||
| .withFallbackPosition( | ||
| { originX: 'end', originY: 'center' }, | ||
| { overlayX: 'start', overlayY: 'center' }) | ||
| .withFallbackPosition( | ||
| { originX: 'start', originY: 'center' }, | ||
| { overlayX: 'end', overlayY: 'center' }) | ||
| ; | ||
| this.ref = this.overlay.create({ | ||
| positionStrategy, | ||
| panelClass: 'reuse-tab-cm', | ||
| scrollStrategy: this.overlay.scrollStrategies.close() | ||
| }); | ||
| const comp = this.ref.attach(new ComponentPortal(ReuseTabContextMenuComponent)); | ||
| const instance = comp.instance; | ||
| instance.i18n = this.i18n; | ||
| instance.item = item; | ||
|
|
||
| const sub$ = new Subscription(); | ||
| sub$.add(instance.close.subscribe((res: ReuseContextCloseEvent) => { | ||
| this.close.next(res); | ||
| this.remove(); | ||
| })); | ||
| comp.onDestroy(() => sub$.unsubscribe()); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,15 +1,9 @@ | ||
| <nz-tabset [(nzSelectedIndex)]="_pos" [nzAnimated]="false" (nzSelectedIndexChange)="to($event)" [nzTabBarExtraTemplate]="opsContent"> | ||
| <nz-tab *ngFor="let i of _list; let index = index"> | ||
| <nz-tabset [nzSelectedIndex]="pos" [nzAnimated]="false"> | ||
| <nz-tab *ngFor="let i of list; let index = index"> | ||
| <ng-template #nzTabHeading> | ||
| {{i.title}} | ||
| <i *ngIf="allowClose" class="anticon anticon-close op" (click)="remove(index)"></i> | ||
| <span [context-menu]="i" (click)="to(index)" class="name">{{i.title}}</span> | ||
| <i *ngIf="i.closable" class="anticon anticon-close op" (click)="_close(index)"></i> | ||
| </ng-template> | ||
| </nz-tab> | ||
| <ng-template #opsContent> | ||
| <nz-popconfirm *ngIf="allowClose && srv.count" [nzTitle]="'确定清空吗？'" (nzOnConfirm)="clear()"> | ||
| <button nz-popconfirm nz-button [nzType]="'dashed'" [nzShape]="'circle'"> | ||
| <i class="anticon anticon-delete"></i> | ||
| </button> | ||
| </nz-popconfirm> | ||
| </ng-template> | ||
| </nz-tabset> | ||
| <reuse-tab-context [i18n]="i18n" (change)="cmChange($event)"></reuse-tab-context> |
Oops, something went wrong.