@yelon/abc
Version:
Common business components of ng-yunzai.
225 lines (219 loc) • 9.38 kB
JavaScript
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { ViewChild, Component, inject, ViewContainerRef, EventEmitter, Output, Input, Directive, NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { NzRangePickerComponent, NzDatePickerModule } from 'ng-zorro-antd/date-picker';
import { DomSanitizer } from '@angular/platform-browser';
import { YunzaiConfigService } from '@yelon/util/config';
import { getTimeDistance, fixEndTimeOfRange } from '@yelon/util/date-time';
import { deepMergeKey, assert } from '@yelon/util/other';
class RangePickerShortcutTplComponent {
tpl;
list = [];
// eslint-disable-next-line @typescript-eslint/no-unused-vars
click(_) { }
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: RangePickerShortcutTplComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: RangePickerShortcutTplComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "tpl", first: true, predicate: ["tpl"], descendants: true, static: true }], ngImport: i0, template: `
<ng-template #tpl>
@for (i of list; track $index) {
<a (click)="click(i)" [innerHTML]="i._text" [class.ml-sm]="!$first"></a>
}
</ng-template>
`, isInline: true });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: RangePickerShortcutTplComponent, decorators: [{
type: Component,
args: [{
selector: '',
template: `
<ng-template #tpl>
@for (i of list; track $index) {
<a (click)="click(i)" [innerHTML]="i._text" [class.ml-sm]="!$first"></a>
}
</ng-template>
`
}]
}], propDecorators: { tpl: [{
type: ViewChild,
args: ['tpl', { static: true }]
}] } });
class RangePickerDirective {
static ngAcceptInputType_shortcut;
dom = inject(DomSanitizer);
vcr = inject(ViewContainerRef);
nativeComp = inject(NzRangePickerComponent, { host: true, optional: true });
cogSrv = inject(YunzaiConfigService);
defaultShortcuts;
_shortcut = null;
shortcutFactory = null;
start = null;
end = null;
set shortcut(val) {
const item = deepMergeKey({ list: [] }, true, this.defaultShortcuts, val == null ? {} : val);
if (typeof val !== 'object') {
item.enabled = val !== false;
}
(item.list || []).forEach(i => {
i._text = this.dom.bypassSecurityTrustHtml(i.text);
});
this._shortcut = item;
this.refreshShortcut();
}
get shortcut() {
return this._shortcut;
}
ngModelEnd;
ngModelEndChange = new EventEmitter();
get dp() {
return this.nativeComp.datePicker;
}
get srv() {
return this.dp.datePickerService;
}
constructor() {
if (typeof ngDevMode === 'undefined' || ngDevMode) {
assert(!!this.nativeComp, `It should be attached to nz-range-picker component, for example: '<nz-range-picker [(ngModel)]="i.start" extend [(ngModelEnd)]="i.end" shortcut></nz-range-picker>'`);
}
const cog = this.cogSrv.merge('dataRange', {
nzFormat: 'yyyy-MM-dd',
nzAllowClear: true,
nzAutoFocus: false,
nzPopupStyle: { position: 'relative' },
nzShowToday: true,
shortcuts: {
enabled: false,
closed: true,
list: [
{
text: '今天',
fn: () => getTimeDistance('today')
},
{
text: '昨天',
fn: () => getTimeDistance('yesterday')
},
{
text: '近3天',
fn: () => getTimeDistance(-2)
},
{
text: '近7天',
fn: () => getTimeDistance(-6)
},
{
text: '本周',
fn: () => getTimeDistance('week')
},
{
text: '本月',
fn: () => getTimeDistance('month')
},
{
text: '全年',
fn: () => getTimeDistance('year')
}
]
}
});
this.defaultShortcuts = { ...cog.shortcuts };
Object.assign(this, cog);
}
cd() {
this.dp.cdr.markForCheck();
}
overrideNative() {
const dp = this.dp;
dp.writeValue = (value) => {
const dates = (value && this.ngModelEnd ? [value, this.ngModelEnd] : []).filter(w => !!w);
this.srv.setValue(this.srv.makeValue(dates));
this.start = dates.length > 0 ? dates[0] : null;
this.end = dates.length > 0 ? dates[1] : null;
this.cd();
};
const oldOnChangeFn = dp.onChangeFn;
dp.onChangeFn = (list) => {
let start = null;
let end = null;
if (list.length > 0 && list.filter(w => w != null).length === 2) {
[start, end] = fixEndTimeOfRange([list[0], list[1]]);
}
this.start = start;
this.end = end;
oldOnChangeFn(start);
this.ngModelEnd = end;
this.ngModelEndChange.emit(end);
};
}
refreshShortcut() {
if (!this._shortcut) {
return;
}
const { enabled, list } = this._shortcut;
let extraFooter;
if (!this.nativeComp || !enabled) {
extraFooter = undefined;
}
else {
if (!this.shortcutFactory) {
this.shortcutFactory = this.vcr.createComponent(RangePickerShortcutTplComponent);
}
const { instance } = this.shortcutFactory;
instance.list = list;
instance.click = (item) => {
const res = item.fn([this.start, this.end]);
this.srv.setValue(this.srv.makeValue(res));
this.dp.onChangeFn(res);
this.dp.close();
};
extraFooter = instance.tpl;
}
this.nativeComp.datePicker.extraFooter = extraFooter;
Promise.resolve().then(() => this.cd());
}
ngAfterViewInit() {
this.overrideNative();
this.refreshShortcut();
}
destoryShortcut() {
if (this.shortcutFactory != null) {
this.shortcutFactory.destroy();
}
}
ngOnDestroy() {
this.destoryShortcut();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: RangePickerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.3", type: RangePickerDirective, isStandalone: true, selector: "nz-range-picker[extend]", inputs: { shortcut: "shortcut", ngModelEnd: "ngModelEnd" }, outputs: { ngModelEndChange: "ngModelEndChange" }, exportAs: ["extendRangePicker"], ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: RangePickerDirective, decorators: [{
type: Directive,
args: [{
selector: 'nz-range-picker[extend]',
exportAs: 'extendRangePicker'
}]
}], ctorParameters: () => [], propDecorators: { shortcut: [{
type: Input
}], ngModelEnd: [{
type: Input,
args: [{ required: true }]
}], ngModelEndChange: [{
type: Output
}] } });
const COMPONENTS = [RangePickerDirective, RangePickerShortcutTplComponent];
class DatePickerModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DatePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.3", ngImport: i0, type: DatePickerModule, imports: [CommonModule, FormsModule, NzDatePickerModule, RangePickerDirective, RangePickerShortcutTplComponent], exports: [RangePickerDirective, RangePickerShortcutTplComponent] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DatePickerModule, imports: [CommonModule, FormsModule, NzDatePickerModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DatePickerModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule, FormsModule, NzDatePickerModule, ...COMPONENTS],
exports: COMPONENTS
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { DatePickerModule, RangePickerDirective, RangePickerShortcutTplComponent };
//# sourceMappingURL=date-picker.mjs.map