@zeedhi/common 1.112.0 → 3.0.0

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

@@ -0,0 +1,565 @@
+import { Config, DateHelper, FormatterParserProvider, I18n, Mask, Utils, dayjs } from '@zeedhi/core';
+import isUndefined from 'lodash.isundefined';
+import { InputFactory } from '../zd-input/input-factory';
+import { TextInput } from '../zd-text-input/text-input';
+import { IDateInput } from './interfaces';
+
+/**
+ * Base class for Date component.
+ */
+export class DateInput extends TextInput implements IDateInput {
+	/**
+	 * Restricts which dates can be selected.
+	 */
+	public allowedDates?: ((date: string) => boolean) | string[] = undefined;
+
+	/**
+	 * Determines the type of the view mode - month for month picker.
+	 */
+	public viewMode = 'month';
+	/**
+	 * 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;
+
+	/**
+	 * Toggles visibility of the week numbers in the body of the calendar.
+	 */
+	public showWeek = false;
+
+	/**
+	 * Helper options.
+	 */
+	public helperOptions?: string[] = [];
+
+	/**
+	 * Helper value.
+	 */
+	public helperValue?: string = '';
+
+	/**
+	 * Max value allowed.
+	 */
+	public max?: string = '';
+
+	/**
+	 * Min value allowed.
+	 */
+	public min?: string = '';
+
+	/**
+	 * Width of the picker.
+	 */
+	public width: number | string = 248;
+
+	protected isoFormat = 'YYYY-MM-DD';
+
+	protected dateError = false;
+
+	protected formatterFn = FormatterParserProvider.getFormatter('ZdDateInput');
+
+	protected parserFn = FormatterParserProvider.getParser('ZdDateInput');
+
+	protected initialMask?: string;
+
+	protected isSimpleDisplay!: boolean;
+
+	/* istanbul ignore next */
+	/**
+	 * Creates a new Date.
+	 * @param props Date properties
+	 */
+	constructor(props: IDateInput) {
+		super(props);
+		this.allowedDates = this.getInitValue('allowedDates', props.allowedDates, this.allowedDates);
+		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.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.showDatePicker = this.getInitValue('showDatePicker', props.showDatePicker, this.showDatePicker);
+		this.showWeek = this.getInitValue('showWeek', props.showWeek, this.showWeek);
+		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.viewMode = this.getInitValue('viewMode', props.viewMode, this.viewMode);
+
+		this.width = this.getInitValue('width', props.width, this.width);
+		this.mask = this.getInitValue('mask', props.mask, undefined);
+
+		this.dateValidation = this.dateValidation.bind(this);
+		this.rules.push(this.dateValidation);
+
+		this.initialMask = this.getInitialMask();
+		this.isSimpleDisplay = this.isSimpleFormat(this.displayFormat);
+	}
+
+	public appendIconClick(event: Event, element: any) {
+		this.iconClick(event, element);
+		super.appendIconClick(event, element);
+	}
+
+	private getInitialMask() {
+		if (isUndefined(this.mask)) {
+			this.mask = this.inputFormat && this.maskFormat(this.inputFormat);
+		}
+
+		return this.mask;
+	}
+
+	public formatter(value: string): string {
+		return this.formatterFn(value, this);
+	}
+
+	public parser(value: string): any {
+		return this.parserFn(value, this);
+	}
+
+	/**
+	 * Triggered when date is clicked.
+	 * @param event
+	 * @param element
+	 */
+	public selectDate(date: string, event?: Event, element?: any) {
+		this.callEvent('onSelectDate', { date, event, element, component: this });
+	}
+
+	get value() {
+		return this.internalValue;
+	}
+
+	set value(value: string) {
+		if (this.internalValue === value) return;
+
+		this.internalDisplayValue = this.formatter(value);
+		this.internalValue = value;
+
+		if (this.isValidFormatDate(value, this.dateFormat)) {
+			this.dateObject = dayjs(value, this.dateFormat);
+		}
+	}
+
+	get displayValue() {
+		return this.internalDisplayValue;
+	}
+
+	set displayValue(newValue: string) {
+		this.dateError = false;
+		this.internalDisplayValue = newValue;
+		const parsedValue = this.parser(newValue);
+		this.value = parsedValue; // forces value accessor to be called if necessary
+	}
+
+	/**
+	 * 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.initialMask)) {
+			return this.maskFormat(this.displayFormat);
+		}
+
+		return this.mask;
+	}
+
+	protected maskFormat(format: string) {
+		return format.replace(/[A-Za-z]/gi, '#');
+	}
+
+	public setDateValue(displayValue: string) {
+		if (this.isValidDate(displayValue, this.displayFormat)) {
+			this.setValidDateValue(displayValue);
+		} else {
+			this.setInvalidDateValue(displayValue);
+		}
+	}
+
+	private setValidDateValue(value: string) {
+		const lastValue = this.displayValue;
+		this.internalDisplayValue = value;
+		this.internalValue = this.parser(value);
+		this.dateError = false;
+		if (lastValue !== this.displayValue) this.change();
+	}
+
+	private setInvalidDateValue(value: string) {
+		const lastValue = this.displayValue;
+		if (!value) {
+			this.internalDisplayValue = value;
+			this.internalValue = null;
+			if (lastValue !== this.displayValue) this.change();
+		}
+		this.dateError = !!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;
+
+		const isAllowedDate =
+			this.allowedDates === undefined ||
+			(this.allowedDates instanceof Function && this.allowedDates(dayjs(value, format).format(this.dateFormat))) ||
+			(Array.isArray(this.allowedDates) &&
+				this.allowedDates.indexOf(dayjs(value, format).format(this.dateFormat)) !== -1);
+
+		if (!isAllowedDate) return false;
+
+		return true;
+	}
+
+	public isValidFormatDate(value: string, format: string, strict = true): boolean {
+		return dayjs(value, format, strict).isValid();
+	}
+
+	private dateObject: dayjs.Dayjs | null = null;
+
+	public getNativeDate() {
+		return this.dateObject?.toDate() || null;
+	}
+
+	public setNativeDate(date: Date) {
+		this.dateError = false;
+		this.dateObject = dayjs(date);
+		this.value = this.dateObject.format(this.dateFormat);
+	}
+
+	public getAllowedDates(date: Date) {
+		if (!this.allowedDates) return true;
+
+		if (this.allowedDates.length === 0) return false;
+
+		const dayjsDate = dayjs(date);
+		const dateString = dayjsDate.format(this.dateFormat);
+
+		if (this.allowedDates instanceof Function) {
+			return this.allowedDates(dateString);
+		}
+
+		return this.allowedDates.indexOf(dateString) !== -1;
+	}
+
+	public formatISODateValue(value: string): string {
+		if (value && this.isValidFormatDate(value, this.dateFormat)) {
+			return dayjs(value, this.dateFormat).format(this.isoFormat);
+		}
+		return '';
+	}
+
+	public parseISODateValue(value: string): any {
+		if (value && this.isValidFormatDate(value, this.isoFormat)) {
+			return dayjs(value, this.isoFormat).format(this.dateFormat);
+		}
+		return null;
+	}
+
+	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.togglePicker();
+		}
+	}
+
+	public blur(event: Event, element: any) {
+		this.removeDateMask();
+		this.setDateValue(this.formatter(this.value));
+		super.blur(event, element);
+		if (!Utils.isMobile()) {
+			this.showDatePicker = false;
+		}
+	}
+
+	public onMounted() {
+		if (!this.value) return;
+
+		this.setDateValue(this.formatter(this.value));
+	}
+
+	public focus(event: Event, element: any) {
+		this.addDateMask();
+		super.focus(event, element);
+	}
+
+	/**
+	 * Add date mask
+	 */
+	protected addDateMask() {
+		if (isUndefined(this.initialMask) || !this.value) return;
+
+		this.internalDisplayValue = dayjs(this.value, this.dateFormat).format(this.inputFormat || this.displayFormat);
+		this.mask = this.initialMask;
+	}
+
+	/**
+	 * Removes the component mask if value is valid
+	 */
+	protected removeDateMask() {
+		if (
+			isUndefined(this.initialMask) ||
+			!this.value ||
+			this.dateError ||
+			!this.isValidDate(this.value, this.dateFormat)
+		) {
+			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() {
+		if (!this.helperValue) return;
+
+		this.previousHint = this.hint;
+		this.previousPersistentHint = this.persistentHint;
+
+		this.hint = DateHelper.getLabel(this.helperValue);
+		this.persistentHint = true;
+	}
+
+	public change(event?: Event, element?: any) {
+		super.change(event, element);
+		this.helperValue = '';
+		this.hint = this.previousHint;
+		this.persistentHint = this.previousPersistentHint;
+	}
+
+	/**
+	 * Converts a date format to a mask
+	 */
+	private toMask(format: string) {
+		return format.replace(/[A-Za-z]/gi, '#'); // .split('').map((char: string) => (char === '#' ? /\d/ : char));
+	}
+
+	public getMask() {
+		if (this.isFocused) {
+			return this.toMask(this.inputFormat || this.displayFormat || '');
+		}
+		return '';
+	}
+}
+
+FormatterParserProvider.registerFormatter(
+	'ZdDateInput',
+	(
+		value: string,
+		{
+			dateFormat = Config.dateFormat,
+			displayFormat = Config.displayFormat,
+			inputFormat = Config.dateInputFormat,
+			mask = '',
+			initialMask,
+			isSimpleDisplay = false,
+		}: any = {},
+	) => {
+		if (!value) {
+			return '';
+		}
+
+		const isDateValid = dayjs(value, dateFormat, true).isValid();
+
+		if (!isDateValid) {
+			return value;
+		}
+
+		if (mask && initialMask) {
+			if (inputFormat) {
+				return dayjs(value, dateFormat).format(inputFormat);
+			}
+
+			let valueToUnmask = value;
+			if (isSimpleDisplay) {
+				valueToUnmask = dayjs(value, dateFormat).format(displayFormat);
+			}
+
+			const unmasked = Mask.getValueWithoutMask(valueToUnmask);
+			const masked = Mask.getValueWithMask(unmasked, mask);
+			return masked;
+		}
+
+		return dayjs(value, dateFormat).format(displayFormat);
+	},
+);
+
+FormatterParserProvider.registerParser(
+	'ZdDateInput',
+	(
+		value: string,
+		{
+			dateFormat = Config.dateFormat,
+			displayFormat = Config.displayFormat,
+			inputFormat = Config.dateInputFormat,
+			mask = '',
+			initialMask,
+			isSimpleDisplay = false,
+		}: any = {},
+	) => {
+		if (!value) {
+			return null;
+		}
+
+		if (dayjs(value, displayFormat, true).isValid()) {
+			return dayjs(value, displayFormat).format(dateFormat);
+		}
+
+		if (mask && Mask.checkMask(value, mask)) {
+			if (inputFormat) {
+				if (dayjs(value, inputFormat, true).isValid()) {
+					return dayjs(value, inputFormat).format(dateFormat);
+				}
+
+				return value;
+			}
+
+			const unmasked = Mask.getValueWithoutMask(value);
+			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) {
+					return dayjs(masked, displayFormat).format(dateFormat);
+				}
+			}
+
+			const dateFmtMask = dateFormat.replace(/[A-Za-z]/gi, '#');
+
+			masked = Mask.getValueWithMask(unmasked, dateFmtMask);
+
+			if (dayjs(masked, dateFormat, true).format(dateFormat) === masked) {
+				return masked;
+			}
+		}
+
+		return value;
+	},
+);
+
+FormatterParserProvider.registerFormatter(
+	'ZdDateTime',
+	(
+		value: string,
+		{ dateTimeFormat = Config.dateTimeFormat, displayFormat = Config.displayDateTimeFormat }: any = {},
+	) => {
+		if (!value) {
+			return '';
+		}
+		if (dayjs(value, dateTimeFormat, true).isValid()) {
+			return dayjs(value, dateTimeFormat).format(displayFormat);
+		}
+		return value;
+	},
+);
+
+FormatterParserProvider.registerParser(
+	'ZdDateTime',
+	(
+		value: string,
+		{ dateTimeFormat = Config.dateTimeFormat, displayFormat = Config.displayDateTimeFormat }: any = {},
+	) => {
+		if (!value) {
+			return null;
+		}
+		if (dayjs(value, displayFormat, true).isValid()) {
+			return dayjs(value, displayFormat).format(dateTimeFormat);
+		}
+		return value;
+	},
+);
+
+InputFactory.register('ZdDateInput', DateInput);

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

@@ -0,0 +1,30 @@
+import { IEvent, IEventParam } from '@zeedhi/core';
+import { ITextInput, ITextInputEvents } from '../zd-text-input/interfaces';
+import { DateInput } from './date-input';
+
+export interface IDateEventParam extends IEventParam<DateInput> {
+	date: string;
+}
+
+export interface IDateEvents<T = IDateEventParam | IEventParam<any>> extends ITextInputEvents<T> {
+	onSelectDate?: IEvent<T> | string;
+}
+
+export interface IDateInput extends ITextInput {
+	allowedDates?: ((date: string) => boolean) | string[];
+	dateFormat?: string;
+	displayFormat?: string;
+	events?: IDateEvents;
+	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;
+}