Merge pull request #535 from prysmex/flexibility

Flexibility

src/components/pikaday-input.hbs

@@ -17,6 +17,7 @@
     firstDay=this.firstDay
     container=@container
     bound=@bound
+    register=@register
   }}
   {{on 'change' this.didChange}}
   type='text'

src/components/pikaday-input.js

@@ -3,17 +3,22 @@ import { action } from '@ember/object';
 import { findMoment } from '../find-moment';
 const moment = findMoment();
 
-export default class extends Component {
+export default class PikadayInputComponent extends Component {
   constructor(owner, args) {
     super(owner, args);
   }
 
+  get moment() {
+    return this.args.moment || moment;
+  }
+
   get format() {
     return this.args.format || 'DD.MM.YYYY';
   }
 
   get value() {
     let { value, useUTC } = this.args;
+    let moment = this.moment;
     if (useUTC && value) {
       let format = 'YYYY-MM-DD';
       value = moment(moment.utc(value).format(format), format).toDate();
@@ -87,7 +92,7 @@ export default class extends Component {
   @action
   onSelect(date) {
     if (this.args.useUTC && date) {
-      date = moment
+      date = this.moment
         .utc([date.getFullYear(), date.getMonth(), date.getDate()])
         .toDate();
     }

src/components/pikaday-inputless.hbs

@@ -25,6 +25,7 @@
       @firstDay={{@firstDay}}
       @onClose={{@onClose}}
       @onDraw={{@onDraw}}
+      @register={{@register}}
     />
   {{/if}}
   <div {{this.setContainer}} class='ember-pikaday-container'></div>

src/components/pikaday-inputless.js

@@ -2,7 +2,7 @@ import Component from '@glimmer/component';
 import { modifier } from 'ember-modifier';
 import { tracked } from '@glimmer/tracking';
 
-export default class extends Component {
+export default class PikadayInputlessComponent extends Component {
   @tracked container;
   constructor(owner, args) {
     super(owner, args);

src/modifiers/pikaday.js

@@ -45,13 +45,14 @@ export default class PikadayModifier extends Modifier {
 
     if (!this.#pikaday) {
       this.#pikaday = new Pikaday(pikadayOptions);
-      let { value } = named;
+      let { value, register } = named;
       if (value) {
         this.#pikaday.setDate(value, true);
       }
       this.syncDisabled(element);
       this.#observer = new MutationObserver(() => this.syncDisabled(element));
       this.#observer.observe(element, { attributes: true });
+      register?.(this.#pikaday);
     } else {
       let { value, minDate, maxDate } = named;
       let valueAltered = false;

test-app/tests/integration/components/pikaday-input-test.js

@@ -596,9 +596,12 @@ module('Integration | Component | pikaday-input', function (hooks) {
 
     this.set('currentDate', today);
     this.set('minDate', today);
+    this.set('updateCurrentDate', (date) => {
+      this.set('currentDate', date);
+    });
 
     await render(hbs`
-      <PikadayInput @minDate={{this.minDate}} @value={{this.currentDate}} @onSelection={{action (mut this.currentDate)}}/>
+      <PikadayInput @minDate={{this.minDate}} @value={{this.currentDate}} @onSelection={{this.updateCurrentDate}}/>
     `);
 
     this.set('minDate', tomorrow);
@@ -619,9 +622,12 @@ module('Integration | Component | pikaday-input', function (hooks) {
 
     this.set('currentDate', tomorrow);
     this.set('maxDate', tomorrow);
+    this.set('updateCurrentDate', (date) => {
+      this.set('currentDate', date);
+    });
 
     await render(hbs`
-      <PikadayInput @maxDate={{this.maxDate}} @value={{this.currentDate}} @onSelection={{action (mut this.currentDate)}}/>
+      <PikadayInput @maxDate={{this.maxDate}} @value={{this.currentDate}} @onSelection={{this.updateCurrentDate}}/>
     `);
 
     this.set('maxDate', today);
@@ -728,6 +734,52 @@ module('Integration | Component | pikaday-input', function (hooks) {
     assert.equal(Interactor.selectedMonth(), 5);
     assert.equal(Interactor.selectedDay(), 28);
   });
+
+  test('register should give access to pikaday instance for granular control', async function (assert) {
+    this.set('registerFn', (pikaday) => {
+      assert.ok(pikaday, 'pikaday registration failed');
+    });
+
+    await render(hbs`
+      <PikadayInput @register={{this.registerFn}}/>
+    `);
+  });
+
+  test('passing moment fn', async function (assert) {
+    assert.expect(3);
+    class _moment {
+      format() {
+        return this;
+      }
+      toDate() {
+        return new Date();
+      }
+      utc() {
+        return this;
+      }
+    }
+    const moment = function () {
+      assert.ok(true, 'moment fn called');
+      return new _moment();
+    };
+
+    moment.utc = () => {
+      assert.ok(true, 'moment utc fn called');
+      return new _moment();
+    };
+
+    this.set('updateCurrentDate', (date) => {
+      this.set('currentDate', date);
+    });
+    this.set('moment', moment);
+
+    await render(hbs`
+      <PikadayInput @onSelection={{this.updateCurrentDate}} @value={{this.currentDate}} @moment={{this.moment}} @useUTC={{true}}/>
+    `);
+
+    await click('input');
+    await Interactor.selectDate(new Date());
+  });
 });
 
 /**

test-app/tests/integration/components/pikaday-inputless-test.js

@@ -22,7 +22,7 @@ module('Integration | Component | pikaday-inputless', function (hooks) {
     this.set('onSelection', onSelection);
 
     await render(hbs`
-      <PikadayInputless @onSelection={{action this.onSelection}}/>
+      <PikadayInputless @onSelection={{this.onSelection}}/>
     `);
 
     await click('input');
@@ -54,4 +54,14 @@ module('Integration | Component | pikaday-inputless', function (hooks) {
       .dom('.pika-single')
       .hasClass('is-hidden', 'should be closed before clicking');
   });
+
+  test('register should give access to pikaday instance for granular control', async function (assert) {
+    this.set('registerFn', (pikaday) => {
+      assert.ok(pikaday, 'pikaday registration failed');
+    });
+
+    await render(hbs`
+      <PikadayInputless @register={{this.registerFn}}/>
+    `);
+  });
 });