8000 feat(popover): popover support manualClosure · atinc/ngx-tethys@8f036dd · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Commit 8f036dd

Browse files
zhenshuaiwwszhenshuaiwws
committed
feat(popover): popover support manualClosure
1 parent 14f3da1 commit 8f036dd

File tree

6 files changed

+78
-61
lines changed

6 files changed

+78
-61
lines changed

‎demo/src/app/components/+popover/api-config-parameters.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@ export const apiPopoverConfigParameters = [
1212
default: 'popover-origin-activated'
1313
},
1414
{
15-
property: 'multiple',
16-
description: `是否可以多次打开，唯一标识为origin`,
15+
property: 'manualClosure',
16+
description: `是否只能手动关闭，唯一标识为origin`,
1717
type: 'boolean',
1818
default: 'false'
1919
},

‎demo/src/app/components/+popover/basic/popover-basic.component.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -30,17 +30,17 @@
3030
#templateTrigger3
3131
thyButton="secondary"
3232
thySize="md"
33-
(click)="openTemplatePopoverMultiple(templateTrigger3, template)"
33+
(click)="openTemplatePopoverManualClosure(templateTrigger3, template)"
3434
>
35-
Use Template 3 with multiple
35+
Use Template 3 with manualClosure
3636
</button>
3737
<button
3838
#templateTrigger4
3939
thyButton="secondary"
4040
thySize="md"
41-
(click)="openTemplatePopoverMultiple(templateTrigger4, template)"
41+
(click)="openTemplatePopoverManualClosure(templateTrigger4, template)"
4242
>
43-
Use Template 4 with multiple
43+
Use Template 4 with manualClosure
4444
</button>
4545
</div>
4646
<ng-template #template>

‎demo/src/app/components/+popover/basic/popover-basic.component.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -114,10 +114,10 @@ export class DemoPopoverBasicComponent extends mixinUnsubscribe(MixinBase) imple
114114
});
115115
}
116116

