Skip to content

Commit 9c9a55d

Browse files
committed
feat: chnage value and input type base in ts
1 parent 232ef5c commit 9c9a55d

File tree

5 files changed

+60
-55
lines changed

5 files changed

+60
-55
lines changed

CHANGELOG.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
#changelog
2+
## [3.12.0] - 2024-2-7
3+
### new features
4+
- change `inputType` and `valuetype` from enum to pure string so it easily be used in other ts files without extra dep
25
## [3.11.1] - 2023-12-13
36
### new features
47
- fix `:dir(ltr)` bug of calendar

lib/DateFactory.ts

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11

2-
import { DateInObject, DateRestrictions, DateRestrictionsValidResult, DateValidResult, InputTypes, JBDateInputValueObject, ValueTypes } from './Types';
2+
import { DateInObject, DateRestrictions, DateRestrictionsValidResult, DateValidResult, InputTypes, JBDateInputValueObject, ValueTypes, ValueType, InputType } from './Types';
33
import { getEmptyValueObject } from './Helpers';
44
import { getYear, getMonth, getTime as getTimeStamp, getUnixTime as getTimeStampInSecond, isEqual, isLeapYear, getDate } from 'date-fns';
55
import { newDate, isLeapYear as isJalaliLeapYear, isAfter, isBefore, getYear as getJalaliYear, getMonth as getJalaliMonth, getDate as getJalaliDate } from 'date-fns-jalali';
@@ -10,8 +10,8 @@ export type DateFactoryConstructorArg = {
1010
valueType: ValueTypes | null | undefined;
1111
}
1212
export class DateFactory {
13-
#valueType = ValueTypes.gregorian;
14-
#inputType = InputTypes.jalali;
13+
#valueType:ValueType = "GREGORIAN";
14+
#inputType:InputType = InputTypes.jalali;
1515
//here we keep numbers that replace the year,month,day in niche situations
1616
#nicheNumbers = {
1717
//when year is invalid or empty and we want to show the calendar we need to show the current year or any other base on user config
@@ -35,21 +35,21 @@ export class DateFactory {
3535
return this.#nicheNumbers;
3636
}
3737
get yearOnEmptyBaseOnValueType() {
38-
if (this.#valueType == ValueTypes.jalali) {
38+
if (this.#valueType == "JALALI") {
3939
return this.#nicheNumbers.calendarYearOnEmpty.jalali;
4040
}
4141
return this.#nicheNumbers.calendarYearOnEmpty.gregorian;
4242
}
4343
get monthOnEmptyBaseOnValueType(): number {
44-
if (this.valueType == ValueTypes.jalali) {
44+
if (this.valueType == "JALALI") {
4545
return this.#nicheNumbers.calendarMonthOnEmpty.jalali;
4646
}
4747
return this.#nicheNumbers.calendarMonthOnEmpty.gregorian;
4848
}
4949
get inputType() {
5050
return this.#inputType;
5151
}
52-
get valueType() {
52+
get valueType():ValueType{
5353
return this.#valueType;
5454
}
5555
constructor(args: DateFactoryConstructorArg) {
@@ -61,10 +61,10 @@ export class DateFactory {
6161
}
6262
}
6363

64-
setInputType(inputType: InputTypes) {
64+
setInputType(inputType: InputType) {
6565
this.#inputType = inputType;
6666
}
67-
setValueType(valueType: ValueTypes) {
67+
setValueType(valueType: ValueType) {
6868
this.#valueType = valueType;
6969
}
7070
getYearValueBaseOnInputType(valueObject: JBDateInputValueObject): number | null {
@@ -88,16 +88,16 @@ export class DateFactory {
8888
getDateFromValueDateString(valueDateString: string): Date | null {
8989
let resultDate: Date | null = null;
9090
//create min date base on input value type
91-
if (this.valueType == ValueTypes.timestamp) {
91+
if (this.valueType == "TIME_STAMP") {
9292
resultDate = DateFactory.getDateFromTimestamp(parseInt(valueDateString));
9393
} else {
9494
const dateValueObj = this.getDateObjectValueBaseOnFormat(valueDateString);
9595
//sometimes format set after min value restriction set by user so this object returned null in these scenario we set min after format set again
9696
if (dateValueObj !== null && dateValueObj !== undefined && dateValueObj.year !== null && dateValueObj.month !== null && dateValueObj.day !== null) {
97-
if (this.valueType == ValueTypes.gregorian) {
97+
if (this.valueType == "GREGORIAN") {
9898
resultDate = DateFactory.getDateFromGregorian(dateValueObj.year, dateValueObj.month, dateValueObj.day);
9999
}
100-
if (this.valueType == ValueTypes.jalali) {
100+
if (this.valueType == "JALALI") {
101101
resultDate = DateFactory.getDateFromJalali(dateValueObj.year, dateValueObj.month, dateValueObj.day);
102102
}
103103
}
@@ -166,7 +166,7 @@ export class DateFactory {
166166
getCalendarDay(valueObject: JBDateInputValueObject): number | null {
167167
return this.getDayValueBaseOnInputType(valueObject);
168168
}
169-
setCalendarDefaultDateView(year: number, month: number, inputType: InputTypes = this.#inputType) {
169+
setCalendarDefaultDateView(year: number, month: number, inputType: InputType = this.#inputType) {
170170
if (inputType == InputTypes.gregorian) {
171171
this.#nicheNumbers.calendarYearOnEmpty.gregorian = year;
172172
this.#nicheNumbers.calendarMonthOnEmpty.gregorian = month;
@@ -325,13 +325,13 @@ export class DateFactory {
325325
return getEmptyValueObject();
326326
}
327327
getDateValueObjectBaseOnValueType(year: number, month: number, day: number, oldYear: number | null, oldMonth: number | null): JBDateInputValueObject {
328-
if (this.#valueType == ValueTypes.gregorian) {
328+
if (this.#valueType == "GREGORIAN") {
329329
return this.#getDateValueFromGregorian(year, month, day, oldYear, oldMonth);
330330
}
331-
if (this.#valueType == ValueTypes.jalali) {
331+
if (this.#valueType == "JALALI") {
332332
return this.#getDateValueFromJalali(year, month, day, oldYear, oldMonth);
333333
}
334-
if (this.#valueType == ValueTypes.timestamp) {
334+
if (this.#valueType == "TIME_STAMP") {
335335
return this.#getDateValueFromGregorian(year, month, day, oldYear, oldMonth);
336336
}
337337
console.error("INVALID_INPUT_TYPE");
@@ -436,7 +436,7 @@ export class DateFactory {
436436
}
437437
if (dateValidationResult.error == "INVALID_DAY_IN_MONTH") {
438438
if (oldJalaliMonth != jalaliMonth && jalaliDay == 31) {
439-
//if we update to 30days month when day set to 31 we substrc day to 30 instead of prevent user from updating month
439+
//if we update to 30days month when day set to 31 we substr day to 30 instead of prevent user from updating month
440440
return this.#getDateValueFromJalali(jalaliYear, jalaliMonth, jalaliDay - 1, oldJalaliYear, oldJalaliMonth);
441441
}
442442
}
@@ -487,7 +487,7 @@ export class DateFactory {
487487
const res = regex.exec(value);
488488
return res;
489489
}
490-
static getDate(year: number, month: number, day: number, inputType: InputTypes): Date {
490+
static getDate(year: number, month: number, day: number, inputType: InputType): Date {
491491
if (inputType == InputTypes.jalali) {
492492
return DateFactory.getDateFromJalali(year, month, day);
493493
}
@@ -503,8 +503,8 @@ export class DateFactory {
503503
static getDateFromTimestamp(timestamp: number): Date {
504504
return new Date(timestamp);
505505
}
506-
static checkDateRestrictions(year: number, month: number, day: number, dateInputType: InputTypes, dateRestrictions: DateRestrictions): DateRestrictionsValidResult {
507-
//this function check if inputed date is valid date in min and max range
506+
static checkDateRestrictions(year: number, month: number, day: number, dateInputType: InputType, dateRestrictions: DateRestrictions): DateRestrictionsValidResult {
507+
//this function check if inputted date is valid date in min and max range
508508
const result: DateRestrictionsValidResult = {
509509
get isAllValid() { return (this.min.isValid && this.max.isValid); },
510510
min: {

lib/JBDateInput.ts

Lines changed: 31 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import './inbox-element/inbox-element';
99
import {JBDDateInputInboxElementWebComponent} from './inbox-element/inbox-element';
1010
//import cloneDeep from 'lodash.clonedeep';
1111

12-
import { InputTypes, ValueTypes, ElementsObject, ValidationResultSummary, DateRestrictions, JBDateInputValueObject, ValidationResultItem, JBDateInputValidationItem, DateValidResult, DateRestrictionsValidResult, ValidationResult } from './Types';
12+
import { InputTypes, ValueTypes, ElementsObject, ValidationResultSummary, DateRestrictions, JBDateInputValueObject, ValidationResultItem, JBDateInputValidationItem, DateRestrictionsValidResult, ValidationResult, ValueType, InputType } from './Types';
1313
import { DateFactory } from './DateFactory';
1414
import { getEmptyValueObject, handleDayBeforeInput, handleMonthBeforeInput } from './Helpers';
1515
// import { JBCalendarValue } from 'jb-calendar/lib/Types';
@@ -54,7 +54,7 @@ export class JBDateInputWebComponent extends HTMLElement {
5454
}
5555
set value(value: string | Date) {
5656
this.#setDateValue(value);
57-
this.#updateinputTextFromValue();
57+
this.#updateInputTextFromValue();
5858
}
5959
#updateFormAssossicatedValue():void{
6060
//in html form we need to get date input value in native way this function update and set value of the input so form can get it when needed
@@ -82,9 +82,9 @@ export class JBDateInputWebComponent extends HTMLElement {
8282
}else{
8383
this.elements.input.placeholder= "";
8484
}
85-
this.#updateinputTextFromValue();
85+
this.#updateInputTextFromValue();
8686
}
87-
//standarded input value
87+
//standardized input value
8888
get #sInputValue():string{
8989
let value = this.#inputValue;
9090
if(this.#usePersianDigits){
@@ -114,10 +114,10 @@ export class JBDateInputWebComponent extends HTMLElement {
114114
}
115115
}
116116

117-
get inputType() {
117+
get inputType():InputType{
118118
return this.#dateFactory.inputType;
119119
}
120-
set inputType(value) {
120+
set inputType(value:InputType) {
121121

122122
if (Object.values(InputTypes).includes(value as InputTypes)) {
123123
this.#dateFactory.setInputType(value);
@@ -130,7 +130,7 @@ export class JBDateInputWebComponent extends HTMLElement {
130130
get valueType() {
131131
return this.#dateFactory.valueType;
132132
}
133-
set valueType(value: ValueTypes) {
133+
set valueType(value: ValueType) {
134134
if (Object.values(ValueTypes).includes(value as ValueTypes)) {
135135
this.#dateFactory.setValueType(value);
136136
} else {
@@ -147,35 +147,35 @@ export class JBDateInputWebComponent extends HTMLElement {
147147
}
148148
get yearValue(): number | null {
149149
switch (this.valueType) {
150-
case ValueTypes.jalali:
150+
case "JALALI":
151151
return this.#valueObject.jalali.year;
152-
case ValueTypes.gregorian:
152+
case "GREGORIAN":
153153
return this.#valueObject.gregorian.year;
154-
case ValueTypes.timestamp:
154+
case "TIME_STAMP":
155155
return this.#valueObject.gregorian.year;
156156
default:
157157
return null;
158158
}
159159
}
160160
get monthValue(): number | null {
161161
switch (this.valueType) {
162-
case ValueTypes.jalali:
162+
case "JALALI":
163163
return this.#valueObject.jalali.month;
164-
case ValueTypes.gregorian:
164+
case "GREGORIAN":
165165
return this.#valueObject.gregorian.month;
166-
case ValueTypes.timestamp:
166+
case "TIME_STAMP":
167167
return this.#valueObject.gregorian.month;
168168
default:
169169
return null;
170170
}
171171
}
172172
get dayValue(): number | null {
173173
switch (this.valueType) {
174-
case ValueTypes.jalali:
174+
case "JALALI":
175175
return this.#valueObject.jalali.day;
176-
case ValueTypes.gregorian:
176+
case "GREGORIAN":
177177
return this.#valueObject.gregorian.day;
178-
case ValueTypes.timestamp:
178+
case "TIME_STAMP":
179179
return this.#valueObject.gregorian.day;
180180
default:
181181
return null;
@@ -244,7 +244,7 @@ export class JBDateInputWebComponent extends HTMLElement {
244244
}
245245
set usePersianDigits(value) {
246246
this.#usePersianDigits = value;
247-
this.#updateinputTextFromValue();
247+
this.#updateInputTextFromValue();
248248
}
249249
constructor() {
250250
super();
@@ -624,41 +624,41 @@ export class JBDateInputWebComponent extends HTMLElement {
624624
const currentMonth = this.monthValue || 1;
625625
const currentDay = this.dayValue || 1;
626626
this.#setDateValueFromNumbers(currentYear + interval, currentMonth, currentDay);
627-
this.#updateinputTextFromValue();
627+
this.#updateInputTextFromValue();
628628
}
629629
addMonth(interval: number) {
630630
const currentYear = this.yearValue ? this.yearValue : this.#dateFactory.yearOnEmptyBaseOnValueType;
631631
const currentMonth = this.monthValue || 1;
632632
const currentDay = this.dayValue || 1;
633633
this.#setDateValueFromNumbers(currentYear, currentMonth + interval, currentDay);
634-
this.#updateinputTextFromValue();
634+
this.#updateInputTextFromValue();
635635
}
636636
addDay(interval: number) {
637637
const currentYear = this.yearValue ? this.yearValue : this.#dateFactory.yearOnEmptyBaseOnValueType;
638638
const currentMonth = this.monthValue || 1;
639639
const currentDay = this.dayValue || 1;
640640
this.#setDateValueFromNumbers(currentYear, currentMonth, currentDay + interval);
641-
this.#updateinputTextFromValue();
641+
this.#updateInputTextFromValue();
642642
}
643643
/**
644644
* will convert current valueObject to expected value string
645645
* @param {ValueTypes} type
646646
* @return {String} value base on format and date type
647647
*/
648-
getDateValue(type: ValueTypes = this.valueType): string {
648+
getDateValue(type: ValueType = this.valueType): string {
649649
return this.#dateFactory.getDateValueStringFromValueObject(this.#valueObject, type);
650650
}
651651
/**
652652
* when user change value this function called and update inner value object base on user value
653653
*/
654654
#setDateValue(value: string | Date) {
655655
if(typeof value == "string"){
656-
switch (this.#dateFactory.valueType) {
657-
case ValueTypes.gregorian:
658-
case ValueTypes.jalali:
656+
switch(this.#dateFactory.valueType) {
657+
case "GREGORIAN":
658+
case "JALALI":
659659
this.#setDateValueFromString(value);
660660
break;
661-
case ValueTypes.timestamp:
661+
case "TIME_STAMP":
662662
this.#setDateValueFromTimeStamp(value);
663663
break;
664664
}
@@ -672,7 +672,7 @@ export class JBDateInputWebComponent extends HTMLElement {
672672
this.#valueObject = getEmptyValueObject();
673673
}
674674
private updateCalendarView() {
675-
//update jb-calendr view base on current data
675+
//update jb-calendar view base on current data
676676
const value: JBCalendarValue = {
677677
year: this.#dateFactory.getCalendarYear(this.#valueObject),
678678
month: this.#dateFactory.getCalendarMonth(this.#valueObject),
@@ -713,7 +713,7 @@ export class JBDateInputWebComponent extends HTMLElement {
713713
this.#setDateValueFromNumbers(dateInObject.year, dateInObject.month, dateInObject.day);
714714
} else {
715715
if (value !== null && value !== undefined && value !== '') {
716-
console.error('your inputed Date doest match defualt or your specified Format');
716+
console.error('your inputed Date doest match default or your specified Format');
717717
} else {
718718
this.setValueObjNull();
719719
}
@@ -746,7 +746,7 @@ export class JBDateInputWebComponent extends HTMLElement {
746746
this.updateCalendarView();
747747
this.#updateFormAssossicatedValue();
748748
}
749-
#updateinputTextFromValue() {
749+
#updateInputTextFromValue() {
750750
const { year, month, day } = this.inputType == InputTypes.jalali ? this.#valueObject.jalali : this.#valueObject.gregorian;
751751
if(this.placeholder && !(year && month && day)){
752752
//if we have placeholder and inputed value were all null we show placeholder until user input some value
@@ -921,7 +921,7 @@ export class JBDateInputWebComponent extends HTMLElement {
921921
* @param {String} dateInputType what is the date type of this number jalali or gregorian
922922
* @return {Object}
923923
*/
924-
checkDateRestrictions(year: number, month: number, day: number, dateInputType: InputTypes): DateRestrictionsValidResult {
924+
checkDateRestrictions(year: number, month: number, day: number, dateInputType: InputType): DateRestrictionsValidResult {
925925
return DateFactory.checkDateRestrictions(year, month, day, dateInputType, this.dateRestrictions);
926926

927927
}
@@ -1060,7 +1060,7 @@ export class JBDateInputWebComponent extends HTMLElement {
10601060
const { year, month, day } = target.value;
10611061
if (year && month && day) {
10621062
this.#setDateValueFromNumberBaseOnInputType(year, month, day);
1063-
this.#updateinputTextFromValue();
1063+
this.#updateInputTextFromValue();
10641064
this.showCalendar = false;
10651065
this.callOnDateSelect();
10661066
this.callOnChange();
@@ -1074,7 +1074,7 @@ export class JBDateInputWebComponent extends HTMLElement {
10741074
}
10751075
onInputTypeChange() {
10761076
this.elements.calendar.inputType = this.inputType;
1077-
this.#updateinputTextFromValue();
1077+
this.#updateInputTextFromValue();
10781078
}
10791079
/**
10801080
* set opend calendar date when date input value is empty

lib/Types.ts

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -64,12 +64,14 @@ export enum InputTypes {
6464
jalali = 'JALALI',
6565
gregorian = 'GREGORIAN'
6666
}
67+
export type InputType = 'JALALI' | 'GREGORIAN';
68+
export type ValueType = 'JALALI' | 'GREGORIAN' | 'TIME_STAMP';
6769
export enum ValueTypes {
68-
jalali = 'JALALI',
69-
gregorian = 'GREGORIAN',
70-
timestamp = 'TIME_STAMP',
70+
jalali='JALALI' ,
71+
gregorian='GREGORIAN' ,
72+
timeStamp= 'TIME_STAMP'
7173
}
72-
//becuase this._internal is not a standard we have to extend HTMLELEMENT to use it
74+
//because this._internal is not a standard we have to extend HTML ELEMENT to use it
7375
declare global {
7476
interface ElementInternals{
7577
setFormValue(value:string):void;

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
"jalali web-component",
2929
"jalali web component"
3030
],
31-
"version": "3.11.1",
31+
"version": "3.12.0",
3232
"bugs": "https://github.com/javadbat/jb-date-input/issues",
3333
"license": "MIT",
3434
"files": [

0 commit comments

Comments
 (0)