Skip to content

Commit 89acc01

Browse files
edcarrolledcarroll
committed
Completed modal documentation
1 parent 2a00ed5 commit 89acc01

File tree

4 files changed

+138
-13
lines changed

4 files changed

+138
-13
lines changed

‎demo/src/app/pages/demo-pages.module.ts‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {CollapsePageComponents} from './collapse/collapse.page';
1313
import {DimmerPageComponents} from './dimmer/dimmer.page';
1414
import {DropdownPageComponents} from './dropdown/dropdown.page';
1515
import {MessagePageComponents} from './message/message.page';
16-
import {ModalPageComponents} from './modal/modal.page';
16+
import {ModalPageComponents, ConfirmModalComponent} from './modal/modal.page';
1717
import {PopupPageComponents} from './popup/popup.page';
1818
import {ProgressPageComponents} from './progress/progress.page';
1919
import {RatingPageComponents} from './rating/rating.page';
@@ -50,13 +50,11 @@ import {RouterModule} from '@angular/router';
5050
SelectPageComponents,
5151
SidebarPageComponents,
5252
TabsPageComponents,
53-
TransitionPageComponents,
54-
55-
AcceptRejectModalComponent
53+
TransitionPageComponents
5654
],
5755
exports: [],
5856
entryComponents: [
59-
AcceptRejectModalComponent
57+
ConfirmModalComponent
6058
]
6159
})
6260
export class DemoPagesModule {}

‎demo/src/app/pages/modal/modal.page.html‎

Lines changed: 39 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ <h2 class="ui dividing header">Examples</h2>
7272

7373
<p>
7474
In this case, the context is an object with a <code>data:string</code> property, and modal
75-
passes <code>string</code> values to both <code>approve</code> and <code>deny.</code>
75+
passes <code>string</code> values to both <code>approve</code> and <code>deny</code>.
7676
</p>
7777

7878
<p>Lastly, the modal can be opened as follows:</p>
@@ -87,9 +87,46 @@ <h2 class="ui dividing header">Examples</h2>
8787

8888
</div>
8989
<div class="ui segment" suiTabContent="component">
90-
<p>Component based modals are intended to be used as 'reusable' modals, i.e. modals that can easily be repurposed to fit elsewhere.</p>
90+
<p>
91+
Component based modals are intended to be used as 'reusable' modals, i.e. modals that can easily be repurposed to fit elsewhere.
92+
They provide an easy way to generate generic modals for your entire application with minimal effort, for example to easily replace
93+
<code>alert</code>, <code>prompt</code> & <code>confirm</code> calls.
94+
</p>
9195

9296
<p>As with template based modals, they're controlled by the <code>SuiModalService</code> which provides the ability to open a modal on the page.</p>
97+
98+
<p>In this example, you will be run through the process of creating a replacement for <code>confirm</code>.</p>
99+
100+
<p>
101+
The first step is creating a component that acts as the modal content. For this, you need to define the interface for the modal context,
102+
as well as including <code>SuiModal</code> in the constructor - which is automatically injected into the component when it is generated
103+
and allows access to the <code>approve</code> and <code>deny</code> methods, as well as the aforementioned context.
104+
</p>
105+
106+
<div class="ui segment">
107+
<demo-codeblock language="typescript" [src]="componentComponent"></demo-codeblock>
108+
</div>
109+
110+
<p>
111+
Now the content component is set up, you must add it to <code>entryComponents</code> in the <code>NgModule</code> it's declared in,
112+
as otherwise Angular won't let you use it.
113+
</p>
114+
115+
<p>Next, define a helper class that automatically configures all new modals of this type:</p>
116+
117+
<div class="ui segment">
118+
<demo-codeblock language="typescript" [src]="componentHelper"></demo-codeblock>
119+
</div>
120+
121+
<p>Lastly, to then use this new type of modal, do the following:</p>
122+
123+
<div class="ui segment">
124+
<demo-codeblock language="typescript" [src]="componentOpen"></demo-codeblock>
125+
</div>
126+
127+
<p>So, all together:</p>
128+
129+
<modal-example-component></modal-example-component>
93130
</div>
94131
</sui-tabset>
95132

‎demo/src/app/pages/modal/modal.page.ts‎

Lines changed: 92 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@ import {Component, ViewChild} from '@angular/core';
22
import {ApiDefinition} from 'app/components/api/api.component';
33
import {SuiModalService} from '../../../../../components/modal/modal.service';
44
import {ModalTemplate} from '../../../../../components/modal/modal-template';
5-
import {TemplateModalConfig} from '../../../../../components/modal/modal-config';
5+
import {TemplateModalConfig, ComponentModalConfig, ModalSize} from '../../../../../components/modal/modal-config';
6+
import {Modal} from '../../../../../components/modal/modal-controls';
67

