feat(item navigation): add paging behaviour (#1116)

Author: fifoosid

packages/base/src/delegate/ItemNavigation.js

@@ -10,6 +10,7 @@ import {
 import EventProvider from "../EventProvider.js";
 import UI5Element from "../UI5Element.js";
 import NavigationMode from "../types/NavigationMode.js";
+import ItemNavigationBehavior from "../types/ItemNavigationBehavior.js";
 
 // navigatable items must have id and tabindex
 class ItemNavigation extends EventProvider {
@@ -19,6 +20,7 @@ class ItemNavigation extends EventProvider {
 		this.currentIndex = options.currentIndex || 0;
 		this.rowSize = options.rowSize || 1;
 		this.cyclic = options.cyclic || false;
+		this.behavior = options.behavior || ItemNavigationBehavior.Static;
 
 		const navigationMode = options.navigationMode;
 		const autoNavigation = !navigationMode || navigationMode === NavigationMode.Auto;
@@ -48,17 +50,24 @@ class ItemNavigation extends EventProvider {
 
 	_onKeyPress(event) {
 		const items = this._getItems();
-
 		if (this.currentIndex >= items.length) {
-			if (!this.cyclic) {
-				this.currentIndex = items.length - 1;
+			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;
 			}
 		} else if (this.currentIndex < 0) {
-			if (!this.cyclic) {
-				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;

packages/base/src/types/ItemNavigationBehavior.js

@@ -0,0 +1,21 @@
+/**
+ * @private
+ * Different behavior for ItemNavigation.
+ */
+const ItemNavigationBehavior = {
+	/**
+	* Static behavior: when border of the items is reached, you can't go out of the cage.
+ 	*/
+	Static: "Static",
+
+	/**
+	* Cycling behavior: when border of the items is reached, you can cycle through the items.
+ 	*/
+	Cyclic: "Cyclic",
+
+	/**
+	* Paging behavior: when border of the items is reached, tou can go up/down based on the rowsize(e.g. DayPicker)
+ 	*/
+	Paging: "Paging",
+};
+export default ItemNavigationBehavior;

packages/core/overlay/sap/ui/core/date/UniversalDate.js

@@ -239,7 +239,7 @@ sap.ui.define(['sap/ui/base/Object', 'sap/ui/core/LocaleData', 'sap/ui/core/date
 			oFirstDay = getFirstDayOfFirstWeek(clDate, iYear),
 			oDate = new clDate(oFirstDay.valueOf() + iWeek * iMillisecondsInWeek);
 		//If first day of week is in last year and region is US, return the
-		//1st of January instead for symmetric behaviour
+		//1st of January instead for symmetric behavior
 		if (oLocale.getRegion() === "US" && iWeek === 0 && oFirstDay.getUTCFullYear() < iYear) {
 			return {
 				year: iYear,

packages/fiori/test/specs/ShellBar.spec.js

@@ -1,6 +1,6 @@
 const assert = require("chai").assert;
 
-describe("Component Behaviour", () => {
+describe("Component Behavior", () => {
 	browser.url("http://localhost:8081/test-resources/pages/ShellBar.html");
 
 	describe("Responsiveness", () => {

packages/main/src/DayPicker.js

@@ -11,6 +11,7 @@ import LocaleData from "@ui5/webcomponents-utils/dist/sap/ui/core/LocaleData.js"
 import CalendarDate from "@ui5/webcomponents-base/dist/dates/CalendarDate.js";
 import { calculateWeekNumber } from "@ui5/webcomponents-base/dist/dates/CalendarUtils.js";
 import CalendarType from "@ui5/webcomponents-base/dist/dates/CalendarType.js";
+import ItemNavigationBehavior from "@ui5/webcomponents-base/dist/types/ItemNavigationBehavior.js";
 import DayPickerTemplate from "./generated/templates/DayPickerTemplate.lit.js";
 
 // Styles
@@ -118,7 +119,7 @@ class DayPicker extends UI5Element {
 		this._oLocale = getFormatLocale();
 		this._oLocaleData = new LocaleData(this._oLocale);
 
-		this._itemNav = new ItemNavigation(this, { rowSize: 7 });
+		this._itemNav = new ItemNavigation(this, { rowSize: 7, behavior: ItemNavigationBehavior.Paging });
 		this._itemNav.getItemsCallback = function getItemsCallback() {
 			return [].concat(...this._weeks);
 		}.bind(this);

packages/main/src/MonthPicker.js

@@ -9,6 +9,7 @@ import LocaleData from "@ui5/webcomponents-utils/dist/sap/ui/core/LocaleData.js"
 import { getLocale } from "@ui5/webcomponents-base/dist/LocaleProvider.js";
 import CalendarType from "@ui5/webcomponents-base/dist/dates/CalendarType.js";
 import CalendarDate from "@ui5/webcomponents-base/dist/dates/CalendarDate.js";
+import ItemNavigationBehavior from "@ui5/webcomponents-base/dist/types/ItemNavigationBehavior.js";
 import MonthPickerTemplate from "./generated/templates/MonthPickerTemplate.lit.js";
 
 // Styles
@@ -91,7 +92,7 @@ class MonthPicker extends UI5Element {
 		this._oLocale = getFormatLocale();
 		this._oLocaleData = new LocaleData(this._oLocale);
 
-		this._itemNav = new ItemNavigation(this, { rowSize: 3, cyclic: true });
+		this._itemNav = new ItemNavigation(this, { rowSize: 3, behavior: ItemNavigationBehavior.Cyclic });
 		this._itemNav.getItemsCallback = function getItemsCallback() {
 			return [].concat(...this._quarters);
 		}.bind(this);

packages/utils/overlay/sap/ui/core/date/UniversalDate.js

@@ -239,7 +239,7 @@ sap.ui.define(['sap/ui/base/Object', 'sap/ui/core/LocaleData', 'sap/ui/core/date
 			oFirstDay = getFirstDayOfFirstWeek(clDate, iYear),
 			oDate = new clDate(oFirstDay.valueOf() + iWeek * iMillisecondsInWeek);
 		//If first day of week is in last year and region is US, return the
-		//1st of January instead for symmetric behaviour
+		//1st of January instead for symmetric behavior
 		if (oLocale.getRegion() === "US" && iWeek === 0 && oFirstDay.getUTCFullYear() < iYear) {
 			return {
 				year: iYear,