fix: style and default value fix

freshworks · May 22, 2020 · dda833f · dda833f
1 parent 7be93c5
commit dda833f
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 20 deletions.
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -66,7 +66,7 @@ export namespace Components {
         /**
           * Shows single date or date range picker based on mode
          */
-        "mode": string;
+        "mode": "single date" | "range";
         /**
           * Placeholder to display in the input field
          */
@@ -78,7 +78,7 @@ export namespace Components {
         /**
           * Value selected in the single date picker mode
          */
-        "value": any;
+        "value": string;
     }
     interface FwIcon {
         /**
@@ -634,7 +634,7 @@ declare namespace LocalJSX {
         /**
           * Shows single date or date range picker based on mode
          */
-        "mode"?: string;
+        "mode"?: "single date" | "range";
         /**
           * Triggered when the update button clicked
          */
@@ -650,7 +650,7 @@ declare namespace LocalJSX {
         /**
           * Value selected in the single date picker mode
          */
-        "value"?: any;
+        "value"?: string;
     }
     interface FwIcon {
         /**

diff --git a/src/components/datepicker/datepicker.tsx b/src/components/datepicker/datepicker.tsx
@@ -46,7 +46,7 @@ export class Datepicker {
   /**
    *   Shows single date or date range picker based on mode
    */
-  @Prop() mode = 'single date';
+  @Prop() mode: 'single date' | 'range' = 'single date';
   /**
    *   Minimum date that are allowed to select in the calender
    */
@@ -70,7 +70,7 @@ export class Datepicker {
   /**
    *   Value selected in the single date picker mode
    */
-  @Prop({ mutable: true }) value: any;
+  @Prop({ mutable: true }) value: string;
   /**
    *   Placeholder to display in the input field
    */
@@ -92,12 +92,14 @@ export class Datepicker {
     if (isUpdateRange) {
       this.startDateFormatted = moment(this.startDate).format(this.dateFormat);
       this.endDateFormatted = moment(this.endDate).format(this.dateFormat);
-      this.value = this.startDateFormatted + ' To ' + this.endDateFormatted;
+      if (this.startDate && this.endDate) {
+        this.value = this.startDateFormatted + ' To ' + this.endDateFormatted;
+      }
       this.fromDate = this.startDateFormatted;
       this.toDate = this.endDateFormatted;
       this.fwChange.emit({ fromDate: this.startDateFormatted, toDate: this.endDateFormatted });
     } else if (isUpdateDate) {
-      this.value = moment(this.selectedDay).format(this.dateFormat);
+      this.value = this.selectedDay ? moment(this.selectedDay).format(this.dateFormat) : '';
       this.fwChange.emit(this.value);
     }
     this.showDatePicker = false;
@@ -183,15 +185,28 @@ export class Datepicker {
     this.toMonth = this.month === 11 ? 0 : this.month + 1;
     this.toYear = this.toMonth === 0 ? this.yearCalculation(this.year, 1) : this.year;
     this.monthDetails = this.getMonthDetails(this.year, this.month);
+    this.todayTimestamp = moment().startOf('date').valueOf();
+    this.setInitalValues();
+  }
+
+  setInitalValues() {
     this.nextMonthDetails = this.month === 11
       ? this.getMonthDetails(this.yearCalculation(this.year, 1), 0)
       : this.getMonthDetails(this.year, this.month + 1);
-    this.todayTimestamp = moment().startOf('date').valueOf();
     this.placeholder = this.placeholder || (
       this.mode === 'range'
         ? 'Select Date Range'
         : 'Select Date');
     this.supportedYears = this.getSupportedYears();
+    this.selectedDay = this.value !== undefined ? moment(this.value, this.dateFormat).valueOf() : undefined;
+    this.startDate = this.fromDate !== undefined ? moment(this.fromDate, this.dateFormat).valueOf() : undefined;
+    this.endDate = this.toDate !== undefined ? moment(this.toDate, this.dateFormat).valueOf() : undefined;
+
+    if (this.mode === 'range' && this.startDate && this.endDate) {
+      const formattedFromDate = moment(this.startDate).format(this.dateFormat);
+      const formattedToDate = moment(this.endDate).format(this.dateFormat);
+      this.value = `${formattedFromDate} To ${formattedToDate}`;
+    }
   }
 
   getDayDetails = args => {

diff --git a/src/components/datepicker/readme.md b/src/components/datepicker/readme.md
@@ -7,16 +7,16 @@
 
 ## Properties
 
-| Property      | Attribute     | Description                                              | Type     | Default         |
-| ------------- | ------------- | -------------------------------------------------------- | -------- | --------------- |
-| `dateFormat`  | `date-format` | Selected Date will be retured in the given date format   | `string` | `'DD-MM-YYYY'`  |
-| `fromDate`    | `from-date`   | From date that is selected in the date range picker mode | `string` | `undefined`     |
-| `maxDate`     | `max-date`    | Maximum date that are allowed to select in the calender  | `string` | `undefined`     |
-| `minDate`     | `min-date`    | Minimum date that are allowed to select in the calender  | `string` | `undefined`     |
-| `mode`        | `mode`        | Shows single date or date range picker based on mode     | `string` | `'single date'` |
-| `placeholder` | `placeholder` | Placeholder to display in the input field                | `string` | `undefined`     |
-| `toDate`      | `to-date`     | To date that is selected in the date range picker mode   | `string` | `undefined`     |
-| `value`       | `value`       | Value selected in the single date picker mode            | `any`    | `undefined`     |
+| Property      | Attribute     | Description                                              | Type                       | Default         |
+| ------------- | ------------- | -------------------------------------------------------- | -------------------------- | --------------- |
+| `dateFormat`  | `date-format` | Selected Date will be retured in the given date format   | `string`                   | `'DD-MM-YYYY'`  |
+| `fromDate`    | `from-date`   | From date that is selected in the date range picker mode | `string`                   | `undefined`     |
+| `maxDate`     | `max-date`    | Maximum date that are allowed to select in the calender  | `string`                   | `undefined`     |
+| `minDate`     | `min-date`    | Minimum date that are allowed to select in the calender  | `string`                   | `undefined`     |
+| `mode`        | `mode`        | Shows single date or date range picker based on mode     | `"range" or "single date"` | `'single date'` |
+| `placeholder` | `placeholder` | Placeholder to display in the input field                | `string`                   | `undefined`     |
+| `toDate`      | `to-date`     | To date that is selected in the date range picker mode   | `string`                   | `undefined`     |
+| `value`       | `value`       | Value selected in the single date picker mode            | `string`                   | `undefined`     |
 
 
 ## Events

diff --git a/src/components/select/select.scss b/src/components/select/select.scss
@@ -67,7 +67,8 @@ label {
     letter-spacing: 0;
     line-height: 1.4;
     background-color: var(--input-bg);
-    width: 98%;
+    width: 100%;
+    box-sizing: border-box;
 
     &:focus {
       border: none;