#459 - added onClickDayName option, added relevant tests

t1m0n · May 18, 2022 · 14a60f8 · 14a60f8
1 parent 4e15a66
commit 14a60f8
Show file tree

Hide file tree

Showing 7 changed files with 95 additions and 13 deletions.
diff --git a/index-dev.js b/index-dev.js
@@ -16,7 +16,7 @@ let selected = false;
 
 let opts = {
     // minDate: Date.now(),
-    inline: false,
+    inline: true,
     visible: false,
     // container: '.input-wrap',
     // timepicker: true,
@@ -40,7 +40,7 @@ let opts = {
         selected = true;
         console.log('on select');
     },
-    multipleDates: false,
+    multipleDates: true,
     dateFormat(d) {
         // console.log(d);
         return d.toLocaleString();
@@ -52,6 +52,26 @@ let opts = {
         //     return d.toLocaleDateString();
         // })
     },
+    onClickDayName({dayIndex, datepicker}) {
+        let month = datepicker.viewDate.getMonth(),
+            year = datepicker.viewDate.getFullYear(),
+            selected = [],
+            days = 31;
+
+        while(days) {
+            let date = new Date(year, month, days);
+
+            if (date.getDay() === dayIndex) {
+                selected.push(date)
+            }
+
+            days -= 1;
+        }
+
+        datepicker.clear();
+        datepicker.selectDate(selected);
+
+    },
     onRenderCell(cell) {
     },
     // visible: true

diff --git a/src/datepicker.d.ts b/src/datepicker.d.ts
@@ -109,6 +109,7 @@ export declare type AirDatepickerOptions = {
     } | void),
     onShow: (isAnimationComplete: boolean) => void,
     onHide: (isAnimationComplete: boolean) => void,
+    onClickDayName: ({dayIndex, datepicker}: {dayIndex: number, datepicker: AirDatepicker}) => void
 }
 
 

diff --git a/src/datepickerBody.js b/src/datepickerBody.js
@@ -53,7 +53,8 @@ export default class DatepickerBody {
 
         addEventListener(this.$el, 'mouseover', this.onMouseOverCell);
         addEventListener(this.$el, 'mouseout', this.onMouseOutCell);
-        addEventListener(this.$el, 'click', this.onClickCell);
+        addEventListener(this.$el, 'click', this.onClickBody);
+
 
         if (range && dynamicRange) {
             addEventListener(this.$el, 'mousedown', this.onMouseDown);
@@ -81,17 +82,19 @@ export default class DatepickerBody {
     _getDayNamesHtml(firstDay = this.dp.locale.firstDay) {
         let html = '',
             isWeekend = this.dp.isWeekend,
+            {onClickDayName} = this.opts,
             curDay = firstDay,
             i = 0;
 
         while (i < 7) {
             let day = curDay % 7;
             let className = classNames('air-datepicker-body--day-name', {
-                [consts.cssClassWeekend]: isWeekend(day)
+                [consts.cssClassWeekend]: isWeekend(day),
+                '-clickable-': !!onClickDayName
             });
             let dayName = this.dp.locale.daysMin[day];
 
-            html += `<div class="${className}">${dayName}</div>`;
+            html += `<div class="${className}" data-day-index='${day}'>${dayName}</div>`;
 
             i++;
             curDay++;
@@ -207,8 +210,7 @@ export default class DatepickerBody {
     }
 
     handleClick = (e) => {
-        let $cell = closest(e.target, '.air-datepicker-cell');
-        if (!$cell) return;
+        let $cell = e.target;
         let cell = $cell.adpCell;
         if (cell.isDisabled) return;
 
@@ -226,6 +228,15 @@ export default class DatepickerBody {
         }
     }
 
+    handleDayNameClick = (e) => {
+        let index = e.target.getAttribute('data-day-index');
+
+        this.opts.onClickDayName({
+            dayIndex: Number(index),
+            datepicker: this.dp
+        });
+    }
+
     onChangeCurrentView = (view) => {
         if (view !== this.type) {
             this.hide();
@@ -244,8 +255,17 @@ export default class DatepickerBody {
         this.dp.setFocusDate(false);
     }
 
-    onClickCell = (e) => {
-        this.handleClick(e);
+    onClickBody = (e) => {
+        let {onClickDayName} = this.opts;
+        let target = e.target;
+
+        if (target.closest('.air-datepicker-cell')) {
+            this.handleClick(e);
+        }
+
+        if (onClickDayName && target.closest('.air-datepicker-body--day-name')) {
+            this.handleDayNameClick(e);
+        }
     }
 
     onMouseDown = (e) => {

diff --git a/src/datepickerBody.scss b/src/datepickerBody.scss
@@ -29,6 +29,14 @@
   text-align: center;
   text-transform: uppercase;
   font-size: .8em;
+
+  &.-clickable- {
+    cursor: pointer;
+
+    &:hover {
+      color: var(--adp-day-name-color-hover);
+    }
+  }
 }
 
 /*  Cells container

diff --git a/src/datepickerVars.scss b/src/datepickerVars.scss
@@ -46,6 +46,7 @@
   --adp-nav-color-secondary: var(--adp-color-secondary);
 
   --adp-day-name-color: #ff9a19;
+  --adp-day-name-color-hover: #8ad5f4;
 
   --adp-day-cell-width: 1fr;
   --adp-day-cell-height: 32px;

diff --git a/src/defaults.js b/src/defaults.js
@@ -72,4 +72,5 @@ export default {
     onRenderCell: false,
     onShow: false,
     onHide: false,
+    onClickDayName: false,
 };
diff --git a/tests/events.test.js b/tests/events.test.js
@@ -1,9 +1,5 @@
 import {beforeAll, afterEach, describe, test, it, expect} from '@jest/globals';
 import Datepicker from 'datepicker';
-import {isSameDate} from 'utils';
-import en from 'locale/en';
-import de from 'locale/de';
-import consts from 'consts';
 import {DAY} from './helpers';
 
 let $input, $altInput, dp, $datepicker;
@@ -154,4 +150,39 @@ describe('EVENTS TEST', () => {
             expect(datepicker).toBeInstanceOf(Datepicker);
         });
     });
+
+    describe('onClickDayName', () => {
+        it('should add click event on day name element', () => {
+            let clicked = false;
+
+            init({
+                visible: true,
+                onClickDayName({dayIndex, datepicker}) {
+                    clicked = true;
+                }
+            });
+
+            let $dayName = $datepicker.querySelector('.air-datepicker-body--day-name');
+
+            $dayName.click();
+
+            expect(clicked).toBe(true);
+            expect($dayName).toHaveClass('-clickable-');
+        });
+        it('should be called with correct arguments', (done) => {
+            init({
+                visible: true,
+                onClickDayName(args) {
+                    expect('dayIndex' in args).toBe(true);
+                    expect('datepicker' in args).toBe(true);
+
+                    done();
+                }
+            });
+
+            let $dayName = $datepicker.querySelector('.air-datepicker-body--day-name');
+
+            $dayName.click();
+        });
+    });
 });