Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(window): window may return result #2869

Merged
merged 10 commits into from
Nov 30, 2021
6 changes: 6 additions & 0 deletions src/app/playground-components.ts
Original file line number Diff line number Diff line change
@@ -1521,6 +1521,12 @@ export const PLAYGROUND_COMPONENTS: ComponentLink[] = [
component: 'WindowTemplateTitleComponent',
name: 'Window Template Title',
},
{
path: 'window-result.component',
link: '/window/window-result.component',
component: 'WindowResultComponent',
name: 'Window Result',
},
],
},
{
8 changes: 4 additions & 4 deletions src/framework/theme/components/window/window-ref.ts
Original file line number Diff line number Diff line change
@@ -9,7 +9,7 @@ import { NbWindowConfig, NbWindowState, NbWindowStateChange } from './window.opt
* You can access rendered component as `componentRef` property of the windowRef.
* Property `contentInstance` contains the instance of the component opened in the window.
*/
export class NbWindowRef<T = any> {
export class NbWindowRef<T = any, R = any> {
componentRef: ComponentRef<NbWindowComponent>;
componentInstance: T;

@@ -38,7 +38,7 @@ export class NbWindowRef<T = any> {
}

protected _closed = false;
protected closed$ = new Subject<void>();
protected closed$ = new Subject<R>();
/**
* Emits when window was closed.
*/
@@ -78,7 +78,7 @@ export class NbWindowRef<T = any> {
/**
* Closes window.
* */
close() {
close(res?: R) {
if (this._closed) {
return;
}
@@ -87,7 +87,7 @@ export class NbWindowRef<T = any> {
this.componentRef.destroy();
this.componentInstance = null;
this.stateChange$.complete();
this.closed$.next();
this.closed$.next(res);
this.closed$.complete();
}
}
5 changes: 5 additions & 0 deletions src/framework/theme/components/window/window.service.ts
Original file line number Diff line number Diff line change
@@ -86,6 +86,11 @@ import { NB_DOCUMENT } from '../../theme.options';
*
* @stacked-example(Window content from TemplateRef, window/template-window.component)
*
* You could pass the optional window return value to the `NbWindowRef.close` method.
* The passed value would be emitted to the `NbWindowRef.onClose` listeners.
*
* @stacked-example(Result, window/window-result.component)
*
* ### Configuration
*
* As mentioned above, `open` method of the `NbWindowService` may receive optional configuration options.
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
/*
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/

import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { NbWindowRef } from '@nebular/theme';

@Component({
template: `
<form [formGroup]="form" (ngSubmit)="onSubmit()" class="form">
<label for="name">Enter your name:</label>
<input nbInput id="name" type="text" formControlName="name" />

<button nbButton type="submit" status="success">Submit</button>
</form>
`,
})
export class VisitorsFormComponent {
form: FormGroup;

constructor(private fb: FormBuilder, public windowRef: NbWindowRef) {
this.form = fb.group({
name: null,
});
}

onSubmit() {
this.windowRef.close(this.form.value.name);
}

close() {
this.windowRef.close();
}
}
32 changes: 32 additions & 0 deletions src/playground/with-layout/window/window-result.component.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
/*
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/

import { Component } from '@angular/core';
import { NbWindowService } from '@nebular/theme';
import { VisitorsFormComponent } from './components/visitors-form.component';

@Component({
template: `
<button nbButton status="primary" (click)="openWindow()">Open window</button>
<br />
<h3 class="h5">Window visitors:</h3>
<ul>
<li *ngFor="let visitor of visitors">{{ visitor }}</li>
</ul>
`,
styleUrls: ['./window.scss'],
})
export class WindowResultComponent {
visitors: string[] = [];

constructor(private windowService: NbWindowService) {}

openWindow() {
const windowRef = this.windowService.open(VisitorsFormComponent, { title: `Window` });

windowRef.onClose.subscribe((visitor) => this.visitors.push(visitor));
}
}
5 changes: 5 additions & 0 deletions src/playground/with-layout/window/window-routing.module.ts
Original file line number Diff line number Diff line change
@@ -11,6 +11,7 @@ import { WindowShowcaseComponent } from './window-showcase.component';
import { WindowsBackdropComponent } from './windows-backdrop.component';
import { WindowControlsComponent } from './window-controls.component';
import { WindowTemplateTitleComponent } from './window-template-title.component';
import { WindowResultComponent } from './window-result.component';

const routes: Route[] = [
{
@@ -33,6 +34,10 @@ const routes: Route[] = [
path: 'window-template-title.component',
component: WindowTemplateTitleComponent,
},
{
path: 'window-result.component',
component: WindowResultComponent,
},
];

@NgModule({
9 changes: 9 additions & 0 deletions src/playground/with-layout/window/window.module.ts
Original file line number Diff line number Diff line change
@@ -5,6 +5,8 @@
*/

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NbButtonModule, NbCardModule, NbCheckboxModule, NbInputModule, NbWindowModule } from '@nebular/theme';

import { WindowRoutingModule } from './window-routing.module';
@@ -14,6 +16,8 @@ import { WindowsBackdropComponent } from './windows-backdrop.component';
import { FormComponent } from './components/form.component';
import { WindowControlsComponent } from './window-controls.component';
import { WindowTemplateTitleComponent } from './window-template-title.component';
import { WindowResultComponent } from './window-result.component';
import { VisitorsFormComponent } from './components/visitors-form.component';

@NgModule({
declarations: [
@@ -23,8 +27,13 @@ import { WindowTemplateTitleComponent } from './window-template-title.component'
FormComponent,
WindowControlsComponent,
WindowTemplateTitleComponent,
WindowResultComponent,
VisitorsFormComponent,
],
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
NbWindowModule.forRoot(),
NbButtonModule,
NbInputModule,
4 changes: 4 additions & 0 deletions src/playground/with-layout/window/window.scss
Original file line number Diff line number Diff line change
@@ -9,6 +9,10 @@
.text-label {
margin-top: 1.5rem;
}

button {
margin-top: 1.5rem;
}
}

button + button {