Skip to content

Commit

Permalink
feat(ui5-duration-picker): implement hide-hours & hide-minutes proper…
Browse files Browse the repository at this point in the history 
…erties (#1604)
  • Loading branch information
@fifoosid
fifoosid committed May 13, 2020
1 parent 2dd97cf commit 0af9b00
Show file tree
Hide file tree
Showing 5 changed files with 125 additions and 36 deletions.
69 changes: 60 additions & 9 deletions packages/main/src/DurationPicker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,13 +78,36 @@ const metadata = {
maxValue: {
type: String,
},

/**
* Defines whether a slider for secconds will be available. By default there are sliders for hours and minutes only.
* Defines whether a slider for seconds will be available. By default there are sliders for hours, minutes and seconds.
* @type {boolean}
* @defaultvalue false
* @public
*/
showSeconds: {
hideSeconds: {
type: Boolean,
},

/**
* Defines whether the slider for minutes will be available. By default there are sliders for hours, minutes and seconds.
* @type {boolean}
* @defaultvalue false
* @public
* @since 1.0.0-rc.8
*/
hideMinutes: {
type: Boolean,
},

/**
* Defines whether the slider for hours will be available. By default there are sliders for hours, minutes and seconds.
* @type {boolean}
* @defaultvalue false
* @public
* @since 1.0.0-rc.8
*/
hideHours: {
type: Boolean,
},

Expand Down Expand Up @@ -248,7 +271,7 @@ class DurationPicker extends UI5Element {
}

normalizaValue() {
this.value = `${this.selectedHours || "00"}:${this.selectedMinutes || "00"}${this.showSeconds ? `:${this.selectedSeconds || "00"}` : ""}`;
this.value = `${!this.hideHours ? this.selectedHours || "00" : ""}${!this.hideHours && !this.hideMinutes ? ":" : ""}${!this.hideMinutes ? this.selectedMinutes || "00" : ""}${!this.hideSeconds ? `:${this.selectedSeconds || "00"}` : ""}`;
}

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

getSecondsFromFormattedValue(destructuredValues) {
if (this.hideSeconds) {
return "";
}

if (this.hideHours && this.hideMinutes) {
return destructuredValues[0];
}

if (this.hideHours || this.hideMinutes) {
return destructuredValues[1];
}

return destructuredValues[2];
}

getMinutesFromFormattedValue(destructuredValues) {
if (this.hideMinutes) {
return "";
}

if (this.hideHours) {
return destructuredValues[0];
}

return destructuredValues[1];
}

setSelectedValues() {
const destructuredValues = this.readFormattedValue(this.value || "");
let currentHours = destructuredValues[0],
currentMinutes = destructuredValues[1],
currentSeconds = destructuredValues[2];
let currentHours = this.hideHours ? "" : destructuredValues[0],
currentMinutes = this.getMinutesFromFormattedValue(destructuredValues), // this.hideHours && !this.hideMinutes ? destructuredValues[0] : "",
currentSeconds = this.getSecondsFromFormattedValue(destructuredValues); // this.hideHours && this.hideHours ? destructuredValues[0] : {};

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

if (currentMinutes > -1) {
if (parseInt(currentMinutes) % this.minutesStep !== 0) {
if (currentMinutes && parseInt(currentMinutes) % this.minutesStep !== 0) {
currentMinutes = this.findNearestStep(currentMinutes, this.minutesStep);
}
if (this._maxValue[0] && this.selectedHours === this._maxValue[0]) {
Expand All @@ -288,7 +339,7 @@ class DurationPicker extends UI5Element {
}

if (currentSeconds > -1) {
if (parseInt(currentSeconds) % this.secondsStep !== 0) {
if (currentSeconds && 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]) {
Expand Down Expand Up @@ -375,7 +426,7 @@ class DurationPicker extends UI5Element {

submitPickers() {
const prevValue = this.value;
this.value = `${this.hoursSlider.value}:${this.minutesSlider.value}${this.showSeconds ? `:${this.secondsSlider.value}` : ""}`;
this.value = `${!this.hideHours ? this.hoursSlider.value : ""}${!this.hideHours && !this.hideMinutes ? ":" : ""}${!this.hideMinutes ? this.minutesSlider.value : ""}${!this.hideSeconds ? `:${this.secondsSlider.value}` : ""}`;
this.togglePicker();
if (prevValue !== this.value) {
this.fireEvent("change", { value: this.value });
Expand Down
38 changes: 22 additions & 16 deletions packages/main/src/DurationPickerPopover.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,29 +10,35 @@

>
<div class="{{classes.container}}">
<ui5-wheelslider
cyclic="true"
._items="{{hoursArray}}"
value="{{selectedHours}}"
class="ui5-duration-picker-wheelslider ui5-duration-picker-hours-wheelslider"
label = "{{hoursSliderTitle}}"
></ui5-wheelslider>
<ui5-wheelslider
cyclic="true"
._items="{{minutesArray}}"
value="{{selectedMinutes}}"
class="ui5-duration-picker-wheelslider ui5-duration-picker-minutes-wheelslider"
label = "{{minutesSliderTitle}}"
></ui5-wheelslider>
{{#if showSeconds}}
{{#unless hideHours}}
<ui5-wheelslider
cyclic="true"
._items="{{hoursArray}}"
value="{{selectedHours}}"
class="ui5-duration-picker-wheelslider ui5-duration-picker-hours-wheelslider"
label = "{{hoursSliderTitle}}"
></ui5-wheelslider>
{{/unless}}

{{#unless hideMinutes}}
<ui5-wheelslider
cyclic="true"
._items="{{minutesArray}}"
value="{{selectedMinutes}}"
class="ui5-duration-picker-wheelslider ui5-duration-picker-minutes-wheelslider"
label = "{{minutesSliderTitle}}"
></ui5-wheelslider>
{{/unless}}

{{#unless hideSeconds}}
<ui5-wheelslider
cyclic="true"
._items="{{secondsArray}}"
value="{{selectedSeconds}}"
class="ui5-duration-picker-wheelslider ui5-duration-picker-seconds-wheelslider"
label = "{{secondsSliderTitle}}"
></ui5-wheelslider>
{{/if}}
{{/unless}}
</div>

<div slot="footer" class="ui5-duration-picker-footer" @keydown={{_onfooterkeydown}}>
Expand Down
14 changes: 8 additions & 6 deletions packages/main/test/pages/DurationPicker.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,11 +30,13 @@
<br>
<br>

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

<br>

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

<br>
<br>
Expand All @@ -43,8 +45,8 @@

<br>

<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>
<ui5-duration-picker value="7:20:10" max-value="05:10:08" id="duration-picker4"></ui5-duration-picker>
<ui5-duration-picker max-value="05:10:08" value="05:10:00" id="duration-picker5"></ui5-duration-picker>

<br>
<br>
Expand All @@ -53,7 +55,7 @@

<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>
<ui5-duration-picker value="05:10:02" seconds-step="5" id="duration-picker6"></ui5-duration-picker>
<ui5-duration-picker value="05:12" minutes-step="5" hide-seconds id="duration-picker7"></ui5-duration-picker>
</body>
</html>
22 changes: 17 additions & 5 deletions packages/main/test/samples/DurationPicker.sample.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,14 +20,26 @@ <h3>Basic Duration Picker</h3>
</section>

<section>
<h3>Duration Picker With Seconds & Steps</h3>
<h3>Duration Picker With 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>
<ui5-duration-picker value="05:08:32" 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>
<ui5-duration-picker value="05:08:32" seconds-step="5" minutes-step="10"></ui5-duration-picker>
</xmp></pre>
</section>

<section>
<h3>Duration Picker With No Seconds, Minutes or Hours</h3>
<div class="snippet">
<ui5-duration-picker value="05:00" hide-seconds></ui5-duration-picker>
<ui5-duration-picker value="01:30" hide-minutes></ui5-duration-picker>
<ui5-duration-picker value="10:30" hide-hours></ui5-duration-picker>
</div>
<pre class="prettyprint lang-html"><xmp>
<ui5-duration-picker value="05:00" hide-seconds></ui5-duration-picker>
<ui5-duration-picker value="01:30" hide-minutes></ui5-duration-picker>
<ui5-duration-picker value="10:30" hide-hours></ui5-duration-picker>
</xmp></pre>
</section>

Expand Down
18 changes: 18 additions & 0 deletions packages/main/test/specs/DurationPicker.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,4 +63,22 @@ describe("Duration Picker general interaction", () => {
assert.strictEqual(durationPicker.getProperty("value"), "05:10", "Editing the value is taking in consideration the minutes-step property");
});

it("Tests hide-seconds property", () => {
const durationPicker = browser.$("#duration-picker3");

assert.strictEqual(durationPicker.getProperty("value"), "07:20", "Hours and minutes are considered");
});

it("Tests hide-minutes property", () => {
const durationPicker = browser.$("#duration-picker3-1");

assert.strictEqual(durationPicker.getProperty("value"), "07:10", "Hours and seconds are considered");
});

it("Tests hide-hours property", () => {
const durationPicker = browser.$("#duration-picker3-2");

assert.strictEqual(durationPicker.getProperty("value"), "20:10", "Minutes and seconds are considered");
});

});

0 comments on commit 0af9b00

Please sign in to comment.