forked from NG-ZORRO/ng-zorro-antd
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(module:drawer): support service to create drawer (NG-ZORRO#1981)
close NG-ZORRO#1937
- Loading branch information
Showing
16 changed files
with
599 additions
and
37 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,19 +1,23 @@ | ||
| import { ScrollStrategy } from '@angular/cdk/overlay'; | ||
| import { Renderer2 } from '@angular/core'; | ||
| import { NzMeasureScrollbarService } from '../../services/nz-measure-scrollbar.service' | ||
|
|
||
| export class NzBlockScrollStrategy implements ScrollStrategy { | ||
|
|
||
| constructor(private document: Document, private renderer: Renderer2) { | ||
| constructor(private document: Document, private renderer: Renderer2, private nzMeasureScrollbarService: NzMeasureScrollbarService) { | ||
| } | ||
|
|
||
| attach(): void {} | ||
|
|
||
| enable(): void { | ||
| this.renderer.setStyle(document.body, 'overflow', 'hidden'); | ||
| this.renderer.setStyle(this.document.body, 'padding-right', `${this.nzMeasureScrollbarService.scrollBarWidth}px`); | ||
|
|
||
| } | ||
|
|
||
| disable(): void { | ||
| this.renderer.removeStyle(document.body, 'overflow'); | ||
| this.renderer.removeStyle(document.body, 'padding-right'); | ||
| } | ||
|
|
||
| } |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| --- | ||
| order: 5 | ||
| title: | ||
| zh-CN: 服务方式创建 | ||
| en-US: Drawer's service | ||
| --- | ||
|
|
||
| ## zh-CN | ||
|
|
||
| Drawer 的 service 用法，示例中演示了用户自定义模板、自定义component。 | ||
|
|
||
| > **注意** 如果使用Component模式，则需要在NgModule中的 `declarations` 和 `entryComponents` 加入自定义的Component | ||
| ## en-US | ||
|
|
||
| Usage of Drawer's service, examples demonstrate user-defined templates, custom components. | ||
|
|
||
| > **NOTE** If you use Component mode, you need to add your custom Component into `declarations` and `entryComponents` for a `NgModule` |
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,98 @@ | ||
| /* entryComponents: NzDrawerCustomComponent */ | ||
|
|
||
| import { Component, Input, ViewChild } from '@angular/core'; | ||
| import { NzDrawerRef, NzDrawerService } from 'ng-zorro-antd'; | ||
|
|
||
| @Component({ | ||
| selector: 'nz-demo-drawer-service', | ||
| template: ` | ||
| <ng-template #drawerTemplate let-data let-drawerRef="drawerRef"> | ||
| value: {{data?.value}} | ||
| <br> | ||
| <button nz-button nzType="primary" (click)="drawerRef.close()">close</button> | ||
| </ng-template> | ||
| <div nz-form> | ||
| <nz-form-item> | ||
| <input nz-input [(ngModel)]="value"> | ||
| </nz-form-item> | ||
| </div> | ||
| <button nz-button nzType="primary" (click)="openTemplate()">Use Template</button> | ||
| <button nz-button nzType="primary" (click)="openComponent()">Use Component</button> | ||
| ` | ||
| }) | ||
|
|
||
| export class NzDemoDrawerServiceComponent { | ||
|
|
||
| @ViewChild('drawerTemplate') drawerTemplate; | ||
| value = 'ng'; | ||
|
|
||
| constructor( | ||
| private drawerService: NzDrawerService | ||
| ) { | ||
|
|
||
| } | ||
|
|
||
| openTemplate(): void { | ||
| const drawerRef = this.drawerService.create({ | ||
| nzTitle: 'Template', | ||
| nzContent: this.drawerTemplate, | ||
| nzContentParams: { | ||
| value: this.value | ||
| } | ||
| }); | ||
|
|
||
| drawerRef.afterOpen.subscribe(() => { | ||
| console.log('Drawer(Template) open'); | ||
| }); | ||
|
|
||
| drawerRef.afterClose.subscribe(() => { | ||
| console.log('Drawer(Template) close'); | ||
| }); | ||
| } | ||
|
|
||
| openComponent(): void { | ||
| const drawerRef = this.drawerService.create<NzDrawerCustomComponent, { value: string }, string>({ | ||
| nzTitle: 'Component', | ||
| nzContent: NzDrawerCustomComponent, | ||
| nzContentParams: { | ||
| value: this.value | ||
| } | ||
| }); | ||
|
|
||
| drawerRef.afterOpen.subscribe(() => { | ||
| console.log('Drawer(Component) open'); | ||
| }); | ||
|
|
||
| drawerRef.afterClose.subscribe(data => { | ||
| console.log(data); | ||
| if (typeof data === 'string') { | ||
| this.value = data; | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| } | ||
|
|
||
| @Component({ | ||
| selector: 'nz-drawer-custom-component', | ||
| template: ` | ||
| <div> | ||
| <input nz-input [(ngModel)]="value"> | ||
| <nz-divider></nz-divider> | ||
| <button nzType="primary" (click)="close()" nz-button>Confirm</button> | ||
| </div> | ||
| ` | ||
| }) | ||
| export class NzDrawerCustomComponent { | ||
|
|
||
| @Input() value = ''; | ||
|
|
||
| constructor( | ||
| private drawerRef: NzDrawerRef<string> | ||
| ) { | ||
| } | ||
|
|
||
| close(): void { | ||
| this.drawerRef.close(this.value); | ||
| } | ||
| } |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| import { TemplateRef, Type } from '@angular/core'; | ||
| import { NzDrawerRef } from './nz-drawer-ref'; | ||
|
|
||
| export type NzDrawerPlacement = 'left' | 'right' | 'top' | 'bottom'; | ||
|
|
||
| // tslint:disable-next-line:no-any | ||
| export interface NzDrawerOptions<T = any, D = any> { | ||
| nzClosable?: boolean; | ||
| nzMaskClosable?: boolean; | ||
| nzMask?: boolean; | ||
| nzTitle?: string | TemplateRef<{}>; | ||
| nzContent?: TemplateRef<{ $implicit: D, drawerRef: NzDrawerRef }> | Type<T>; | ||
| nzContentParams?: D; | ||
| nzMaskStyle?: object; | ||
| nzBodyStyle?: object; | ||
| nzWrapClassName?: string; | ||
| nzWidth?: number | string; | ||
| nzHeight?: number | string; | ||
| nzPlacement?: NzDrawerPlacement; | ||
| nzZIndex?: number; | ||
| nzOffsetX?: number; | ||
| nzOffsetY?: number; | ||
| } |
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,11 @@ | ||
| import { Observable } from 'rxjs/index'; | ||
|
|
||
| // tslint:disable-next-line:no-any | ||
| export abstract class NzDrawerRef<R = any> { | ||
|
|
||
| abstract afterClose: Observable<R>; | ||
| abstract afterOpen: Observable<void>; | ||
|
|
||
| abstract close(result?: R): void; | ||
| abstract open(): void; | ||
| } |
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
Oops, something went wrong.