ng-zorro-antd-mobile
Version:
An enterprise-class mobile UI components based on Ant Design and Angular
172 lines (167 loc) • 9 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, forwardRef, Component, ViewEncapsulation, Input, Output, HostBinding, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import { DatePickerComponent, DatePickerOptions, DatePickerModule } from 'ng-zorro-antd-mobile/date-picker';
import { LocaleProviderModule } from 'ng-zorro-antd-mobile/locale-provider';
import { ToastModule } from 'ng-zorro-antd-mobile/toast';
class DatePickerViewComponent extends DatePickerComponent {
constructor() {
super(...arguments);
this.mode = 'date';
this.minDate = new Date(2000, 5, 1, 0, 0, 0);
this.maxDate = new Date(2030, 1, 1, 23, 59, 59);
this.value = new Date();
this.disabled = false;
this.indicatorStyle = {};
this.showErrorToast = true;
this.showErrorToastInterval = 2000;
this.onValueChange = new EventEmitter();
this.amPicker = true;
}
get locale() {
return this.options.locale;
}
set locale(value) {
this.options.locale = value;
this.unsubscribe$.next();
this.unsubscribe$.complete();
}
reloadPicker() {
if (this.currentPicker) {
const self = this;
setTimeout(() => {
self.selectedTarget.forEach((item, i) => {
self.currentPicker.children[i].children[2].style.transition = 'transform .3s';
const index = parseInt(item.currentY, 0);
self.currentPicker.children[i].children[2].style.transform = `translateY(${index * self.lineHeight}px)`;
});
}, 0);
}
}
writeValue(value) {
if (value) {
this.value = value;
this.optionInit();
this.init();
}
}
registerOnChange(fn) {
this.ngModelOnChange = fn;
}
registerOnTouched(fn) {
this.ngModelOnTouched = fn;
}
setDisabledState(isDisabled) {
this.disabled = isDisabled;
}
optionInit() {
this.options.mode = this.mode;
this.options.minDate = this.minDate;
this.options.maxDate = this.maxDate;
this.options.disabled = this.disabled;
this.options.locale = this.locale;
this.options.value = this.value;
this.options.showErrorToast = this.showErrorToast;
this.options.showErrorToastInterval = this.showErrorToastInterval;
this.options.onValueChange = this.onValueChange;
this.checkMode(this.options.mode);
const value = this.transformDateFormat(this.options.value).split('-');
if (value.length > 0) {
this.current_time = this.currentTime = value.map(item => {
return parseInt(item, 0);
});
}
}
ngOnInit() {
this.optionInit();
this.localeProvider();
}
ngAfterViewInit() {
this.currentPicker = this.elementRef.nativeElement;
this.reloadPicker();
}
ngOnChanges(changes) {
if (changes.value) {
this.options.value = changes.value.currentValue;
const value = this.transformDateFormat(this.options.value).split('-');
if (value.length > 0) {
this.currentTime = value.map(item => {
return parseInt(item, 0);
});
}
if (!this.judgeEqualArray(this.currentTime, this.resultArr, this.resultArr.length) ||
this.judgeEqualArray(this.currentTime, this.min_date, this.currentTime.length) ||
this.judgeTime(this.currentTime, this.max_date)) {
this.optionInit();
this.init();
}
}
if (changes.mode || changes.minDate || changes.maxDate || changes.disabled || changes.locale) {
this.optionInit();
this.init();
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DatePickerViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: DatePickerViewComponent, selector: "DatePickerView, nzm-date-picker-view", inputs: { mode: "mode", minDate: "minDate", maxDate: "maxDate", value: "value", disabled: "disabled", indicatorStyle: "indicatorStyle", locale: "locale", showErrorToast: "showErrorToast", showErrorToastInterval: "showErrorToastInterval" }, outputs: { onValueChange: "onValueChange" }, host: { properties: { "class.am-picker": "this.amPicker" } }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => DatePickerViewComponent),
multi: true
},
DatePickerOptions
], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div *ngFor=\"let item of dataWithStr; let i = index\" class=\"am-picker-col\">\n <div class=\"am-picker-col-indicator \" style=\"top: 102px;\" [ngStyle]=\"indicatorStyle\"></div>\n <div id=\"{{ i }}\" class=\"am-picker-col-mask\" style=\"background-size: 100% 102px;\"></div>\n <div class=\"am-picker-col-content\">\n <div id=\"{{ i }}\" *ngFor=\"let val of item; let i = index\" class=\"am-picker-col-item\">\n {{ val.label ? val.label : val }}\n </div>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: DatePickerViewComponent, decorators: [{
type: Component,
args: [{ selector: 'DatePickerView, nzm-date-picker-view', encapsulation: ViewEncapsulation.None, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => DatePickerViewComponent),
multi: true
},
DatePickerOptions
], template: "<div *ngFor=\"let item of dataWithStr; let i = index\" class=\"am-picker-col\">\n <div class=\"am-picker-col-indicator \" style=\"top: 102px;\" [ngStyle]=\"indicatorStyle\"></div>\n <div id=\"{{ i }}\" class=\"am-picker-col-mask\" style=\"background-size: 100% 102px;\"></div>\n <div class=\"am-picker-col-content\">\n <div id=\"{{ i }}\" *ngFor=\"let val of item; let i = index\" class=\"am-picker-col-item\">\n {{ val.label ? val.label : val }}\n </div>\n </div>\n</div>\n" }]
}], propDecorators: { mode: [{
type: Input
}], minDate: [{
type: Input
}], maxDate: [{
type: Input
}], value: [{
type: Input
}], disabled: [{
type: Input
}], indicatorStyle: [{
type: Input
}], locale: [{
type: Input
}], showErrorToast: [{
type: Input
}], showErrorToastInterval: [{
type: Input
}], onValueChange: [{
type: Output
}], amPicker: [{
type: HostBinding,
args: ['class.am-picker']
}] } });
class DatePickerViewModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DatePickerViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: DatePickerViewModule, declarations: [DatePickerViewComponent], imports: [CommonModule, DatePickerModule, LocaleProviderModule, ToastModule, FormsModule], exports: [DatePickerViewComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DatePickerViewModule, imports: [CommonModule, DatePickerModule, LocaleProviderModule, ToastModule, FormsModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DatePickerViewModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule, DatePickerModule, LocaleProviderModule, ToastModule, FormsModule],
exports: [DatePickerViewComponent],
declarations: [DatePickerViewComponent]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { DatePickerViewComponent, DatePickerViewModule };
//# sourceMappingURL=ng-zorro-antd-mobile-date-picker-view.mjs.map