range-datepicker/range-datepicker-cell.js at master · yoerayo/range-datepicker · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
class RangeDatepickerCell extends Polymer.Element {
  static get is() {
    return 'range-datepicker-cell';
  }
  static get properties() {
    return {
      day: Object,
      _selected: {
        type: Boolean,
        value: false,
      },
      _hovered: {
        type: Boolean,
        value: false,
      },
      dateTo: Number,
      dateFrom: Number,
      month: String,
      hoveredDate: Number,
      min: Number,
      max: Number,
      _disabled: {
        type: Boolean,
        value: false,
      },
      disabledDays: {
        type: Array,
        value: [],
      },
    };
  }

  static get observers() {
    return ['_dateChanged(dateFrom, dateTo, hoveredDate, day)'];
  }

  _dateChanged(dateFrom, dateTo, hoveredDate, day) {
    this._selected = false;
    this._hovered = false;
    if (day) {
      if (dateTo === day.date || dateFrom === day.date) {
        this._selected = true;
      }
      if (
        ((hoveredDate === day.date || day.date < hoveredDate) &&
          day.date > dateFrom &&
          !dateTo &&
          dateFrom !== undefined &&
          !this._selected) ||
        (day.date > dateFrom && day.date < dateTo)
      ) {
        this._hovered = true;
      }
    }
  }

  _handleTap() {
    if (!this._disabled) {
      this.dispatchEvent(new CustomEvent('date-is-selected', {
        detail: { date: this.day.date },
      }));
    }
  }

  _handleHover() {
    this.dispatchEvent(new CustomEvent('date-is-hovered', {
      detail: { date: this.day.date },
    }));
  }

  _isSelected(selected) {
    if (selected) {
      return 'selected';
    }
    return '';
  }

  _isHovered(hovered) {
    if (hovered) {
      return 'hovered';
    }
    return '';
  }

  _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 '';
  }
}

window.customElements.define(RangeDatepickerCell.is, RangeDatepickerCell);