@zeedhi/common 3.0.5 → 3.0.7

package/src/utils/date-utils/date-utils.ts

@@ -0,0 +1,27 @@
+import { dayjs } from '@zeedhi/core';
+
+export function isDateAllowed(
+	date: Date,
+	dateFormat: string,
+	allowedDates?: ((date: string) => boolean) | string[],
+): boolean {
+	if (!allowedDates) return true;
+
+	if (allowedDates.length === 0) return false;
+
+	const dateString = dayjs(date).format(dateFormat);
+
+	if (allowedDates instanceof Function) {
+		return allowedDates(dateString);
+	}
+	return allowedDates.indexOf(dateString) !== -1;
+}
+
+/**
+ * Translates a date format into a mask format
+ * @param format The format to be translated
+ * @returns The mask format
+ */
+export function toMask(format: string): string {
+	return format.replace(/[A-Za-z]/gi, '#');
+}

package/src/utils/tree-data-structure/tree-data-structure.ts

@@ -279,7 +279,7 @@ export class TreeDataStructure implements ITreeDataStructure {
 
 		if (row[columns[index]] === nextRow[columns[index]]) {
 			const nextIndex = index + 1;
-			if (Object.prototype.hasOwnProperty.call(columns, nextIndex)) {
+			if (Object.hasOwn(columns, nextIndex)) {
 				return this.sort(row, nextRow, columns, types, nextIndex);
 			}
 			return orderTypes.same;

package/tests/unit/components/zd-component/component.spec.ts

@@ -256,7 +256,8 @@ describe('Component', () => {
 		it('should retrieve a child', () => {
 			const parent = new Component({ name: 'parent' });
 			const instance = new Component({ parent, name: 'component' });
-			const spy = jest.spyOn(console, 'warn').mockImplementation(() => true);
+			const spy = jest.spyOn(console, 'warn');
+			spy.mockReset();
 			instance.onCreated();
 			const child = parent.getChildInstance<Component>('component');
 			expect(child.name).toBe('component');
@@ -279,7 +280,7 @@ describe('Component', () => {
 		it('should only add instance to Metadata', () => {
 			const instance = new Component({ name: 'component' });
 			const spy = jest.spyOn(Metadata, 'addInstance');
-			const consoleSpy = jest.spyOn(console, 'warn').mockImplementation(() => true);
+			const consoleSpy = jest.spyOn(console, 'warn');
 			instance.onCreated();
 			expect(spy).toHaveBeenCalledWith(instance, false);
 			expect(consoleSpy).toHaveBeenCalled();

package/tests/unit/components/zd-date-input/date-input.spec.ts

@@ -146,6 +146,7 @@ describe('DateInput', () => {
         displayFormat: 'MMMM DD, YYYY',
         inputFormat: 'DD MM YYYY',
       });
+      instance.focus(new Event('focus'), {});
       // set value directly
       instance.value = '10/12/2020'; // DD/MM/YYYY
       expect(instance.value).toBe('10/12/2020');
@@ -164,69 +165,6 @@ describe('DateInput', () => {
       });
     });
 
-    it('when initial mask and complex displayFormat, should behave the same when setting via value/displayValue', () => {
-      const instance = new DateInput({
-        name: 'date',
-        component: 'DateInput',
-        dateFormat: 'DD/MM/YYYY',
-        displayFormat: 'MMMM DD, YYYY',
-        mask: '## ## ####',
-      });
-      instance.value = '08/12/2020'; // DD/MM/YYYY
-      expect(instance.value).toBe('08/12/2020');
-      expect(instance.displayValue).toBe('08 12 2020');
-
-      instance.displayValue = '09 12 2020'; // DD MM YYYY
-      expect(instance.value).toBe('09/12/2020');
-      expect(instance.displayValue).toBe('09 12 2020');
-
-      instance.blur(new Event('blur'), {});
-      expect(instance.value).toBe('09/12/2020');
-      expect(instance.displayValue).toBe('December 09, 2020');
-    });
-
-    it('when initial mask is defined and simple displayFormat, should use displayFormat as mask fallback', () => {
-      const instance = new DateInput({
-        name: 'date',
-        component: 'DateInput',
-        dateFormat: 'DD/MM/YYYY',
-        displayFormat: 'MM/DD/YYYY',
-        mask: '## ## ####',
-      });
-      instance.value = '08/12/2020'; // DD/MM/YYYY
-      expect(instance.value).toBe('08/12/2020');
-      expect(instance.displayValue).toBe('12 08 2020');
-
-      instance.displayValue = '12 09 2020'; // DD MM YYYY
-      expect(instance.value).toBe('09/12/2020');
-      expect(instance.displayValue).toBe('12 09 2020');
-
-      instance.blur(new Event('blur'), {});
-      expect(instance.value).toBe('09/12/2020');
-      expect(instance.displayValue).toBe('12/09/2020');
-    });
-
-    it('should display value with no delimiters', () => {
-      const instance = new DateInput({
-        name: 'date',
-        component: 'DateInput',
-        dateFormat: 'DD/MM/YYYY',
-        displayFormat: 'MMDDYYYY',
-        mask: '## ## ####',
-      });
-      instance.value = '08/12/2020'; // DD/MM/YYYY
-      expect(instance.value).toBe('08/12/2020');
-      expect(instance.displayValue).toBe('12 08 2020');
-
-      instance.displayValue = '12 09 2020'; // DD MM YYYY
-      expect(instance.value).toBe('09/12/2020');
-      expect(instance.displayValue).toBe('12 09 2020');
-
-      instance.blur(new Event('blur'), {});
-      expect(instance.value).toBe('09/12/2020');
-      expect(instance.displayValue).toBe('12092020');
-    });
-
     it('should not call change event if the value is the same', () => {
       const changeFn = jest.fn();
       const instance = new DateInput({
@@ -254,6 +192,7 @@ describe('DateInput', () => {
         displayFormat: 'MMMM DD, YYYY',
         inputFormat: 'MM/DD/YYYY',
       });
+      instance.focus(new Event('focus'), {});
       // set value directly
       instance.value = '10/12/2020'; // DD/MM/YYYY
       expect(instance.value).toBe('10/12/2020');
@@ -280,6 +219,7 @@ describe('DateInput', () => {
         displayFormat: 'MMMM DD, YYYY',
         inputFormat: 'MM/DD/YYYY',
       });
+      instance.focus(new Event('focus'), {});
       instance.value = '08/12/2020'; // DD/MM/YYYY
       expect(instance.value).toBe('08/12/2020');
       expect(instance.displayValue).toBe('12/08/2020');
@@ -516,26 +456,6 @@ describe('DateInput', () => {
       expect(eventFn).toHaveBeenCalled();
       expect(instance.value).toBeNull();
     });
-
-    it('should remove date mask if initial mask is set and value is valid', () => {
-      const eventFn = jest.fn();
-      const instance = new DateInput({
-        name: 'date',
-        component: 'ZdDateInput',
-        mask: '## ## ####',
-      });
-
-      instance.displayValue = '12 21 2020';
-      expect(eventFn).not.toHaveBeenCalled();
-
-      instance.events = {
-        blur: eventFn,
-      };
-      instance.blur(new Event('blur'), {});
-
-      expect(eventFn).toHaveBeenCalled();
-      expect(instance.mask).toBe<string>('');
-    });
   });
 
   describe('mounted', () => {
@@ -550,7 +470,7 @@ describe('DateInput', () => {
       instance.setDateValue = setDateValueSpy;
       instance.formatter = formatterSpy;
 
-      instance.onMounted();
+      instance.onMounted({});
 
       expect(formatterSpy).not.toHaveBeenCalled();
       expect(setDateValueSpy).not.toHaveBeenCalled();
@@ -567,7 +487,7 @@ describe('DateInput', () => {
       instance.setDateValue = setDateValueSpy;
       instance.formatter = formatterSpy;
 
-      instance.onMounted();
+      instance.onMounted({});
 
       expect(formatterSpy).toHaveBeenCalledWith('02/02/2002');
       expect(setDateValueSpy).toHaveBeenCalled();
@@ -575,65 +495,31 @@ describe('DateInput', () => {
   });
 
   describe('focus()', () => {
-    it('if initial mask and value is set, should assign initialMask to mask', () => {
-      const eventFn = jest.fn();
-      const instance = new DateInput({
-        name: 'date',
-        component: 'ZdDateInput',
-        mask: '## ## ####',
-      });
-
-      instance.mask = '';
-      instance.setDateValue('02-28-2020');
-
-      expect(eventFn).not.toHaveBeenCalled();
-
-      instance.events = {
-        focus: eventFn,
-      };
-      instance.focus(new Event('focus'), {});
-
-      jest.runAllTimers();
-
-      expect(eventFn).toHaveBeenCalled();
-
-      expect(instance.mask).toBe('## ## ####');
-    });
-
-    it('if initial mask or value is not set, should not assign initialMask to mask', () => {
-      const eventFn = jest.fn();
+    it('when value is invalid, should not change the displayValue on focus', () => {
       const instance = new DateInput({
         name: 'date',
         component: 'ZdDateInput',
-        displayFormat: 'DD/MM/YYYY',
+        inputFormat: 'DD/MM/YYYY',
       });
-
-      instance.setDateValue('21-12-2020');
-
-      expect(eventFn).not.toHaveBeenCalled();
-
-      instance.events = {
-        focus: eventFn,
-      };
+      instance.value = '99/99/9999';
       instance.focus(new Event('focus'), {});
-
-      expect(eventFn).toHaveBeenCalled();
-      expect(instance.updateMask()).toBe<string>('##/##/####');
-      expect(instance.mask).toBe<string>('##/##/####');
+      expect(instance.displayValue).toBe('99/99/9999');
     });
   });
 
   describe('FormatterParserProvider', () => {
+    const formatterFn = FormatterParserProvider.getFormatter('ZdDateInput');
+    const formatterDateTimeFn = FormatterParserProvider.getFormatter('ZdDateTime');
+    const parserFn = FormatterParserProvider.getParser('ZdDateInput');
+    const parserDateTimeFn = FormatterParserProvider.getParser('ZdDateTime');
+
     it('should return formatter function', () => {
-      const formatterFn = FormatterParserProvider.getFormatter('ZdDateInput');
       expect(formatterFn).toBeInstanceOf(Function);
 
-      const formatterDateTimeFn = FormatterParserProvider.getFormatter('ZdDateTime');
       expect(formatterDateTimeFn).toBeInstanceOf(Function);
     });
 
     it('should format date', () => {
-      const formatterFn = FormatterParserProvider.getFormatter('ZdDateInput');
       expect(formatterFn('12-20-2019')).toBe('12-20-2019');
       expect(formatterFn('20-12-2019')).toBe('20-12-2019');
       expect(formatterFn('aaa')).toBe('aaa');
@@ -641,88 +527,31 @@ describe('DateInput', () => {
     });
 
     it('when value is invalid and mask is set, should get same value', () => {
-      const formatterFn = FormatterParserProvider.getFormatter('ZdDateInput');
-
       const formatted = formatterFn('20/12', {
         dateFormat: 'DD/MM/YYYY',
         displayFormat: 'YYYY-MM-DD',
-        mask: '####/##/##',
-        initialMask: '####/##/##',
       });
 
       expect(formatted).toBe('20/12');
     });
 
-    it('when value is valid and mask is set, should get masked value', () => {
-      const formatterFn = FormatterParserProvider.getFormatter('ZdDateInput');
-
-      const formatted = formatterFn('20/12/2020', {
-        dateFormat: 'DD/MM/YYYY',
-        displayFormat: 'YYYY-MM-DD',
-        mask: '##/##/####',
-        initialMask: '##/##/####',
-      });
-
-      expect(formatted).toBe('20/12/2020');
-    });
-
     it('should format date time', () => {
-      const formatterFn = FormatterParserProvider.getFormatter('ZdDateTime');
-      expect(formatterFn('12-20-2019 12:34:56')).toBe('12-20-2019 12:34:56');
-      expect(formatterFn('20-12-2019 12:34:56')).toBe('20-12-2019 12:34:56');
-      expect(formatterFn('aaa')).toBe('aaa');
-      expect(formatterFn('')).toBe('');
-      expect(formatterFn('20/12/2019 12:34:56', {
+      expect(formatterDateTimeFn('12-20-2019 12:34:56')).toBe('12-20-2019 12:34:56');
+      expect(formatterDateTimeFn('20-12-2019 12:34:56')).toBe('20-12-2019 12:34:56');
+      expect(formatterDateTimeFn('aaa')).toBe('aaa');
+      expect(formatterDateTimeFn('')).toBe('');
+      expect(formatterDateTimeFn('20/12/2019 12:34:56', {
         dateTimeFormat: 'DD/MM/YYYY HH:mm:ss',
         displayFormat: 'YYYY-MM-DD HH:mm:ss',
       })).toBe('2019-12-20 12:34:56');
     });
 
     it('should return parser function', () => {
-      const parserFn = FormatterParserProvider.getParser('ZdDateInput');
       expect(parserFn).toBeInstanceOf(Function);
-      const parserDateTimeFn = FormatterParserProvider.getParser('ZdDateTime');
       expect(parserDateTimeFn).toBeInstanceOf(Function);
     });
 
-    it('when formatted value is masked, should remove mask and parse using displayFormat mask', () => {
-      const parserFn = FormatterParserProvider.getParser('ZdDateInput');
-
-      const parsed = parserFn('2019/12/20', {
-        dateFormat: 'DD/MM/YYYY',
-        displayFormat: 'YYYY-MM-DD',
-        mask: '####/##/##',
-      });
-
-      expect(parsed).toBe('20/12/2019');
-    });
-
-    it('when formatted value is masked and can\'t be masked using displayFmt mask, should parse using dateFmt mask', () => {
-      const parserFn = FormatterParserProvider.getParser('ZdDateInput');
-
-      const parsed = parserFn('20-12-2019', {
-        dateFormat: 'DD/MM/YYYY',
-        displayFormat: 'YYYY MMMM, Do',
-        mask: '##-##-####',
-      });
-
-      expect(parsed).toBe('20/12/2019');
-    });
-
-    it('when formatted value is masked and can\'t use neither displayFmt or dateFmt mask, should not parse', () => {
-      const parserFn = FormatterParserProvider.getParser('ZdDateInput');
-
-      const parsed = parserFn('20-12-2019', {
-        dateFormat: 'Do/MM/YYYY',
-        displayFormat: 'YYYY MMMM, Do',
-        mask: '##-##-####',
-      });
-
-      expect(parsed).toBe('20-12-2019');
-    });
-
     it('should parse date', () => {
-      const parserFn = FormatterParserProvider.getParser('ZdDateInput');
       expect(parserFn('12-20-2019')).toBe('12-20-2019');
       expect(parserFn('20-12-2019')).toBe('20-12-2019');
       expect(parserFn('aaa')).toBe('aaa');
@@ -730,16 +559,27 @@ describe('DateInput', () => {
     });
 
     it('should parse date time', () => {
-      const parserFn = FormatterParserProvider.getParser('ZdDateTime');
-      expect(parserFn('12-20-2019 12:34:56')).toBe('12-20-2019 12:34:56');
-      expect(parserFn('20-12-2019 12:34:56')).toBe('20-12-2019 12:34:56');
-      expect(parserFn('aaa')).toBe('aaa');
-      expect(parserFn('')).toBeNull();
-      expect(parserFn('2019-12-20 12:34:56', {
+      expect(parserDateTimeFn('12-20-2019 12:34:56')).toBe('12-20-2019 12:34:56');
+      expect(parserDateTimeFn('20-12-2019 12:34:56')).toBe('20-12-2019 12:34:56');
+      expect(parserDateTimeFn('aaa')).toBe('aaa');
+      expect(parserDateTimeFn('')).toBeNull();
+      expect(parserDateTimeFn('2019-12-20 12:34:56', {
         dateTimeFormat: 'DD/MM/YYYY HH:mm:ss',
         displayFormat: 'YYYY-MM-DD HH:mm:ss',
       })).toBe('20/12/2019 12:34:56');
     });
+
+    it('when using inputFormat, if the value is invalid should not parse it', () => {
+      expect(parserFn('99 99 9999', { inputFormat: 'DD MM YYYY', isFocused: true })).toBe('99 99 9999')
+    });
+
+    it('when value is incomplete, should not parse', () => {
+      expect(parserFn('01 01', { inputFormat: 'DD MM YYYY', isFocused: true })).toBe('01 01')
+    });
+
+    it('when focused should format according to displayFormat', () => {
+      expect(formatterFn('01-01-2000', { displayFormat: 'DD/MM/YYYY', isFocused: true })).toBe('01/01/2000')
+    });
   });
 
   describe('togglePicker', () => {
@@ -790,91 +630,6 @@ describe('DateInput', () => {
     });
   });
 
-  describe('updateMask', () => {
-    it('should not change mask when initial mask is empty string', () => {
-      const date = new DateInput({
-        name: 'date',
-        component: 'ZdDateInput',
-        mask: '',
-      });
-
-      expect(date.mask).toEqual('');
-      expect(date.updateMask()).toEqual('');
-    });
-
-    it('when no mask is set, should get mask based on displayFormat', () => {
-      const date = new DateInput({
-        name: 'date',
-        component: 'ZdDateInput',
-        displayFormat: 'DD MM YYYY',
-      });
-
-      expect(date.updateMask()).toBe('## ## ####');
-      expect(date.mask).toBe('## ## ####');
-    });
-
-    it('when initial mask is undefined but mask is set, should get mask based on displayFormat', () => {
-      const date = new DateInput({
-        name: 'date',
-        component: 'ZdDateInput',
-        displayFormat: 'DD MM YYYY',
-      });
-
-      date.mask = '#';
-
-      expect(date.updateMask()).toBe('## ## ####');
-      expect(date.mask).toBe('## ## ####');
-    });
-
-    it('when initial mask is set, should not get mask based on displayFormat', () => {
-      const date = new DateInput({
-        name: 'date',
-        component: 'ZdDateInput',
-        mask: '##-##-####',
-        displayFormat: 'DD MM YYYY',
-      });
-
-      expect(date.updateMask()).toBe('##-##-####');
-      expect(date.mask).toBe('##-##-####');
-    });
-
-    it('when initial mask is set and value is valid, should not remove masks', () => {
-      const date = new DateInput({
-        name: 'date',
-        component: 'ZdDateInput',
-        dateFormat: 'DD/MM/YYYY',
-        mask: '##-##-####',
-        displayFormat: 'DD MM YYYY',
-      });
-
-      expect(date.updateMask()).toBe('##-##-####');
-      expect(date.mask).toBe('##-##-####');
-
-      date.value = '17/11/2020';
-
-      expect(date.updateMask()).toBe('##-##-####');
-      expect(date.mask).toBe('##-##-####');
-    });
-
-    it('when initial mask is set and value is set but invalid, should not change mask', () => {
-      const date = new DateInput({
-        name: 'date',
-        component: 'ZdDateInput',
-        dateFormat: 'DD/MM/YYYY',
-        mask: '##-##-####',
-        displayFormat: 'DD MM YYYY',
-      });
-
-      expect(date.updateMask()).toBe('##-##-####');
-      expect(date.mask).toBe('##-##-####');
-
-      date.value = '17/11';
-
-      expect(date.updateMask()).toBe('##-##-####');
-      expect(date.mask).toBe('##-##-####');
-    });
-  });
-
   describe('events', () => {
     it('should call onDateClick event', () => {
       const spy = jest.fn();