feat(ui5-datepicker): implement min and max date limits (#1040)

Author: tsanislavgatev

packages/base/src/delegate/ItemNavigation.js

@@ -1,3 +1,4 @@
+import RenderScheduler from "../RenderScheduler.js";
 import {
 	isDown,
 	isUp,
@@ -47,37 +48,19 @@ class ItemNavigation extends EventProvider {
 		return this.verticalNavigationOn;
 	}
 
-	_onKeyPress(event) {
-		const items = this._getItems();
-		if (this.currentIndex >= items.length) {
-			if (this.behavior !== ItemNavigationBehavior.Cyclic) {
-				if (this.behavior === ItemNavigationBehavior.Paging) {
-					this.currentIndex = this.currentIndex - items.length;
-				} else {
-					this.currentIndex = items.length - 1;
-				}
-				this.fireEvent(ItemNavigation.BORDER_REACH, { start: false, end: true, offset: this.currentIndex });
-			} else {
-				this.currentIndex = this.currentIndex - items.length;
-			}
+	async _onKeyPress(event) {
+		if (this.currentIndex >= this._getItems().length) {
+			this.onOverflowBottomEdge();
 		} else if (this.currentIndex < 0) {
-			if (this.behavior !== ItemNavigationBehavior.Cyclic) {
-				if (this.behavior === ItemNavigationBehavior.Paging) {
-					this.currentIndex = items.length + this.currentIndex - this.rowSize + (this.rowSize - (this._getItems().length % this.rowSize));
-				} else {
-					this.currentIndex = 0;
-				}
-				this.fireEvent(ItemNavigation.BORDER_REACH, { start: true, end: false, offset: this.currentIndex });
-			} else {
-				this.currentIndex = items.length + this.currentIndex;
-			}
+			this.onOverflowTopEdge();
 		}
 
+		event.preventDefault();
+
+		await RenderScheduler.whenFinished();
+
 		this.update();
 		this.focusCurrent();
-
-		// stops browser scrolling with up/down keys
-		event.preventDefault();
 	}
 
 	onkeydown(event) {
@@ -227,8 +210,65 @@ class ItemNavigation extends EventProvider {
 	set current(val) {
 		this.currentIndex = val;
 	}
+
+	onOverflowBottomEdge() {
+		const items = this._getItems();
+		const rowIndex = this.currentIndex - items.length;
+		if (this.behavior === ItemNavigationBehavior.Cyclic) {
+			return;
+		}
+
+		if (this.behavior === ItemNavigationBehavior.Paging) {
+			this._handleNextPage();
+		}
+
+		this.fireEvent(ItemNavigation.BORDER_REACH, {
+			start: false, end: true, offset: this.currentIndex, rowIndex,
+		});
+	}
+
+	onOverflowTopEdge() {
+		const items = this._getItems();
+		const rowIndex = this.currentIndex + this.rowSize;
+
+		if (this.behavior === ItemNavigationBehavior.Cyclic) {
+			this.currentIndex = items.length + this.currentIndex;
+			return;
+		}
+
+		if (this.behavior === ItemNavigationBehavior.Paging) {
+			this._handlePrevPage();
+		}
+
+		this.fireEvent(ItemNavigation.BORDER_REACH, {
+			start: true, end: false, offset: this.currentIndex, rowIndex,
+		});
+	}
+
+	_handleNextPage() {
+		this.fireEvent(ItemNavigation.PAGE_BOTTOM);
+		const items = this._getItems();
+
+		if (!this.hasNextPage) {
+			this.currentIndex = items.length - 1;
+		} else {
+			this.currentIndex = 0;
+		}
+	}
+
+	_handlePrevPage() {
+		this.fireEvent(ItemNavigation.PAGE_TOP);
+
+		if (!this.hasPrevPage) {
+			this.currentIndex = 0;
+		} else {
+			this.currentIndex = 41;
+		}
+	}
 }
 
+ItemNavigation.PAGE_TOP = "PageTop";
+ItemNavigation.PAGE_BOTTOM = "PageBottom";
 ItemNavigation.BORDER_REACH = "_borderReach";
 
 export default ItemNavigation;

packages/main/src/Calendar.hbs

@@ -9,6 +9,8 @@
 		@ui5-pressNext="{{_header.onPressNext}}"
 		@ui5-btn1Press="{{_header.onBtn1Press}}"
 		@ui5-btn2Press="{{_header.onBtn2Press}}"
+		._isNextButtonDisabled="{{_header._isNextButtonDisabled}}"
+		._isPrevButtonDisabled="{{_header._isPrevButtonDisabled}}"
 	></ui5-calendar-header>
 
 	<div id="{{_id}}-content">
@@ -19,6 +21,8 @@
 			.selectedDates="{{_oMonth.selectedDates}}"
 			._hidden="{{_oMonth._hidden}}"
 			.primaryCalendarType="{{_oMonth.primaryCalendarType}}"
+			.minDate="{{_oMonth.minDate}}"
+			.maxDate="{{_oMonth.maxDate}}"
 			timestamp="{{_oMonth.timestamp}}"
 			@ui5-selectionChange="{{_oMonth.onSelectedDatesChange}}"
 			@ui5-navigate="{{_oMonth.onNavigate}}"
@@ -27,17 +31,23 @@
 		<ui5-monthpicker
 			id="{{_id}}-MP"
 			class="{{classes.monthPicker}}"
+			format-pattern="{{_oMonth.formatPattern}}"
 			._hidden="{{_monthPicker._hidden}}"
 			.primaryCalendarType="{{_oMonth.primaryCalendarType}}"
+			.minDate="{{_oMonth.minDate}}"
+			.maxDate="{{_oMonth.maxDate}}"
 			timestamp="{{_monthPicker.timestamp}}"
 			@ui5-selectedMonthChange="{{_monthPicker.onSelectedMonthChange}}"
 		></ui5-monthpicker>
 
 		<ui5-yearpicker
 				id="{{_id}}-YP"
 				class="{{classes.yearPicker}}"
+				format-pattern="{{_oMonth.formatPattern}}"
 				._hidden="{{_yearPicker._hidden}}"
 				.primaryCalendarType="{{_oMonth.primaryCalendarType}}"
+				.minDate="{{_oMonth.minDate}}"
+				.maxDate="{{_oMonth.maxDate}}"
 				timestamp="{{_yearPicker.timestamp}}"
 				._selectedYear="{{_yearPicker._selectedYear}}"
 				@ui5-selectedYearChange="{{_yearPicker.onSelectedYearChange}}"