From 4cda306e7a127c4eb14a63159fed8f7badcf7ffc Mon Sep 17 00:00:00 2001
From: Rong Sen Ng <wes.ngrongsen@gmail.com>
Date: Fri, 28 May 2021 23:23:07 +0800
Subject: [PATCH] refactor: update logic rendering navigation buttons

---
 src/date-picker/date-picker.ts | 28 ++++++++++++++++++----------
 src/date-picker/stylings.ts    |  8 ++++++++
 2 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/src/date-picker/date-picker.ts b/src/date-picker/date-picker.ts
index fea55249..635d2fb6 100644
--- a/src/date-picker/date-picker.ts
+++ b/src/date-picker/date-picker.ts
@@ -15,6 +15,7 @@ import { calendarViews,MAX_DATE } from '../constants.js';
 import { adjustOutOfRangeValue } from '../helpers/adjust-out-of-range-value.js';
 import { dateValidator } from '../helpers/date-validator.js';
 import { dispatchCustomEvent } from '../helpers/dispatch-custom-event.js';
+import { isInTargetMonth } from '../helpers/is-in-current-month.js';
 import { splitString } from '../helpers/split-string.js';
 import { toDateString } from '../helpers/to-date-string.js';
 import { toFormatters } from '../helpers/to-formatters.js';
@@ -212,16 +213,8 @@ export class DatePicker extends DatePickerMixin(DatePickerMinMaxMixin(LitElement
           nothing :
           html`
           <div class=month-pagination>
-            <mwc-icon-button
-              data-navigation=previous
-              label=${this.previousMonthLabel}
-              @click=${this.#navigateMonth}
-            >${iconChevronLeft}</mwc-icon-button>
-            <mwc-icon-button
-              data-navigation=next
-              label=${this.nextMonthLabel}
-              @click=${this.#navigateMonth}
-            >${iconChevronRight}</mwc-icon-button>
+            ${this.#renderNavigationButton('previous', !isInTargetMonth(min, currentDate))}
+            ${this.#renderNavigationButton('next', !isInTargetMonth(max, currentDate))}
           </div>
           `
       }
@@ -310,6 +303,21 @@ export class DatePicker extends DatePickerMixin(DatePickerMinMaxMixin(LitElement
     `;
   };
 
+  #renderNavigationButton  = (
+    navigationType: 'previous' | 'next',
+    shouldRender = false
+  ): TemplateResult => {
+    const isPreviousNavigationType = navigationType === 'previous';
+
+    return shouldRender ? html`
+    <mwc-icon-button
+      data-navigation=${navigationType}
+      label=${isPreviousNavigationType ? this.previousMonthLabel : this.nextMonthLabel}
+      @click=${this.#navigateMonth}
+    >${isPreviousNavigationType ? iconChevronLeft : iconChevronRight}</mwc-icon-button>
+    ` : html`<div data-navigation=${navigationType}></div>`;
+  };
+
   #navigateMonth = (ev: MouseEvent): void => {
     const currentDate = this._currentDate;
     const isPreviousNavigation = (
diff --git a/src/date-picker/stylings.ts b/src/date-picker/stylings.ts
index f820e1a8..50489b2a 100644
--- a/src/date-picker/stylings.ts
+++ b/src/date-picker/stylings.ts
@@ -64,6 +64,14 @@ export const datePickerStyling = css`
   display: flex;
   margin: 0 -4px 0 0;
 }
+
+.month-pagination > [data-navigation="previous"],
+.month-pagination > [data-navigation="next"] {
+  max-width: 48px;
+  max-height: 48px;
+  min-width: 48px;
+  min-height: 48px;
+}
 /** #endregion header */
 
 .year-grid {