@zeedhi/common 3.0.6 → 3.0.7

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

@@ -1,12 +1,12 @@
 import { Config, DateHelper, FormatterParserProvider, I18n, Mask, Utils, dayjs } from '@zeedhi/core';
-import isUndefined from 'lodash.isundefined';
 import { IDateRange } from './interfaces';
 import { isDateAllowed } from '../../utils/date-utils/date-utils';
 import { InputFactory } from '../zd-input/input-factory';
 import { TextInput } from '../zd-text-input/text-input';
+import { getDateRangeMask, getMaskAndUnitMask } from './utils';
+import { validateThenFormat } from '../zd-date-input/utils';
 
 export class DateRange extends TextInput implements IDateRange {
-
 	public allowedDates?: string[] | ((date: string) => boolean);
 	/**
 	 * Input auto complete.
@@ -105,12 +105,6 @@ export class DateRange extends TextInput implements IDateRange {
 
 	protected parserFn = FormatterParserProvider.getParser('ZdDateRange');
 
-	protected initialMask?: string;
-
-	public unitMask?: string;
-
-	protected isSimpleDisplay!: boolean;
-
 	public inputMode?: string | undefined = 'none';
 
 	/* istanbul ignore next */
@@ -150,39 +144,16 @@ export class DateRange extends TextInput implements IDateRange {
 		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 appendIconClick(event: Event, element: any) {
+		this.iconClick(event, element);
+		super.appendIconClick(event, element);
 	}
 
 	public formatter(value: any): string {
@@ -252,29 +223,6 @@ export class DateRange extends TextInput implements IDateRange {
 		return dates;
 	};
 
-	/**
-	 * 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);
@@ -398,11 +346,10 @@ export class DateRange extends TextInput implements IDateRange {
 	}
 
 	public blur(event: Event, element: any) {
+		super.blur(event, element);
 		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;
@@ -410,41 +357,37 @@ export class DateRange extends TextInput implements IDateRange {
 	}
 
 	public focus(event: Event, element: any) {
-		this.addDateMask();
 		super.focus(event, element);
+		this.updateDisplayValue();
 	}
 
 	/**
-	 * Add date mask
+	 * Update the displayValue. When using `inputFormat`, on focus we
+	 * must switch to using it as the current format.
 	 */
-	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}`;
-		});
-	}
+	protected updateDisplayValue() {
+		if (!this.inputFormat || !this.value) return;
+
+		let firstDate: dayjs.Dayjs | undefined;
+		let lastDate: dayjs.Dayjs | undefined;
+		if (this.value[0]) {
+			firstDate = dayjs(this.value[0], this.dateFormat, true);
+			if (!firstDate.isValid()) return;
+		}
+		if (this.value[1]) {
+			lastDate = dayjs(this.value[1], this.dateFormat, true);
+			if (!lastDate.isValid()) return;
+		}
 
-	/**
-	 * Removes the component mask if value is valid
-	 */
-	protected removeDateMask() {
-		if (
-			isUndefined(this.getInitialMask()) ||
-			!this.value ||
-			this.dateError ||
-			!this.isValidDateArray(this.dateFormat, this.value)
-		) {
+		const format = this.inputFormat;
+
+		const firstDateString = firstDate ? firstDate.format(format) : '';
+		if (!lastDate) {
+			this.internalDisplayValue = firstDateString;
 			return;
 		}
-		this.mask = '';
+		const lastDateString = lastDate.format(format);
+		this.internalDisplayValue = `${firstDateString}${this.splitter}${lastDateString}`;
 	}
 
 	/**
@@ -466,23 +409,6 @@ export class DateRange extends TextInput implements IDateRange {
 		}
 	}
 
-	/**
-	 * 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;
@@ -554,22 +480,12 @@ export class DateRange extends TextInput implements IDateRange {
 		return isDateAllowed(date, this.dateFormat, this.allowedDates);
 	}
 
-	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;
+	public getMask() {
+		return getDateRangeMask(
+			this.inputFormat || this.displayFormat || '',
+			this.splitter,
+			this.isFocused,
+		)
 	}
 }
 
@@ -581,56 +497,39 @@ FormatterParserProvider.registerFormatter(
 			dateFormat = Config.dateFormat,
 			displayFormat = Config.displayFormat,
 			inputFormat = Config.dateInputFormat,
-			initialMask,
 			splitter = ' ~ ',
-			unitMask = '',
-			mask = '',
-			isSimpleDisplay = false,
-		}: any = {},
+			isFocused,
+		}: {
+			dateFormat?: string;
+			displayFormat?: string;
+			inputFormat?: string;
+			splitter?: string;
+			isFocused?: boolean;
+		} = {},
 	) => {
 		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;
-					}
+		const formattedValues = value
+		.filter((date) => !!date)
+		.map((date) => {
+			const isDateValid = dayjs(date, dateFormat, true).isValid();
 
-					let valueToUnmask = date;
-					if (isSimpleDisplay) {
-						valueToUnmask = dayjs(date, dateFormat).format(displayFormat);
-					}
-
-					const unmasked = Mask.getValueWithoutMask(valueToUnmask);
-					const masked = Mask.getValueWithMask(unmasked, unitMask);
+			if (!isDateValid) {
+				return date;
+			}
 
-					formattedValue.push(masked);
-					return;
-				}
+			const { mask } = getMaskAndUnitMask({ inputFormat, displayFormat, splitter, isFocused });
 
-				const formatted = dayjs(date, dateFormat).format(displayFormat);
-				formattedValue.push(formatted);
+			if (!mask || !inputFormat || !isFocused) {
+				return dayjs(date, dateFormat).format(displayFormat);
 			}
-		});
 
-		let displayOutput: string = formattedValue[0];
-		if (formattedValue.length === 2) {
-			displayOutput += `${splitter}${formattedValue[1]}`;
-		}
+			return dayjs(date, dateFormat).format(inputFormat);
+		});
 
-		return displayOutput;
+		return formattedValues.join(splitter);
 	},
 );
 
@@ -643,74 +542,51 @@ FormatterParserProvider.registerParser(
 			displayFormat = Config.displayFormat,
 			inputFormat = Config.dateInputFormat,
 			splitter = ' ~ ',
-			unitMask = '',
-			mask = '',
-			initialMask,
-			isSimpleDisplay = false,
-		}: any = {},
+			isFocused,
+		}: {
+			dateFormat?: string;
+			displayFormat?: string;
+			inputFormat?: string;
+			splitter?: string;
+			isFocused?: boolean;
+		} = {},
 	) => {
 		if (!value) {
 			return [];
 		}
 
-		let splitedValue: string[] = [];
+		let splittedValue: string[] = [];
 
 		if (value.indexOf(splitter) !== -1) {
-			splitedValue = value.split(splitter);
+			splittedValue = value.split(splitter);
 		} else {
-			splitedValue.push(value);
+			splittedValue.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;
+		const { unitMask } = getMaskAndUnitMask({ inputFormat, displayFormat, splitter, isFocused });
+		return splittedValue
+		.filter((date) => !!date)
+		.map((date) => {
+			if (!Mask.checkMask(date, unitMask)) return date;
+
+			// when using inputFormat and focused, should parse according to inputFormat
+			if (inputFormat && isFocused) {
+				const { valid, newValue } = validateThenFormat(date, inputFormat, dateFormat);
+				if (valid) {
+					return newValue;
 				}
 
-				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;
-					}
-				}
+				return date;
+			}
 
-				formattedValue.push(date);
+			// should parse according to displayFormat
+			const { valid, newValue } = validateThenFormat(date, displayFormat, dateFormat);
+			if (!valid) {
+				return date;
 			}
+
+			return newValue;
 		});
-		return formattedValue;
 	},
 );
 

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

@@ -0,0 +1,31 @@
+import { toMask } from '../../utils/date-utils/date-utils';
+
+export function getDateRangeMask(format: string, splitter: string, focused = true) {
+    if (focused && format) {
+        return toFullMask(format, splitter);
+    }
+    return '';
+}
+
+function toFullMask(format: string, splitter: string) {
+    const partialMask = toMask(format);
+
+    const fullMask = `${partialMask}${splitter}${partialMask}`;
+
+    return fullMask;
+}
+
+/**
+ * Helper to simplify the generation of date range mask and unit mask
+ */
+export function getMaskAndUnitMask({ inputFormat, displayFormat, splitter, isFocused }: { inputFormat?: string; displayFormat: string; splitter: string; isFocused?: boolean }) {
+    const format = inputFormat || displayFormat;
+    const unitMask = isFocused ? toMask(format) : '';
+    const mask = getDateRangeMask(
+        format,
+        splitter,
+        isFocused,
+    )
+
+    return { mask, unitMask };
+}

package/src/components/zd-frame/frame.ts

@@ -204,7 +204,7 @@ export class Frame extends ComponentRender implements IFrame {
 		if (!header) return false;
 
 		const lastFetch = Number(header);
-		return lastFetch + this.cacheDuration > new Date().getTime();
+		return lastFetch + this.cacheDuration > Date.now();
 	}
 
 	/**
@@ -214,7 +214,7 @@ export class Frame extends ComponentRender implements IFrame {
 	 * @param metadata Metadata to be stored
 	 */
 	private putCache(cache: Cache, url: string, metadata: IDictionary) {
-		const time = String(new Date().getTime());
+		const time = String(Date.now());
 		const headers = new Headers({
 			[this.headerName]: time,
 		});

package/src/components/zd-grid-editable/data-editor-with-add.ts

@@ -105,7 +105,7 @@ export class DataEditorWithAdd extends DataEditor implements IDataEditorWithAdd
 			row = omit(row, this.NEW_ROW_IDENTIFIER);
 
 			Object.keys(row).forEach((attr) => {
-				if (Object.prototype.hasOwnProperty.call(row, `${attr}_original`)) {
+				if (Object.hasOwn(row, `${attr}_original`)) {
 					delete row[`${attr}_original`];
 				}
 			});

package/src/components/zd-grid-editable/data-editor.ts

@@ -45,7 +45,7 @@ export class DataEditor implements IDataEditor {
 	getVisibleValue(row: IDictionary, column: IGridColumnEditable) {
 		const key = this.grid.getRowKey(row);
 		const editedRow = this.editedRows.get(key);
-		if (editedRow && Object.prototype.hasOwnProperty.call(editedRow, column.name)) {
+		if (editedRow && Object.hasOwn(editedRow, column.name)) {
 			return editedRow[column.name];
 		}
 		return row[column.name];
@@ -76,7 +76,7 @@ export class DataEditor implements IDataEditor {
 		if (
 			colValue &&
 			typeof colValue === 'object' &&
-			Object.prototype.hasOwnProperty.call(colValue, componentProps.dataValue)
+			Object.hasOwn(colValue, componentProps.dataValue)
 		) {
 			const value = (colValue as IDictionary)[componentProps.dataValue];
 			this.pushLookupValue(column, value, componentProps);

package/src/components/zd-month/month.ts

@@ -1,4 +1,4 @@
-import { Config, FormatterParserProvider, Mask, dayjs } from '@zeedhi/core';
+import { Config, FormatterParserProvider } from '@zeedhi/core';
 import { DateInput } from '../zd-date-input/date-input';
 import { IMonth } from './interfaces';
 
@@ -42,24 +42,6 @@ export class Month extends DateInput implements IMonth {
 		this.displayFormat = this.getInitValue('displayFormat', props.displayFormat, this.displayFormat);
 		this.inputFormat = this.getInitValue('inputFormat', props.inputFormat, this.inputFormat);
 	}
-
-	public blur(event: Event, element: any) {
-		super.blur(event, element);
-		// Always set displayValue to long format if displayFormat contains MMMM
-		if (this.displayFormat.includes('MMMM') && this.value && dayjs(this.value, this.dateFormat, true).isValid()) {
-			this.internalDisplayValue = dayjs(this.value, this.dateFormat).format(this.displayFormat);
-		}
-	}
-
-	public focus(event: Event, element: any) {
-		super.focus(event, element);
-		// Always set displayValue to long format if displayFormat contains MMMM
-		if (this.displayFormat.includes('MMMM') && this.value && dayjs(this.value, this.dateFormat, true).isValid()) {
-			this.internalDisplayValue = dayjs(this.value, this.dateFormat).format(this.displayFormat);
-		} else if (this.inputFormat && this.value && dayjs(this.value, this.dateFormat, true).isValid()) {
-			this.internalDisplayValue = dayjs(this.value, this.dateFormat).format(this.inputFormat);
-		}
-	}
 }
 
 FormatterParserProvider.registerFormatter(
@@ -70,37 +52,17 @@ FormatterParserProvider.registerFormatter(
 			dateFormat = Config.monthFormat,
 			displayFormat = Config.monthDisplayFormat,
 			inputFormat = Config.monthInputFormat,
-			mask = '',
-			initialMask,
-			isSimpleDisplay = false,
-		}: any = {},
+			isFocused,
+		}: {
+			dateFormat?: string;
+			displayFormat?: string;
+			inputFormat?: string;
+			isFocused?: boolean;
+		} = {},
 	) => {
-		if (!value) {
-			return '';
-		}
-
-		const isDateValid = dayjs(value, dateFormat, true).isValid();
+		const dateFormatter = FormatterParserProvider.getFormatter('ZdDateInput');
 
-		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);
+		return dateFormatter(value, { dateFormat, displayFormat, inputFormat, isFocused });
 	},
 );
 
@@ -112,50 +74,16 @@ FormatterParserProvider.registerParser(
 			dateFormat = Config.monthFormat,
 			displayFormat = Config.monthDisplayFormat,
 			inputFormat = Config.monthInputFormat,
-			mask = '',
-			initialMask,
-			isSimpleDisplay = false,
-		}: any = {},
+			isFocused,
+		}: {
+			dateFormat?: string;
+			displayFormat?: string;
+			inputFormat?: string;
+			isFocused?: boolean;
+		} = {},
 	) => {
-		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;
-			}
-		}
+		const dateParser = FormatterParserProvider.getParser('ZdDateInput');
 
-		return value;
+		return dateParser(value, { dateFormat, displayFormat, inputFormat, isFocused });
 	},
 );

package/src/styles/_display.scss

@@ -1,3 +1,5 @@
+@use "variables";
+
 /**
  * The MIT License (MIT)
  *
@@ -26,7 +28,7 @@
  */
  
 /* .zd-hidden */
-@each $size, $media_query in $display-breakpoints {
+@each $size, $media_query in variables.$display-breakpoints {
     .zd-hidden {
       &-#{$size} {
         @media #{$media_query} {

package/src/styles/_elevation.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 /**
  * The MIT License (MIT)
  *
@@ -114,7 +115,7 @@
  );
  
  @mixin elevation($z, $important: false) {
-   box-shadow: map-get($shadow-key-umbra, $z), map-get($shadow-key-penumbra, $z), map-get($shadow-key-ambient, $z) if($important, !important, null);
+   box-shadow: map.get($shadow-key-umbra, $z), map.get($shadow-key-penumbra, $z), map.get($shadow-key-ambient, $z) if(sass($important): !important);
  }
  
  $elevation: 24;