117-
openTemplatePopoverMultiple(element: { elementRef: ElementRef }, template: TemplateRef<HTMLElement>) {
117+
openTemplatePopoverManualClosure(element: { elementRef: ElementRef }, template: TemplateRef<HTMLElement>) {
118118
this.thyPopover.open(template, {
119119
origin: element.elementRef,
120-
multiple: true,
120+
manualClosure: true,
121121
hasBackdrop: this.hasBackdrop,
122122
placement: this.placement,
123123
panelClass: 'demo-popover'

‎src/popover/popover.config.ts

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,8 @@ export class ThyPopoverConfig<TData = any> {
3636
direction?: Directionality;
3737
position?: PopoverPosition;
3838
offset?: number;
39-
// 多实例
40-
multiple?: boolean;
39+
manualClosure?: boolean;
40+
preventAutoCloseLast?: boolean;
4141
originActivatedClass?: string | string[];
4242
/** Min-width of the dialog. If a number is provided, pixel units are assumed. */
4343
minWidth?: number | string;
@@ -65,7 +65,8 @@ export const THY_POPOVER_DEFAULT_CONFIG_PROVIDER = {
6565
closeOnNavigation: true,
6666
placement: 'bottom',
6767
insideClosable: false,
68-
multiple: false,
69-
originActivatedClass: 'popover-origin-activated'
68+
manualClosure: false,
69+
preventAutoCloseLast: false,
70+
originActivatedClass: 'thy-popover-origin-active'
7071
}
7172
};

‎src/popover/popover.service.ts

Lines changed: 23 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,8 @@ export class ThyPopover implements OnDestroy {
3939
}
4040
>();
4141

42+
private originInstancesSteps: Array<ElementRef | HTMLElement> = [];
43+
4244
private currentPopoverRef: ThyPopoverRef<any, any>;
4345

4446
private readonly _afterOpened = new Subject<ThyPopoverRef<any>>();
@@ -188,21 +190,22 @@ export class ThyPopover implements OnDestroy {
188190
componentOrTemplateRef: ComponentType<T> | TemplateRef<T>,
189191
config?: ThyPopoverConfig<TData>
190192
): ThyPopoverRef<T, TResult> {
191-
let isHadOpenedNeedClose = false;
193+
let isOpenAgain = false;
192194
this.originInstancesMap.forEach((value, key) => {
193-
if (value.config.multiple) {
195+
if (value.config.manualClosure) {
194196
if (key === config.origin) {
195197
value.popoverRef.close();
196-
isHadOpenedNeedClose = true;
198+
isOpenAgain = true;
197199
}
198200
} else {
199201
if (key === config.origin) {
200-
isHadOpenedNeedClose = true;
202+
isOpenAgain = true;
201203
}
202204
value.popoverRef.close();
203205
}
204206
});
205-
if (isHadOpenedNeedClose) {
207+
if (isOpenAgain) {
208+
// Open again will be close
206209
return;
207210
}
208211

@@ -227,6 +230,8 @@ export class ThyPopover implements OnDestroy {
227230

228231
this.originElementAddActivatedClass(config);
229232

233+
this.originInstancesSteps.push(config.origin);
234+
230235
this.originInstancesMap.set(config.origin, {
231236
config,
232237
popoverRef
@@ -236,30 +241,6 @@ export class ThyPopover implements OnDestroy {
236241
return popoverRef;
237242
}
238243

239-
// attach<T, TData = any, TResult = any>(
240-
// overlayRef: OverlayRef,
241-
// componentOrTemplateRef: ComponentType<T> | TemplateRef<T>,
242-
// config?: ThyPopoverConfig<TData>
243-
// ) {
244-
// config = { ...this.defaultConfig, ...config };
245-
// const popoverContainer = this.attachPopoverContainer(overlayRef, config);
246-
// const popoverRef = this.attachPopoverContent<T, TResult>(
247-
// componentOrTemplateRef,
248-
// popoverContainer,
249-
// overlayRef,
250-
// config
251-
// );
252-
253-
// this.currentPopoverRef = popoverRef;
254-
255-
// popoverRef.afterClosed().subscribe(() => {
256-
// this.currentPopoverRef = null;
257-
// });
258-
259-
// this._afterOpened.next(popoverRef);
260-
// return popoverRef;
261-
// }
262-
263244
close() {
264245
if (this.currentPopoverRef) {
265246
this.currentPopoverRef.close();
@@ -270,9 +251,20 @@ export class ThyPopover implements OnDestroy {
270251
this.originInstancesMap.forEach((value, key) => {
271252
value.popoverRef.close();
272253
});
273-
if (this.currentPopoverRef) {
274-
this.currentPopoverRef.close();
254+
}
255+
256+
closeLast(stepLength: number = 1) {
257+
let hadCloseAnyone = false;
258+
while (stepLength > 0) {
259+
const last = this.originInstancesSteps.pop();
260+
const find = this.originInstancesMap.get(last);
261+
if (find) {
262+
find.popoverRef.close();
263+
hadCloseAnyone = true;
264+
}
265+
stepLength--;
275266
}
267+
return hadCloseAnyone;
276268
}
277269

278270
ngOnDestroy() {

‎src/popover/test/popover.service.spec.ts

Lines changed: 42 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ export class PopoverSimpleContentComponent {
5959
}
6060

6161
@Component({
62-
selector: 'popover-multiple-content-component',
62+
selector: 'popover-manual-closure-content-component',
6363
template: `
6464
<a class="btn btn1" #btn1 (click)="open1(btn1, template1)">Open1</a>
6565
<ng-template #template1><div class="template1">template1</div></ng-template>
@@ -74,21 +74,21 @@ export class PopoverSimpleContentComponent {
7474
<ng-template #template4><div class="template4">template4</div></ng-template>
7575
`
7676
})
77-
export class PopoverMultipleContentComponent {
77+
export class PopoverManualClosureContentComponent {
7878
constructor(public popover: ThyPopover, public popoverInjector: Injector, public directionality: Directionality) {}
7979

8080
open1(origin, template) {
8181
this.popover.open(template, {
8282
origin,
83-
multiple: true
83+
manualClosure: true
8484
});
8585
}
8686

8787
open2(origin, template) {
8888
this.popover.open(template, {
8989
origin,
9090
originActivatedClass: 'activated-class',
91-
multiple: true
91+
manualClosure: true
9292
});
9393
}
9494

@@ -111,7 +111,7 @@ const TEST_COMPONENTS = [
111111
PopoverSimpleContentComponent,
112112
WithViewContainerDirective,
113113
WithChildViewContainerComponent,
114-
PopoverMultipleContentComponent
114+
PopoverManualClosureContentComponent
115115
];
116116
@NgModule({
117117
declarations: TEST_COMPONENTS,
@@ -188,45 +188,69 @@ describe(`thyPopover`, () => {
188188
assertPopoverSimpleContentComponent(overlayRef);
189189
});
190190

191-
describe('multiple', () => {
192-
let viewContainerFixtureMultiple: ComponentFixture<PopoverMultipleContentComponent>;
191+
describe('manualClosure', () => {
192+
let viewContainerFixtureManualClosure: ComponentFixture<PopoverManualClosureContentComponent>;
193193
let btnElement1, btnElement2, btnElement3, btnElement4;
194194

195195
beforeEach(() => {
196-
viewContainerFixtureMultiple = TestBed.createComponent(PopoverMultipleContentComponent);
197-
btnElement1 = viewContainerFixtureMultiple.nativeElement.querySelector('.btn1');
198-
btnElement2 = viewContainerFixtureMultiple.nativeElement.querySelector('.btn2');
199-
btnElement3 = viewContainerFixtureMultiple.nativeElement.querySelector('.btn3');
200-
btnElement4 = viewContainerFixtureMultiple.nativeElement.querySelector('.btn4');
201-
viewContainerFixtureMultiple.detectChanges();
196+
viewContainerFixtureManualClosure = TestBed.createComponent(PopoverManualClosureContentComponent);
197+
btnElement1 = viewContainerFixtureManualClosure.nativeElement.querySelector('.btn1');
198+
btnElement2 = viewContainerFixtureManualClosure.nativeElement.querySelector('.btn2');
199+
btnElement3 = viewContainerFixtureManualClosure.nativeElement.querySelector('.btn3');
200+
btnElement4 = viewContainerFixtureManualClosure.nativeElement.querySelector('.btn4');
201+
viewContainerFixtureManualClosure.detectChanges();
202202
});
203203

204204
it('closeAll', fakeAsync(() => {
205205
btnElement1.click();
206206
btnElement3.click();
207207
popover.closeAll();
208208
tick(1000);
209-
viewContainerFixtureMultiple.detectChanges();
209+
viewContainerFixtureManualClosure.detectChanges();
210210
expect(document.querySelector('.template1')).toBeFalsy();
211211
expect(document.querySelector('.template3')).toBeFalsy();
212212
}));
213213

214-
it('multiple, open multiple times', () => {
214+
it('closeLast', fakeAsync(() => {
215+
btnElement1.click();
216+
btnElement2.click();
217+
btnElement3.click();
218+
popover.closeLast();
219+
tick(1000);
220+
viewContainerFixtureManualClosure.detectChanges();
221+
expect(document.querySelector('.template1')).toBeTruthy();
222+
expect(document.querySelector('.template2')).toBeTruthy();
223+
expect(document.querySelector('.template3')).toBeFalsy();
224+
}));
225+
226+
it('closeLast 2', fakeAsync(() => {
227+
btnElement1.click();
228+
btnElement2.click();
229+
btnElement3.click();
230+
popover.closeLast(2);
231+
tick(1000);
232+
viewContainerFixtureManualClosure.detectChanges();
233+
expect(document.querySelector('.template1')).toBeTruthy();
234+
expect(document.querySelector('.template2')).toBeFalsy();
235+
expect(document.querySelector('.template3')).toBeFalsy();
236+
}));
237+
238+
it('manualClosure, open manualClosure times', () => {
215239
btnElement1.click();
216240
btnElement2.click();
217241
expect(document.querySelector('.template1')).toBeTruthy();
218242
expect(document.querySelector('.template2')).toBeTruthy();
219243
});
220244

221-
it('not multiple, open multiple times', fakeAsync(() => {
245+
it('not manualClosure, open manualClosure times', fakeAsync(() => {
222246
btnElement3.click();
223247
btnElement4.click();
224248
tick(1000);
225249
expect(document.querySelector('.template3')).toBeFalsy();
226250
expect(document.querySelector('.template4')).toBeTruthy();
227251
}));
228252

229-
it('multiple and not multiple, mixed open', fakeAsync(() => {
253+
it('manualClosure and not manualClosure, mixed open', fakeAsync(() => {
230254
btnElement3.click();
231255
expect(document.querySelector('.template3')).toBeTruthy();
232256
btnElement1.click();
@@ -240,7 +264,7 @@ describe(`thyPopover`, () => {
240264

241265
it('origin add active className, default', () => {
242266
btnElement1.click();
243-
expect(document.querySelector('.popover-origin-activated')).toBeTruthy();
267+
expect(document.querySelector('.thy-popover-origin-active')).toBeTruthy();
244268
});
245269

246270
it('origin add active className, originActivatedClass', () => {

0 commit comments

Comments
 (0)
0