d9ae709b-3c27-4b69-b125-b8b80b54f90b

import { endOfDay, startOfDay } from 'date-fns';
import { FunctionProp, TinyDate, TinyDateCompareGrain, helpers, isFunction, isUndefinedOrNull, sortRangeValue } from 'ngx-tethys/util';

import {
    ChangeDetectionStrategy,
    ChangeDetectorRef,
    Component,
    EventEmitter,
    Input,
    OnChanges,
    OnInit,
    Output,
    SimpleChanges,
    TemplateRef
} from '@angular/core';

import { NgFor, NgIf, NgTemplateOutlet } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { ThyButtonIconComponent } from 'ngx-tethys/button';
import { ThyNavComponent, ThyNavItemDirective } from 'ngx-tethys/nav';
import { ThyDatePickerConfigService } from '../../date-picker.service';
import { CompatibleValue, DatePickerFlexibleTab, RangeAdvancedValue, RangePartType } from '../../inner-types';
import { dateAddAmount, getShortcutValue, hasValue, makeValue, transformDateValue } from '../../picker.util';
import {
    CompatibleDate,
    CompatiblePresets,
    DisabledDateFn,
    SupportTimeOptions,
    ThyDateGranularity,
    ThyPanelMode,
    ThyShortcutPosition,
    ThyShortcutPreset,
    ThyShortcutValue,
    ThyShortcutValueChange
} from '../../standard-types';
import { CalendarFooterComponent } from '../calendar/calendar-footer.component';
import { DateCarouselComponent } from '../date-carousel/date-carousel.component';
import { InnerPopupComponent } from './inner-popup.component';

/**
 * @private
 */
@Component({
    changeDetection: ChangeDetectionStrategy.OnPush,
    // eslint-disable-next-line @angular-eslint/component-selector
    selector: 'date-popup',
    exportAs: 'datePopup',
    templateUrl: './date-popup.component.html',
    standalone: true,
    imports: [
        NgIf,
        NgFor,
        ThyNavComponent,
        ThyNavItemDirective,
        ThyButtonIconComponent,
        DateCarouselComponent,
        FormsModule,
        NgTemplateOutlet,
        InnerPopupComponent,
        CalendarFooterComponent
    ]
})
export class DatePopupComponent implements OnChanges, OnInit {
    @Input() isRange: boolean;
    @Input() showWeek: boolean;

    @Input() format: string;
    @Input() disabledDate: DisabledDateFn;
    @Input() minDate: Date | number;
    @Input() maxDate: Date | number;
    @Input() showToday: boolean;

    /**
     * 是否支持设置时间(时、分)
     */
    @Input() showTime: SupportTimeOptions | boolean;

    /**
     * 是否展示时间(时、分)
     */
    @Input() mustShowTime: boolean;

    @Input() dateRender: FunctionProp<TemplateRef<Date> | string>;
    @Input() className: string;
    @Input() panelMode: ThyPanelMode | ThyPanelMode[];
    @Input() value: CompatibleValue;
    @Input() defaultPickerValue: CompatibleDate | number;

    @Input() showShortcut: boolean;

    @Input() shortcutPresets: CompatiblePresets;

    @Input() shortcutPosition: ThyShortcutPosition;

    @Input() flexible: boolean;

    @Input() flexibleDateGranularity: ThyDateGranularity;

    @Output() readonly panelModeChange = new EventEmitter<ThyPanelMode | ThyPanelMode[]>();
    @Output() readonly calendarChange = new EventEmitter<CompatibleValue>();
    @Output() readonly valueChange = new EventEmitter<CompatibleValue | RangeAdvancedValue>();
    @Output() readonly resultOk = new EventEmitter<void>(); // Emitted when done with date selecting
    @Output() readonly showTimePickerChange = new EventEmitter<boolean>();
    @Output() readonly shortcutValueChange = new EventEmitter<ThyShortcutValueChange>();

    prefixCls = 'thy-calendar';
    showTimePicker = false;
    timeOptions: SupportTimeOptions | SupportTimeOptions[] | null;
    activeDate: TinyDate | TinyDate[];
    selectedValue: TinyDate[] = []; // Range ONLY
    hoverValue: TinyDate[] = []; // Range ONLY

    advancedSelectedValue: RangeAdvancedValue; // advanced ONLY

    flexibleActiveTab: DatePickerFlexibleTab = 'advanced';

    get hasTimePicker(): boolean {
        return !!this.showTime;
    }
    private partTypeMap: { [key: string]: number } = { left: 0, right: 1 };

    [property: string]: any;

    endPanelMode: ThyPanelMode | ThyPanelMode[];

    innerShortcutPresets: ThyShortcutPreset[];

    disableTimeConfirm = false;

    constructor(private cdr: ChangeDetectorRef, private datePickerConfigService: ThyDatePickerConfigService) {}

    setProperty<T extends keyof DatePopupComponent>(key: T, value: this[T]): void {
        this[key] = value;
        this.cdr.markForCheck();
    }

    ngOnInit(): void {
        this.initShortcutPresets();
        this.initPanelMode();
        if (this.flexible && this.flexibleDateGranularity === 'day') {
            this.flexibleActiveTab = 'custom';
        }
        if (this.defaultPickerValue && !hasValue(this.value)) {
            const { value } = transformDateValue(this.defaultPickerValue);
            this.value = makeValue(value, this.isRange);
        }
        this.updateActiveDate();
        this.initDisabledDate();
        if (this.isRange && this.flexible && this.value) {
            this.advancedSelectedValue = {
                begin: this.value[0],
                end: this.value[1],
                dateGranularity: this.flexibleDateGranularity
            };
        }
    }

