feat(datepicker): fix some bugs

Trendyol · Dec 16, 2024 · 13b3ab0 · 13b3ab0
1 parent 23a3513
commit 13b3ab0
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 13 deletions.
diff --git a/src/components/datepicker/bl-datepicker.test.ts b/src/components/datepicker/bl-datepicker.test.ts
@@ -117,7 +117,7 @@ describe("BlDatepicker", () => {
   it("should use custom value formatter when provided", async () => {
     const testDate = new Date(2023, 1, 1);
 
-    element.inputValueFormatter = (dates: Date[]) => `Custom format: ${dates[0].toDateString()}`;
+    element.valueFormatter = (dates: Date[]) => `Custom format: ${dates[0].toDateString()}`;
     element.setDatePickerInput([testDate]);
     await element.updateComplete;
 

diff --git a/src/components/datepicker/bl-datepicker.ts b/src/components/datepicker/bl-datepicker.ts
@@ -30,13 +30,13 @@ export default class BlDatepicker extends DatepickerCalendarMixin {
    * Sets input size.
    */
   @property({ type: String, reflect: true })
-  inputSize?: InputSize = "medium";
+  size?: InputSize = "medium";
 
   /**
    * Makes datepicker input label as fixed positioned
    */
-  @property({ type: Boolean, attribute: "input-label-fixed", reflect: true })
-  inputLabelFixed = false;
+  @property({ type: Boolean, attribute: "label-fixed", reflect: true })
+  labelFixed = false;
   /**
    * Defines the datepicker input label
    */
@@ -45,8 +45,8 @@ export default class BlDatepicker extends DatepickerCalendarMixin {
   /**
    * Defines the custom formatter function
    */
-  @property({ type: Function, attribute: "input-value-formatter" })
-  inputValueFormatter: ((dates: Date[]) => string) | null = null;
+  @property({ type: Function, attribute: "value-formatter" })
+  valueFormatter: ((dates: Date[]) => string) | null = null;
   /**
    * Sets datepicker to disabled
    */
@@ -132,8 +132,8 @@ export default class BlDatepicker extends DatepickerCalendarMixin {
       this._inputValue = "";
     } else {
       this._selectedDates = dates;
-      if (this.inputValueFormatter) {
-        this._inputValue = this.inputValueFormatter(this._selectedDates);
+      if (this.valueFormatter) {
+        this._inputValue = this.valueFormatter(this._selectedDates);
       } else {
         this.defaultInputValueFormatter();
       }
@@ -264,8 +264,8 @@ export default class BlDatepicker extends DatepickerCalendarMixin {
           @click=${this._togglePopover}
           help-text=${this.helpText}
           ?disabled=${this.disabled}
-          .size=${this.inputSize}
-          .labelFixed=${this.inputLabelFixed}
+          .size=${this.size}
+          .labelFixed=${this.labelFixed}
           readonly
         >
           <div slot="icon" class="icon-container" id="icon-container">

diff --git a/src/mixins/datepicker-calendar-mixin/datepicker-calendar-mixin.ts b/src/mixins/datepicker-calendar-mixin/datepicker-calendar-mixin.ts
@@ -41,6 +41,7 @@ export default class DatepickerCalendarMixin extends LitElement {
         if (!isNaN(disabledDate.getTime())) this._disabledDates.push(disabledDate);
       });
     }
+    this.requestUpdate();
   }
 
   /**
@@ -83,16 +84,16 @@ export default class DatepickerCalendarMixin extends LitElement {
    * Target elements state
    */
 
-  @state() _value: Date | Date[] | string;
+  _value: Date | Date[] | string;
   /**
    * Sets the target element of the popover to align and trigger.
    * It can be a string id of the target element or can be a direct Element reference of it.
    */
-  @property()
-  get value(): string | Date | Date[] {
+  get value() {
     return this._value;
   }
 
+  @property({ type: Object, attribute: false, reflect: true })
   set value(value: string | Date | Date[]) {
     if (value) {
       let tempVal: Date[] = [];
@@ -104,6 +105,7 @@ export default class DatepickerCalendarMixin extends LitElement {
       } else if (Array.isArray(value)) {
         tempVal = value;
       }
+
       if (tempVal.length > 0) {
         if (this.type === CALENDAR_TYPES.SINGLE && tempVal.length > 1) {
           console.warn("'value' must be a single Date for single type selection.");
@@ -120,6 +122,7 @@ export default class DatepickerCalendarMixin extends LitElement {
           this._selectedDates.splice(0, this._selectedDates.length, ...tempVal);
         }
       }
+      this.requestUpdate();
     }
   }
 }