@zeedhi/common 1.115.0 → 3.0.1

package/src/components/zd-date-range/date-range.ts

@@ -0,0 +1,658 @@
+import { Config, DateHelper, FormatterParserProvider, I18n, Mask, Utils, dayjs } from '@zeedhi/core';
+import isUndefined from 'lodash.isundefined';
+import { IDateRange } from './interfaces';
+
+import { InputFactory } from '../zd-input/input-factory';
+import { TextInput } from '../zd-text-input/text-input';
+
+export class DateRange extends TextInput implements IDateRange {
+	/**
+	 * Input auto complete.
+	 */
+	public autocomplete = false;
+
+	/**
+	 * Defines the date format.
+	 */
+	public dateFormat: string = Config.dateFormat;
+
+	/**
+	 * Defines the date format displayed.
+	 */
+	public displayFormat: string = Config.displayFormat;
+
+	/**
+	 * Defines the date input format.
+	 */
+	public inputFormat?: string = Config.dateInputFormat;
+
+	/**
+	 * Shows the date picker.
+	 */
+	public showDatePicker = false;
+
+	/**
+	 * Sets the first day of the week, starting with 0 for Sunday.
+	 */
+	public firstDayOfWeek: number | string = 0;
+
+	/**
+	 * Forces 100% width.
+	 */
+	public fullWidth = false;
+
+	/**
+	 * Sets the locale. Accepts a string with a BCP 47 language tag.
+	 */
+	public locale?: string = I18n.instance.language;
+
+	/**
+	 * Allows changing displayed month with mouse scroll
+	 */
+	public scrollable = false;
+
+	/**
+	 * Toggles visibility of the week numbers in the body of the calendar.
+	 */
+	public showWeek = false;
+
+	/**
+	 * Character that will separate the two dates
+	 */
+	public get splitter(): string {
+		return I18n.translate(this.internalSplitter);
+	}
+
+	public set splitter(splitter: string) {
+		this.internalSplitter = splitter;
+	}
+
+	private internalSplitter = ' ~ ';
+
+	/**
+	 * Width of the picker.
+	 */
+
+	public width: number | string = 248;
+
+	/**
+	 * Helper options.
+	 */
+	public helperOptions?: string[] = [];
+
+	/**
+	 * Max value allowed.
+	 */
+	public max?: string = '';
+
+	/**
+	 * Min value allowed.
+	 */
+	public min?: string = '';
+
+	/**
+	 * Helper value.
+	 */
+	public helperValue?: string = '';
+
+	protected isoFormat = 'YYYY-MM-DD';
+
+	protected dateError = false;
+
+	protected formatterFn = FormatterParserProvider.getFormatter('ZdDateRange');
+
+	protected parserFn = FormatterParserProvider.getParser('ZdDateRange');
+
+	protected initialMask?: string;
+
+	public unitMask?: string;
+
+	protected isSimpleDisplay!: boolean;
+
+	/* istanbul ignore next */
+	/**
+	 * Creates a new Date.
+	 * @param props Date properties
+	 */
+	constructor(props: IDateRange) {
+		super(props);
+		// Add this logic to resolve template strings
+		if (typeof props.appendIcon === 'string' && props.appendIcon.startsWith('{{') && props.appendIcon.endsWith('}}')) {
+			const match = props.appendIcon.match(/{{(.*?)}}/);
+			if (match) {
+				const path = match[1].trim().split('.');
+				let value: any = window;
+				for (const key of path) {
+					value = value?.[key];
+				}
+				this.appendIcon = value ?? props.appendIcon;
+			} else {
+				this.appendIcon = props.appendIcon;
+			}
+		} else {
+			this.appendIcon = this.getInitValue('appendIcon', props.appendIcon, 'calendar');
+		}
+		this.autocomplete = this.getInitValue('autocomplete', props.autocomplete, this.autocomplete);
+		this.dateFormat = this.getInitValue('dateFormat', props.dateFormat, this.dateFormat);
+		this.dateValidation = this.dateValidation.bind(this);
+		this.displayFormat = this.getInitValue('displayFormat', props.displayFormat, this.displayFormat);
+		this.inputFormat = this.getInitValue('inputFormat', props.inputFormat, this.inputFormat);
+		this.firstDayOfWeek = this.getInitValue('firstDayOfWeek', props.firstDayOfWeek, this.firstDayOfWeek);
+		this.fullWidth = this.getInitValue('fullWidth', props.fullWidth, this.fullWidth);
+		this.locale = this.getInitValue('locale', props.locale, this.locale);
+		this.scrollable = this.getInitValue('scrollable', props.scrollable, this.scrollable);
+		this.showDatePicker = this.getInitValue('showDatePicker', props.showDatePicker, this.showDatePicker);
+		this.showWeek = this.getInitValue('showWeek', props.showWeek, this.showWeek);
+		this.splitter = this.getInitValue('splitter', props.splitter, this.internalSplitter);
+		this.width = this.getInitValue('width', props.width, this.width);
+		this.mask = this.getInitValue('mask', props.mask, undefined);
+		this.helperOptions = this.getInitValue('helperOptions', props.helperOptions, this.helperOptions);
+		this.helperValue = this.getInitValue('helperValue', props.helperValue, this.helperValue);
+		this.min = this.getInitValue('min', props.min, this.min);
+		this.max = this.getInitValue('max', props.max, this.max);
+		this.rules.push(this.dateValidation);
+
+		this.unitMask = this.mask;
+		this.initialMask = this.getInitialMask();
+
+		this.isSimpleDisplay = this.isSimpleFormat(this.displayFormat);
+		const userAppendIconClick = this.events.appendIconClick;
+		this.events.appendIconClick = ({ event, element, component }) => {
+			this.iconClick(event!, element!);
+			if (userAppendIconClick && typeof userAppendIconClick === 'function') {
+				userAppendIconClick({ event, element, component });
+			}
+		};
+	}
+
+	private getInitialMask() {
+		if (isUndefined(this.mask)) {
+			this.unitMask = this.inputFormat && this.maskFormat(this.inputFormat);
+		}
+
+		if (!this.unitMask) {
+			this.mask = this.unitMask;
+			return this.unitMask;
+		}
+
+		this.mask = `${this.unitMask}${this.splitter}${this.unitMask}`;
+
+		return this.mask;
+	}
+
+	public formatter(value: any): string {
+		return this.formatterFn(value, this);
+	}
+
+	public parser(value: string): any {
+		return this.parserFn(value, this);
+	}
+
+	get displayValue() {
+		return this.internalDisplayValue;
+	}
+
+	set displayValue(newValue: string) {
+		this.dateError = false;
+		this.internalDisplayValue = newValue;
+		if (newValue) this.internalValue = this.parser(newValue);
+		else this.internalValue = [];
+		this.value = this.internalValue; // forces value accessor to be called if necessary
+	}
+
+	get value(): any {
+		return this.internalValue;
+	}
+
+	set value(value: any) {
+		if (this.internalValue !== value) {
+			this.internalDisplayValue = this.formatter(value);
+			this.internalValue = value;
+		}
+		if (value === null) {
+			this.internalValue = [];
+		}
+	}
+
+	/**
+	 * Assign the updated mask to mask property
+	 */
+	public updateMask() {
+		this.isSimpleDisplay = this.isSimpleFormat(this.displayFormat);
+		this.mask = this.getUpdatedMask();
+		return this.mask;
+	}
+
+	/**
+	 * Gets the updated masked, based on displayFormat if the initial mask is undefined
+	 */
+	protected getUpdatedMask(): string | undefined {
+		if (isUndefined(this.getInitialMask())) {
+			return this.maskFormat(`${this.displayFormat}${this.splitter}${this.displayFormat}`);
+		}
+		return this.mask;
+	}
+
+	protected maskFormat(format: string) {
+		return format.replace(/[A-Za-z]/gi, '#');
+	}
+
+	public setDateValue(displayValue: string) {
+		const lastValue = this.displayValue;
+		const values = this.splitValues(displayValue);
+		if (this.isValidDateArray(this.displayFormat, values)) {
+			this.internalDisplayValue = displayValue;
+			this.internalValue = this.parser(displayValue);
+			this.dateError = false;
+			if (lastValue !== this.displayValue) this.change(this.value);
+		} else {
+			if (!displayValue) {
+				this.internalDisplayValue = displayValue;
+				this.internalValue = [];
+				if (lastValue !== this.displayValue) this.change(this.value);
+			}
+			this.dateError = !!displayValue;
+		}
+		this.value = this.internalValue; // forces value accessor to be called if necessary
+	}
+
+	/**
+	 * Faz a validação do array de datas
+	 * @param format o formato da data
+	 * @param values o array de datas
+	 * @returns true se todos os valores forem validados
+	 * */
+	public isValidDateArray(format: string, values?: string[]) {
+		if (!values || values.length < 2) return false;
+		return values.every((value) => this.isValidDate(value, format));
+	}
+
+	private splitValues(value: string) {
+		let splitedValue: string[] = [];
+		if (!value) return splitedValue;
+
+		if (value.indexOf(this.splitter) !== -1) {
+			splitedValue = value.split(this.splitter);
+			if (splitedValue[1] === '') return [splitedValue[0]];
+			return splitedValue;
+		}
+		return [value];
+	}
+
+	public isValidDate(value: string, format: string, strict = true): boolean {
+		const date = dayjs(value, format, strict);
+		const isValidFormat = date.isValid();
+		if (!isValidFormat) return false;
+
+		const minDate = this.min ? dayjs(this.min, this.dateFormat) : null;
+		const isValidMin = !minDate || date.isAfter(minDate) || date.isSame(minDate);
+		if (!isValidMin) return false;
+
+		const maxDate = this.max ? dayjs(this.max, this.dateFormat) : null;
+		const isValidMax = !maxDate || date.isBefore(maxDate) || date.isSame(maxDate);
+		if (!isValidMax) return false;
+
+		return true;
+	}
+
+	public isValidFormatDate(value: string, format: string, strict = true): boolean {
+		return dayjs(value, format, strict).isValid();
+	}
+
+	get isoRangeValue() {
+		return this.formatISODateRangeValue(this.value);
+	}
+
+	set isoRangeValue(newValue: string[]) {
+		const lastValue: string[] = this.value;
+		this.dateError = false;
+		this.value = this.parseISODateRangeValue(newValue);
+		if (!Utils.isEqual(lastValue, this.value)) this.change(this.value);
+	}
+
+	public formatISODateRangeValue(dates: string[] | string): string[] {
+		let splitedValue: string[];
+
+		if (Array.isArray(dates)) splitedValue = dates;
+		else splitedValue = this.splitValues(dates);
+
+		const formattedValue: string[] = [];
+		splitedValue.forEach((value) => {
+			if (value && this.isValidFormatDate(value, this.dateFormat)) {
+				formattedValue.push(dayjs(value, this.dateFormat, true).format(this.isoFormat));
+			}
+		});
+		return formattedValue;
+	}
+
+	public parseISODateRangeValue(values: string[]): any {
+		const parsedValue: string[] = [];
+		if (values.length) {
+			values.forEach((value) => {
+				if (value && this.isValidFormatDate(value, this.isoFormat)) {
+					parsedValue.push(dayjs(value, this.isoFormat, true).format(this.dateFormat));
+				}
+			});
+		}
+		return this.sortDates(parsedValue);
+	}
+
+	private sortDates(parsedValue: string[]): string[] {
+		return parsedValue.sort((a: string, b: string) =>
+			dayjs(a, this.dateFormat).isAfter(dayjs(b, this.dateFormat)) ? 1 : -1,
+		);
+	}
+
+	public dateValidation(): boolean | string {
+		return !this.dateError || I18n.translate('VALIDATION_INVALID_DATE');
+	}
+
+	public click(event?: Event, element?: any) {
+		const clickEvent = event || new MouseEvent('click');
+		super.click(clickEvent, element);
+		if (!clickEvent.defaultPrevented) {
+			this.showDatePicker = !this.showDatePicker;
+		}
+	}
+
+	public blur(event: Event, element: any) {
+		if (this.value) {
+			this.value = this.sortDates(this.value);
+			this.removeDateMask();
+			this.setDateValue(this.formatter(this.value));
+			super.blur(event, element);
+		}
+		if (!Utils.isMobile()) {
+			this.showDatePicker = false;
+		}
+	}
+
+	public focus(event: Event, element: any) {
+		this.addDateMask();
+		super.focus(event, element);
+	}
+
+	/**
+	 * Add date mask
+	 */
+	protected addDateMask() {
+		if (isUndefined(this.getInitialMask()) || !this.value) return;
+
+		setTimeout(() => {
+			this.mask = this.getInitialMask();
+			const firstDate = this.value[0]
+				? dayjs(this.value[0], this.dateFormat).format(this.inputFormat || this.displayFormat)
+				: '';
+			const lastDate = this.value[1]
+				? dayjs(this.value[1], this.dateFormat).format(this.inputFormat || this.displayFormat)
+				: '';
+			this.internalDisplayValue = `${firstDate}${lastDate ? this.splitter : ''}${lastDate}`;
+		});
+	}
+
+	/**
+	 * Removes the component mask if value is valid
+	 */
+	protected removeDateMask() {
+		if (
+			isUndefined(this.getInitialMask()) ||
+			!this.value ||
+			this.dateError ||
+			!this.isValidDateArray(this.dateFormat, this.value)
+		) {
+			return;
+		}
+		this.mask = '';
+	}
+
+	/**
+	 * Toggle showDatePicker value
+	 */
+	public togglePicker() {
+		this.showDatePicker = !this.showDatePicker;
+	}
+
+	/**
+	 * Triggered when the appended icon is clicked.
+	 * @param event DOM event
+	 * @param element Text input
+	 */
+	public iconClick(event: Event, element: any) {
+		super.click(event, element);
+		if (!event.defaultPrevented) {
+			this.togglePicker();
+		}
+	}
+
+	/**
+	 * Checks if a date format is simple.
+	 * Simple date formats are the ones that consists only of 'DD', 'MM' or 'YYYY', and mask delimiters
+	 * @param format The format to be checked
+	 * @returns true if it is simple, false otherwise
+	 */
+	protected isSimpleFormat(format: string): boolean {
+		const simpleTokens = ['DD', 'MM', 'YYYY'];
+
+		// remove the simple tokens from the string
+		const replaced = simpleTokens.reduce((result, token) => result.replace(token, ''), format);
+
+		const chars = replaced.split('');
+
+		return chars.length ? chars.every((char) => Mask.isMaskDelimiter(char)) : true;
+	}
+
+	private previousHint = '';
+
+	private previousPersistentHint = false;
+
+	public updateHelperHint(helperValue: string) {
+		const previousHelperHint = this.helperValue ? DateHelper.getLabel(this.helperValue) : '';
+
+		if (!this.hint || previousHelperHint !== this.hint) {
+			this.previousHint = this.hint;
+			this.previousPersistentHint = this.persistentHint;
+		}
+
+		this.helperValue = helperValue;
+		const label = DateHelper.getLabel(helperValue);
+
+		if (!helperValue || !label) {
+			this.hint = this.previousHint;
+			this.persistentHint = this.previousPersistentHint;
+			return;
+		}
+
+		this.hint = label;
+		this.persistentHint = true;
+	}
+
+	public change(event?: Event, element?: any): void {
+		super.change(event, element);
+		this.updateHelperHint('');
+	}
+
+	private getExtremities<T>(arr: T[]) {
+		if (arr.length === 0) return [];
+
+		if (arr.length === 1) return [arr[0]];
+
+		return [arr[0], arr[arr.length - 1]];
+	}
+
+	public setNativeDate(date: Date[]) {
+		this.dateError = false;
+		this.dateObject = date.map((obj) => dayjs(obj));
+
+		const extremityDates = this.getExtremities(this.dateObject);
+		this.value = extremityDates
+			.filter((obj): obj is dayjs.Dayjs => obj !== null)
+			.map((obj) => obj.format(this.dateFormat));
+	}
+
+	private dateObject: (dayjs.Dayjs | null)[] = [null, null];
+
+	public getNativeDate() {
+		return this.dateObject.filter((obj): obj is dayjs.Dayjs => obj !== null).map((obj) => obj.toDate());
+	}
+
+	public getMaskValue() {
+		let mask: any = '';
+
+		if (typeof this.mask === 'function') {
+			mask = this.mask(Mask.getValueWithoutMask(this.value?.[0] || ''));
+		} else if (typeof this.mask === 'string') {
+			mask = this.mask.split(this.splitter)[0] || '';
+			mask = Mask.getMaskArray(mask);
+			if (Array.isArray(mask) && mask.length > 0) {
+				mask = mask.concat(this.splitter.split('')).concat(mask);
+			}
+		} else if (Array.isArray(this.mask)) {
+			mask = this.mask;
+		}
+
+		return mask;
+	}
+}
+
+FormatterParserProvider.registerFormatter(
+	'ZdDateRange',
+	(
+		value: string[],
+		{
+			dateFormat = Config.dateFormat,
+			displayFormat = Config.displayFormat,
+			inputFormat = Config.dateInputFormat,
+			initialMask,
+			splitter = ' ~ ',
+			unitMask = '',
+			mask = '',
+			isSimpleDisplay = false,
+		}: any = {},
+	) => {
+		if (!value || value.length === 0 || (value.length === 1 && !value[0])) {
+			return '';
+		}
+		const formattedValue: string[] = [];
+		value.forEach((date) => {
+			if (date) {
+				const isDateValid = dayjs(date, dateFormat, true).isValid();
+
+				if (!isDateValid) {
+					formattedValue.push(date);
+					return;
+				}
+
+				if (initialMask && mask && unitMask) {
+					if (inputFormat) {
+						const formatted = dayjs(date, dateFormat).format(inputFormat);
+						formattedValue.push(formatted);
+						return;
+					}
+
+					let valueToUnmask = date;
+					if (isSimpleDisplay) {
+						valueToUnmask = dayjs(date, dateFormat).format(displayFormat);
+					}
+
+					const unmasked = Mask.getValueWithoutMask(valueToUnmask);
+					const masked = Mask.getValueWithMask(unmasked, unitMask);
+
+					formattedValue.push(masked);
+					return;
+				}
+
+				const formatted = dayjs(date, dateFormat).format(displayFormat);
+				formattedValue.push(formatted);
+			}
+		});
+
+		let displayOutput: string = formattedValue[0];
+		if (formattedValue.length === 2) {
+			displayOutput += `${splitter}${formattedValue[1]}`;
+		}
+
+		return displayOutput;
+	},
+);
+
+FormatterParserProvider.registerParser(
+	'ZdDateRange',
+	(
+		value: string,
+		{
+			dateFormat = Config.dateFormat,
+			displayFormat = Config.displayFormat,
+			inputFormat = Config.dateInputFormat,
+			splitter = ' ~ ',
+			unitMask = '',
+			mask = '',
+			initialMask,
+			isSimpleDisplay = false,
+		}: any = {},
+	) => {
+		if (!value) {
+			return [];
+		}
+
+		let splitedValue: string[] = [];
+
+		if (value.indexOf(splitter) !== -1) {
+			splitedValue = value.split(splitter);
+		} else {
+			splitedValue.push(value);
+		}
+
+		const formattedValue: string[] = [];
+		splitedValue.forEach((date) => {
+			if (date) {
+				if (dayjs(date, displayFormat, true).isValid()) {
+					const parsedDate = dayjs(date, displayFormat).format(dateFormat);
+					formattedValue.push(parsedDate);
+					return;
+				}
+
+				if (unitMask && mask && Mask.checkMask(date, unitMask)) {
+					if (inputFormat) {
+						if (dayjs(date, inputFormat, true).isValid()) {
+							const parsedDate = dayjs(date, inputFormat).format(dateFormat);
+							formattedValue.push(parsedDate);
+							return;
+						}
+
+						formattedValue.push(date);
+						return;
+					}
+
+					const unmasked = Mask.getValueWithoutMask(date);
+					let masked;
+
+					if (!initialMask || isSimpleDisplay) {
+						const displayFmtMask = displayFormat.replace(/[A-Za-z]/gi, '#');
+
+						masked = Mask.getValueWithMask(unmasked, displayFmtMask);
+
+						if (dayjs(masked, displayFormat, true).format(displayFormat) === masked) {
+							const parsedDate = dayjs(masked, displayFormat).format(dateFormat);
+							formattedValue.push(parsedDate);
+							return;
+						}
+					}
+
+					const dateFmtMask = dateFormat.replace(/[A-Za-z]/gi, '#');
+
+					masked = Mask.getValueWithMask(unmasked, dateFmtMask);
+
+					if (dayjs(masked, dateFormat, true).isValid()) {
+						formattedValue.push(masked);
+						return;
+					}
+				}
+
+				formattedValue.push(date);
+			}
+		});
+		return formattedValue;
+	},
+);
+
+InputFactory.register('ZdDateRange', DateRange);

package/src/components/zd-date-range/interfaces.ts

@@ -0,0 +1,19 @@
+import { ITextInput } from '../zd-text-input/interfaces';
+
+export interface IDateRange extends ITextInput {
+	allowedDates?: ((date: string) => boolean) | string[];
+	dateFormat?: string;
+	displayFormat?: string;
+	firstDayOfWeek?: number | string;
+	fullWidth?: boolean;
+	inputFormat?: string;
+	showDatePicker?: boolean;
+	showWeek?: boolean;
+	width?: number | string;
+	orderedDates?: boolean;
+	helperOptions?: string[];
+	helperValue?: string;
+	max?: string;
+	min?: string;
+	viewMode?: string;
+}