    ngOnChanges(changes: SimpleChanges): void {
        if (changes.panelMode) {
            if (helpers.isArray(this.panelMode)) {
                this.endPanelMode = [...this.panelMode];
            } else {
                this.endPanelMode = this.panelMode;
            }
        }
        if (changes.defaultPickerValue) {
            this.updateActiveDate();
        }
        if (changes.value && changes.value.currentValue) {
            this.updateActiveDate();
        }
    }

    initShortcutPresets(): void {
        const { shortcutRangesPresets, shortcutDatePresets, showShortcut } = this.datePickerConfigService;

        this.showShortcut =
            ['date', 'date,date'].includes(this.panelMode.toString()) && isUndefinedOrNull(this.showShortcut)
                ? showShortcut
                : this.showShortcut;

        if (this.showShortcut) {
            if (!this.shortcutPresets) {
                this.shortcutPresets = this.isRange ? shortcutRangesPresets : shortcutDatePresets;
            }

            this.innerShortcutPresets = isFunction(this.shortcutPresets) ? this.shortcutPresets() : this.shortcutPresets;
            if (this.innerShortcutPresets.length) {
                const minDate: TinyDate = this.getMinTinyDate();
                const maxDate: TinyDate = this.getMaxTinyDate();

                const minTime = minDate ? minDate.getTime() : null;
                const maxTime = maxDate ? maxDate.getTime() : null;

                if (this.isRange) {
                    this.innerShortcutPresets.forEach((preset: ThyShortcutPreset) => {
                        const begin: number | Date = getShortcutValue(preset.value[0]);
                        const beginTime: number = new TinyDate(startOfDay(begin)).getTime();

                        const end: number | Date = getShortcutValue(preset.value[1]);
                        const endTime: number = new TinyDate(endOfDay(end)).getTime();

                        if ((minDate && endTime < minTime) || (maxDate && beginTime > maxTime)) {
                            preset.disabled = true;
                        } else {
                            preset.disabled = false;
                        }
                    });
                } else {
                    this.innerShortcutPresets.forEach((preset: ThyShortcutPreset) => {
                        const singleValue: number | Date = getShortcutValue(preset.value as ThyShortcutValue);
                        const singleTime: number = new TinyDate(singleValue).getTime();

                        if ((minDate && singleTime < minTime) || (maxDate && singleTime > maxTime)) {
                            preset.disabled = true;
                        } else {
                            preset.disabled = false;
                        }
                    });
                }
            }
        }
    }

    updateActiveDate() {
        this.clearHoverValue();
        if (!this.value) {
            const { value } = transformDateValue(this.defaultPickerValue);
            this.value = makeValue(value, this.isRange);
        }
        if (this.isRange) {
            if (!this.flexible || this.flexibleDateGranularity === 'day') {
                this.selectedValue = this.value as TinyDate[];
            }
            this.activeDate = this.normalizeRangeValue(this.value as TinyDate[], this.getPanelMode(this.endPanelMode) as ThyPanelMode);
        } else {
            this.activeDate = this.value as TinyDate;
        }
        this.isDisableTimeConfirm();
    }

    initPanelMode() {
        if (!this.endPanelMode) {
            if (helpers.isArray(this.panelMode)) {
                this.endPanelMode = [...this.panelMode];
            } else {
                this.endPanelMode = this.panelMode;
            }
        } else {
            if (helpers.isArray(this.endPanelMode)) {
                this.panelMode = [...this.endPanelMode];
            } else {
                this.panelMode = this.endPanelMode;
            }
        }
    }

    initDisabledDate(): void {
        let minDate: TinyDate;
        let maxDate: TinyDate;
        let disabledDateFn: DisabledDateFn;
        if (this.minDate) {
            const { value } = transformDateValue(this.minDate);
            minDate = new TinyDate(value as Date);
        }
        if (this.maxDate) {
            const { value } = transformDateValue(this.maxDate);
            maxDate = new TinyDate(value as Date);
        }
        if (this.disabledDate) {
            disabledDateFn = this.disabledDate;
        }
        this.disabledDate = d => {
            let expression = false;
            if (minDate) {
                expression = d < minDate.startOfDay().nativeDate;
            }
            if (maxDate && !expression) {
                expression = d > maxDate.endOfDay().nativeDate;
            }
            if (disabledDateFn && typeof disabledDateFn === 'function' && !expression) {
                expression = disabledDateFn(d);
            }
            return expression;
        };
    }

    onShowTimePickerChange(show: boolean): void {
        this.showTimePicker = show;
        this.showTimePickerChange.emit(show);
    }

    onClickOk(): void {
        this.setValue(this.value);
        this.valueChange.emit(this.value);
        this.resultOk.emit();
    }

    onClickRemove(): void {
        this.value = this.isRange ? [] : null;
        this.setValue(this.value);
        this.valueChange.emit(this.value);
    }

    onDayHover(value: TinyDate): void {
        if (this.isRange && this.selectedValue[0] && !this.selectedValue[1]) {
            // When right value is selected, don't do hover
            const base = this.selectedValue[0]; // Use the left of selected value as the base to decide later hoverValue
            if (base.isBeforeDay(value)) {
                this.hoverValue = [base, value];
            } else {
                this.hoverValue = [value, base];
            }
        }
    }

    onPanelModeChange(mode: ThyPanelMode, partType?: RangePartType): void {
        if (this.isRange) {
            (this.panelMode as ThyPanelMode[])[this.getPartTypeIndex(partType)] = mode;
        } else {
            this.panelMode = mode;
        }
        this.panelModeChange.emit(this.panelMode);
    }

