fix(cell): cell element now works correctly

AlaskaAirlines · May 16, 2023 · 2a61b1b · 2a61b1b
1 parent c0f91a6
commit 2a61b1b
Show file tree

Hide file tree

Showing 2 changed files with 146 additions and 3 deletions.
diff --git a/index.js b/index.js
@@ -1,5 +1,6 @@
 import { AuroCalendar } from "./src/auro-calendar";
 import { AuroCalendarMonth } from "./src/auro-calendar-month";
+import { AuroCalendarCell } from "./src/auro-calendar-cell";
 import { AuroDatePicker } from "./src/auro-datepicker";
 
 /**
@@ -16,5 +17,6 @@ export function registerComponent(name, className) {
 }
 
 registerComponent('auro-calendar', AuroCalendar);
+registerComponent('auro-calendar-cell', AuroCalendarCell);
 registerComponent('auro-calendar-month', AuroCalendarMonth);
 registerComponent('auro-datepicker', AuroDatePicker);
diff --git a/src/auro-calendar-cell.js b/src/auro-calendar-cell.js
@@ -1,10 +1,59 @@
-import styleCss from "./style-auro-calendar-cell-css";
+import { __decorate } from "tslib";
+import { LitElement, html, css } from 'lit';
+import { format, getTime, startOfDay } from 'date-fns';
+import { enUS } from 'date-fns/esm/locale';
 
-import { RangeDatepickerCell } from "../node_modules/wc-range-datepicker/dist/src/range-date-picker-cell";
+import styleCss from "./style-auro-calendar-cell-css";
 
-export class AuroCalendarCell extends RangeDatepickerCell {
+export class AuroCalendarCell extends LitElement {
   constructor() {
     super();
+
+    this.day = null;
+    this.selected = false;
+    this.hovered = false;
+    this.dateTo = null;
+    this.dateFrom = null;
+    this.month = null;
+    this.min = null;
+    this.max = null;
+    this.disabled = false;
+    this.disabledDays = [];
+    this.hoveredDate = null;
+    this.isCurrentDate = false;
+    this._locale = null;
+  }
+
+  // This function is to define props used within the scope of this component
+  // Be sure to review  https://lit-element.polymer-project.org/guide/properties#reflected-attributes
+  // to understand how to use reflected attributes with your property settings.
+  static get properties() {
+    return {
+      // ...super.properties,
+      day:           { type: Object },
+      selected:      { type: Boolean },
+      hovered:       { type: Boolean },
+      dateTo:        { type: String },
+      dateFrom:      { type: String },
+      month:         { type: String },
+      min:           { type: Number },
+      max:           { type: Number },
+      disabled:      { type: Boolean },
+      disabledDays:  { type: Array },
+      hoveredDate:   { type: String },
+      isCurrentDate: { type: Boolean },
+      locale:        { type: Object }
+    };
+  }
+
+  get locale() {
+    return this._locale ? this._locale : enUS;
+  }
+
+  set locale(value) {
+    const oldValue = this._locale;
+    this._locale = value;
+    this.requestUpdate('locale', oldValue);
   }
 
   static get styles() {
@@ -13,4 +62,96 @@ export class AuroCalendarCell extends RangeDatepickerCell {
       styleCss
     ];
   }
+
+  dateChanged(dateFrom, dateTo, hoveredDate, day) {
+    this.selected = false;
+    this.hovered = false;
+    const parsedDateFrom = parseInt(dateFrom, 10);
+    const parsedDateTo = parseInt(dateTo, 10);
+    if (day) {
+      if (getTime(startOfDay(parsedDateTo * 1000)) / 1000 === day.date ||
+        getTime(startOfDay(parsedDateFrom * 1000)) / 1000 === day.date) {
+          this.selected = true;
+      }
+      if (((hoveredDate === day.date || day.date < hoveredDate) &&
+          day.date > parsedDateFrom &&
+          !parsedDateTo &&
+          !Number.isNaN(parsedDateFrom) &&
+          parsedDateFrom !== undefined &&
+        !this.selected) ||
+        (day.date > parsedDateFrom && day.date < parsedDateTo)) {
+          this.hovered = true;
+      }
+    }
+  }
+
+  handleTap() {
+    var _a;
+    if (!this.disabled) {
+      this.dispatchEvent(new CustomEvent('date-is-selected', {
+          detail: { date: (_a = this.day) === null || _a === void 0 ? void 0 : _a.date },
+      }));
+    }
+  }
+
+  handleHover() {
+    var _a;
+    this.dispatchEvent(new CustomEvent('date-is-hovered', {
+      detail: { date: (_a = this.day) === null || _a === void 0 ? void 0 : _a.date },
+    }));
+  }
+
+  isSelected(selected) {
+    return selected ? 'selected' : '';
+  }
+
+  isHovered(hovered) {
+    return hovered ? 'hovered' : '';
+  }
+
+  isEnabled(day, min, max, disabledDays) {
+    this.disabled = false;
+    if (disabledDays && day && day.date) {
+      if (day.date < min ||
+        day.date > max ||
+        disabledDays.findIndex(disabledDay => parseInt(disabledDay, 10) === day.date) !== -1) {
+          this.disabled = true;
+          return 'disabled';
+      }
+    }
+    return '';
+  }
+
+  getTitle(date) {
+    if (date === undefined) {
+      return '';
+    }
+    return format(date * 1000, 'PPPP', {
+      locale: this.locale,
+    });
+  }
+
+  updated(properties) {
+    if (properties.has('dateFrom') ||
+        properties.has('dateTo') ||
+        properties.has('hoveredDate') ||
+        properties.has('day')) {
+        this.dateChanged(this.dateFrom, this.dateTo, this.hoveredDate, this.day);
+    }
+  }
+
+  render() {
+    var _a, _b;
+    return html `
+    <button
+      @click="${this.handleTap}"
+      @mouseover="${this.handleHover}"
+      @focus="${this.handleHover}"
+      class="day ${this.isCurrentDate ? 'currentDate' : ''} ${this.isSelected(this.selected)} ${this.isHovered(this.hovered)} ${this.isEnabled(this.day, this.min, this.max, this.disabledDays)}"
+      ?disabled="${this.disabled}"
+      title="${this.getTitle((_a = this.day) === null || _a === void 0 ? void 0 : _a.date)}">
+      <div class="currentDayMarker">${(_b = this.day) === null || _b === void 0 ? void 0 : _b.title}</div>
+    </button>
+  `;
+  }
 }