Merge pull request #192 from mydea/fn/allow-yield-time-picker

Allow to provide custom time picker button
mydea · Mar 15, 2021 · 9f610e6 · 9f610e6
2 parents 7005cca + da95cce
commit 9f610e6
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 23 deletions.
diff --git a/addon/components/time-picker.hbs b/addon/components/time-picker.hbs
@@ -11,27 +11,41 @@
     @verticalPosition={{@verticalPosition}}
     @matchTriggerWidth={{@matchTriggerWidth}} as |dd|
   >
-    <dd.Trigger @onKeyDown={{this.onKeyDown}} class='time-picker__trigger'>
-      <button
-        type='button'
-        disabled={{@disabled}}
-        class='time-picker__button {{@buttonClasses}}'
-        data-time-picker-toggle-button={{this.guid}}
-        data-time-picker-value={{this.displayValue}}
-        tabindex='-1'
-      >
-        {{#if this.displayValue}}
-          {{this.displayValue}}
-        {{else}}
-          {{this.placeholder}}
-        {{/if}}
-      </button>
+    <dd.Trigger
+      @onKeyDown={{this.onKeyDown}}
+      class='time-picker__trigger'
+      data-time-picker-toggle-button={{this.guid}}
+      data-time-picker-value={{this.displayValue}}
+    >
+      {{#if (has-block)}}
+        {{yield
+          (hash
+            displayValue=this.displayValue
+            value=@value
+            disabled=@disabled
+            guid=this.guid
+          )
+        }}
+      {{else}}
+        <button
+          type='button'
+          disabled={{@disabled}}
+          class='time-picker__button {{@buttonClasses}}'
+          tabindex='-1'
+        >
+          {{#if this.displayValue}}
+            {{this.displayValue}}
+          {{else}}
+            {{this.placeholder}}
+          {{/if}}
+        </button>
+      {{/if}}
     </dd.Trigger>
 
     <dd.Content>
       <div
-        class='time-picker__dropdown {{dropdownClasses}}'
-        data-time-picker-instance={{elementId}}
+        class='time-picker__dropdown {{@dropdownClasses}}'
+        data-time-picker-instance={{this.guid}}
       >
         <TimePickerInput
           @value={{this.inputValue}}

diff --git a/tests/integration/components/date-picker-test.js b/tests/integration/components/date-picker-test.js
@@ -330,9 +330,9 @@ module('Integration | Component | date-picker', function (hooks) {
   });
 
   test('should disable dates with min&max attributes', async function (assert) {
-    let min = moment().subtract(5, 'days');
-    let max = moment().add(10, 'days');
-    let today = moment();
+    let min = moment().subtract(5, 'days').startOf('day');
+    let max = moment().add(10, 'days').startOf('day');
+    let today = moment().startOf('day').startOf('day');
     let daysInMonth = today.daysInMonth();
 
     this.minDate = min;
@@ -353,7 +353,7 @@ module('Integration | Component | date-picker', function (hooks) {
     await datePicker.toggle();
 
     for (let i = 1; i <= daysInMonth; i++) {
-      let iterationDay = today.clone().set('date', i);
+      let iterationDay = today.clone().set('date', i).startOf('day');
       let daySelector = `${iterationDay.year()}-${iterationDay.month()}-${iterationDay.date()}`;
       if (iterationDay.isBefore(min) || iterationDay.isAfter(max)) {
         assert.dom(`[data-test-date-picker-day="${daySelector}"]`).isDisabled();

diff --git a/tests/integration/components/date-time-picker-test.js b/tests/integration/components/date-time-picker-test.js
@@ -21,7 +21,7 @@ module('Integration | Component | date-time-picker', function (hooks) {
       />
     `);
 
-    assert.dom('[data-time-picker-toggle-button]').isDisabled();
+    assert.dom('[data-time-picker-toggle-button] button').isDisabled();
   });
 
   test('selecting a time works with a value pre-set', async function (assert) {
@@ -66,7 +66,7 @@ module('Integration | Component | date-time-picker', function (hooks) {
       />
     `);
 
-    assert.dom('[data-time-picker-toggle-button]').isDisabled();
+    assert.dom('[data-time-picker-toggle-button] button').isDisabled();
   });
 
   test('time-picker value is pre-filled', async function (assert) {

diff --git a/tests/integration/components/time-picker-test.js b/tests/integration/components/time-picker-test.js
@@ -201,4 +201,29 @@ module('Integration | Component | time-picker', function (hooks) {
         'The trigger has a special `--in-place` class'
       );
   });
+
+  test('it allows to yield a custom button', async function (assert) {
+    let time = moment();
+
+    this.onChange = () => {};
+    this.defaultTime = time;
+
+    await render(hbs`
+      <TimePicker 
+        @value={{this.defaultTime}} 
+        @amPm={{false}} 
+        @onChange={{this.onChange}} 
+      as |opts|>
+        <button type='button' id='test-1-button'>{{opts.displayValue}}</button>
+      </TimePicker>
+    `);
+
+    assert.dom('button').hasText(time.format('HH:mm'), 'Correct date is shown');
+    assert.dom('button').hasAttribute('id', 'test-1-button');
+
+    assert.ok(
+      compareTimes(getSelectedTime(this.element), time),
+      'getSelectedTime returns correct moment instance'
+    );
+  });
 });