    onHeaderChange(value: TinyDate, partType?: RangePartType): void {
        if (this.isRange) {
            this.activeDate[this.getPartTypeIndex(partType)] = value;
            this.activeDate = this.normalizeRangeValue(
                this.activeDate as TinyDate[],
                this.getPanelMode(this.endPanelMode, partType) as ThyPanelMode
            );
        } else {
            this.activeDate = value;
        }
    }

    onSelectTime(value: TinyDate, partType?: RangePartType): void {
        if (this.isRange) {
            // TODO:range picker set time
        } else {
            this.setValue(new TinyDate(value.nativeDate));
        }
    }

    selectTab(active: DatePickerFlexibleTab) {
        this.flexibleActiveTab = active;
    }

    clearFlexibleValue() {
        this.flexibleDateGranularity = null;
        if (this.flexibleActiveTab === 'advanced') {
            this.advancedSelectedValue = {};
        } else {
            this.selectedValue = [];
        }
        this.valueChange.emit({
            begin: null,
            end: null,
            dateGranularity: this.flexibleDateGranularity
        });
    }

    changeValueFromAdvancedSelect(value: RangeAdvancedValue) {
        this.valueChange.emit(value);
        // clear custom date when select a advanced date
        this.selectedValue = [];
    }

    changeValueFromSelect(value: TinyDate, partType?: RangePartType): void {
        if (this.isRange) {
            // clear advanced date when select a custom date
            this.advancedSelectedValue = {};

            const [left, right] = this.selectedValue as TinyDate[];

            if ((!left && !right) || (left && right)) {
                // If totally full or empty, clean up && re-assign left first
                this.hoverValue = this.selectedValue = [value];
                this.selectedValue = [new TinyDate(startOfDay(this.selectedValue[0].nativeDate))];
                this.calendarChange.emit([this.selectedValue[0].clone()]);
            } else if (left && !right) {
                // If one of them is empty, assign the other one and sort, then set the final values
                this.clearHoverValue(); // Clean up
                this.setRangeValue('right', value);
                this.selectedValue = sortRangeValue(this.selectedValue); // Sort
                this.selectedValue = [
                    new TinyDate(startOfDay(this.selectedValue[0].nativeDate)),
                    new TinyDate(endOfDay(this.selectedValue[1].nativeDate))
                ];
                this.activeDate = this.normalizeRangeValue(
                    this.selectedValue,
                    this.getPanelMode(this.endPanelMode, partType) as ThyPanelMode
                );
                this.setValue(this.cloneRangeDate(this.selectedValue));
                this.calendarChange.emit(this.cloneRangeDate(this.selectedValue));
            }
        } else {
            const updatedValue = this.updateHourMinute(value);
            this.setValue(updatedValue);
        }
    }

    private updateHourMinute(value: TinyDate): TinyDate {
        if (!this.value) {
            return value;
        }
        const originDate = this.value as TinyDate;
        const dateTime = [value.getHours(), value.getMinutes(), value.getSeconds()];
        const originDateTime = [originDate.getHours(), originDate.getMinutes(), originDate.getSeconds()];

        const isEqualTime = dateTime.toString() === originDateTime.toString();
        if (isEqualTime) {
            return value;
        } else {
            return value.setHms(originDateTime[0], originDateTime[1], originDateTime[2]);
        }
    }

    enablePrevNext(direction: 'prev' | 'next', partType?: RangePartType): boolean {
        if (this.isRange && this.panelMode === this.endPanelMode) {
            const [start, end] = this.activeDate as TinyDate[];
            const showMiddle = !start.addMonths(1).isSame(end, 'month'); // One month diff then don't show middle prev/next
            if ((partType === 'left' && direction === 'next') || (partType === 'right' && direction === 'prev')) {
                return showMiddle;
            }
            return true;
        } else {
            return true;
        }
    }

    getPanelMode(panelMode: ThyPanelMode | ThyPanelMode[], partType?: RangePartType): ThyPanelMode {
        if (this.isRange) {
            return panelMode[this.getPartTypeIndex(partType)] as ThyPanelMode;
        } else {
            return panelMode as ThyPanelMode;
        }
    }

    getValueBySelector(partType?: RangePartType): TinyDate {
        if (this.isRange) {
            const valueShow = this.selectedValue; // Use the real time value that without decorations when timepicker is shown up
            return (valueShow as TinyDate[])[this.getPartTypeIndex(partType)];
        } else {
            return this.value as TinyDate;
        }
    }

    getActiveDate(partType?: RangePartType): TinyDate {
        if (this.isRange) {
            return this.activeDate[this.getPartTypeIndex(partType)];
        } else {
            return this.activeDate as TinyDate;
        }
    }

    getPartTypeIndex(partType: RangePartType = 'left'): number {
        return this.partTypeMap[partType];
    }

    private getMinTinyDate() {
        return this.minDate ? new TinyDate(transformDateValue(this.minDate).value as Date) : null;
    }

    private getMaxTinyDate() {
        return this.maxDate ? new TinyDate(transformDateValue(this.maxDate).value as Date) : null;
    }

    private clearHoverValue(): void {
        this.hoverValue = [];
    }

    private setValue(value: CompatibleValue): void {
        this.value = value;
        if (this.isRange && this.flexible) {
            this.flexibleDateGranularity = 'day';
            this.valueChange.emit({
                begin: value[0],
                end: value[1],
                dateGranularity: this.flexibleDateGranularity
            });
        } else {
            if (!this.showTime || !this.showTimePicker) {
                this.valueChange.emit(this.value);
            }
        }
        this.isDisableTimeConfirm();
    }

