516432ed-d194-4fdf-92bb-c6c3224daf92

Committed 26 Sep 2023 08:44AM UTC coverage: 90.203%. Remained the same

Build # 516432ed-d194-4fdf-92bb-c6c3224daf92

Build Type

Pull #2846

circleci

Committed by

yxb941006

Commit Message

fix(date-picker): #INFR-9875 fix date-picker clear dispatch twice

Pull Request Pull Request #2846: fix(date-picker): #INFR-9875 fix date-picker clear dispatch twice

Run Details

5165 of 6385 branches covered (0.0%)

Branch coverage included in aggregate %.

1 of 1 new or added line in 1 file covered. (100.0%)

13037 of 13794 relevant lines covered (94.51%)

970.72 hits per line

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

92.37

/src/date-picker/lib/popups/date-popup.component.ts

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

atinc / ngx-tethys / 516432ed-d194-4fdf-92bb-c6c3224daf92

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