Skip to content

Commit 0af9b00

Browse files
fifoosidfifoosid
authored
feat(ui5-duration-picker): implement hide-hours & hide-minutes propererties (#1604)
1 parent 2dd97cf commit 0af9b00

File tree

5 files changed

+125
-36
lines changed

5 files changed

+125
-36
lines changed

‎packages/main/src/DurationPicker.js

+60-9
Original file line numberDiff line numberDiff line change
@@ -78,13 +78,36 @@ const metadata = {
7878
maxValue: {
7979
type: String,
8080
},
81+
8182
/**
82-
* Defines whether a slider for secconds will be available. By default there are sliders for hours and minutes only.
83+
* Defines whether a slider for seconds will be available. By default there are sliders for hours, minutes and seconds.
8384
* @type {boolean}
8485
* @defaultvalue false
8586
* @public
8687
*/
87-
showSeconds: {
88+
hideSeconds: {
89+
type: Boolean,
90+
},
91+
92+
/**
93+
* Defines whether the slider for minutes will be available. By default there are sliders for hours, minutes and seconds.
94+
* @type {boolean}
95+
* @defaultvalue false
96+
* @public
97+
* @since 1.0.0-rc.8
98+
*/
99+
hideMinutes: {
100+
type: Boolean,
101+
},
102+
103+
/**
104+
* Defines whether the slider for hours will be available. By default there are sliders for hours, minutes and seconds.
105+
* @type {boolean}
106+
* @defaultvalue false
107+
* @public
108+
* @since 1.0.0-rc.8
109+
*/
110+
hideHours: {
88111
type: Boolean,
89112
},
90113

@@ -248,7 +271,7 @@ class DurationPicker extends UI5Element {
248271
}
249272

250273
normalizaValue() {
251-
this.value = `${this.selectedHours || "00"}:${this.selectedMinutes || "00"}${this.showSeconds ? `:${this.selectedSeconds || "00"}` : ""}`;
274+
this.value = `${!this.hideHours ? this.selectedHours || "00" : ""}${!this.hideHours && !this.hideMinutes ? ":" : ""}${!this.hideMinutes ? this.selectedMinutes || "00" : ""}${!this.hideSeconds ? `:${this.selectedSeconds || "00"}` : ""}`;
252275
}
253276

254277
/**
@@ -260,11 +283,39 @@ class DurationPicker extends UI5Element {
260283
return value.split(":");
261284
}
262285

286+
getSecondsFromFormattedValue(destructuredValues) {
287+
if (this.hideSeconds) {
288+
return "";
289+
}
290+
291+
if (this.hideHours && this.hideMinutes) {
292+
return destructuredValues[0];
293+
}
294+
295+
if (this.hideHours || this.hideMinutes) {
296+
return destructuredValues[1];
297+
}
298+
299+
return destructuredValues[2];
300+
}
301+
302+
getMinutesFromFormattedValue(destructuredValues) {
303+
if (this.hideMinutes) {
304+
return "";
305+
}
306+
307+
if (this.hideHours) {
308+
return destructuredValues[0];
309+
}
310+
311+
return destructuredValues[1];
312+
}
313+
263314
setSelectedValues() {
264315
const destructuredValues = this.readFormattedValue(this.value || "");
265-
let currentHours = destructuredValues[0],
266-
currentMinutes = destructuredValues[1],
267-
currentSeconds = destructuredValues[2];
316+
let currentHours = this.hideHours ? "" : destructuredValues[0],
317+
currentMinutes = this.getMinutesFromFormattedValue(destructuredValues), // this.hideHours && !this.hideMinutes ? destructuredValues[0] : "",
318+
currentSeconds = this.getSecondsFromFormattedValue(destructuredValues); // this.hideHours && this.hideHours ? destructuredValues[0] : {};
268319

269320
if (currentHours > -1) {
270321
if (currentHours > this._maxValue[0]) {
@@ -275,7 +326,7 @@ class DurationPicker extends UI5Element {
275326
}
276327

277328
if (currentMinutes > -1) {
278-
if (parseInt(currentMinutes) % this.minutesStep !== 0) {
329+
if (currentMinutes && parseInt(currentMinutes) % this.minutesStep !== 0) {
279330
currentMinutes = this.findNearestStep(currentMinutes, this.minutesStep);
280331
}
281332
if (this._maxValue[0] && this.selectedHours === this._maxValue[0]) {
@@ -288,7 +339,7 @@ class DurationPicker extends UI5Element {
288339
}
289340

290341
if (currentSeconds > -1) {
291-
if (parseInt(currentSeconds) % this.secondsStep !== 0) {
342+
if (currentSeconds && parseInt(currentSeconds) % this.secondsStep !== 0) {
292343
currentSeconds = this.findNearestStep(currentSeconds, this.secondsStep);
293344
}
294345
if (this._maxValue[0] && this._maxValue[1] && this.selectedHours >= this._maxValue[0] && this.selectedSeconds >= this._maxValue[1]) {
@@ -375,7 +426,7 @@ class DurationPicker extends UI5Element {
375426

376427
submitPickers() {
377428
const prevValue = this.value;
378-
this.value = `${this.hoursSlider.value}:${this.minutesSlider.value}${this.showSeconds ? `:${this.secondsSlider.value}` : ""}`;
429+
this.value = `${!this.hideHours ? this.hoursSlider.value : ""}${!this.hideHours && !this.hideMinutes ? ":" : ""}${!this.hideMinutes ? this.minutesSlider.value : ""}${!this.hideSeconds ? `:${this.secondsSlider.value}` : ""}`;
379430
this.togglePicker();
380431
if (prevValue !== this.value) {
381432
this.fireEvent("change", { value: this.value });

‎packages/main/src/DurationPickerPopover.hbs

+22-16
Original file line numberDiff line numberDiff line change
@@ -10,29 +10,35 @@
1010

1111
>
1212
<div class="{{classes.container}}">
13-
<ui5-wheelslider
14-
cyclic="true"
15-
._items="{{hoursArray}}"
16-
value="{{selectedHours}}"
17-
class="ui5-duration-picker-wheelslider ui5-duration-picker-hours-wheelslider"
18-
label = "{{hoursSliderTitle}}"
19-
></ui5-wheelslider>
20-
<ui5-wheelslider
21-
cyclic="true"
22-
._items="{{minutesArray}}"
23-
value="{{selectedMinutes}}"
24-
class="ui5-duration-picker-wheelslider ui5-duration-picker-minutes-wheelslider"
25-
label = "{{minutesSliderTitle}}"
26-
></ui5-wheelslider>
27-
{{#if showSeconds}}
13+
{{#unless hideHours}}
14+
<ui5-wheelslider
15+
cyclic="true"
16+
._items="{{hoursArray}}"
17+
value="{{selectedHours}}"
18+
class="ui5-duration-picker-wheelslider ui5-duration-picker-hours-wheelslider"
19+
label = "{{hoursSliderTitle}}"
20+
></ui5-wheelslider>
21+
{{/unless}}
22+
23+
{{#unless hideMinutes}}
24+
<ui5-wheelslider
25+
cyclic="true"
26+
._items="{{minutesArray}}"
27+
value="{{selectedMinutes}}"
28+
class="ui5-duration-picker-wheelslider ui5-duration-picker-minutes-wheelslider"
29+
label = "{{minutesSliderTitle}}"
30+
></ui5-wheelslider>
31+
{{/unless}}
32+
33+
{{#unless hideSeconds}}
2834
<ui5-wheelslider
2935
cyclic="true"
3036
._items="{{secondsArray}}"
3137
value="{{selectedSeconds}}"
3238
class="ui5-duration-picker-wheelslider ui5-duration-picker-seconds-wheelslider"
3339
label = "{{secondsSliderTitle}}"
3440
></ui5-wheelslider>
35-
{{/if}}
41+
{{/unless}}
3642
</div>
3743

3844
<div slot="footer" class="ui5-duration-picker-footer" @keydown={{_onfooterkeydown}}>

‎packages/main/test/pages/DurationPicker.html

+8-6
Original file line numberDiff line numberDiff line change
@@ -30,11 +30,13 @@
3030
<br>
3131
<br>
3232

33-
<ui5-title>Duration Picker With Seconds</ui5-title>
33+
<ui5-title>Duration Picker With No Seconds, Minutes or Hours</ui5-title>
3434

3535
<br>
3636

37-
<ui5-duration-picker show-seconds id="duration-picker3"></ui5-duration-picker>
37+
<ui5-duration-picker value="7:20" hide-seconds id="duration-picker3"></ui5-duration-picker>
38+
<ui5-duration-picker value="7:10" hide-minutes id="duration-picker3-1"></ui5-duration-picker>
39+
<ui5-duration-picker value="20:10" hide-hours id="duration-picker3-2"></ui5-duration-picker>
3840

3941
<br>
4042
<br>
@@ -43,8 +45,8 @@
4345

4446
<br>
4547

46-
<ui5-duration-picker value="7:20:10" max-value="05:10:08" show-seconds id="duration-picker4"></ui5-duration-picker>
47-
<ui5-duration-picker max-value="05:10:08" value="05:10:00" show-seconds id="duration-picker5"></ui5-duration-picker>
48+
<ui5-duration-picker value="7:20:10" max-value="05:10:08" id="duration-picker4"></ui5-duration-picker>
49+
<ui5-duration-picker max-value="05:10:08" value="05:10:00" id="duration-picker5"></ui5-duration-picker>
4850

4951
<br>
5052
<br>
@@ -53,7 +55,7 @@
5355

5456
<br>
5557

56-
<ui5-duration-picker value="05:10:02" seconds-step="5" show-seconds id="duration-picker6"></ui5-duration-picker>
57-
<ui5-duration-picker value="05:12" minutes-step="5" id="duration-picker7"></ui5-duration-picker>
58+
<ui5-duration-picker value="05:10:02" seconds-step="5" id="duration-picker6"></ui5-duration-picker>
59+
<ui5-duration-picker value="05:12" minutes-step="5" hide-seconds id="duration-picker7"></ui5-duration-picker>
5860
</body>
5961
</html>

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

+17-5
Original file line numberDiff line numberDiff line change
@@ -20,14 +20,26 @@ <h3>Basic Duration Picker</h3>
2020
</section>
2121

2222
<section>
23-
<h3>Duration Picker With Seconds & Steps</h3>
23+
<h3>Duration Picker With Steps</h3>
2424
<div class="snippet">
25-
<ui5-duration-picker value="05:00:30" show-seconds></ui5-duration-picker>
26-
<ui5-duration-picker value="05:08:32" show-seconds seconds-step="5" minutes-step="10"></ui5-duration-picker>
25+
<ui5-duration-picker value="05:08:32" seconds-step="5" minutes-step="10"></ui5-duration-picker>
2726
</div>
2827
<pre class="prettyprint lang-html"><xmp>
29-
<ui5-duration-picker value="05:00:30" show-seconds></ui5-duration-picker>
30-
<ui5-duration-picker value="05:08:32" show-seconds seconds-step="5" minutes-step="10"></ui5-duration-picker>
28+
<ui5-duration-picker value="05:08:32" seconds-step="5" minutes-step="10"></ui5-duration-picker>
29+
</xmp></pre>
30+
</section>
31+
32+
<section>
33+
<h3>Duration Picker With No Seconds, Minutes or Hours</h3>
34+
<div class="snippet">
35+
<ui5-duration-picker value="05:00" hide-seconds></ui5-duration-picker>
36+
<ui5-duration-picker value="01:30" hide-minutes></ui5-duration-picker>
37+
<ui5-duration-picker value="10:30" hide-hours></ui5-duration-picker>
38+
</div>
39+
<pre class="prettyprint lang-html"><xmp>
40+
<ui5-duration-picker value="05:00" hide-seconds></ui5-duration-picker>
41+
<ui5-duration-picker value="01:30" hide-minutes></ui5-duration-picker>
42+
<ui5-duration-picker value="10:30" hide-hours></ui5-duration-picker>
3143
</xmp></pre>
3244
</section>
3345

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

+18
Original file line numberDiff line numberDiff line change
@@ -63,4 +63,22 @@ describe("Duration Picker general interaction", () => {
6363
assert.strictEqual(durationPicker.getProperty("value"), "05:10", "Editing the value is taking in consideration the minutes-step property");
6464
});
6565

66+
it("Tests hide-seconds property", () => {
67+
const durationPicker = browser.$("#duration-picker3");
68+
69+
assert.strictEqual(durationPicker.getProperty("value"), "07:20", "Hours and minutes are considered");
70+
});
71+
72+
it("Tests hide-minutes property", () => {
73+
const durationPicker = browser.$("#duration-picker3-1");
74+
75+
assert.strictEqual(durationPicker.getProperty("value"), "07:10", "Hours and seconds are considered");
76+
});
77+
78+
it("Tests hide-hours property", () => {
79+
const durationPicker = browser.$("#duration-picker3-2");
80+
81+
assert.strictEqual(durationPicker.getProperty("value"), "20:10", "Minutes and seconds are considered");
82+
});
83+
6684
});

0 commit comments

Comments
 (0)