@ui5/webcomponents 1.0.0-rc.8 → 1.0.2

package/dist/YearPicker.js

@@ -1,18 +1,24 @@
-import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import LocaleData from "@ui5/webcomponents-localization/dist/LocaleData.js";
 import DateFormat from "@ui5/webcomponents-localization/dist/DateFormat.js";
-import { getCalendarType } from "@ui5/webcomponents-base/dist/config/CalendarType.js";
-import { isEnter, isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
-import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
-import getLocale from "@ui5/webcomponents-base/dist/locale/getLocale.js";
+import {
+	isEnter,
+	isSpace,
+	isDown,
+	isUp,
+	isLeft,
+	isRight,
+	isHome,
+	isEnd,
+	isHomeCtrl,
+	isEndCtrl,
+	isPageUp,
+	isPageDown,
+} from "@ui5/webcomponents-base/dist/Keys.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
-import CalendarType from "@ui5/webcomponents-base/dist/types/CalendarType.js";
+import getLocale from "@ui5/webcomponents-base/dist/locale/getLocale.js";
 import CalendarDate from "@ui5/webcomponents-localization/dist/dates/CalendarDate.js";
-import ItemNavigationBehavior from "@ui5/webcomponents-base/dist/types/ItemNavigationBehavior.js";
+import { getMaxCalendarDate } from "@ui5/webcomponents-localization/dist/dates/ExtremeDates.js";
+import CalendarPart from "./CalendarPart.js";
 import YearPickerTemplate from "./generated/templates/YearPickerTemplate.lit.js";
-
-// Styles
 import styles from "./generated/themes/YearPicker.css.js";
 
 /**
@@ -22,55 +28,17 @@ const metadata = {
 	tag: "ui5-yearpicker",
 	properties: /** @lends  sap.ui.webcomponents.main.YearPicker.prototype */ {
 		/**
-		 * A UNIX timestamp - seconds since 00:00:00 UTC on Jan 1, 1970.
-		 * @type {Integer}
+		 * An array of UTC timestamps representing the selected date or dates depending on the capabilities of the picker component.
+		 * @type {Array}
 		 * @public
 		 */
-		timestamp: {
+		selectedDates: {
 			type: Integer,
+			multiple: true,
+			compareValues: true,
 		},
 
-		/**
-		 * Sets a calendar type used for display.
-		 * If not set, the calendar type of the global configuration is used.
-		 * @type {CalendarType}
-		 * @public
-		 */
-		primaryCalendarType: {
-			type: CalendarType,
-		},
-
-		/**
-		 * Determines the мinimum date available for selection.
-		 *
-		 * @type {string}
-		 * @defaultvalue ""
-		 * @since 1.0.0-rc.6
-		 * @public
-		 */
-		minDate: {
-			type: String,
-		},
-
-		/**
-		 * Determines the maximum date available for selection.
-		 *
-		 * @type {string}
-		 * @defaultvalue undefined
-		 * @since 1.0.0-rc.6
-		 * @public
-		 */
-		maxDate: {
-			type: String,
-			defaultValue: undefined,
-		},
-
-		_selectedYear: {
-			type: Integer,
-			noAttribute: true,
-		},
-
-		_yearIntervals: {
+		_years: {
 			type: Object,
 			multiple: true,
 		},
@@ -79,27 +47,27 @@ const metadata = {
 			type: Boolean,
 			noAttribute: true,
 		},
-		/**
-		* Determines the format, displayed in the input field.
-		*
-		* @type {string}
-		* @defaultvalue ""
-		* @public
-		*/
-	   formatPattern: {
-		   type: String,
-	   },
 	},
 	events: /** @lends  sap.ui.webcomponents.main.YearPicker.prototype */ {
 		/**
-		 * Fired when the user selects a new Date on the Web Component.
+		 * Fired when the user selects a year (space/enter/click).
 		 * @public
 		 * @event
 		 */
 		change: {},
+		/**
+		 * Fired when the timestamp changes - the user navigates with the keyboard or clicks with the mouse.
+		 * @since 1.0.0-rc.9
+		 * @public
+		 * @event
+		 */
+		navigate: {},
 	},
 };
 
+const PAGE_SIZE = 20; // Total years on a single page
+const ROW_SIZE = 4; // Years per row (5 rows of 4 years each)
+
 /**
  * @class
  *
@@ -108,11 +76,11 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.YearPicker
- * @extends sap.ui.webcomponents.base.UI5Element
+ * @extends CalendarPart
  * @tagname ui5-yearpicker
  * @public
  */
-class YearPicker extends UI5Element {
+class YearPicker extends CalendarPart {
 	static get metadata() {
 		return metadata;
 	}
@@ -121,265 +89,235 @@ class YearPicker extends UI5Element {
 		return styles;
 	}
 
-	static get render() {
-		return litRender;
-	}
-
 	static get template() {
 		return YearPickerTemplate;
 	}
 
-	constructor() {
-		super();
-
-		this._oLocale = getLocale();
-
-		this._itemNav = new ItemNavigation(this, {
-			pageSize: 20,
-			rowSize: 4,
-			behavior: ItemNavigationBehavior.Paging,
-		});
-
-		this._itemNav.getItemsCallback = function getItemsCallback() {
-			const focusableYears = [];
+	onBeforeRendering() {
+		this._buildYears();
+	}
 
-			for (let i = 0; i < this._yearIntervals.length; i++) {
-				const yearInterval = this._yearIntervals[i].filter(x => !x.disabled);
-				focusableYears.push(yearInterval);
-			}
+	_buildYears() {
+		if (this._hidden) {
+			return;
+		}
 
-			return [].concat(...focusableYears);
-		}.bind(this);
+		const oYearFormat = DateFormat.getDateInstance({ format: "y", calendarType: this._primaryCalendarType }, getLocale());
 
-		this._itemNav.attachEvent(
-			ItemNavigation.BORDER_REACH,
-			this._handleItemNavigationBorderReach.bind(this)
-		);
+		this._calculateFirstYear();
+		this._lastYear = this._firstYear + PAGE_SIZE - 1;
 
-		this._yearIntervals = [];
-	}
-
-	onBeforeRendering() {
-		const oYearFormat = DateFormat.getDateInstance({ format: "y", calendarType: this._primaryCalendarType }, this._oLocale);
-		const oCalDate = this._calendarDate;
-		oCalDate.setMonth(0);
-		oCalDate.setDate(1);
-		if (oCalDate.getYear() - YearPicker._MIDDLE_ITEM_INDEX - 1 > YearPicker._MAX_YEAR - YearPicker._ITEMS_COUNT) {
-			oCalDate.setYear(YearPicker._MAX_YEAR - YearPicker._ITEMS_COUNT);
-		} else if (oCalDate.getYear() - YearPicker._MIDDLE_ITEM_INDEX - 1 < YearPicker._MIN_YEAR) {
-			oCalDate.setYear(YearPicker._MIN_YEAR - 1);
-		} else {
-			oCalDate.setYear(oCalDate.getYear() - YearPicker._MIDDLE_ITEM_INDEX - 1);
-		}
+		const calendarDate = this._calendarDate; // store the value of the expensive getter
+		const minDate = this._minDate; // store the value of the expensive getter
+		const maxDate = this._maxDate; // store the value of the expensive getter
+		const tempDate = new CalendarDate(calendarDate, this._primaryCalendarType);
+		tempDate.setYear(this._firstYear);
 
 		const intervals = [];
 		let timestamp;
 
-		if (this._selectedYear === undefined) {
-			this._selectedYear = this._year;
-		}
-
-		for (let i = 0; i < YearPicker._ITEMS_COUNT; i++) {
-			const intervalIndex = parseInt(i / 4);
-			if (!intervals[intervalIndex]) {
-				intervals[intervalIndex] = [];
-			}
+		/* eslint-disable no-loop-func */
+		for (let i = 0; i < PAGE_SIZE; i++) {
+			timestamp = tempDate.valueOf() / 1000;
 
-			oCalDate.setYear(oCalDate.getYear() + 1);
-
-			timestamp = oCalDate.valueOf() / 1000;
+			const isSelected = this.selectedDates.some(itemTimestamp => {
+				const date = CalendarDate.fromTimestamp(itemTimestamp * 1000, this._primaryCalendarType);
+				return date.getYear() === tempDate.getYear();
+			});
+			const isFocused = tempDate.getYear() === calendarDate.getYear();
+			const isDisabled = tempDate.getYear() < minDate.getYear() || tempDate.getYear() > maxDate.getYear();
 
 			const year = {
 				timestamp: timestamp.toString(),
-				id: `${this._id}-y${timestamp}`,
-				year: oYearFormat.format(oCalDate.toLocalJSDate()),
+				_tabIndex: isFocused ? "0" : "-1",
+				focusRef: isFocused,
+				selected: isSelected,
+				ariaSelected: isSelected ? "true" : "false",
+				year: oYearFormat.format(tempDate.toLocalJSDate()),
+				disabled: isDisabled,
 				classes: "ui5-yp-item",
 			};
 
-			if (oCalDate.getYear() === this._selectedYear) {
+			if (isSelected) {
 				year.classes += " ui5-yp-item--selected";
 			}
 
-			if ((this.minDate || this.maxDate) && this._isOutOfSelectableRange(oCalDate.getYear())) {
+			if (isDisabled) {
 				year.classes += " ui5-yp-item--disabled";
-				year.disabled = true;
 			}
 
+			const intervalIndex = parseInt(i / ROW_SIZE);
+
 			if (intervals[intervalIndex]) {
 				intervals[intervalIndex].push(year);
+			} else {
+				intervals[intervalIndex] = [year];
 			}
-		}
-
-		this._yearIntervals = intervals;
-	}
 
-	onAfterRendering() {
-		this._itemNav.focusCurrent();
-	}
-
-	get _timestamp() {
-		return this.timestamp !== undefined ? this.timestamp : Math.floor(new Date().getTime() / 1000);
-	}
-
-	get _localDate() {
-		return new Date(this._timestamp * 1000);
-	}
-
-	get _calendarDate() {
-		return CalendarDate.fromTimestamp(this._localDate.getTime(), this._primaryCalendarType);
-	}
+			tempDate.setYear(tempDate.getYear() + 1);
+		}
 
-	get _year() {
-		return this._calendarDate.getYear();
+		this._years = intervals;
 	}
 
-	get _primaryCalendarType() {
-		return this.primaryCalendarType || getCalendarType() || LocaleData.getInstance(getLocale()).getPreferredCalendarType();
-	}
+	_calculateFirstYear() {
+		const absoluteMaxYear = getMaxCalendarDate(this._primaryCalendarType).getYear(); // 9999
+		const currentYear = this._calendarDate.getYear();
 
-	get _isPattern() {
-		return this._formatPattern !== "medium" && this._formatPattern !== "short" && this._formatPattern !== "long";
-	}
-
-	_onclick(event) {
-		if (event.target.className.indexOf("ui5-yp-item") > -1) {
-			const timestamp = this.getTimestampFromDom(event.target);
-			this.timestamp = timestamp;
-			this._selectedYear = this._year;
-			this._itemNav.current = YearPicker._MIDDLE_ITEM_INDEX;
-			this.fireEvent("change", { timestamp });
+		// 1. If first load - center the current year (set first year to be current year minus half page size)
+		if (!this._firstYear) {
+			this._firstYear = currentYear - PAGE_SIZE / 2;
 		}
-	}
 
-	getTimestampFromDom(domNode) {
-		const sTimestamp = domNode.getAttribute("data-sap-timestamp");
-		return parseInt(sTimestamp);
-	}
-
-	_onkeydown(event) {
-		if (isEnter(event)) {
-			return this._handleEnter(event);
+		// 2. If out of range - change by a page (20) - do not center in order to keep the same position as the last page
+		if (currentYear < this._firstYear) {
+			this._firstYear -= PAGE_SIZE;
+		} else if (currentYear >= this._firstYear + PAGE_SIZE) {
+			this._firstYear += PAGE_SIZE;
 		}
 
-		if (isSpace(event)) {
-			return this._handleSpace(event);
+		// 3. If the date was changed by more than 20 years - reset _firstYear completely
+		if (Math.abs(this._firstYear - currentYear) >= PAGE_SIZE) {
+			this._firstYear = currentYear - PAGE_SIZE / 2;
 		}
-	}
 
-	_handleEnter(event) {
-		event.preventDefault();
-		if (event.target.className.indexOf("ui5-yp-item") > -1) {
-			const timestamp = this.getTimestampFromDom(event.target);
+		// Keep it in the range between the min and max year
+		this._firstYear = Math.max(this._firstYear, this._minDate.getYear());
+		this._firstYear = Math.min(this._firstYear, this._maxDate.getYear());
 
-			this.timestamp = timestamp;
-			this._selectedYear = this._year;
-			this._itemNav.current = YearPicker._MIDDLE_ITEM_INDEX;
-			this.fireEvent("change", { timestamp });
+		// If first year is > 9980, make it 9980 to not show any years beyond 9999
+		if (this._firstYear > absoluteMaxYear - PAGE_SIZE + 1) {
+			this._firstYear = absoluteMaxYear - PAGE_SIZE + 1;
 		}
 	}
 
-	_handleSpace(event) {
-		event.preventDefault();
-		if (event.target.className.indexOf("ui5-yp-item") > -1) {
-			const timestamp = this.getTimestampFromDom(event.target);
-
-			this._selectedYear = CalendarDate.fromTimestamp(
-				timestamp * 1000,
-				this._primaryCalendarType
-			).getYear();
+	onAfterRendering() {
+		if (!this._hidden) {
+			this.focus();
 		}
 	}
 
-	_handleItemNavigationBorderReach(event) {
-		const oCalDate = this._calendarDate;
-		oCalDate.setMonth(0);
-		oCalDate.setDate(1);
-
-		if (event.end) {
-			oCalDate.setYear(oCalDate.getYear() + YearPicker._ITEMS_COUNT);
-		} else if (event.start) {
-			if (oCalDate.getYear() - YearPicker._MIDDLE_ITEM_INDEX < YearPicker._MIN_YEAR) {
-				return;
-			}
-			oCalDate.setYear(oCalDate.getYear() - YearPicker._ITEMS_COUNT);
-		}
-
-		if (oCalDate.getYear() - YearPicker._MIDDLE_ITEM_INDEX > YearPicker._MAX_YEAR) {
-			return;
-		}
+	_onkeydown(event) {
+		let preventDefault = true;
 
-		if (this._isOutOfSelectableRange(oCalDate.getYear() - YearPicker._MIDDLE_ITEM_INDEX)
-		&& this._isOutOfSelectableRange(oCalDate.getYear() + YearPicker._MIDDLE_ITEM_INDEX)) {
-			return;
+		if (isEnter(event)) {
+			this._selectYear(event);
+		} else if (isSpace(event)) {
+			event.preventDefault();
+		} else if (isLeft(event)) {
+			this._modifyTimestampBy(-1);
+		} else if (isRight(event)) {
+			this._modifyTimestampBy(1);
+		} else if (isUp(event)) {
+			this._modifyTimestampBy(-ROW_SIZE);
+		} else if (isDown(event)) {
+			this._modifyTimestampBy(ROW_SIZE);
+		} else if (isPageUp(event)) {
+			this._modifyTimestampBy(-PAGE_SIZE);
+		} else if (isPageDown(event)) {
+			this._modifyTimestampBy(PAGE_SIZE);
+		} else if (isHome(event) || isEnd(event)) {
+			this._onHomeOrEnd(isHome(event));
+		} else if (isHomeCtrl(event)) {
+			this._setTimestamp(parseInt(this._years[0][0].timestamp)); // first year of first row
+		} else if (isEndCtrl(event)) {
+			this._setTimestamp(parseInt(this._years[PAGE_SIZE / ROW_SIZE - 1][ROW_SIZE - 1].timestamp)); // last year of last row
+		} else {
+			preventDefault = false;
 		}
 
-		if (this._isOutOfSelectableRange(oCalDate.getYear() - YearPicker._MIDDLE_ITEM_INDEX)
-		&& this._isOutOfSelectableRange(oCalDate.getYear() + YearPicker._MIDDLE_ITEM_INDEX)) {
-			return;
+		if (preventDefault) {
+			event.preventDefault();
 		}
-
-		this.timestamp = oCalDate.valueOf() / 1000;
 	}
 
-	get _formatPattern() {
-		return this.formatPattern || "medium"; // get from config
+	_onHomeOrEnd(homePressed) {
+		this._years.forEach(row => {
+			const indexInRow = row.findIndex(item => CalendarDate.fromTimestamp(parseInt(item.timestamp) * 1000).getYear() === this._calendarDate.getYear());
+			if (indexInRow !== -1) { // The current year is on this row
+				const index = homePressed ? 0 : ROW_SIZE - 1; // select the first (if Home) or last (if End) year on the row
+				this._setTimestamp(parseInt(row[index].timestamp));
+			}
+		});
 	}
 
-	_isOutOfSelectableRange(year) {
-		const minDate = new Date(this._minDate),
-			maxDate = new Date(this._maxDate),
-			minDateCheck = minDate && year < minDate.getFullYear(),
-			maxDateCheck = maxDate && year > maxDate.getFullYear();
+	/**
+	 * Sets the timestamp to an absolute value
+	 * @param value
+	 * @private
+	 */
+	_setTimestamp(value) {
+		this._safelySetTimestamp(value);
+		this.fireEvent("navigate", { timestamp: this.timestamp });
+	}
 
-		return minDateCheck || maxDateCheck;
+	/**
+	 * Modifies timestamp by a given amount of years and, if necessary, loads the prev/next page
+	 * @param amount
+	 * @private
+	 */
+	_modifyTimestampBy(amount) {
+		// Modify the current timestamp
+		this._safelyModifyTimestampBy(amount, "year");
+
+		// Notify the calendar to update its timestamp
+		this.fireEvent("navigate", { timestamp: this.timestamp });
 	}
 
-	get _maxDate() {
-		if (this.maxDate) {
-			const jsDate = new Date(this.getFormat().parse(this.maxDate).getFullYear(), this.getFormat().parse(this.maxDate).getMonth(), this.getFormat().parse(this.maxDate).getDate());
-			const oCalDate = CalendarDate.fromTimestamp(jsDate.getTime(), this._primaryCalendarType);
-			return oCalDate.valueOf();
+	_onkeyup(event) {
+		if (isSpace(event)) {
+			this._selectYear(event);
 		}
-		return this.maxDate;
 	}
 
-	get _minDate() {
-		if (this.minDate) {
-			const jsDate = new Date(this.getFormat().parse(this.minDate).getFullYear(), this.getFormat().parse(this.minDate).getMonth(), this.getFormat().parse(this.minDate).getDate());
-			const oCalDate = CalendarDate.fromTimestamp(jsDate.getTime(), this._primaryCalendarType);
-			return oCalDate.valueOf();
+	/**
+	 * User clicked with the mouser or pressed Enter/Space
+	 * @param event
+	 * @private
+	 */
+	_selectYear(event) {
+		event.preventDefault();
+		if (event.target.className.indexOf("ui5-yp-item") > -1) {
+			const timestamp = this._getTimestampFromDom(event.target);
+			this._safelySetTimestamp(timestamp);
+			this.fireEvent("change", { timestamp: this.timestamp });
 		}
-		return this.minDate;
 	}
 
-	getFormat() {
-		if (this._isPattern) {
-			this._oDateFormat = DateFormat.getInstance({
-				pattern: this._formatPattern,
-				calendarType: this._primaryCalendarType,
-			});
-		} else {
-			this._oDateFormat = DateFormat.getInstance({
-				style: this._formatPattern,
-				calendarType: this._primaryCalendarType,
-			});
-		}
-		return this._oDateFormat;
+	/**
+	 * Called from Calendar.js
+	 * @protected
+	 */
+	_hasPreviousPage() {
+		return this._firstYear > this._minDate.getYear();
 	}
 
-	get styles() {
-		return {
-			main: {
-				display: this._hidden ? "none" : "",
-			},
-		};
+	/**
+	 * Called from Calendar.js
+	 * @protected
+	 */
+	_hasNextPage() {
+		return this._firstYear + PAGE_SIZE - 1 < this._maxDate.getYear();
+	}
+
+	/**
+	 * Called by Calendar.js
+	 * User pressed the "<" button in the calendar header (same as PageUp)
+	 * @protected
+	 */
+	_showPreviousPage() {
+		this._modifyTimestampBy(-PAGE_SIZE);
 	}
-}
 
-YearPicker._ITEMS_COUNT = 20;
-YearPicker._MIDDLE_ITEM_INDEX = 7;
-YearPicker._MAX_YEAR = 9999;
-YearPicker._MIN_YEAR = 1;
+	/**
+	 * Called by Calendar.js
+	 * User pressed the ">" button in the calendar header (same as PageDown)
+	 * @protected
+	 */
+	_showNextPage() {
+		this._modifyTimestampBy(PAGE_SIZE);
+	}
+}
 
 YearPicker.define();