opt-in for proximitySelection for shift + click

cibernox · Sep 23, 2019 · 3f9d54a · 3f9d54a
1 parent 14c962a
commit 3f9d54a
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 3 deletions.
diff --git a/addon/components/power-calendar-range.js b/addon/components/power-calendar-range.js
@@ -77,7 +77,7 @@ export default CalendarComponent.extend({
       if (date && (date.hasOwnProperty('start') || date.hasOwnProperty('end'))) {
         range = { date };
       } else {
-        range = this._buildRange({ date });
+        range = this._buildRange({ date }, e);
       }
 
       let { start, end } = range.date;
@@ -97,11 +97,11 @@ export default CalendarComponent.extend({
   },
 
   // Methods
-  _buildRange(day) {
+  _buildRange(day, e) {
     let selected = this.get('publicAPI.selected') || { start: null, end: null };
     let { start, end } = getProperties(selected, 'start', 'end');
 
-    if (this.get('proximitySelection')) {
+    if (this.get('proximitySelection') || (e && e.shiftKey)) {
       return this._buildRangeByProximity(day, start, end);
     }
 

diff --git a/tests/integration/components/power-calendar-range-test.js b/tests/integration/components/power-calendar-range-test.js
@@ -379,4 +379,48 @@ module('Integration | Component | power calendar range', function(hooks) {
       'The end of the range has a special class'
     );
   });
+
+  test('when shift+click it changes range to closest date', async function(assert) {
+    assert.expect(7);
+    this.selected = { start: new Date(2016, 1, 5), end: new Date(2016, 1, 9) };
+
+    await render(hbs`
+      {{#power-calendar-range selected=selected onSelect=(action (mut selected) value="date") as |calendar|}}
+        {{calendar.nav}}
+        {{calendar.days}}
+      {{/power-calendar-range}}
+    `);
+    let allDaysInRangeAreSelected = this.element.querySelector('.ember-power-calendar-day[data-date="2016-02-05"]').classList.contains('ember-power-calendar-day--selected')
+      && this.element.querySelector('.ember-power-calendar-day[data-date="2016-02-06"]').classList.contains('ember-power-calendar-day--selected')
+      && this.element.querySelector('.ember-power-calendar-day[data-date="2016-02-07"]').classList.contains('ember-power-calendar-day--selected')
+      && this.element.querySelector('.ember-power-calendar-day[data-date="2016-02-08"]').classList.contains('ember-power-calendar-day--selected')
+      && this.element.querySelector('.ember-power-calendar-day[data-date="2016-02-09"]').classList.contains('ember-power-calendar-day--selected');
+    assert.ok(allDaysInRangeAreSelected, 'All days in range are selected');
+    assert.dom('.ember-power-calendar-day[data-date="2016-02-05"]').hasClass(
+      'ember-power-calendar-day--range-start',
+      'The start of the range has a special class'
+    );
+    assert.dom('.ember-power-calendar-day[data-date="2016-02-09"]').hasClass(
+      'ember-power-calendar-day--range-end',
+      'The end of the range has a special class'
+    );
+    await click('.ember-power-calendar-day[data-date="2016-02-10"]', { shiftKey: true });
+    assert.dom('.ember-power-calendar-day[data-date="2016-02-05"]').hasClass(
+      'ember-power-calendar-day--range-start',
+      'The start of the range has a special class'
+    );
+    assert.dom('.ember-power-calendar-day[data-date="2016-02-10"]').hasClass(
+      'ember-power-calendar-day--range-end',
+      'The end of the range has a special class'
+    );
+    await click('.ember-power-calendar-day[data-date="2016-02-04"]', { shiftKey: true });
+    assert.dom('.ember-power-calendar-day[data-date="2016-02-04"]').hasClass(
+      'ember-power-calendar-day--range-start',
+      'The start of the range has a special class'
+    );
+    assert.dom('.ember-power-calendar-day[data-date="2016-02-10"]').hasClass(
+      'ember-power-calendar-day--range-end',
+      'The end of the range has a special class'
+    );
+  });
 });