ng-zorro-antd-mobile
Version:
An enterprise-class mobile UI components based on Ant Design and Angular
78 lines (77 loc) • 9.18 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
import { Component, TemplateRef, ViewEncapsulation } from '@angular/core';
export class ActionSheetComponent {
constructor() {
this.props = {
prefixCls: 'am-action-sheet',
cancelButtonText: '取消'
};
this.flag = '';
this.title = '';
this.message = '';
this.transitionName = '';
this.maskTransitionName = '';
this.activeClassName = [`${this.props.prefixCls}-button-list-item-active`];
}
/**
* @param {?} flag
* @return {?}
*/
showShare(flag) {
/** @type {?} */
const cls = { [`${this.props.prefixCls}-share`]: flag === 'SHARE' };
return cls;
}
/**
* @param {?} value
* @return {?}
*/
isTemplateRef(value) {
if (value) {
return value instanceof TemplateRef;
}
return false;
}
/**
* @param {?} options
* @param {?} value
* @return {?}
*/
isArray(options, value) {
if (options.length > 0 && value) {
return value instanceof Array;
}
return false;
}
}
ActionSheetComponent.decorators = [
{ type: Component, args: [{
selector: 'ActionSheet',
template: "<div class=\"{{props.prefixCls}}-mask {{maskTransitionName}}\"></div>\n<div class=\"{{props.prefixCls}}-wrap {{transitionName}}\" (click)=\"onPress(-1, 0, $event)\">\n <div role=\"document\"\n class=\"{{props.prefixCls}}\"\n [ngClass]=\"showShare(flag)\">\n <div class=\"{{props.prefixCls}}-content\">\n <button aria-label=\"Close\" class=\"{{props.prefixCls}}-close\">\n <span class=\"{{props.prefixCls}}-close-x\"></span>\n </button>\n <div class=\"{{props.prefixCls}}-body\">\n <div>\n <ng-template *ngIf=\"isTemplateRef(title)\" [ngTemplateOutlet]=\"title\"></ng-template>\n <h3 *ngIf=\"!isTemplateRef(title)\" class=\"{{props.prefixCls}}-title\">{{title}}</h3>\n <ng-template *ngIf=\"isTemplateRef(message)\" [ngTemplateOutlet]=\"message\"></ng-template>\n <div *ngIf=\"!isTemplateRef(message)\" class=\"{{props.prefixCls}}-message\">{{message}}</div>\n <ng-container [ngSwitch]=\"flag\">\n <div *ngSwitchCase=\"'NORMAL'\" class=\"{{props.prefixCls}}-button-list\" role=\"group\">\n <ng-container *ngFor=\"let item of options; let i = index;\">\n <TouchFeedBack class=\"{{props.prefixCls}}-button-list-item\" [activeClassName]=\"activeClassName\" >\n <div *ngIf=\"destructiveButtonIndex !== i && cancelButtonIndex !== i\"\n class=\"{{props.prefixCls}}-button-list-item\"\n (click)=\"onPress(i, 0, $event)\"\n >\n {{item}}\n </div>\n <div *ngIf=\"destructiveButtonIndex === i\"\n class=\"{{props.prefixCls}}-button-list-item {{props.prefixCls}}-destructive-button\"\n (click)=\"onPress(i, 0, $event)\"\n >\n {{item}}\n </div>\n <div *ngIf=\"cancelButtonIndex === i\"\n class=\"{{props.prefixCls}}-button-list-item {{props.prefixCls}}-cancel-button\"\n (click)=\"onPress(i, 0, $event)\"\n >\n {{item}}\n <span class=\"{{props.prefixCls}}-cancel-button-mask\"></span>\n </div>\n </TouchFeedBack>\n </ng-container>\n </div>\n <div *ngSwitchCase=\"'SHARE'\" class=\"{{props.prefixCls}}-share {{props.prefixCls}}-share-content\">\n <div *ngIf=\"!isArray(options, options[0])\" class=\"{{props.prefixCls}}-share-list\">\n <ng-container *ngFor=\"let item of options; let i = index;\">\n <div class=\"{{props.prefixCls}}-share-list-item\" (click)=\"onPress(i, 0, $event)\">\n <div class=\"{{props.prefixCls}}-share-list-item-icon\">\n <ng-template *ngIf=\"isTemplateRef(item.icon)\" [ngTemplateOutlet]=\"item.icon\"></ng-template>\n <div *ngIf=\"!isTemplateRef(item.icon)\" [innerHTML]=\"item.icon | safeHTML\"></div>\n </div>\n <div class=\"{{props.prefixCls}}-share-list-item-title\">{{item.title}}</div>\n </div>\n </ng-container>\n </div>\n <ng-container *ngIf=\"isArray(options, options[0])\">\n <div *ngFor=\"let items of options; let rowIndex = index\" class=\"{{props.prefixCls}}-share-list\">\n <ng-container *ngFor=\"let item of items; let i = index;\">\n <div class=\"{{props.prefixCls}}-share-list-item\" (click)=\"onPress(i, rowIndex, $event)\">\n <div class=\"{{props.prefixCls}}-share-list-item-icon\">\n <ng-template *ngIf=\"isTemplateRef(item.icon)\" [ngTemplateOutlet]=\"item.icon\"></ng-template>\n <div *ngIf=\"!isTemplateRef(item.icon)\" [innerHTML]=\"item.icon | safeHTML\"></div>\n </div>\n <div class=\"{{props.prefixCls}}-share-list-item-title\">{{item.title}}</div>\n </div>\n </ng-container>\n </div>\n </ng-container>\n <div class=\"{{props.prefixCls}}-share-cancel-button\">{{props.cancelButtonText}}</div>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n</div>",
encapsulation: ViewEncapsulation.None
}] }
];
/** @nocollapse */
ActionSheetComponent.ctorParameters = () => [];
if (false) {
/** @type {?} */
ActionSheetComponent.prototype.props;
/** @type {?} */
ActionSheetComponent.prototype.flag;
/** @type {?} */
ActionSheetComponent.prototype.title;
/** @type {?} */
ActionSheetComponent.prototype.message;
/** @type {?} */
ActionSheetComponent.prototype.transitionName;
/** @type {?} */
ActionSheetComponent.prototype.maskTransitionName;
/** @type {?} */
ActionSheetComponent.prototype.activeClassName;
/** @type {?} */
ActionSheetComponent.prototype.onPress;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWN0aW9uLXNoZWV0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL25nLXpvcnJvLWFudGQtbW9iaWxlLyIsInNvdXJjZXMiOlsiYWN0aW9uLXNoZWV0L2FjdGlvbi1zaGVldC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsV0FBVyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sZUFBZSxDQUFDO0FBTzFFLE1BQU07SUFhSjtxQkFaUTtZQUNOLFNBQVMsRUFBRSxpQkFBaUI7WUFDNUIsZ0JBQWdCLEVBQUUsSUFBSTtTQUN2QjtvQkFDYyxFQUFFO3FCQUNELEVBQUU7dUJBQ0EsRUFBRTs4QkFDSyxFQUFFO2tDQUNFLEVBQUU7K0JBQ2IsQ0FBQyxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsU0FBUywwQkFBMEIsQ0FBQztLQUdyRDs7Ozs7SUFFaEIsU0FBUyxDQUFDLElBQUk7O1FBQ1osTUFBTSxHQUFHLEdBQUcsRUFBRSxDQUFDLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxTQUFTLFFBQVEsQ0FBQyxFQUFFLElBQUksS0FBSyxPQUFPLEVBQUUsQ0FBQztRQUNwRSxPQUFPLEdBQUcsQ0FBQztLQUNaOzs7OztJQUVELGFBQWEsQ0FBQyxLQUFLO1FBQ2pCLElBQUksS0FBSyxFQUFFO1lBQ1QsT0FBTyxLQUFLLFlBQVksV0FBVyxDQUFDO1NBQ3JDO1FBQ0QsT0FBTyxLQUFLLENBQUM7S0FDZDs7Ozs7O0lBRUQsT0FBTyxDQUFDLE9BQVksRUFBRSxLQUFVO1FBQzlCLElBQUksT0FBTyxDQUFDLE1BQU0sR0FBRyxDQUFDLElBQUksS0FBSyxFQUFFO1lBQy9CLE9BQU8sS0FBSyxZQUFZLEtBQUssQ0FBQztTQUMvQjtRQUNELE9BQU8sS0FBSyxDQUFDO0tBQ2Q7OztZQXJDRixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLGFBQWE7Z0JBQ3ZCLDY1SUFBNEM7Z0JBQzVDLGFBQWEsRUFBRSxpQkFBaUIsQ0FBQyxJQUFJO2FBQ3RDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBUZW1wbGF0ZVJlZiwgVmlld0VuY2Fwc3VsYXRpb24gfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnQWN0aW9uU2hlZXQnLFxuICB0ZW1wbGF0ZVVybDogJy4vYWN0aW9uLXNoZWV0LmNvbXBvbmVudC5odG1sJyxcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZVxufSlcbmV4cG9ydCBjbGFzcyBBY3Rpb25TaGVldENvbXBvbmVudCB7XG4gIHByb3BzID0ge1xuICAgIHByZWZpeENsczogJ2FtLWFjdGlvbi1zaGVldCcsXG4gICAgY2FuY2VsQnV0dG9uVGV4dDogJ+WPlua2iCdcbiAgfTtcbiAgZmxhZzogc3RyaW5nID0gJyc7XG4gIHRpdGxlOiBzdHJpbmcgPSAnJztcbiAgbWVzc2FnZTogc3RyaW5nID0gJyc7XG4gIHRyYW5zaXRpb25OYW1lOiBzdHJpbmcgPSAnJztcbiAgbWFza1RyYW5zaXRpb25OYW1lOiBzdHJpbmcgPSAnJztcbiAgYWN0aXZlQ2xhc3NOYW1lID0gW2Ake3RoaXMucHJvcHMucHJlZml4Q2xzfS1idXR0b24tbGlzdC1pdGVtLWFjdGl2ZWBdO1xuICBvblByZXNzO1xuXG4gIGNvbnN0cnVjdG9yKCkge31cblxuICBzaG93U2hhcmUoZmxhZykge1xuICAgIGNvbnN0IGNscyA9IHsgW2Ake3RoaXMucHJvcHMucHJlZml4Q2xzfS1zaGFyZWBdOiBmbGFnID09PSAnU0hBUkUnIH07XG4gICAgcmV0dXJuIGNscztcbiAgfVxuXG4gIGlzVGVtcGxhdGVSZWYodmFsdWUpIHtcbiAgICBpZiAodmFsdWUpIHtcbiAgICAgIHJldHVybiB2YWx1ZSBpbnN0YW5jZW9mIFRlbXBsYXRlUmVmO1xuICAgIH1cbiAgICByZXR1cm4gZmFsc2U7XG4gIH1cblxuICBpc0FycmF5KG9wdGlvbnM6IGFueSwgdmFsdWU6IGFueSkge1xuICAgIGlmIChvcHRpb25zLmxlbmd0aCA+IDAgJiYgdmFsdWUpIHtcbiAgICAgIHJldHVybiB2YWx1ZSBpbnN0YW5jZW9mIEFycmF5O1xuICAgIH1cbiAgICByZXR1cm4gZmFsc2U7XG4gIH1cbn1cbiJdfQ==