    private normalizeRangeValue(value: TinyDate[], mode: ThyPanelMode = 'month'): TinyDate[] {
        const headerModes: { [key in ThyPanelMode]?: ThyPanelMode } = {
            week: 'month',
            date: 'month',
            month: 'year',
            year: 'decade'
        };
        const headerMode = headerModes[mode];
        const [start, end] = value;
        const newStart = start || new TinyDate();
        let newEnd = end;
        if (!newEnd) {
            newEnd = dateAddAmount(newStart, 1, headerMode);
        }
        if (newStart.isSame(end, headerMode as TinyDateCompareGrain)) {
            newEnd = dateAddAmount(newStart, 1, headerMode);
        }
        return [newStart, newEnd];
    }

    private setRangeValue(partType: RangePartType, value: TinyDate): void {
        const ref = (this.selectedValue = this.cloneRangeDate(this.selectedValue as TinyDate[]));
        ref[this.getPartTypeIndex(partType)] = value;
    }

    private cloneRangeDate(value: TinyDate[]): TinyDate[] {
        return [value[0] && value[0].clone(), value[1] && value[1].clone()] as TinyDate[];
    }

    private isDisableTimeConfirm() {
        if (this.isRange || !this.showTime) {
            return;
        }

        const date: TinyDate = this.value ? (this.value as TinyDate) : new TinyDate();
        const minDate: TinyDate = this.getMinTinyDate();
        const maxDate: TinyDate = this.getMaxTinyDate();

        if ((minDate && date.getTime() < minDate.getTime()) || (maxDate && date.getTime() > maxDate.getTime())) {
            this.disableTimeConfirm = true;
        } else {
            this.disableTimeConfirm = false;
        }
    }

    private getSelectedShortcutPreset(date: CompatibleValue): CompatibleValue {
        const minDate: TinyDate = this.getMinTinyDate();
        const maxDate: TinyDate = this.getMaxTinyDate();

        const minTime: number = (minDate && minDate.getTime()) || null;
        const maxTime: number = (maxDate && maxDate.getTime()) || null;

        if (helpers.isArray(date)) {
            const startDate: TinyDate = date[0];
            const endDate: TinyDate = date[1];

            const startTime: number = startDate.getTime();
            const endTime: number = endDate.getTime();

            if ((maxDate && startTime > maxTime) || (minDate && endTime < minTime)) {
                return [];
            }

            if (minDate && startTime < minTime && maxDate && endTime > maxTime) {
                return [minDate, maxDate];
            }

            if (minDate && startTime < minTime) {
                return [minDate, endDate];
            }

            if (maxDate && endTime > maxTime) {
                return [startDate, maxDate];
            }

            return date;
        } else {
            const singleTime: number = date.getTime();

            if ((minDate && singleTime < minTime) || (maxDate && singleTime > maxTime)) {
                return null;
            }

            return date;
        }
    }

    shortcutSetValue(shortcutPresets: ThyShortcutPreset) {
        if (shortcutPresets.disabled) {
            return;
        }

        const { value } = shortcutPresets;
        if (!value) {
            return;
        }

        let selectedPresetValue: CompatibleValue;
        if (helpers.isArray(value)) {
            const begin: number | Date = getShortcutValue(value[0]);
            const end: number | Date = getShortcutValue(value[1]);

            if (begin && end) {
                this.selectedValue = this.getSelectedShortcutPreset([
                    new TinyDate(startOfDay(begin)),
                    new TinyDate(endOfDay(end))
                ]) as TinyDate[];

                selectedPresetValue = this.cloneRangeDate(this.selectedValue);
            }
        } else {
            const singleDate: number | Date = getShortcutValue(value);
            const singleTinyDate: TinyDate = this.updateHourMinute(new TinyDate(singleDate));
            selectedPresetValue = this.getSelectedShortcutPreset(singleTinyDate) as TinyDate;
        }

        this.setValue(selectedPresetValue);
        this.shortcutValueChange.emit({
            value: selectedPresetValue,
            triggerPresets: shortcutPresets
        });
    }

    public trackByFn(index: number) {
        return index;
    }
}

