refactor(ui5-daterange-picker): rename first/lastDateValue (#3397)

Part of #3107 (comment)

BREAKING_CHANGE: The readonly properties `firstDateValue` and `lastDateValue` have been renamed to `startDateValue` and `endDateValue`.

Author: ilhan007

packages/main/src/DateRangePicker.js

@@ -84,11 +84,11 @@ class DateRangePicker extends DatePicker {
 		return [DatePicker.styles, DateRangePickerCss];
 	}
 
-	get _firstDateTimestamp() {
+	get _startDateTimestamp() {
 		return this._extractFirstTimestamp(this.value);
 	}
 
-	get _lastDateTimestamp() {
+	get _endDateTimestamp() {
 		return this._extractLastTimestamp(this.value);
 	}
 
@@ -109,7 +109,7 @@ class DateRangePicker extends DatePicker {
 	 * @override
 	 */
 	get _calendarTimestamp() {
-		return this._tempTimestamp || this._firstDateTimestamp || getTodayUTCTimestamp(this._primaryCalendarType);
+		return this._tempTimestamp || this._startDateTimestamp || getTodayUTCTimestamp(this._primaryCalendarType);
 	}
 
 	/**
@@ -127,25 +127,25 @@ class DateRangePicker extends DatePicker {
 	}
 
 	/**
-	 * Currently selected first date represented as JavaScript Date instance.
+	 * Returns the start date of the currently selected range as JavaScript Date instance.
 	 *
 	 * @readonly
 	 * @type { Date }
 	 * @public
 	 */
-	get firstDateValue() {
-		return CalendarDate.fromTimestamp(this._firstDateTimestamp * 1000).toLocalJSDate();
+	get startDateValue() {
+		return CalendarDate.fromTimestamp(this._startDateTimestamp * 1000).toLocalJSDate();
 	}
 
 	/**
-	 * Currently selected last date represented as JavaScript Date instance.
+	 * Returns the end date of the currently selected range as JavaScript Date instance.
 	 *
 	 * @readonly
 	 * @type { Date }
 	 * @public
 	 */
-	get lastDateValue() {
-		return CalendarDate.fromTimestamp(this._lastDateTimestamp * 1000).toLocalJSDate();
+	get endDateValue() {
+		return CalendarDate.fromTimestamp(this._endDateTimestamp * 1000).toLocalJSDate();
 	}
 
 	/**
@@ -231,7 +231,7 @@ class DateRangePicker extends DatePicker {
 	 * @override
 	 */
 	async _modifyDateValue(amount, unit) {
-		if (!this._lastDateTimestamp) { // If empty or only one date -> treat as datepicker entirely
+		if (!this._endDateTimestamp) { // If empty or only one date -> treat as datepicker entirely
 			return super._modifyDateValue(amount, unit);
 		}
 
@@ -240,17 +240,17 @@ class DateRangePicker extends DatePicker {
 		let newValue;
 
 		if (caretPos <= this.value.indexOf(this._effectiveDelimiter)) { // The user is focusing the first date -> change it and keep the seoond date
-			const firstDateModified = modifyDateBy(CalendarDate.fromTimestamp(this._firstDateTimestamp * 1000), amount, unit, this._minDate, this._maxDate);
-			const newFirstDateTimestamp = firstDateModified.valueOf() / 1000;
-			if (newFirstDateTimestamp > this._lastDateTimestamp) { // dates flipped -> move the caret to the same position but on the last date
+			const startDateModified = modifyDateBy(CalendarDate.fromTimestamp(this._startDateTimestamp * 1000), amount, unit, this._minDate, this._maxDate);
+			const newStartDateTimestamp = startDateModified.valueOf() / 1000;
+			if (newStartDateTimestamp > this._endDateTimestamp) { // dates flipped -> move the caret to the same position but on the last date
 				caretPos += Math.ceil(this.value.length / 2);
 			}
-			newValue = this._buildValue(newFirstDateTimestamp, this._lastDateTimestamp); // the value will be normalized so we don't try to order them here
+			newValue = this._buildValue(newStartDateTimestamp, this._endDateTimestamp); // the value will be normalized so we don't try to order them here
 		} else {
-			const lastDateModified = modifyDateBy(CalendarDate.fromTimestamp(this._lastDateTimestamp * 1000), amount, unit, this._minDate, this._maxDate);
-			const newLastDateTimestamp = lastDateModified.valueOf() / 1000;
-			newValue = this._buildValue(this._firstDateTimestamp, newLastDateTimestamp); // the value will be normalized so we don't try to order them here
-			if (newLastDateTimestamp < this._firstDateTimestamp) { // dates flipped -> move the caret to the same position but on the first date
+			const endDateModified = modifyDateBy(CalendarDate.fromTimestamp(this._endDateTimestamp * 1000), amount, unit, this._minDate, this._maxDate);
+			const newEndDateTimestamp = endDateModified.valueOf() / 1000;
+			newValue = this._buildValue(this._startDateTimestamp, newEndDateTimestamp); // the value will be normalized so we don't try to order them here
+			if (newEndDateTimestamp < this._startDateTimestamp) { // dates flipped -> move the caret to the same position but on the first date
 				caretPos -= Math.ceil(this.value.length / 2);
 			}
 		}

packages/main/test/specs/DateRangePicker.spec.js

@@ -41,7 +41,7 @@ describe("DateRangePicker general interaction", () => {
 		assert.strictEqual(daterangepicker.getProperty("delimiter"), "@", "The delimiter is set to @");
 	});
 
-	it("firstDateValue and lastDateValue getter", () => {
+	it("startDateValue and endDateValue getter", () => {
 		browser.url(`http://localhost:${PORT}/test-resources/pages/DateRangePicker.html`);
 		const daterangepicker = browser.$("#daterange-picker4");
 
@@ -51,28 +51,28 @@ describe("DateRangePicker general interaction", () => {
 
 		const res = browser.execute(() => {
 			const myDRP = document.getElementById("daterange-picker4");
-			const firstDateValue = myDRP.firstDateValue;
-			const lastDateValue = myDRP.lastDateValue;
+			const startDateValue = myDRP.startDateValue;
+			const endDateValue = myDRP.endDateValue;
 
-			return {firstDateValue, lastDateValue};
+			return {startDateValue, endDateValue};
 		});
 
-		assert.deepEqual(new Date(res.firstDateValue), new Date(2019, 8, 27), "The first date is in JS Date format");
-		assert.deepEqual(new Date(res.lastDateValue), new Date(2019, 9, 10), "The last date is JS Date format");
+		assert.deepEqual(new Date(res.startDateValue), new Date(2019, 8, 27), "The first date is in JS Date format");
+		assert.deepEqual(new Date(res.endDateValue), new Date(2019, 9, 10), "The last date is JS Date format");
 	});
 
 	it("Initially setting the same date as first & last is possible", () => {
 		const daterangepicker = browser.$("#daterange-picker5");
 
-		assert.strictEqual(daterangepicker.getProperty("firstDateValue"), daterangepicker.getProperty("lastDateValue"), "Initially properties are set correctly");
+		assert.strictEqual(daterangepicker.getProperty("startDateValue"), daterangepicker.getProperty("endDateValue"), "Initially properties are set correctly");
 	});
 
 	it("Setting the same date as first & last is possible", () => {
 		const daterangepicker = browser.$("#daterange-picker5");
 
 		daterangepicker.setProperty("value", "Aug 5, 2020 - Aug 5, 2020");
 
-		assert.strictEqual(daterangepicker.getProperty("firstDateValue"), daterangepicker.getProperty("lastDateValue"), "Properties are set correctly");
+		assert.strictEqual(daterangepicker.getProperty("startDateValue"), daterangepicker.getProperty("endDateValue"), "Properties are set correctly");
 	})
 
 	it("Change event fired once", () => {