Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(ui5-step-input): inintial implementation #2804

Merged
merged 11 commits into from
Feb 22, 2021
Prev Previous commit
Next Next commit
feat(ui5-stepinput): Pretty working varsion
  • Loading branch information
NHristov-sap committed Feb 10, 2021
commit 7d1a55451d12c325cb1c53971abf5761582c5271
4 changes: 3 additions & 1 deletion packages/main/src/Input.hbs
Original file line number Diff line number Diff line change
@@ -34,7 +34,9 @@
@focusin={{innerFocusIn}}
data-sap-no-tab-ref
data-sap-focus-ref
step="{{step}}"
step="{{accInfo.input.step}}"
min="{{accInfo.input.min}}"
max="{{accInfo.input.max}}"
/>
{{#if icon.length}}
<div class="ui5-input-icon-root">
3 changes: 3 additions & 0 deletions packages/main/src/Input.js
Original file line number Diff line number Diff line change
@@ -1068,6 +1068,9 @@ class Input extends UI5Element {
"ariaExpanded": this._inputAccInfo && this._inputAccInfo.ariaExpanded,
"ariaDescription": this._inputAccInfo && this._inputAccInfo.ariaDescription,
"ariaLabel": (this._inputAccInfo && this._inputAccInfo.ariaLabel) || getEffectiveAriaLabelText(this),
"min": this._inputAccInfo.min,
"max": this._inputAccInfo.max,
"step": this.type === InputType.Number ? (this._inputAccInfo.step || "any") : undefined,
},
};
}
8 changes: 5 additions & 3 deletions packages/main/src/StepInput.hbs
Original file line number Diff line number Diff line change
@@ -19,6 +19,7 @@
?interactive="{{_decIconInteractive}}"
?defocused="{{_disableFocus}}"
@click="{{_decValue}}"
@focusout="{{_onButtonFocusOut}}"
input-icon
></ui5-icon>
</div>
@@ -39,7 +40,8 @@
._inputAccInfo ="{{accInfo}}"
@ui5-change="{{_onInputChange}}"
@ui5-submit="{{_onInputChange}}"
@focusout="{{_onInputChange}}"
@focusout="{{_onInputFocusOut}}"
@focusin="{{_onInputFocusIn}}"
>
</ui5-input>

@@ -54,9 +56,9 @@
tabindex="-1"
accessible-name="{{incIconTitle}}"
?interactive="{{_incIconInteractive}}"
?defocused="{{_disableFocus}}"
@click="{{_incValue}}"
@mousedown="{{_onmousedown}}"
@mouseup="{{_onmouseup}}"
@focusout="{{_onButtonFocusOut}}"
input-icon
></ui5-icon>
</div>
73 changes: 45 additions & 28 deletions packages/main/src/StepInput.js
Original file line number Diff line number Diff line change
@@ -224,19 +224,28 @@ const metadata = {

_decIconDisabled: {
type: Boolean,
noAttribute: true,
},

_incIconDisabled: {
type: Boolean,
noAttribute: true,
},

_focused: {
type: Boolean,
noAttribute: true,
},

_inputFocused: {
type: Boolean,
noAttribute: true,
},

_previousValue: {
type: Float,
}
noAttribute: true,
},

},
slots: /** @lends sap.ui.webcomponents.main.StepInput.prototype */ {
@@ -289,6 +298,12 @@ const metadata = {
* @public
*/
class StepInput extends UI5Element {

constructor() {
super();
this.i18nBundle = getI18nBundle("@ui5/webcomponents");
}

static get metadata() {
return metadata;
}
@@ -297,11 +312,6 @@ class StepInput extends UI5Element {
return litRender;
}

constructor() {
super();
this.i18nBundle = getI18nBundle("@ui5/webcomponents");
}

static get styles() {
return StepInputCss;
}
@@ -364,6 +374,31 @@ class StepInput extends UI5Element {
return this.value.toFixed(this.valuePrecision);
}

get accInfo() {
return {
min: isNaN(this.min) ? undefined : this.min,
max: isNaN(this.max) ? undefined : this.max,
step: this.step,
};
}

_onButtonFocusOut() {
setTimeout(function() {
if (!this._inputFocused) {
this._getInputOuter().removeAttribute("focused");
}
}.bind(this), 0);
}

_onInputFocusIn() {
this._inputFocused = true;
}

_onInputFocusOut() {
this._inputFocused = false;
this._onInputChange();
}

_getInput() {
return this.shadowRoot.querySelector("[ui5-input]");
}
@@ -397,7 +432,7 @@ class StepInput extends UI5Element {
_modifyValue(modifier, fireChangeEvent) {
let value;
this.value = this._preciseValue(parseFloat(this._getInput().value));
value = this.value + modifier; // USE sumValues from UI5 StepInput here
value = this.value + modifier;
if (!isNaN(this.min) && value < this.min) {
value = this.min;
}
@@ -419,9 +454,6 @@ class StepInput extends UI5Element {
}
}

_spinValue() {
}

_incValue(event) {
if (this._incIconInteractive && event.isTrusted && !this.disabled && !this.readonly) {
this._modifyValue(this.step, true);
@@ -436,14 +468,6 @@ class StepInput extends UI5Element {
}
}

_valueMin() {
if (this.min !== undefined) {
return this.min;
} else {
false;
}
}

/**
* The ui5-input "change" event handler - fire change event when the user focuses out of the input
* @protected
@@ -458,24 +482,14 @@ class StepInput extends UI5Element {
}
}

_onmousedown() {
// need this in order to implement SPIN functionality
}

_onmouseup() {
// need this in order to implement SPIN functionality
}

_onfocusin() {
this._focused = true;
this._validate();
this._buttonsState();
}

_onfocusout() {
this._focused = false;
this._validate();
this._buttonsState();
}

_onkeydown(event) {
@@ -508,6 +522,9 @@ class StepInput extends UI5Element {
}
}

onBeforeRendering() {
this._buttonsState();
}

static get dependencies() {
return [
21 changes: 11 additions & 10 deletions packages/main/src/themes/StepInput.css
Original file line number Diff line number Diff line change
@@ -3,6 +3,7 @@

:host(:not([hidden])) {
display: inline-block;
width: 100%;
}

:host {
@@ -50,8 +51,8 @@
}

:host .ui5-step-input-input {
width: auto;
min-width: inherit;
width: 100%;
min-width: 50%;
color: inherit;
background-color: inherit;
border: 1px solid transparent;
@@ -109,20 +110,20 @@
position: absolute;
content: "";
border: var(--_ui5_input_focus_border_width) dotted var(--sapContent_FocusColor);
top: 0.0625rem;
right: 0;
bottom: 0.0625rem;
left: 0;
top: 1px;
right: 1px;
bottom: 1px;
left: 1px;
outline: none;
pointer-events: none;
z-index: 2;
}

:host([value-state=Error]:not([readonly]):not([disabled])) .ui5-step-input-input[focused]::after {
top: 0.125rem;
right: 0.0625rem;
bottom: 0.125rem;
left: 0.0625rem;
top: 2px;
right: 2px;
bottom: 2px;
left: 2px;
}

/* Chrome, Safari, Edge, Opera */
Loading