1	import { endOfDay, startOfDay } from 'date-fns';
2	import { FunctionProp, TinyDate, TinyDateCompareGrain, helpers, isFunction, isUndefinedOrNull, sortRangeValue } from 'ngx-tethys/util';
3
4	import {
5	ChangeDetectionStrategy,
6	ChangeDetectorRef,
7	Component,
8	EventEmitter,
9	Input,
10	OnChanges,
11	OnInit,
12	Output,
13	SimpleChanges,
14	TemplateRef
15	} from '@angular/core';
16
17	import { NgFor, NgIf, NgTemplateOutlet } from '@angular/common';
18	import { FormsModule } from '@angular/forms';	1✔
19	import { ThyButtonIconComponent } from 'ngx-tethys/button';
20	import { ThyNavComponent, ThyNavItemDirective } from 'ngx-tethys/nav';	×
21	import { ThyDatePickerConfigService } from '../../date-picker.service';
22	import { CompatibleValue, DatePickerFlexibleTab, RangeAdvancedValue, RangePartType } from '../../inner-types';
23	import { dateAddAmount, getShortcutValue, hasValue, makeValue, transformDateValue } from '../../picker.util';	×
24	import {	×
25	CompatibleDate,	×
26	CompatiblePresets,	×
27	DisabledDateFn,	×
28	SupportTimeOptions,	×
29	ThyDateGranularity,	×
30	ThyPanelMode,	×
31	ThyShortcutPosition,	×
32	ThyShortcutPreset,	×
33	ThyShortcutValue,	×
34	ThyShortcutValueChange	×
35	} from '../../standard-types';	×
36	import { CalendarFooterComponent } from '../calendar/calendar-footer.component';	×
37	import { DateCarouselComponent } from '../date-carousel/date-carousel.component';	×
38	import { InnerPopupComponent } from './inner-popup.component';
39
40	/**	×
41	* @private	×
42	*/
43	@Component({
44	changeDetection: ChangeDetectionStrategy.OnPush,	×
45	// eslint-disable-next-line @angular-eslint/component-selector	×
46	selector: 'date-popup',	×
47	exportAs: 'datePopup',	×
48	templateUrl: './date-popup.component.html',
49	standalone: true,	×
50	imports: [	×
51	NgIf,	×
52	NgFor,
53	ThyNavComponent,	×
54	ThyNavItemDirective,	×
55	ThyButtonIconComponent,	×
56	DateCarouselComponent,	×
57	FormsModule,
58	NgTemplateOutlet,
59	InnerPopupComponent,
60	CalendarFooterComponent
61	]
62	})
63	export class DatePopupComponent implements OnChanges, OnInit {
64	@Input() isRange: boolean;	×
65	@Input() showWeek: boolean;	×
66		×
67	@Input() format: string;
68	@Input() disabledDate: DisabledDateFn;
69	@Input() minDate: Date \| number;	×
70	@Input() maxDate: Date \| number;
71	@Input() showToday: boolean;
72		×
73	/**	×
74	* 是否支持设置时间(时、分)
75	*/	×
76	@Input() showTime: SupportTimeOptions \| boolean;	×
77
78	/**
79	* 是否展示时间(时、分)
80	*/	×
81	@Input() mustShowTime: boolean;	×
82		×
83	@Input() dateRender: FunctionProp<TemplateRef<Date> \| string>;
84	@Input() className: string;
85	@Input() panelMode: ThyPanelMode \| ThyPanelMode[];	×
86	@Input() value: CompatibleValue;	×
87	@Input() defaultPickerValue: CompatibleDate \| number;	×
88
89	@Input() showShortcut: boolean;	×
90		×
91	@Input() shortcutPresets: CompatiblePresets;	×
92		×
93	@Input() shortcutPosition: ThyShortcutPosition;	×
94		×
95	@Input() flexible: boolean;	×
96		×
97	@Input() flexibleDateGranularity: ThyDateGranularity;	×
98		×
99	@Output() readonly panelModeChange = new EventEmitter<ThyPanelMode \| ThyPanelMode[]>();	×
100	@Output() readonly calendarChange = new EventEmitter<CompatibleValue>();	×
101	@Output() readonly valueChange = new EventEmitter<CompatibleValue \| RangeAdvancedValue>();	×
102	@Output() readonly resultOk = new EventEmitter<void>(); // Emitted when done with date selecting	×
103	@Output() readonly showTimePickerChange = new EventEmitter<boolean>();
104	@Output() readonly shortcutValueChange = new EventEmitter<ThyShortcutValueChange>();
105		×
106	prefixCls = 'thy-calendar';
107	showTimePicker = false;
108	timeOptions: SupportTimeOptions \| SupportTimeOptions[] \| null;
109	activeDate: TinyDate \| TinyDate[];
110	selectedValue: TinyDate[] = []; // Range ONLY	×
111	hoverValue: TinyDate[] = []; // Range ONLY	×
112		×
113	advancedSelectedValue: RangeAdvancedValue; // advanced ONLY	×
114		×
115	flexibleActiveTab: DatePickerFlexibleTab = 'advanced';
116
117	get hasTimePicker(): boolean {	×
118	return !!this.showTime;
119	}
120	private partTypeMap: { [key: string]: number } = { left: 0, right: 1 };
121
122	[property: string]: any;
123
124	endPanelMode: ThyPanelMode \| ThyPanelMode[];
125		×
126	innerShortcutPresets: ThyShortcutPreset[];	×
127		×
128	disableTimeConfirm = false;	×
129
130	constructor(private cdr: ChangeDetectorRef, private datePickerConfigService: ThyDatePickerConfigService) {}	×
131		×
132	setProperty<T extends keyof DatePopupComponent>(key: T, value: this[T]): void {	×
133	this[key] = value;
134	this.cdr.markForCheck();	×
135	}
136
137	ngOnInit(): void {	×
138	this.initShortcutPresets();
139	this.initPanelMode();	×
140	if (this.flexible && this.flexibleDateGranularity === 'day') {
141	this.flexibleActiveTab = 'custom';
142	}	×
143	if (this.defaultPickerValue && !hasValue(this.value)) {	×
144	const { value } = transformDateValue(this.defaultPickerValue);	×
145	this.value = makeValue(value, this.isRange);
146	}
147	this.updateActiveDate();	×
148	this.initDisabledDate();
149	if (this.isRange && this.flexible && this.value) {
150	this.advancedSelectedValue = {
151	begin: this.value[0],	×
152	end: this.value[1],	×
153	dateGranularity: this.flexibleDateGranularity
154	};
155	}	×
156	}
157
158	ngOnChanges(changes: SimpleChanges): void {
159	if (changes.panelMode) {
160	if (helpers.isArray(this.panelMode)) {
161	this.endPanelMode = [...this.panelMode];
162	} else {
163	this.endPanelMode = this.panelMode;	×
164	}	×
165	}	×
166	if (changes.defaultPickerValue) {
167	this.updateActiveDate();	×
168	}	×
169	if (changes.value && changes.value.currentValue) {	×
170	this.updateActiveDate();
171	}	×
172	}	×
173
174	initShortcutPresets(): void {	×
175	const { shortcutRangesPresets, shortcutDatePresets, showShortcut } = this.datePickerConfigService;	×
176		×
177	this.showShortcut =	×
178	['date', 'date,date'].includes(this.panelMode.toString()) && isUndefinedOrNull(this.showShortcut)
179	? showShortcut	×
180	: this.showShortcut;	×
181
182	if (this.showShortcut) {	×
183	if (!this.shortcutPresets) {	×
184	this.shortcutPresets = this.isRange ? shortcutRangesPresets : shortcutDatePresets;
185	}	×
186
187	this.innerShortcutPresets = isFunction(this.shortcutPresets) ? this.shortcutPresets() : this.shortcutPresets;
188	if (this.innerShortcutPresets.length) {
189	const minDate: TinyDate = this.getMinTinyDate();	×
190	const maxDate: TinyDate = this.getMaxTinyDate();	×
191
192	const minTime = minDate ? minDate.getTime() : null;
193	const maxTime = maxDate ? maxDate.getTime() : null;	×
194		×
195	if (this.isRange) {	×
196	this.innerShortcutPresets.forEach((preset: ThyShortcutPreset) => {
197	const begin: number \| Date = getShortcutValue(preset.value[0]);
198	const beginTime: number = new TinyDate(startOfDay(begin)).getTime();	×
199		×
200	const end: number \| Date = getShortcutValue(preset.value[1]);	×
201	const endTime: number = new TinyDate(endOfDay(end)).getTime();
202
203	if ((minDate && endTime < minTime) \|\| (maxDate && beginTime > maxTime)) {	×
204	preset.disabled = true;
205	} else {	×
206	preset.disabled = false;	×
207	}	×
208	});
209	} else {
210	this.innerShortcutPresets.forEach((preset: ThyShortcutPreset) => {	×
211	const singleValue: number \| Date = getShortcutValue(preset.value as ThyShortcutValue);
212	const singleTime: number = new TinyDate(singleValue).getTime();
213
214	if ((minDate && singleTime < minTime) \|\| (maxDate && singleTime > maxTime)) {
215	preset.disabled = true;	×
216	} else {	×
217	preset.disabled = false;
218	}
219	});	×
220	}
221	}	×
222	}
223	}
224		×
225	updateActiveDate() {	×
226	this.clearHoverValue();	×
227	if (!this.value) {
228	const { value } = transformDateValue(this.defaultPickerValue);
229	this.value = makeValue(value, this.isRange);	×
230	}
231	if (this.isRange) {
232	if (!this.flexible \|\| this.flexibleDateGranularity === 'day') {
233	this.selectedValue = this.value as TinyDate[];	×
234	}
235	this.activeDate = this.normalizeRangeValue(this.value as TinyDate[], this.getPanelMode(this.endPanelMode) as ThyPanelMode);
236	} else {
237	this.activeDate = this.value as TinyDate;	×
238	}
239	this.isDisableTimeConfirm();
240	}
241		×
242	initPanelMode() {
243	if (!this.endPanelMode) {
244	if (helpers.isArray(this.panelMode)) {	×
245	this.endPanelMode = [...this.panelMode];	×
246	} else {	×
247	this.endPanelMode = this.panelMode;
248	}
249	} else {	×
250	if (helpers.isArray(this.endPanelMode)) {
251	this.panelMode = [...this.endPanelMode];	×
252	} else {
253	this.panelMode = this.endPanelMode;
254	}
255	}
256	}
257
258	initDisabledDate(): void {	×
259	let minDate: TinyDate;
260	let maxDate: TinyDate;	×
261	let disabledDateFn: DisabledDateFn;
262	if (this.minDate) {
263	const { value } = transformDateValue(this.minDate);	×
264	minDate = new TinyDate(value as Date);
265	}	×
266	if (this.maxDate) {	×
267	const { value } = transformDateValue(this.maxDate);	×
268	maxDate = new TinyDate(value as Date);
269	}	×
270	if (this.disabledDate) {	×
271	disabledDateFn = this.disabledDate;	×
272	}
273	this.disabledDate = d => {	×
274	let expression = false;
275	if (minDate) {	×
276	expression = d < minDate.startOfDay().nativeDate;	×
277	}	×
278	if (maxDate && !expression) {	×
279	expression = d > maxDate.endOfDay().nativeDate;
280	}
281	if (disabledDateFn && typeof disabledDateFn === 'function' && !expression) {
282	expression = disabledDateFn(d);	×
283	}	×
284	return expression;	×
285	};
286	}
287
288	onShowTimePickerChange(show: boolean): void {	×
289	this.showTimePicker = show;	×
290	this.showTimePickerChange.emit(show);
291	}
292
293	onClickOk(): void {	×
294	this.setValue(this.value);	×
295	this.valueChange.emit(this.value);
296	this.resultOk.emit();	×
297	}	×
298		×
299	onClickRemove(): void {	×
300	this.value = this.isRange ? [] : null;	×
301	this.setValue(this.value);	×
302	this.valueChange.emit(this.value);
303	}
304		×
305	onDayHover(value: TinyDate): void {
306	if (this.isRange && this.selectedValue[0] && !this.selectedValue[1]) {
307	// When right value is selected, don't do hover
308	const base = this.selectedValue[0]; // Use the left of selected value as the base to decide later hoverValue	×
309	if (base.isBeforeDay(value)) {	×
310	this.hoverValue = [base, value];	×
311	} else {	×
312	this.hoverValue = [value, base];	×
313	}
314	}	×
315	}
316
317	onPanelModeChange(mode: ThyPanelMode, partType?: RangePartType): void {	×
318	if (this.isRange) {
319	(this.panelMode as ThyPanelMode[])[this.getPartTypeIndex(partType)] = mode;
320	} else {
321	this.panelMode = mode;	×
322	}	×
323	this.panelModeChange.emit(this.panelMode);
324	}
325		×
326	onHeaderChange(value: TinyDate, partType?: RangePartType): void {
327	if (this.isRange) {
328	this.activeDate[this.getPartTypeIndex(partType)] = value;
329	this.activeDate = this.normalizeRangeValue(	×
330	this.activeDate as TinyDate[],	×
331	this.getPanelMode(this.endPanelMode, partType) as ThyPanelMode	×
332	);
333	} else {
334	this.activeDate = value;	×
335	}
336	}
337
338	onSelectTime(value: TinyDate, partType?: RangePartType): void {	×
339	if (this.isRange) {	×
340	// TODO:range picker set time
341	} else {
342	this.setValue(new TinyDate(value.nativeDate));	×
343	}
344	}
345		×
346	selectTab(active: DatePickerFlexibleTab) {	×
347	this.flexibleActiveTab = active;
348	}
349		×
350	clearFlexibleValue() {
351	this.flexibleDateGranularity = null;
352	if (this.flexibleActiveTab === 'advanced') {	×
353	this.advancedSelectedValue = {};
354	} else {
355	this.selectedValue = [];	×
356	}
357	this.valueChange.emit({
358	begin: null,	×
359	end: null,	×
360	dateGranularity: this.flexibleDateGranularity	×
361	});	×
362	}
363
364	changeValueFromAdvancedSelect(value: RangeAdvancedValue) {
365	this.valueChange.emit(value);
366	// clear custom date when select a advanced date
367	this.selectedValue = [];
368	}	×
369		×
370	changeValueFromSelect(value: TinyDate, partType?: RangePartType): void {
371	if (this.isRange) {
372	// clear advanced date when select a custom date	×
373	this.advancedSelectedValue = {};
374		×
375	const [left, right] = this.selectedValue as TinyDate[];	×
376
377	if ((!left && !right) \|\| (left && right)) {
378	// If totally full or empty, clean up && re-assign left first
379	this.hoverValue = this.selectedValue = [value];
380	this.selectedValue = [new TinyDate(startOfDay(this.selectedValue[0].nativeDate))];
381	this.calendarChange.emit([this.selectedValue[0].clone()]);	×
382	} else if (left && !right) {	×
383	// If one of them is empty, assign the other one and sort, then set the final values	×
384	this.clearHoverValue(); // Clean up	×
385	this.setRangeValue('right', value);	×
386	this.selectedValue = sortRangeValue(this.selectedValue); // Sort	×
387	this.selectedValue = [
388	new TinyDate(startOfDay(this.selectedValue[0].nativeDate)),	×
389	new TinyDate(endOfDay(this.selectedValue[1].nativeDate))	×
390	];
391	this.activeDate = this.normalizeRangeValue(	×
392	this.selectedValue,
393	this.getPanelMode(this.endPanelMode, partType) as ThyPanelMode
394	);	×
395	this.setValue(this.cloneRangeDate(this.selectedValue));	×
396	this.calendarChange.emit(this.cloneRangeDate(this.selectedValue));
397	}
398	} else {	×
399	const updatedValue = this.updateHourMinute(value);
400	this.setValue(updatedValue);
401	}	×
402	}	×
403
404	private updateHourMinute(value: TinyDate): TinyDate {	×
405	if (!this.value) {	×
406	return value;	×
407	}	×
408	const originDate = this.value as TinyDate;	×
409	const dateTime = [value.getHours(), value.getMinutes(), value.getSeconds()];
410	const originDateTime = [originDate.getHours(), originDate.getMinutes(), originDate.getSeconds()];
411		×
412	const isEqualTime = dateTime.toString() === originDateTime.toString();
413	if (isEqualTime) {
414	return value;
415	} else {	×
416	return value.setHms(originDateTime[0], originDateTime[1], originDateTime[2]);	×
417	}	×
418	}	×
419		×
420	enablePrevNext(direction: 'prev' \| 'next', partType?: RangePartType): boolean {	×
421	if (this.isRange && this.panelMode === this.endPanelMode) {	×
422	const [start, end] = this.activeDate as TinyDate[];	×
423	const showMiddle = !start.addMonths(1).isSame(end, 'month'); // One month diff then don't show middle prev/next	×
424	if ((partType === 'left' && direction === 'next') \|\| (partType === 'right' && direction === 'prev')) {	×
425	return showMiddle;	×
426	}
427	return true;	×
428	} else {	×
429	return true;
430	}	×
431	}	×
432
433	getPanelMode(panelMode: ThyPanelMode \| ThyPanelMode[], partType?: RangePartType): ThyPanelMode {	×
434	if (this.isRange) {	×
435	return panelMode[this.getPartTypeIndex(partType)] as ThyPanelMode;
436	} else {	×
437	return panelMode as ThyPanelMode;
438	}
439	}	×
440		×
441	getValueBySelector(partType?: RangePartType): TinyDate {	×
442	if (this.isRange) {
443	const valueShow = this.selectedValue; // Use the real time value that without decorations when timepicker is shown up	×
444	return (valueShow as TinyDate[])[this.getPartTypeIndex(partType)];
445	} else {
446	return this.value as TinyDate;
447	}	×
448	}	×
449
450	getActiveDate(partType?: RangePartType): TinyDate {	×
451	if (this.isRange) {	×
452	return this.activeDate[this.getPartTypeIndex(partType)];	×
453	} else {
454	return this.activeDate as TinyDate;
455	}	×
456	}	×
457		×
458	getPartTypeIndex(partType: RangePartType = 'left'): number {	×
459	return this.partTypeMap[partType];	×
460	}
461
462	private getMinTinyDate() {
463	return this.minDate ? new TinyDate(transformDateValue(this.minDate).value as Date) : null;	×
464	}
465
466	private getMaxTinyDate() {
467	return this.maxDate ? new TinyDate(transformDateValue(this.maxDate).value as Date) : null;	×
468	}	×
469		×
470	private clearHoverValue(): void {
471	this.hoverValue = [];	×
472	}	×
473
474	private setValue(value: CompatibleValue): void {
475	this.value = value;
476	if (this.isRange && this.flexible) {
477	this.flexibleDateGranularity = 'day';
478	this.valueChange.emit({	×
479	begin: value[0],
480	end: value[1],	1✔
481	dateGranularity: this.flexibleDateGranularity
482	});
483	} else {
484	if (!this.showTime \|\| !this.showTimePicker) {	1✔
485	this.valueChange.emit(this.value);
486	}
487	}
488	this.isDisableTimeConfirm();
489	}
490
491	private normalizeRangeValue(value: TinyDate[], mode: ThyPanelMode = 'month'): TinyDate[] {
492	const headerModes: { [key in ThyPanelMode]?: ThyPanelMode } = {
493	week: 'month',
494	date: 'month',
495	month: 'year',
496	year: 'decade'
497	};
498	const headerMode = headerModes[mode];
499	const [start, end] = value;
500	const newStart = start \|\| new TinyDate();
501	let newEnd = end;
502	if (!newEnd) {
503	newEnd = dateAddAmount(newStart, 1, headerMode);
504	}
505	if (newStart.isSame(end, headerMode as TinyDateCompareGrain)) {
506	newEnd = dateAddAmount(newStart, 1, headerMode);
507	}
508	return [newStart, newEnd];
509	}
510
511	private setRangeValue(partType: RangePartType, value: TinyDate): void {
512	const ref = (this.selectedValue = this.cloneRangeDate(this.selectedValue as TinyDate[]));	1✔
513	ref[this.getPartTypeIndex(partType)] = value;
514	}
515
516	private cloneRangeDate(value: TinyDate[]): TinyDate[] {
517	return [value[0] && value[0].clone(), value[1] && value[1].clone()] as TinyDate[];
518	}
519
520	private isDisableTimeConfirm() {
521	if (this.isRange \|\| !this.showTime) {
522	return;
523	}
524
525	const date: TinyDate = this.value ? (this.value as TinyDate) : new TinyDate();
526	const minDate: TinyDate = this.getMinTinyDate();
527	const maxDate: TinyDate = this.getMaxTinyDate();
528
529	if ((minDate && date.getTime() < minDate.getTime()) \|\| (maxDate && date.getTime() > maxDate.getTime())) {
530	this.disableTimeConfirm = true;
531	} else {
532	this.disableTimeConfirm = false;
533	}
534	}
535
536	private getSelectedShortcutPreset(date: CompatibleValue): CompatibleValue {
537	const minDate: TinyDate = this.getMinTinyDate();
538	const maxDate: TinyDate = this.getMaxTinyDate();
539
540	const minTime: number = (minDate && minDate.getTime()) \|\| null;
541	const maxTime: number = (maxDate && maxDate.getTime()) \|\| null;
542
543	if (helpers.isArray(date)) {
544	const startDate: TinyDate = date[0];
545	const endDate: TinyDate = date[1];
546
547	const startTime: number = startDate.getTime();
548	const endTime: number = endDate.getTime();
549
550	if ((maxDate && startTime > maxTime) \|\| (minDate && endTime < minTime)) {
551	return [];
552	}
553
554	if (minDate && startTime < minTime && maxDate && endTime > maxTime) {
555	return [minDate, maxDate];
556	}
557
558	if (minDate && startTime < minTime) {
559	return [minDate, endDate];
560	}
561
562	if (maxDate && endTime > maxTime) {
563	return [startDate, maxDate];
564	}
565
566	return date;
567	} else {
568	const singleTime: number = date.getTime();
569
570	if ((minDate && singleTime < minTime) \|\| (maxDate && singleTime > maxTime)) {
571	return null;
572	}
573
574	return date;
575	}
576	}
577
578	shortcutSetValue(shortcutPresets: ThyShortcutPreset) {
579	if (shortcutPresets.disabled) {
580	return;
581	}
582
583	const { value } = shortcutPresets;
584	if (!value) {
585	return;
586	}
587
588	let selectedPresetValue: CompatibleValue;
589	if (helpers.isArray(value)) {
590	const begin: number \| Date = getShortcutValue(value[0]);
591	const end: number \| Date = getShortcutValue(value[1]);
592
593	if (begin && end) {
594	this.selectedValue = this.getSelectedShortcutPreset([
595	new TinyDate(startOfDay(begin)),
596	new TinyDate(endOfDay(end))
597	]) as TinyDate[];
598
599	selectedPresetValue = this.cloneRangeDate(this.selectedValue);
600	}
601	} else {
602	const singleDate: number \| Date = getShortcutValue(value);
603	const singleTinyDate: TinyDate = this.updateHourMinute(new TinyDate(singleDate));
604	selectedPresetValue = this.getSelectedShortcutPreset(singleTinyDate) as TinyDate;
605	}
606
607	this.setValue(selectedPresetValue);
608	this.shortcutValueChange.emit({
609	value: selectedPresetValue,
610	triggerPresets: shortcutPresets
611	});
612	}
613
614	public trackByFn(index: number) {
615	return index;
616	}
617	}

atinc / ngx-tethys / d9ae709b-3c27-4b69-b125-b8b80b54f90b

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous