feat(ui5-duration-picker): implement seconds-step & minutes-step properties (#1603)

Author: fifoosid

packages/main/src/DurationPicker.js

@@ -4,6 +4,7 @@ import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import { isShow } from "@ui5/webcomponents-base/dist/Keys.js";
 import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
+import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import DurationPickerTemplate from "./generated/templates/DurationPickerTemplate.lit.js";
 import PopoverPlacementType from "./types/PopoverPlacementType.js";
 import PopoverHorizontalAlign from "./types/PopoverHorizontalAlign.js";
@@ -43,6 +44,30 @@ const metadata = {
 			defaultValue: "00:00:00",
 		},
 
+		/**
+		 * Defines the selection step for the minutes
+		 * @type {Integer}
+		 * @public
+		 * @defaultValue 1
+		 * @since 1.0.0-rc.8
+		 */
+		minutesStep: {
+			type: Integer,
+			defaultValue: 1,
+		},
+
+		/**
+		 * Defines the selection step for the seconds
+		 * @type {Integer}
+		 * @public
+		 * @defaultValue 1
+		 * @since 1.0.0-rc.8
+		 */
+		secondsStep: {
+			type: Integer,
+			defaultValue: 1,
+		},
+
 		/**
 		 * Defines a formatted maximal time that the user will be able to adjust.
 		 *
@@ -227,8 +252,8 @@ class DurationPicker extends UI5Element {
 	}
 
 	/**
-	 * reads string from format hh:mm:ss
-	 * @private
+	 * reads string from format hh:mm:ss and returns an array which contains the hours, minutes and seconds
+	 * @param {string} value string in formathh:mm:ss
 	 */
 	readFormattedValue(value) {
 		value = value.replace(/\s/g, ""); // Remove spaces
@@ -250,6 +275,9 @@ class DurationPicker extends UI5Element {
 		}
 
 		if (currentMinutes > -1) {
+			if (parseInt(currentMinutes) % this.minutesStep !== 0) {
+				currentMinutes = this.findNearestStep(currentMinutes, this.minutesStep);
+			}
 			if (this._maxValue[0] && this.selectedHours === this._maxValue[0]) {
 				currentMinutes = currentMinutes > this._maxValue[1] ? this._maxValue[1] : currentMinutes;
 			} else if (currentMinutes > this._maxValue[1]) {
@@ -260,6 +288,9 @@ class DurationPicker extends UI5Element {
 		}
 
 		if (currentSeconds > -1) {
+			if (parseInt(currentSeconds) % this.secondsStep !== 0) {
+				currentSeconds = this.findNearestStep(currentSeconds, this.secondsStep);
+			}
 			if (this._maxValue[0] && this._maxValue[1] && this.selectedHours >= this._maxValue[0] && this.selectedSeconds >= this._maxValue[1]) {
 				currentSeconds = currentSeconds > this._maxValue[2] ? this._maxValue[2] : currentSeconds;
 			} else if (currentSeconds > this._maxValue[2]) {
@@ -296,21 +327,47 @@ class DurationPicker extends UI5Element {
 		this[`_${name}`] = temp;
 	}
 
+	findNearestStep(currentValue, step) {
+		const curr = parseInt(currentValue);
+		const biggerClosest = this._getClosest(curr, step, true),
+			lowerClosest = this._getClosest(curr, step, false);
+
+		const diffToBiggerClosest = biggerClosest - curr,
+			diffToLowerClosest = curr - lowerClosest;
+
+		return diffToBiggerClosest > diffToLowerClosest ? lowerClosest.toString() : biggerClosest.toString();
+	}
+
+	/**
+	 * Finds the nearest lower/bigger number to the givent curr
+	 * @param {Integer} curr the starting number
+	 * @param {Boolean} larger defines if we are searching for bigger or lower number
+	 */
+	_getClosest(curr, step, larger = true) {
+		while (curr % step !== 0) {
+			curr = larger ? ++curr : --curr;
+		}
+
+		return curr;
+	}
+
 	_onkeydown(event) {
 		if (isShow(event)) {
 			this.togglePicker();
 		}
 	}
 
-	generateTimeItemsArray(arrayLength) {
+	generateTimeItemsArray(arrayLength, step = 1) {
 		const resultArray = [];
 		for (let i = 0; i < arrayLength; i++) {
 			let tempString = i.toString();
 			if (tempString.length === 1) {
 				tempString = `0${tempString}`;
 			}
 
-			resultArray.push(tempString);
+			if (tempString % step === 0) {
+				resultArray.push(tempString);
+			}
 		}
 
 		return resultArray;
@@ -394,13 +451,13 @@ class DurationPicker extends UI5Element {
 	get minutesArray() {
 		const currentMinutes = parseInt(this.readFormattedValue(this.maxValue)[1]);
 		const minutes = currentMinutes && currentMinutes > 0 && currentMinutes < 60 ? currentMinutes + 1 : 60;
-		return this.generateTimeItemsArray(minutes);
+		return this.generateTimeItemsArray(minutes, this.minutesStep);
 	}
 
 	get secondsArray() {
 		const currentSeconds = parseInt(this.readFormattedValue(this.maxValue)[2]);
 		const seconds = currentSeconds && currentSeconds > 0 && currentSeconds < 60 ? currentSeconds + 1 : 60;
-		return this.generateTimeItemsArray(seconds);
+		return this.generateTimeItemsArray(seconds, this.secondsStep);
 	}
 
 	get secondsSlider() {

packages/main/test/pages/DurationPicker.html

@@ -27,12 +27,16 @@
 
 	<ui5-duration-picker readonly id="duration-picker2"></ui5-duration-picker>
 
+	<br>
+	<br>
+
 	<ui5-title>Duration Picker With Seconds</ui5-title>
 
 	<br>
 
 	<ui5-duration-picker show-seconds id="duration-picker3"></ui5-duration-picker>
 
+	<br>
 	<br>
 
 	<ui5-title>Duration Pickers With MaxValue</ui5-title>
@@ -41,5 +45,15 @@
 
 	<ui5-duration-picker value="7:20:10" max-value="05:10:08" show-seconds id="duration-picker4"></ui5-duration-picker>
 	<ui5-duration-picker max-value="05:10:08" value="05:10:00" show-seconds id="duration-picker5"></ui5-duration-picker>
+
+	<br>
+	<br>
+
+	<ui5-title>Duration Pickers With Step</ui5-title>
+
+	<br>
+
+	<ui5-duration-picker value="05:10:02" seconds-step="5" show-seconds id="duration-picker6"></ui5-duration-picker> 
+	<ui5-duration-picker  value="05:12" minutes-step="5" id="duration-picker7"></ui5-duration-picker>
 </body>
 </html>

packages/main/test/samples/DurationPicker.sample.html

@@ -20,12 +20,14 @@ <h3>Basic Duration Picker</h3>
 </section>
 
 <section>
-	<h3>Duration Picker With Seconds</h3>
+	<h3>Duration Picker With Seconds & Steps</h3>
 	<div class="snippet">
 			<ui5-duration-picker value="05:00:30" show-seconds></ui5-duration-picker>
+			<ui5-duration-picker value="05:08:32" show-seconds seconds-step="5" minutes-step="10"></ui5-duration-picker>
 	</div>
 	<pre class="prettyprint lang-html"><xmp>
 <ui5-duration-picker value="05:00:30" show-seconds></ui5-duration-picker>
+<ui5-duration-picker value="05:08:32" show-seconds seconds-step="5" minutes-step="10"></ui5-duration-picker>
 	</xmp></pre>
 </section>
 

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

@@ -37,4 +37,30 @@ describe("Duration Picker general interaction", () => {
 		assert.strictEqual(durationPicker.getProperty("_maxValue")[2], "08", "max value is read correctly");
 	});
 
+	it("Tests seconds-step property", () => {
+		const durationPicker = browser.$("#duration-picker6");
+
+		assert.strictEqual(durationPicker.getProperty("value"), "05:10:00", "The initial value is taking in consideration the seconds-step property");
+		
+		durationPicker.click();
+		durationPicker.keys("Backspace");
+		durationPicker.keys("2");
+		durationPicker.keys("Enter");
+		
+		assert.strictEqual(durationPicker.getProperty("value"), "05:10:00", "Editing the value is taking in consideration the seconds-step property");
+	});
+
+	it("Tests minutes-step property", () => {
+		const durationPicker = browser.$("#duration-picker7");
+
+		assert.strictEqual(durationPicker.getProperty("value"), "05:10", "The initial value is taking in consideration the minutes-step property");
+		
+		durationPicker.click();
+		durationPicker.keys("Backspace");
+		durationPicker.keys("2");
+		durationPicker.keys("Enter");
+		
+		assert.strictEqual(durationPicker.getProperty("value"), "05:10", "Editing the value is taking in consideration the minutes-step property");
+	});
+
 });