Skip to content

Commit f02477b

Browse files
ilhan007ilhan007
authoredMar 26, 2020
fix(ui5-timepicker): fix JS Error, improve user XP and sample (#1362)
- when imported standalone, JS error is thrown - Gregorian calendar was missing. - allow user to set empty value or removing the current time with "BACKSPACE", instead of always setting the current time. - placeholder exists in the code, but never forwarded to the Input and not documented as part of the public API - show time format as placeholder, when no value - fix code snippets alignment in playground FIXES: #1357
·
v./29.5v0.0.0-7b49a7ff1
1 parent e2791b0 commit f02477b

File tree

7 files changed

+95
-37
lines changed

7 files changed

+95
-37
lines changed
 

‎packages/main/src/Input.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -702,7 +702,7 @@ class Input extends UI5Element {
702702
let inputDomRef;
703703

704704
if (isPhone()) {
705-
inputDomRef = this.Suggestions.responsivePopover.querySelector(".ui5-input-inner-phone");
705+
inputDomRef = this.Suggestions && this.Suggestions.responsivePopover.querySelector(".ui5-input-inner-phone");
706706
}
707707

708708
if (!inputDomRef) {

‎packages/main/src/TimePicker.hbs

+2
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,11 @@
22
<ui5-input
33
id="{{_id}}-inner"
44
value="{{value}}"
5+
placeholder="{{_placeholder}}"
56
?disabled="{{disabled}}"
67
?readonly="{{readonly}}"
78
value-state="{{valueState}}"
9+
@click="{{_handleInputClick}}"
810
@ui5-change="{{_handleInputChange}}"
911
@ui5-input="{{_handleInputLiveChange}}"
1012
>

‎packages/main/src/TimePicker.js

+36-4
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import getLocale from "@ui5/webcomponents-base/dist/locale/getLocale.js";
55
import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
66
import DateFormat from "@ui5/webcomponents-localization/dist/DateFormat.js";
77
import LocaleData from "@ui5/webcomponents-localization/dist/LocaleData.js";
8+
import "@ui5/webcomponents-localization/dist/features/calendar/Gregorian.js"; // default calendar for bundling
89
import { fetchCldr } from "@ui5/webcomponents-base/dist/asset-registries/LocaleData.js";
910
import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
1011
import {
@@ -54,6 +55,22 @@ const metadata = {
5455
defaultValue: "",
5556
},
5657

58+
/**
59+
* Defines a short hint, intended to aid the user with data entry when the
60+
* <code>ui5-timepicker</code> has no value.
61+
*
62+
* <b>Note:</b> When no placeholder is set, the format pattern is displayed as a placeholder.
63+
* Passing an empty string as the value of this property will make the <code>ui5-timepicker</code> appear empty - without placeholder or format pattern.
64+
*
65+
* @type {string}
66+
* @defaultvalue undefined
67+
* @public
68+
*/
69+
placeholder: {
70+
type: String,
71+
defaultValue: undefined,
72+
},
73+
5774
/**
5875
* Determines the format, displayed in the input field.
5976
*
@@ -132,7 +149,8 @@ const metadata = {
132149
},
133150
events: /** @lends sap.ui.webcomponents.main.TimePicker.prototype */ {
134151
/**
135-
* Fired when the input operation has finished by pressing Enter or on focusout.
152+
* Fired when the input operation has finished by clicking the "OK" button or
153+
* when the text in the input field has changed and the focus leaves the input field.
136154
*
137155
* @event
138156
* @public
@@ -260,12 +278,21 @@ class TimePicker extends UI5Element {
260278
this.formatPattern = LocaleData.getInstance(getLocale()).getTimePattern(this.getFormat().oFormatOptions.style);
261279
}
262280

263-
if (!this.value) {
264-
this.value = this.getFormat().format(new Date());
265-
}
266281
this._initHoursFormatParameters();
267282
}
268283

284+
_handleInputClick() {
285+
if (this._isPickerOpen) {
286+
return;
287+
}
288+
289+
const inputField = this._getInputField();
290+
291+
if (inputField) {
292+
inputField.select();
293+
}
294+
}
295+
269296
_handleInputChange() {
270297
const nextValue = this._getInput().getInputValue(),
271298
isValid = this.isValid(nextValue);
@@ -453,6 +480,11 @@ class TimePicker extends UI5Element {
453480
return this.shadowRoot.querySelector("ui5-input");
454481
}
455482

483+
_getInputField() {
484+
const input = this._getInput();
485+
return input && input.getInputDOMRef();
486+
}
487+
456488
get secondsSlider() {
457489
return this.responsivePopover && this.responsivePopover.querySelector(".ui5-timepicker-seconds-wheelslider");
458490
}

‎packages/main/src/i18n/messagebundle.properties

+1-1
Original file line numberDiff line numberDiff line change
@@ -277,7 +277,7 @@ TIMEPICKER_SECONDS_LABEL=Seconds
277277
TIMEPICKER_PERIODS_LABEL=AM/PM
278278

279279
#XFLD: Timepicker popover button
280-
TIMEPICKER_SUBMIT_BUTTON=Ok
280+
TIMEPICKER_SUBMIT_BUTTON=OK
281281

282282
#XFLD: Timepicker popover button
283283
TIMEPICKER_CANCEL_BUTTON=Cancel

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

+22
Original file line numberDiff line numberDiff line change
@@ -24,5 +24,27 @@
2424
<ui5-timepicker id="timepicker2" format-pattern="hh:mm:ss"></ui5-timepicker>
2525
<ui5-timepicker id="timepicker3" format-pattern="hh:mm:ss a"></ui5-timepicker>
2626
<ui5-timepicker id="timepicker3" format-pattern="HH:mm"></ui5-timepicker>
27+
28+
<br /><br />
29+
<ui5-title>Test "change" event</ui5-title>
30+
<ui5-timepicker id="timepickerChange"></ui5-timepicker>
31+
<ui5-input id="changeResult"></ui5-input>
32+
33+
<br /><br />
34+
<ui5-title>Test "input" event</ui5-title>
35+
<ui5-timepicker id="timepickerInput"></ui5-timepicker>
36+
<ui5-input id="inputResult"></ui5-input>
37+
38+
<script>
39+
var counter = 0;
40+
timepickerChange.addEventListener("change", function() {
41+
changeResult.value = ++counter;
42+
});
43+
44+
var inputCounter = 0;
45+
timepickerInput.addEventListener("input", function() {
46+
inputResult.value = ++inputCounter;
47+
});
48+
</script>
2749
</body>
2850
</html>

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

+17-17
Original file line numberDiff line numberDiff line change
@@ -14,29 +14,29 @@ <h3>Basic TimePicker</h3>
1414
<div class="snippet">
1515
<ui5-timepicker id="timepicker1"></ui5-timepicker>
1616
</div>
17-
<pre class="highlight">{% highlight html %}
18-
<ui5-timepicker id="timepicker1"></ui5-timepicker>
19-
{% endhighlight %}</pre>
17+
<pre class="prettyprint lang-html"><xmp>
18+
<ui5-timepicker id="timepicker1"></ui5-timepicker>
19+
</xmp></pre>
2020
</section>
2121

2222
<section>
23-
<h3>TimePicker in twelve hours format</h3>
24-
<div class="snippet">
25-
<ui5-timepicker id="timepicker1" format-pattern="hh:mm:ss a"></ui5-timepicker>
26-
</div>
27-
<pre class="highlight">{% highlight html %}
28-
<ui5-timepicker id="timepicker1" format-pattern="hh:mm:ss a"></ui5-timepicker>
29-
{% endhighlight %}</pre>
23+
<h3>TimePicker in twelve hours format</h3>
24+
<div class="snippet">
25+
<ui5-timepicker id="timepicker1" format-pattern="hh:mm:ss a"></ui5-timepicker>
26+
</div>
27+
<pre class="prettyprint lang-html"><xmp>
28+
<ui5-timepicker id="timepicker1" format-pattern="hh:mm:ss a"></ui5-timepicker>
29+
</xmp></pre>
3030
</section>
3131

3232
<section>
33-
<h3>TimePicker with only minutes and seconds</h3>
34-
<div class="snippet">
35-
<ui5-timepicker id="timepicker1" format-pattern="mm:ss"></ui5-timepicker>
36-
</div>
37-
<pre class="highlight">{% highlight html %}
38-
<ui5-timepicker id="timepicker1" format-pattern="mm:ss"></ui5-timepicker>
39-
{% endhighlight %}</pre>
33+
<h3>TimePicker with only minutes and seconds</h3>
34+
<div class="snippet">
35+
<ui5-timepicker id="timepicker1" format-pattern="mm:ss"></ui5-timepicker>
36+
</div>
37+
<pre class="prettyprint lang-html"><xmp>
38+
<ui5-timepicker id="timepicker1" format-pattern="mm:ss"></ui5-timepicker>
39+
</xmp></pre>
4040
</section>
4141

4242
<!-- JSDoc marker -->

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

+16-14
Original file line numberDiff line numberDiff line change
@@ -3,33 +3,35 @@ const assert = require("chai").assert;
33
describe("TimePicker general interaction", () => {
44
browser.url("http://localhost:8080/test-resources/pages/TimePicker.html");
55

6-
it("Check sliders value", () => {
6+
it("tests sliders value", () => {
77
browser.$("#timepicker").setProperty("value", "11:12:13");
88
browser.$("#timepicker").shadow$("ui5-input").$(".ui5-timepicker-input-icon-button").click();
9-
const hoursSliderValue = browser.$$(".ui5wc_1")[0].shadow$$(".ui5-timepicker-popover")[0].$(".ui5-timepicker-hours-wheelslider").getValue();
10-
const minutesSliderValue = browser.$$(".ui5wc_1")[0].shadow$$(".ui5-timepicker-popover")[0].$(".ui5-timepicker-minutes-wheelslider").getValue();
11-
const secondsSliderValue = browser.$$(".ui5wc_1")[0].shadow$$(".ui5-timepicker-popover")[0].$(".ui5-timepicker-seconds-wheelslider").getValue();
9+
10+
const timepickerPopover = browser.$$(".ui5wc_5")[0].shadow$$(".ui5-timepicker-popover")[0];
11+
const hoursSliderValue = timepickerPopover.$(".ui5-timepicker-hours-wheelslider").getValue();
12+
const minutesSliderValue = timepickerPopover.$(".ui5-timepicker-minutes-wheelslider").getValue();
13+
const secondsSliderValue = timepickerPopover.$(".ui5-timepicker-seconds-wheelslider").getValue();
14+
1215
assert.strictEqual(hoursSliderValue, "11", "Hours are equal");
1316
assert.strictEqual(minutesSliderValue, "12", "Minutes are equal");
1417
assert.strictEqual(secondsSliderValue, "13", "Minutes are equal");
1518
});
1619

17-
it("Sliders submit value", () => {
18-
browser.$$(".ui5wc_1")[0].shadow$$(".ui5-timepicker-popover")[0].setProperty("opened",true);
19-
browser.$$(".ui5wc_1")[0].shadow$$(".ui5-timepicker-popover")[0].$(".ui5-timepicker-hours-wheelslider").setProperty("value","14");
20-
browser.$$(".ui5wc_1")[0].shadow$$(".ui5-timepicker-popover")[0].$(".ui5-timepicker-minutes-wheelslider").setProperty("value","15");
21-
browser.$$(".ui5wc_1")[0].shadow$$(".ui5-timepicker-popover")[0].$(".ui5-timepicker-seconds-wheelslider").setProperty("value","16");
20+
it("tests sliders submit value", () => {
21+
const timepickerPopover = browser.$$(".ui5wc_5")[0].shadow$$(".ui5-timepicker-popover")[0];
2222

23-
// browser.$("#timepicker").shadow$$(".ui5-timepicker-popover")[0].setProperty("opened",true);
24-
browser.$$(".ui5wc_1")[0].shadow$$(".ui5-timepicker-popover")[0].$("#submit").click();
23+
timepickerPopover.setProperty("opened",true);
24+
timepickerPopover.$(".ui5-timepicker-hours-wheelslider").setProperty("value","14");
25+
timepickerPopover.$(".ui5-timepicker-minutes-wheelslider").setProperty("value","15");
26+
timepickerPopover.$(".ui5-timepicker-seconds-wheelslider").setProperty("value","16");
27+
timepickerPopover.$("#submit").click();
2528

26-
const textValue = browser.$("#timepicker").shadow$$("#ui5wc_1-inner")[0].getValue();
27-
29+
const textValue = browser.$("#timepicker").shadow$$("#ui5wc_5-inner")[0].getValue();
2830
assert.strictEqual(textValue.substring(0,2), "14", "Hours are equal");
2931
assert.strictEqual(textValue.substring(3,5), "15", "Minutes are equal");
3032
});
3133

32-
it("Wrong value submit", () => {
34+
it("tests submit wrong value", () => {
3335
browser.$("#timepicker").click();
3436
browser.$("#timepicker").keys("123123123");
3537
browser.$("#timepicker").keys("Enter");

0 commit comments

Comments
 (0)
Please sign in to comment.