78
const exampleTemplateModalTemplate = `
89
<ng-template let-context let-modal="modal" #modalTemplate>
@@ -26,6 +27,21 @@ ${exampleTemplateModalTemplate}
2627
</div>
2728
`;
2829

30+
const exampleComponentModalTemplate = `
31+
<div class="header">{{ modal.context.title }}</div>
32+
<div class="content">
33+
<p>{{ modal.context.question }}</p>
34+
</div>
35+
<div class="actions">
36+
<button class="ui red button" (click)="modal.deny()">Cancel</button>
37+
<button class="ui green button" (click)="modal.approve()">OK</button>
38+
</div>
39+
`;
40+
41+
const exampleComponentTemplate = `
42+
<button class="ui primary button" (click)="open()">Confirm?</button>
43+
`
44+
2945
@Component({
3046
selector: 'demo-page-modal',
3147
templateUrl: './modal.page.html'
@@ -141,6 +157,42 @@ public open(dynamicContent:string = "Example") {
141157
.onApprove(result => { /* approve callback */ })
142158
.onDeny(result => { /* deny callback */});
143159
}
160+
`;
161+
162+
public componentComponent = `
163+
import {SuiModal, ComponentModalConfig, ModalSize} from "ng2-semantic-ui";
164+
165+
interface IConfirmModalContext {
166+
title:string;
167+
question:string;
168+
}
169+
170+
@Component({
171+
selector: 'modal-confirm',
172+
template: \`${exampleComponentModalTemplate}\`
173+
})
174+
export class ConfirmModalComponent {
175+
constructor(public modal:SuiModal<IConfirmModalContext, void, void>) {}
176+
}
177+
`;
178+
179+
public componentHelper = `
180+
export class ConfirmModal extends ComponentModalConfig<IConfirmModalContext, void, void> {
181+
constructor(title:string, question:string) {
182+
super(ConfirmModalComponent, { title, question });
183+
184+
this.isClosable = false;
185+
this.transitionDuration = 200;
186+
this.size = ModalSize.Small;
187+
}
188+
}
189+
`;
190+
191+
public componentOpen = `
192+
this.modalService
193+
.open(new ConfirmModal("Are you sure?", "Are you sure about accepting this?"))
194+
.onApprove(() => alert("accepted!"))
195+
.onDeny(() => alert("denied!"));
144196
`;
145197
}
146198

@@ -169,4 +221,42 @@ export class ModalExampleTemplate {
169221
}
170222
}
171223

172-
export const ModalPageComponents = [ModalPage, ModalExampleTemplate];
224+
interface IConfirmModalContext {
225+
title:string;
226+
question:string;
227+
}
228+
229+
@Component({
230+
selector: 'modal-confirm',
231+
template: exampleComponentModalTemplate
232+
})
233+
export class ConfirmModalComponent {
234+
constructor(public modal:Modal<IConfirmModalContext, void, void>) {}
235+
}
236+
237+
export class ConfirmModal extends ComponentModalConfig<IConfirmModalContext, void, void> {
238+
constructor(title:string, question:string) {
239+
super(ConfirmModalComponent, { title, question });
240+
241+
this.isClosable = false;
242+
this.transitionDuration = 200;
243+
this.size = ModalSize.Small;
244+
}
245+
}
246+
247+
@Component({
248+
selector: 'modal-example-component',
249+
template: exampleComponentTemplate
250+
})
251+
export class ModalExampleComponent {
252+
constructor(public modalService:SuiModalService) {}
253+
254+
public open() {
255+
this.modalService
256+
.open(new ConfirmModal("Are you sure?", "Are you sure about accepting this?"))
257+
.onApprove(() => alert("accepted!"))
258+
.onDeny(() => alert("denied!"));
259+
}
260+
}
261+
262+
export const ModalPageComponents = [ModalPage, ModalExampleTemplate, ConfirmModalComponent, ModalExampleComponent];

‎demo/src/app/pages/test/test.page.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -52,10 +52,10 @@ export class TestPage implements AfterViewInit {
5252

5353
// modal.closeResult = "default!";
5454

55-
let activeModal = this.modalService
56-
.open(modal)
57-
.onApprove(str => alert(str))
58-
.onDeny(str => alert(str));
55+
// let activeModal = this.modalService
56+
// .open(modal)
57+
// .onApprove(str => alert(str))
58+
// .onDeny(str => alert(str));
5959

6060
// setTimeout(() => activeModal.destroy(), 2000);
6161
}

0 commit comments

Comments
 (0)