ng-zorro-antd-mobile
Version:
An enterprise-class mobile UI components based on Ant Design and Angular
175 lines (170 loc) • 11.3 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, Component, ViewEncapsulation, ViewChild, Input, Output, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
class SwipeActionComponent {
constructor() {
this.prefixCls = 'am-swipe';
this.wrapCls = {};
this._swiping = false;
this._openedLeft = false;
this._openedRight = false;
this.left = [];
this.right = [];
this.autoClose = false;
this.disabled = false;
this.onOpen = new EventEmitter();
this.onClose = new EventEmitter();
this.onCloseSwipe = ev => {
if (!(this._openedLeft || this._openedRight)) {
return;
}
const pNode = ev.target.closest(`.${this.prefixCls}-actions`);
if (!pNode) {
this.close();
}
};
}
setClassMap() {
this.wrapCls = {
[this.prefixCls]: true,
[`${this.prefixCls}-swiping`]: this._swiping
};
}
close() {
if (this._openedLeft || this._openedRight) {
this.onClose.emit();
}
this.setBtnStyle(0);
this._openedLeft = false;
this._openedRight = false;
}
setBtnStyle(value) {
if (this._btnsLeftWidth === 0 || this._btnsRightWidth === 0) {
this._btnsLeftWidth = this.leftBtnRef ? this.leftBtnRef.nativeElement.offsetWidth : 0;
this._btnsRightWidth = this.rightBtnRef ? this.rightBtnRef.nativeElement.offsetWidth : 0;
}
const limit = value > 0 ? this._btnsLeftWidth : -this._btnsRightWidth;
const contentLeft = this.getContentEasing(value, limit);
this.content.nativeElement.style.left = `${contentLeft}px`;
this.cover.nativeElement.style.display = Math.abs(value) > 0 ? 'block' : 'none';
this.cover.nativeElement.style.left = `${contentLeft}px`;
}
getContentEasing(value, limit) {
return Math.abs(value) - Math.abs(limit) > 0 ? limit : value;
}
onTouchStart(e) {
this._startX = e.changedTouches[0].clientX;
this._swiping = true;
}
onTouchMove(e) {
const deltaX = e.changedTouches[0].clientX - this._startX;
this._needShowRight = deltaX < -5 && this.right.length > 0;
this._needShowLeft = deltaX > 5 && this.left.length > 0;
if (this.leftBtnRef) {
this.leftBtnRef.nativeElement.style.visibility = this._needShowRight ? 'hidden' : 'visible';
}
if (this.rightBtnRef) {
this.rightBtnRef.nativeElement.style.visibility = this._needShowLeft ? 'hidden' : 'visible';
}
this.setBtnStyle(deltaX);
}
onTouchEnd(e) {
const deltaX = e.changedTouches[0].clientX - this._startX;
const needOpenRight = this._needShowRight && Math.abs(deltaX) > this._btnsRightWidth / 2;
const needOpenLeft = this._needShowLeft && Math.abs(deltaX) > this._btnsLeftWidth / 2;
if (needOpenRight) {
this.doOpenRight();
}
else if (needOpenLeft) {
this.doOpenLeft();
}
else {
this.close();
}
this._swiping = false;
this._needShowLeft = false;
this._needShowRight = false;
}
doOpenLeft() {
this.open(this._btnsLeftWidth, true, false);
}
doOpenRight() {
this.open(-this._btnsRightWidth, false, true);
}
onBtnClick(ev, btn) {
const onPress = btn.onPress;
if (onPress) {
onPress(ev);
}
if (this.autoClose) {
this.close();
}
}
open(value, openedLeft, openedRight) {
this.onOpen.emit();
this._openedLeft = openedLeft;
this._openedRight = openedRight;
this.setBtnStyle(value);
}
ngOnInit() {
this.setClassMap();
}
ngAfterViewInit() {
this._btnsLeftWidth = this.leftBtnRef ? this.leftBtnRef.nativeElement.offsetWidth : 0;
this._btnsRightWidth = this.rightBtnRef ? this.rightBtnRef.nativeElement.offsetWidth : 0;
document.body.addEventListener('touchstart', this.onCloseSwipe, true);
}
ngOnDestroy() {
document.body.removeEventListener('touchstart', this.onCloseSwipe, true);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SwipeActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: SwipeActionComponent, selector: "SwipeAction, nzm-swipe-action", inputs: { left: "left", right: "right", autoClose: "autoClose", disabled: "disabled" }, outputs: { onOpen: "onOpen", onClose: "onClose" }, viewQueries: [{ propertyName: "leftBtnRef", first: true, predicate: ["leftBtnRef"], descendants: true }, { propertyName: "rightBtnRef", first: true, predicate: ["rightBtnRef"], descendants: true }, { propertyName: "content", first: true, predicate: ["contentRef"], descendants: true }, { propertyName: "cover", first: true, predicate: ["coverRef"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"(left.length != 0 || right.length != 0) && !disabled\" [ngClass]=\"wrapCls\">\n <div class=\"{{ prefixCls }}-cover\" #coverRef></div>\n <div *ngIf=\"left && left.length > 0\" class=\"{{ prefixCls }}-actions {{ prefixCls }}-actions-left\" #leftBtnRef>\n <div\n *ngFor=\"let btn of left\"\n class=\"{{ prefixCls }}-btn {{ btn.className }}\"\n [ngStyle]=\"btn.style\"\n role=\"button\"\n (click)=\"onBtnClick($event, btn)\"\n >\n <div class=\"{{ prefixCls }}-btn-text\">\n {{ btn.text || 'Click' }}\n </div>\n </div>\n </div>\n <div *ngIf=\"right && right.length > 0\" class=\"{{ prefixCls }}-actions {{ prefixCls }}-actions-right\" #rightBtnRef>\n <div\n *ngFor=\"let btn of right\"\n class=\"{{ prefixCls }}-btn {{ btn.className }}\"\n [ngStyle]=\"btn.style\"\n role=\"button\"\n (click)=\"onBtnClick($event, btn)\"\n >\n <div class=\"{{ prefixCls }}-btn-text\">\n {{ btn.text || 'Click' }}\n </div>\n </div>\n </div>\n <div\n class=\"{{ prefixCls }}-content\"\n #contentRef\n (touchstart)=\"onTouchStart($event)\"\n (touchmove)=\"onTouchMove($event)\"\n (touchend)=\"onTouchEnd($event)\"\n >\n <ng-template [ngTemplateOutlet]=\"content\"></ng-template>\n </div>\n</div>\n<div *ngIf=\"!((left.length != 0 || right.length != 0) && !disabled)\" class=\"{{ prefixCls }}-content\" #contentRef>\n <ng-template [ngTemplateOutlet]=\"content\"></ng-template>\n</div>\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SwipeActionComponent, decorators: [{
type: Component,
args: [{ selector: 'SwipeAction, nzm-swipe-action', encapsulation: ViewEncapsulation.None, template: "<div *ngIf=\"(left.length != 0 || right.length != 0) && !disabled\" [ngClass]=\"wrapCls\">\n <div class=\"{{ prefixCls }}-cover\" #coverRef></div>\n <div *ngIf=\"left && left.length > 0\" class=\"{{ prefixCls }}-actions {{ prefixCls }}-actions-left\" #leftBtnRef>\n <div\n *ngFor=\"let btn of left\"\n class=\"{{ prefixCls }}-btn {{ btn.className }}\"\n [ngStyle]=\"btn.style\"\n role=\"button\"\n (click)=\"onBtnClick($event, btn)\"\n >\n <div class=\"{{ prefixCls }}-btn-text\">\n {{ btn.text || 'Click' }}\n </div>\n </div>\n </div>\n <div *ngIf=\"right && right.length > 0\" class=\"{{ prefixCls }}-actions {{ prefixCls }}-actions-right\" #rightBtnRef>\n <div\n *ngFor=\"let btn of right\"\n class=\"{{ prefixCls }}-btn {{ btn.className }}\"\n [ngStyle]=\"btn.style\"\n role=\"button\"\n (click)=\"onBtnClick($event, btn)\"\n >\n <div class=\"{{ prefixCls }}-btn-text\">\n {{ btn.text || 'Click' }}\n </div>\n </div>\n </div>\n <div\n class=\"{{ prefixCls }}-content\"\n #contentRef\n (touchstart)=\"onTouchStart($event)\"\n (touchmove)=\"onTouchMove($event)\"\n (touchend)=\"onTouchEnd($event)\"\n >\n <ng-template [ngTemplateOutlet]=\"content\"></ng-template>\n </div>\n</div>\n<div *ngIf=\"!((left.length != 0 || right.length != 0) && !disabled)\" class=\"{{ prefixCls }}-content\" #contentRef>\n <ng-template [ngTemplateOutlet]=\"content\"></ng-template>\n</div>\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n" }]
}], ctorParameters: () => [], propDecorators: { leftBtnRef: [{
type: ViewChild,
args: ['leftBtnRef']
}], rightBtnRef: [{
type: ViewChild,
args: ['rightBtnRef']
}], content: [{
type: ViewChild,
args: ['contentRef']
}], cover: [{
type: ViewChild,
args: ['coverRef']
}], left: [{
type: Input
}], right: [{
type: Input
}], autoClose: [{
type: Input
}], disabled: [{
type: Input
}], onOpen: [{
type: Output
}], onClose: [{
type: Output
}] } });
class SwipeActionModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SwipeActionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: SwipeActionModule, declarations: [SwipeActionComponent], imports: [CommonModule], exports: [SwipeActionComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SwipeActionModule, imports: [CommonModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SwipeActionModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule],
exports: [SwipeActionComponent],
declarations: [SwipeActionComponent],
providers: []
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { SwipeActionComponent, SwipeActionModule };
//# sourceMappingURL=ng-zorro-antd-mobile-swipe-action.mjs.map