-
Notifications
You must be signed in to change notification settings - Fork 400
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(demo): add eager loaded dialog example
- Loading branch information
Dima Puris
committed
Jan 10, 2023
1 parent
bdb5c72
commit 219ce04
Showing
18 changed files
with
155 additions
and
31 deletions.
There are no files selected for viewing
8 changes: 8 additions & 0 deletions
8
...cts/demo/src/modules/customization/routable-dialog/examples/1/dialog-content.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,8 @@ | ||
import {ChangeDetectionStrategy, Component} from '@angular/core'; | ||
|
||
@Component({ | ||
selector: 'tui-example-dialog-content', | ||
template: 'Eager loaded dialog content', | ||
changeDetection: ChangeDetectionStrategy.OnPush, | ||
}) | ||
export class DialogContentComponent {} |
10 changes: 10 additions & 0 deletions
10
projects/demo/src/modules/customization/routable-dialog/examples/1/page-1.component.html
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,10 @@ | ||
<button | ||
tuiButton | ||
routerLink="path/to/eager/loaded/dialog" | ||
> | ||
Open dialog | ||
</button> | ||
|
||
<!-- step 1: add router-outlet to the page --> | ||
<!-- Needed for opening a dialog over of the page--> | ||
<router-outlet></router-outlet> |
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
28 changes: 28 additions & 0 deletions
28
projects/demo/src/modules/customization/routable-dialog/examples/1/page-1.module.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,28 @@ | ||
import {NgModule} from '@angular/core'; | ||
import {RouterModule} from '@angular/router'; | ||
import {TuiButtonModule} from '@taiga-ui/core'; | ||
import {tuiWrapInEagerDialog} from '@taiga-ui/kit'; | ||
|
||
import {DialogContentComponent} from './dialog-content.component'; | ||
import {TuiPage1ExampleComponent} from './page-1.component'; | ||
|
||
@NgModule({ | ||
declarations: [TuiPage1ExampleComponent, DialogContentComponent], | ||
exports: [TuiPage1ExampleComponent], | ||
imports: [ | ||
RouterModule.forChild([ | ||
{ | ||
path: ``, | ||
component: TuiPage1ExampleComponent, | ||
children: [ | ||
tuiWrapInEagerDialog( | ||
`path/to/eager/loaded/dialog`, | ||
DialogContentComponent, | ||
), | ||
], | ||
}, | ||
]), | ||
TuiButtonModule, | ||
], | ||
}) | ||
export class TuiPage1ExampleModule {} |
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
4 changes: 2 additions & 2 deletions
4
...1/dialog-content/dialog-content.module.ts → ...2/dialog-content/dialog-content.module.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 |
---|---|---|
@@ -1,13 +1,13 @@ | ||
import {NgModule} from '@angular/core'; | ||
import {RouterModule} from '@angular/router'; | ||
import {tuiWrapInDialog} from '@taiga-ui/kit'; | ||
import {tuiWrapInLazyDialog} from '@taiga-ui/kit'; | ||
|
||
import {DialogContentComponent} from './dialog-content.component'; | ||
|
||
@NgModule({ | ||
declarations: [DialogContentComponent], | ||
// step 3: use tuiWrapInDialog for component | ||
imports: [RouterModule.forChild([tuiWrapInDialog(DialogContentComponent)])], | ||
imports: [RouterModule.forChild([tuiWrapInLazyDialog(DialogContentComponent)])], | ||
exports: [DialogContentComponent], | ||
}) | ||
export class DialogContentModule {} |
2 changes: 1 addition & 1 deletion
2
...ble-dialog/examples/1/page.component.html → ...e-dialog/examples/2/page-2.component.html
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,6 +1,6 @@ | ||
<button | ||
tuiButton | ||
routerLink="path/to/dialog" | ||
routerLink="path/to/lazy/loaded/dialog" | ||
> | ||
Open dialog | ||
</button> | ||
|
11 changes: 11 additions & 0 deletions
11
projects/demo/src/modules/customization/routable-dialog/examples/2/page-2.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,11 @@ | ||
import {Component} from '@angular/core'; | ||
import {changeDetection} from '@demo/emulate/change-detection'; | ||
import {encapsulation} from '@demo/emulate/encapsulation'; | ||
|
||
@Component({ | ||
selector: 'tui-page-2-example', | ||
templateUrl: './page-2.component.html', | ||
changeDetection, | ||
encapsulation, | ||
}) | ||
export class TuiPage2ExampleComponent {} |
16 changes: 9 additions & 7 deletions
16
...routable-dialog/examples/1/page.module.ts → ...utable-dialog/examples/2/page-2.module.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 |
---|---|---|
@@ -1,29 +1,31 @@ | ||
import {NgModule} from '@angular/core'; | ||
import {RouterModule} from '@angular/router'; | ||
import {TuiButtonModule} from '@taiga-ui/core'; | ||
import {TuiRoutableDialogModule} from '@taiga-ui/kit'; | ||
|
||
import {TuiPageExampleComponent} from './page.component'; | ||
import {TuiPage2ExampleComponent} from './page-2.component'; | ||
|
||
@NgModule({ | ||
declarations: [TuiPageExampleComponent], | ||
exports: [TuiPageExampleComponent], | ||
declarations: [TuiPage2ExampleComponent], | ||
exports: [TuiPage2ExampleComponent], | ||
imports: [ | ||
TuiRoutableDialogModule, | ||
TuiButtonModule, | ||
RouterModule.forChild([ | ||
{ | ||
path: ``, | ||
component: TuiPageExampleComponent, | ||
component: TuiPage2ExampleComponent, | ||
children: [ | ||
// step 2: add lazy loading for component module as usual | ||
{ | ||
path: `path/to/dialog`, | ||
path: `path/to/lazy/loaded/dialog`, | ||
loadChildren: async () => | ||
(await import(`./dialog-content/dialog-content.module`)) | ||
.DialogContentModule, | ||
}, | ||
], | ||
}, | ||
]), | ||
TuiButtonModule, | ||
], | ||
}) | ||
export class TuiPageExampleModule {} | ||
export class TuiPage2ExampleModule {} |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,2 +1,3 @@ | ||
export * from './routable-dialog.module'; | ||
export * from './tui-wrap-in-dialog'; | ||
export * from './tui-wrap-in-eager-dialog'; | ||
export * from './tui-wrap-in-lazy-dialog'; |
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
21 changes: 21 additions & 0 deletions
21
projects/kit/components/routable-dialog/test/tui-wrap-in-eager-dialog.spec.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,21 @@ | ||
import {TuiRoutableDialog} from '../routable-dialog.component'; | ||
import {tuiWrapInEagerDialog} from '../tui-wrap-in-eager-dialog'; | ||
|
||
class DialogComponent {} | ||
|
||
describe(`tuiWrapInEagerDialog`, () => { | ||
it(`result route data is expected`, () => { | ||
const result = tuiWrapInEagerDialog(`path/to/dialog`, DialogComponent); | ||
|
||
const expected = { | ||
path: `path/to/dialog`, | ||
component: TuiRoutableDialog, | ||
data: { | ||
dialog: DialogComponent, | ||
backUrl: `../../..`, | ||
}, | ||
}; | ||
|
||
expect(result).toEqual(expected); | ||
}); | ||
}); |
6 changes: 3 additions & 3 deletions
6
...le-dialog/test/tui-wrap-in-dialog.spec.ts → ...alog/test/tui-wrap-in-lazy-dialog.spec.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
18 changes: 18 additions & 0 deletions
18
projects/kit/components/routable-dialog/tui-wrap-in-eager-dialog.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,18 @@ | ||
import {Type} from '@angular/core'; | ||
import {Route} from '@angular/router'; | ||
|
||
import {TuiRoutableDialog} from './routable-dialog.component'; | ||
|
||
export function tuiWrapInEagerDialog(path: string, component: Type<any>): Route { | ||
return { | ||
path, | ||
component: TuiRoutableDialog, | ||
data: { | ||
dialog: component, | ||
backUrl: path | ||
.split(`/`) | ||
.map(() => `..`) | ||
.join(`/`), | ||
}, | ||
}; | ||
} |
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