Skip to content

Commit

Permalink
perf(module: actionsheet): perf actionsheet with cdk (#228)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Guoyuanqiang @fisherspy
Guoyuanqiang authored and fisherspy committed Jan 9, 2019
1 parent f9dbc5a commit 9a9988a
Show file tree
Hide file tree
Showing 8 changed files with 108 additions and 112 deletions.
5 changes: 3 additions & 2 deletions components/action-sheet/action-sheet-options.provider.ts
View file
Expand Up @@ -2,8 +2,8 @@ import { Injectable, TemplateRef } from '@angular/core';

@Injectable()
export class ActionSheetOptions {
prefixCls?: string;
maskClosable?: boolean;
prefixCls?: string = 'am-action-sheet';
maskClosable?: boolean = true;
cancelButtonIndex?: number;
destructiveButtonIndex?: number;
title?: string | TemplateRef<any>;
Expand All @@ -22,6 +22,7 @@ export class ShareOption {
@Injectable()
export class ShareActionSheetWithOptions extends ActionSheetOptions {
options: ShareOption[] | ShareOption[][];
cancelButtonText?: string = 'Cancel';
}

@Injectable()
Expand Down
82 changes: 41 additions & 41 deletions components/action-sheet/action-sheet.component.html
View file
@@ -1,74 +1,74 @@
<div class="{{props.prefixCls}}-mask {{maskTransitionName}}"></div>
<div class="{{props.prefixCls}}-wrap {{transitionName}}" (click)="onPress(-1, 0, $event)">
<div class="{{option.prefixCls}}-mask {{option.maskTransitionName}}"></div>
<div role="dialog" class="{{option.prefixCls}}-wrap {{option.transitionName}}" (click)="option.maskClose(-1, 0, $event)">
<div role="document"
class="{{props.prefixCls}}"
[ngClass]="showShare(flag)">
<div class="{{props.prefixCls}}-content">
<button aria-label="Close" class="{{props.prefixCls}}-close">
<span class="{{props.prefixCls}}-close-x"></span>
class="{{option.prefixCls}}"
[ngClass]="showShare(option)">
<div class="{{option.prefixCls}}-content">
<button aria-label="Close" class="{{option.prefixCls}}-close">
<span class="{{option.prefixCls}}-close-x"></span>
</button>
<div class="{{props.prefixCls}}-body">
<div class="{{option.prefixCls}}-body">
<div>
<ng-container *ngIf="!isNoTitle(title)">
<ng-template *ngIf="isTemplateRef(title)" [ngTemplateOutlet]="title"></ng-template>
<h3 *ngIf="!isTemplateRef(title)" class="{{props.prefixCls}}-title">{{title}}</h3>
<ng-container *ngIf="!isNoTitle(option.title)">
<ng-template *ngIf="isTemplateRef(option.title)" [ngTemplateOutlet]="option.title"></ng-template>
<h3 *ngIf="!isTemplateRef(option.title)" class="{{option.prefixCls}}-title">{{option.title}}</h3>
</ng-container>
<ng-container *ngIf="!isNoTitle(title)">
<ng-template *ngIf="isTemplateRef(message)" [ngTemplateOutlet]="message"></ng-template>
<div *ngIf="!isTemplateRef(message)" class="{{props.prefixCls}}-message">{{message}}</div>
<ng-container *ngIf="!isNoTitle(option.title)">
<ng-template *ngIf="isTemplateRef(option.message)" [ngTemplateOutlet]="option.message"></ng-template>
<div *ngIf="!isTemplateRef(option.message)" class="{{option.prefixCls}}-message">{{option.message}}</div>
</ng-container>
<ng-container [ngSwitch]="flag">
<div *ngSwitchCase="'NORMAL'" class="{{props.prefixCls}}-button-list" role="group">
<ng-container *ngFor="let item of options; let i = index;">
<TouchFeedBack class="{{props.prefixCls}}-button-list-item" [activeClassName]="activeClassName" >
<div *ngIf="destructiveButtonIndex !== i && cancelButtonIndex !== i"
class="{{props.prefixCls}}-button-list-item"
(click)="onPress(i, 0, $event)"
<ng-container [ngSwitch]="option.flag">
<div *ngSwitchCase="'NORMAL'" class="{{option.prefixCls}}-button-list" role="group">
<ng-container *ngFor="let item of option.options; let i = index;">
<div TouchFeedbackDirective class="{{option.prefixCls}}-button-list-item" [className]="setActiveClassName(option, 'button-list-item')">
<div *ngIf="option.destructiveButtonIndex !== i && option.cancelButtonIndex !== i"
class="{{option.prefixCls}}-button-list-item"
(click)="option.onPress(i, 0, $event)"
>
{{item}}
</div>
<div *ngIf="destructiveButtonIndex === i"
class="{{props.prefixCls}}-button-list-item {{props.prefixCls}}-destructive-button"
(click)="onPress(i, 0, $event)"
<div *ngIf="option.destructiveButtonIndex === i"
class="{{option.prefixCls}}-button-list-item {{option.prefixCls}}-destructive-button"
(click)="option.onPress(i, 0, $event)"
>
{{item}}
</div>
<div *ngIf="cancelButtonIndex === i"
class="{{props.prefixCls}}-button-list-item {{props.prefixCls}}-cancel-button"
(click)="onPress(i, 0, $event)"
<div *ngIf="option.cancelButtonIndex === i"
class="{{option.prefixCls}}-button-list-item {{option.prefixCls}}-cancel-button"
(click)="option.onPress(i, 0, $event)"
>
{{item}}
<span class="{{props.prefixCls}}-cancel-button-mask"></span>
<span class="{{option.prefixCls}}-cancel-button-mask"></span>
</div>
</TouchFeedBack>
</div>
</ng-container>
</div>
<div *ngSwitchCase="'SHARE'" class="{{props.prefixCls}}-share {{props.prefixCls}}-share-content">
<div *ngIf="!isArray(options, options[0])" class="{{props.prefixCls}}-share-list">
<ng-container *ngFor="let item of options; let i = index;">
<div class="{{props.prefixCls}}-share-list-item" (click)="onPress(i, 0, $event)">
<div class="{{props.prefixCls}}-share-list-item-icon">
<div *ngSwitchCase="'SHARE'" class="{{option.prefixCls}}-share {{option.prefixCls}}-share-content">
<div *ngIf="!isArray(option.options, option.options[0])" class="{{option.prefixCls}}-share-list">
<ng-container *ngFor="let item of option.options; let i = index;">
<div class="{{option.prefixCls}}-share-list-item" (click)="option.onPress(i, 0, $event)">
<div class="{{option.prefixCls}}-share-list-item-icon">
<ng-template *ngIf="isTemplateRef(item.icon)" [ngTemplateOutlet]="item.icon"></ng-template>
<div *ngIf="!isTemplateRef(item.icon)" [innerHTML]="item.icon | safeHTML"></div>
</div>
<div class="{{props.prefixCls}}-share-list-item-title">{{item.title}}</div>
<div class="{{option.prefixCls}}-share-list-item-title">{{item.title}}</div>
</div>
</ng-container>
</div>
<ng-container *ngIf="isArray(options, options[0])">
<div *ngFor="let items of options; let rowIndex = index" class="{{props.prefixCls}}-share-list">
<ng-container *ngIf="isArray(option.options, option.options[0])">
<div *ngFor="let items of option.options; let rowIndex = index" class="{{option.prefixCls}}-share-list">
<ng-container *ngFor="let item of items; let i = index;">
<div class="{{props.prefixCls}}-share-list-item" (click)="onPress(i, rowIndex, $event)">
<div class="{{props.prefixCls}}-share-list-item-icon">
<div class="{{option.prefixCls}}-share-list-item" (click)="option.onPress(i, rowIndex, $event)">
<div class="{{option.prefixCls}}-share-list-item-icon">
<ng-template *ngIf="isTemplateRef(item.icon)" [ngTemplateOutlet]="item.icon"></ng-template>
<div *ngIf="!isTemplateRef(item.icon)" [innerHTML]="item.icon | safeHTML"></div>
</div>
<div class="{{props.prefixCls}}-share-list-item-title">{{item.title}}</div>
<div class="{{option.prefixCls}}-share-list-item-title">{{item.title}}</div>
</div>
</ng-container>
</div>
</ng-container>
<div class="{{props.prefixCls}}-share-cancel-button">{{props.cancelButtonText}}</div>
<div TouchFeedbackDirective [className]="setActiveClassName(option, 'share-cancel-button')" class="{{option.prefixCls}}-share-cancel-button">{{option.cancelButtonText}}</div>
</div>
</ng-container>
</div>
Expand Down
50 changes: 28 additions & 22 deletions components/action-sheet/action-sheet.component.spec.ts
View file
@@ -1,11 +1,11 @@
import { Component, ViewChild } from '@angular/core';
import { By } from '@angular/platform-browser';
import { dispatchTouchEvent } from '../core/testing';
import { async, ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
import { async, ComponentFixture, TestBed, fakeAsync, flush } from '@angular/core/testing';
import { ActionSheetComponent } from './action-sheet.component';
import { ActionSheet, ActionSheetModule, ButtonModule } from '../..';
import { NgZorroAntdMobilePipesModule } from '../pipes/ng-zorro-antd-mobile.pipes.module';

import { Overlay } from '@angular/cdk/overlay';
describe('ActionSheetComponent', () => {
let component: TestActionSheetBasicComponent;
let fixture: ComponentFixture<TestActionSheetBasicComponent>;
Expand All @@ -16,7 +16,7 @@ describe('ActionSheetComponent', () => {
TestBed.configureTestingModule({
declarations: [TestActionSheetBasicComponent],
imports: [NgZorroAntdMobilePipesModule, ActionSheetModule, ButtonModule],
providers: [ActionSheet]
providers: [ActionSheet, Overlay]
}).compileComponents();
TestBed.overrideModule(ActionSheetModule, {
set: { entryComponents: [ActionSheetComponent, TestActionSheetBasicComponent] }
Expand All @@ -30,71 +30,77 @@ describe('ActionSheetComponent', () => {
fixture.detectChanges();
});

it('should actionsheet work', () => {
it('should actionsheet work', fakeAsync(() => {
const button = buttons[0].nativeElement;
button.click();
fixture.detectChanges();
flush();
actionSheetEle = document.querySelector('actionsheet');
expect(actionSheetEle.querySelector('.am-action-sheet-wrap').classList).toContain(
'am-action-sheet-wrap',
'actionsheet is work'
);
});
}));

it('should options work', () => {
it('should options work', fakeAsync(() => {
expect(actionSheetEle.querySelector('.am-action-sheet-button-list').children.length).toBe(
component.dataList.length,
'options is work'
);
});
}));

it('should title work', () => {
it('should title work', fakeAsync(() => {
expect(actionSheetEle.querySelector('.am-action-sheet-destructive-button').innerText).toBe(
'Delete',
'Delete is work'
);
});
}));

it('should title work', () => {
it('should title work', fakeAsync(() => {
expect(actionSheetEle.querySelector('.am-action-sheet-cancel-button').innerText).toBe('Cancel', 'Cancel is work');
});
}));

it('should maskClosable work', () => {
it('should maskClosable work', fakeAsync(() => {
expect(actionSheetEle.querySelector('.am-action-sheet-mask').classList).toContain(
'am-action-sheet-mask',
'maskClosable is work'
);
});
}));

it('should shareActionSheet work', () => {
it('should shareActionSheet work', fakeAsync(() => {
const button = buttons[1].nativeElement;
button.click();
fixture.detectChanges();
actionSheetEle = document.querySelector('actionsheet');
flush();
actionSheetEle = document.getElementsByTagName('actionsheet')[1];
expect(actionSheetEle.querySelector('.am-action-sheet-share-list')).toBeTruthy('shareactionsheet is work');
});
}));

it('should shareActionSheetMulpitleLine work', () => {
it('should shareActionSheetMulpitleLine work', fakeAsync(() => {
const button = buttons[2].nativeElement;
button.click();
fixture.detectChanges();
actionSheetEle = document.querySelector('actionsheet');
flush();
actionSheetEle = document.getElementsByTagName('actionsheet')[2];
expect(actionSheetEle.querySelector('.am-action-sheet-share-content').children.length).toBe(
3,
'shareActionSheetMulpitleLine is work'
);
actionSheetEle.querySelector('.am-action-sheet-share-list-item').click();
fixture.detectChanges();
});
flush();
}));

it('should close work', () => {
it('should close work', fakeAsync(() => {
const button = buttons[1].nativeElement;
button.click();
fixture.detectChanges();
actionSheetEle = document.querySelector('actionsheet');
flush();
actionSheetEle = document.getElementsByTagName('actionsheet')[1];
actionSheetEle.querySelector('.am-action-sheet-share-list-item').click();
fixture.detectChanges();
});
flush();
}));

it('should create', () => {
expect(component).toBeTruthy();
Expand Down
25 changes: 8 additions & 17 deletions components/action-sheet/action-sheet.component.ts
View file
@@ -1,33 +1,24 @@
import { Component, TemplateRef, ViewEncapsulation } from '@angular/core';
import { Component, TemplateRef, ViewEncapsulation, HostListener } from '@angular/core';

@Component({
selector: 'ActionSheet',
templateUrl: './action-sheet.component.html',
encapsulation: ViewEncapsulation.None
})
export class ActionSheetComponent {
props = {
prefixCls: 'am-action-sheet',
cancelButtonText: '鍙栨秷'
};
flag: string = '';
title: string = '';
message: string = '';
transitionName: string = '';
maskTransitionName: string = '';
activeClassName = [`${this.props.prefixCls}-button-list-item-active`];
options?: string[];
cancelButtonIndex?: number;
destructiveButtonIndex?: number;

option: any;
constructor() {}

onPress(index: any, rowIndex = 0, event) {}
showShare(flag) {
const cls = { [`${this.props.prefixCls}-share`]: flag === 'SHARE' };
showShare(option) {
const cls = { [`${option.prefixCls}-share`]: option.flag === 'SHARE' };
return cls;
}

setActiveClassName(option, suffix) {
return [`${option.prefixCls}-${suffix}-active`];
}

isNoTitle(value: string | TemplateRef<any>) {
return value === '' || value === null || value === undefined;
}
Expand Down

0 comments on commit 9a9988a

Please sign in to comment.