ng-zorro-antd-mobile
Version:
An enterprise-class mobile UI components based on Ant Design and Angular
231 lines (226 loc) • 16.7 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, TemplateRef, Component, Input, Output, HostBinding, NgModule } from '@angular/core';
import * as i3 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i1 from 'ng-zorro-antd-mobile/flex';
import { FlexModule } from 'ng-zorro-antd-mobile/flex';
import * as i2 from 'ng-zorro-antd-mobile/icon';
import { IconModule } from 'ng-zorro-antd-mobile/icon';
import * as i4 from 'ng-zorro-antd-mobile/carousel';
import { CarouselModule } from 'ng-zorro-antd-mobile/carousel';
import * as i5 from 'ng-zorro-antd-mobile/core';
import { TouchFeedbackModule } from 'ng-zorro-antd-mobile/core';
import * as i6 from 'ng-zorro-antd-mobile/pipes';
import { NgZorroAntdMobilePipesModule } from 'ng-zorro-antd-mobile/pipes';
class GridComponent {
get columnNum() {
return this.defaultProps.columnNum;
}
set columnNum(value) {
if (typeof value === 'number') {
this.defaultProps.columnNum = value;
this.init();
}
}
get carouselMaxRow() {
return this.defaultProps.carouselMaxRow;
}
set carouselMaxRow(value) {
if (typeof value === 'number') {
this.defaultProps.carouselMaxRow = value;
this.init();
}
}
get isCarousel() {
return this.defaultProps.isCarousel;
}
set isCarousel(value) {
this.defaultProps.isCarousel = value;
this.init();
}
set data(value) {
this._data = value;
this.init();
}
get amGridSquare() {
return true === this.square;
}
get amGridLine() {
return true === this.hasLine;
}
get amGridCarousel() {
return true === this.isCarousel;
}
constructor() {
this.wrapCls = {};
this.itemCls = {};
this.carouselProps = {
dots: false,
dragging: false
};
this.defaultProps = {
data: [],
hasLine: true,
isCarousel: false,
columnNum: 4,
carouselMaxRow: 2,
prefixCls: 'am-grid',
square: true,
itemStyle: {}
};
this.carouselData = [];
this.carouselDataTmp = [];
this.gridData = [];
this._data = [];
this.itemStyle = {};
this.square = true;
this.hasLine = true;
this.activeStyle = true;
this.onClick = new EventEmitter();
this.amGrid = true;
}
getContentType(value) {
if ((value.indexOf('http') >= 0 || value.indexOf('assets') >= 0) && value.indexOf('<') < 0) {
return 'url';
}
else if (value.indexOf('<') >= 0) {
return 'innerHTML';
}
else if (value instanceof TemplateRef) {
return 'TemplateRef';
}
else {
return 'icon';
}
}
init() {
const dataLength = (this._data && this._data.length) || 0;
let rowCount = Math.ceil(dataLength / this.columnNum);
let rowsArr;
if (this.defaultProps.isCarousel) {
if (rowCount % this.carouselMaxRow !== 0) {
rowCount = rowCount + this.carouselMaxRow - (rowCount % this.carouselMaxRow);
}
const pageCount = Math.ceil(rowCount / this.carouselMaxRow);
rowsArr = this.getRows(rowCount, dataLength);
if (pageCount <= 1) {
this.carouselProps = {
dots: false,
dragging: false
};
}
else {
this.carouselProps = {
dots: true,
dragging: true
};
}
this.carouselDataTmp = this.getCarouselData(rowsArr, pageCount, rowCount);
}
else {
this.gridData = this.getRows(rowCount, dataLength);
}
}
getCarouselData(rowsArr, pageCount, rowCount) {
const pagesArr = [];
for (let pageIndex = 0; pageIndex < pageCount; pageIndex++) {
const pageRows = [];
for (let ii = 0; ii < this.carouselMaxRow; ii++) {
const rowIndex = pageIndex * this.carouselMaxRow + ii;
if (rowIndex < rowCount) {
pageRows.push(rowsArr[rowIndex]);
}
else {
// 空节点为了确保末尾页的最后未到底的行有底线(样式中last-child会没线)
pageRows.push(null);
}
}
pagesArr.push(pageRows);
}
return pagesArr;
}
getRows(rowCount, dataLength) {
const columnNum = this.columnNum;
const rowArr = new Array();
for (let i = 0; i < rowCount; i++) {
rowArr[i] = new Array();
for (let j = 0; j < columnNum; j++) {
const dataIndex = i * columnNum + j;
if (dataIndex < dataLength) {
rowArr[i][j] = this._data[dataIndex];
}
else {
rowArr[i][j] = null;
}
}
}
return rowArr;
}
click(data, index) {
const outputData = {
data: data,
index: index
};
this.onClick.emit(outputData);
}
ngOnInit() {
this.itemCls = {
[`${this.defaultProps.prefixCls}-item`]: true,
[`${this.defaultProps.prefixCls}-active-item`]: false
};
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: GridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: GridComponent, selector: "Grid, nzm-grid", inputs: { columnNum: "columnNum", carouselMaxRow: "carouselMaxRow", itemStyle: "itemStyle", square: "square", hasLine: "hasLine", isCarousel: "isCarousel", activeStyle: "activeStyle", data: "data" }, outputs: { onClick: "onClick" }, host: { properties: { "class.am-grid": "this.amGrid", "class.am-grid-square": "this.amGridSquare", "class.am-grid-line": "this.amGridLine", "class.am-grid-carousel": "this.amGridCarousel" } }, ngImport: i0, template: "<ng-container *ngIf=\"!isCarousel\">\n <Flex *ngFor=\"let item of gridData; let i = index\" [justify]=\"'center'\" [align]=\"'stretch'\">\n <FlexItem\n TouchFeedbackDirective\n *ngFor=\"let subItem of item; let j = index\"\n [ngClass]=\"itemCls\"\n [ngStyle]=\"itemStyle\"\n [className]=\"['am-grid-item-active']\"\n [activeStyle]=\"activeStyle\"\n >\n <div\n *ngIf=\"subItem !== null\"\n class=\"{{ defaultProps.prefixCls }}-item-content\"\n (click)=\"click(subItem, i * columnNum + j)\"\n >\n <div class=\"{{ defaultProps.prefixCls }}-item-inner-content column-num-{{ columnNum }}\">\n <img\n *ngIf=\"subItem.icon && getContentType(subItem.icon) === 'url'\"\n src=\"{{ subItem.icon }}\"\n class=\"{{ defaultProps.prefixCls }}-icon\"\n />\n <Icon\n *ngIf=\"subItem.icon && getContentType(subItem.icon) === 'icon'\"\n [type]=\"subItem.icon\"\n [size]=\"subItem.size\"\n ></Icon>\n <div\n *ngIf=\"subItem.icon && getContentType(subItem.icon) === 'innerHTML'\"\n [innerHTML]=\"subItem.icon | safeHTML\"\n ></div>\n <ng-template\n *ngIf=\"subItem.icon && getContentType(subItem.icon) === 'TemplateRef'\"\n [ngTemplateOutlet]=\"subItem.icon\"\n ></ng-template>\n <div class=\"{{ defaultProps.prefixCls }}-text\">{{ subItem.text }}</div>\n </div>\n </div>\n <div *ngIf=\"subItem === null\" class=\"{{ defaultProps.prefixCls }}-null-item\"></div>\n </FlexItem>\n </Flex>\n <ng-content></ng-content>\n</ng-container>\n\n<Carousel\n *ngIf=\"isCarousel && carouselDataTmp.length > 0\"\n [autoplay]=\"false\"\n [infinite]=\"true\"\n [selectedIndex]=\"0\"\n [autoplayInterval]=\"3000\"\n [dots]=\"carouselProps.dots\"\n [dragging]=\"carouselProps.dragging\"\n>\n <CarouselSlide\n *ngFor=\"let gridData of carouselDataTmp\"\n class=\"{{ defaultProps.prefixCls }}-carousel-page\"\n style=\"display: block;\"\n >\n <Flex *ngFor=\"let item of gridData; let i = index\" [justify]=\"'center'\" [align]=\"'stretch'\">\n <FlexItem\n TouchFeedbackDirective\n *ngFor=\"let subItem of item; let j = index\"\n class=\"{{ defaultProps.prefixCls }}-item\"\n [ngStyle]=\"itemStyle\"\n [className]=\"['am-grid-item-active']\"\n >\n <div\n *ngIf=\"subItem !== null\"\n class=\"{{ defaultProps.prefixCls }}-item-content\"\n (click)=\"click(subItem, i * columnNum + j)\"\n >\n <div class=\"{{ defaultProps.prefixCls }}-item-inner-content column-num-4\">\n <img class=\"{{ defaultProps.prefixCls }}-icon\" src=\"{{ subItem.icon }}\" />\n <div class=\"{{ defaultProps.prefixCls }}-text\">{{ subItem.text }}</div>\n </div>\n </div>\n <div *ngIf=\"subItem === null\" class=\"{{ defaultProps.prefixCls }}-null-item\"></div>\n </FlexItem>\n </Flex>\n </CarouselSlide>\n</Carousel>\n", dependencies: [{ kind: "component", type: i1.FlexComponent, selector: "Flex, nzm-flex", inputs: ["direction", "wrap", "justify", "align", "alignContent"] }, { kind: "component", type: i1.FlexItemComponent, selector: "FlexItem, nzm-flex-item" }, { kind: "component", type: i2.IconComponent, selector: "Icon, nzm-icon", inputs: ["color", "type", "src", "size"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4.CarouselComponent, selector: "Carousel, nzm-carousel", inputs: ["speed", "dots", "vertical", "autoplay", "autoplayInterval", "infinite", "dotStyle", "dotActiveStyle", "frameOverflow", "cellSpacing", "slideWidth", "swipeSpeed", "dragging", "selectedIndex"], outputs: ["afterChange", "beforeChange"] }, { kind: "component", type: i4.CarouselSlideComponent, selector: "CarouselSlide, nzm-carousel-slide" }, { kind: "directive", type: i5.TouchFeedbackDirective, selector: "[TouchFeedbackDirective]", inputs: ["className", "activeStyle"], outputs: ["clickStart", "clickEnd"] }, { kind: "pipe", type: i6.SafeHTMLPipe, name: "safeHTML" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: GridComponent, decorators: [{
type: Component,
args: [{ selector: 'Grid, nzm-grid', template: "<ng-container *ngIf=\"!isCarousel\">\n <Flex *ngFor=\"let item of gridData; let i = index\" [justify]=\"'center'\" [align]=\"'stretch'\">\n <FlexItem\n TouchFeedbackDirective\n *ngFor=\"let subItem of item; let j = index\"\n [ngClass]=\"itemCls\"\n [ngStyle]=\"itemStyle\"\n [className]=\"['am-grid-item-active']\"\n [activeStyle]=\"activeStyle\"\n >\n <div\n *ngIf=\"subItem !== null\"\n class=\"{{ defaultProps.prefixCls }}-item-content\"\n (click)=\"click(subItem, i * columnNum + j)\"\n >\n <div class=\"{{ defaultProps.prefixCls }}-item-inner-content column-num-{{ columnNum }}\">\n <img\n *ngIf=\"subItem.icon && getContentType(subItem.icon) === 'url'\"\n src=\"{{ subItem.icon }}\"\n class=\"{{ defaultProps.prefixCls }}-icon\"\n />\n <Icon\n *ngIf=\"subItem.icon && getContentType(subItem.icon) === 'icon'\"\n [type]=\"subItem.icon\"\n [size]=\"subItem.size\"\n ></Icon>\n <div\n *ngIf=\"subItem.icon && getContentType(subItem.icon) === 'innerHTML'\"\n [innerHTML]=\"subItem.icon | safeHTML\"\n ></div>\n <ng-template\n *ngIf=\"subItem.icon && getContentType(subItem.icon) === 'TemplateRef'\"\n [ngTemplateOutlet]=\"subItem.icon\"\n ></ng-template>\n <div class=\"{{ defaultProps.prefixCls }}-text\">{{ subItem.text }}</div>\n </div>\n </div>\n <div *ngIf=\"subItem === null\" class=\"{{ defaultProps.prefixCls }}-null-item\"></div>\n </FlexItem>\n </Flex>\n <ng-content></ng-content>\n</ng-container>\n\n<Carousel\n *ngIf=\"isCarousel && carouselDataTmp.length > 0\"\n [autoplay]=\"false\"\n [infinite]=\"true\"\n [selectedIndex]=\"0\"\n [autoplayInterval]=\"3000\"\n [dots]=\"carouselProps.dots\"\n [dragging]=\"carouselProps.dragging\"\n>\n <CarouselSlide\n *ngFor=\"let gridData of carouselDataTmp\"\n class=\"{{ defaultProps.prefixCls }}-carousel-page\"\n style=\"display: block;\"\n >\n <Flex *ngFor=\"let item of gridData; let i = index\" [justify]=\"'center'\" [align]=\"'stretch'\">\n <FlexItem\n TouchFeedbackDirective\n *ngFor=\"let subItem of item; let j = index\"\n class=\"{{ defaultProps.prefixCls }}-item\"\n [ngStyle]=\"itemStyle\"\n [className]=\"['am-grid-item-active']\"\n >\n <div\n *ngIf=\"subItem !== null\"\n class=\"{{ defaultProps.prefixCls }}-item-content\"\n (click)=\"click(subItem, i * columnNum + j)\"\n >\n <div class=\"{{ defaultProps.prefixCls }}-item-inner-content column-num-4\">\n <img class=\"{{ defaultProps.prefixCls }}-icon\" src=\"{{ subItem.icon }}\" />\n <div class=\"{{ defaultProps.prefixCls }}-text\">{{ subItem.text }}</div>\n </div>\n </div>\n <div *ngIf=\"subItem === null\" class=\"{{ defaultProps.prefixCls }}-null-item\"></div>\n </FlexItem>\n </Flex>\n </CarouselSlide>\n</Carousel>\n" }]
}], ctorParameters: () => [], propDecorators: { columnNum: [{
type: Input
}], carouselMaxRow: [{
type: Input
}], itemStyle: [{
type: Input
}], square: [{
type: Input
}], hasLine: [{
type: Input
}], isCarousel: [{
type: Input
}], activeStyle: [{
type: Input
}], data: [{
type: Input
}], onClick: [{
type: Output
}], amGrid: [{
type: HostBinding,
args: ['class.am-grid']
}], amGridSquare: [{
type: HostBinding,
args: ['class.am-grid-square']
}], amGridLine: [{
type: HostBinding,
args: ['class.am-grid-line']
}], amGridCarousel: [{
type: HostBinding,
args: ['class.am-grid-carousel']
}] } });
class GridModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: GridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: GridModule, declarations: [GridComponent], imports: [FlexModule, IconModule, CommonModule, CarouselModule, TouchFeedbackModule, NgZorroAntdMobilePipesModule], exports: [GridComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: GridModule, imports: [FlexModule, IconModule, CommonModule, CarouselModule, TouchFeedbackModule, NgZorroAntdMobilePipesModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: GridModule, decorators: [{
type: NgModule,
args: [{
imports: [FlexModule, IconModule, CommonModule, CarouselModule, TouchFeedbackModule, NgZorroAntdMobilePipesModule],
exports: [GridComponent],
declarations: [GridComponent]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { GridComponent, GridModule };
//# sourceMappingURL=ng-zorro-antd-mobile-grid.mjs.map