Skip to content

Commit

Permalink
feat(ui5-multi-input): initial implementation (#1942)
Browse files Browse the repository at this point in the history
  • Loading branch information
MapTo0 authored Aug 13, 2020
1 parent f69ffa5 commit 5d7e7df
Show file tree
Hide file tree
Showing 24 changed files with 1,163 additions and 104 deletions.
1 change: 1 addition & 0 deletions packages/main/bundle.esm.js
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ import Dialog from "./dist/Dialog.js";
import FileUploader from "./dist/FileUploader.js";
import Icon from "./dist/Icon.js";
import Input from "./dist/Input.js";
import MultiInput from "./dist/MultiInput.js";
import Label from "./dist/Label.js";
import Link from "./dist/Link.js";
import Popover from "./dist/Popover.js";
Expand Down
8 changes: 4 additions & 4 deletions packages/main/src/DatePicker.js
Original file line number Diff line number Diff line change
Expand Up @@ -475,8 +475,8 @@ class DatePicker extends UI5Element {
return this.shadowRoot.querySelector("ui5-input");
}

_handleInputChange() {
let nextValue = this._getInput().getInputValue();
async _handleInputChange() {
let nextValue = await this._getInput().getInputValue();
const emptyValue = nextValue === "";
const isValid = emptyValue || this._checkValueValidity(nextValue);

Expand All @@ -494,8 +494,8 @@ class DatePicker extends UI5Element {
this.fireEvent("value-changed", { value: nextValue, valid: isValid });
}

_handleInputLiveChange() {
const nextValue = this._getInput().getInputValue();
async _handleInputLiveChange() {
const nextValue = await this._getInput().getInputValue();
const emptyValue = nextValue === "";
const isValid = emptyValue || this._checkValueValidity(nextValue);

Expand Down
8 changes: 4 additions & 4 deletions packages/main/src/DateRangePicker.js
Original file line number Diff line number Diff line change
Expand Up @@ -249,10 +249,10 @@ class DateRangePicker extends DatePicker {
return this.placeholder !== undefined ? this.placeholder : this._displayFormat.concat(" ", this.delimiter, " ", this._displayFormat);
}

_handleInputChange() {
const nextValue = this._getInput().getInputValue(),
emptyValue = nextValue === "",
isValid = emptyValue || this._checkValueValidity(nextValue);
async _handleInputChange() {
const nextValue = await this._getInput().getInputValue();
const emptyValue = nextValue === "";
const isValid = emptyValue || this._checkValueValidity(nextValue);

if (isValid) {
this._setValue(nextValue);
Expand Down
6 changes: 5 additions & 1 deletion packages/main/src/Input.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@
@keydown="{{_onkeydown}}"
@keyup="{{_onkeyup}}"
@click={{_click}}
@focusin={{innerFocusIn}}
data-sap-no-tab-ref
data-sap-focus-ref
step="{{step}}"
Expand All @@ -39,6 +40,8 @@
</div>
{{/if}}

{{> postContent }}

{{#if showSuggestions}}
<span id="{{_id}}-suggestionsText" class="ui5-hidden-text">{{suggestionsText}}</span>
<span id="{{_id}}-selectionText" class="ui5-hidden-text" aria-live="polite" role="status"></span>
Expand All @@ -58,4 +61,5 @@
</div>


{{#*inline "preContent"}}{{/inline}}
{{#*inline "preContent"}}{{/inline}}
{{#*inline "postContent"}}{{/inline}}
62 changes: 28 additions & 34 deletions packages/main/src/Input.js
Original file line number Diff line number Diff line change
Expand Up @@ -547,7 +547,7 @@ class Input extends UI5Element {
}
}

onAfterRendering() {
async onAfterRendering() {
if (!this.firstRendering && !isPhone() && this.Suggestions) {
const shouldOpenSuggestions = this.shouldOpenSuggestions();

Expand All @@ -562,7 +562,8 @@ class Input extends UI5Element {

if (!isPhone() && shouldOpenSuggestions) {
// Set initial focus to the native input
this.inputDomRef && this.inputDomRef.focus();

(await this.getInputDOMRef()).focus();
}
}

Expand Down Expand Up @@ -648,9 +649,7 @@ class Input extends UI5Element {
return;
}

if (this.popover) {
this.popover.close();
}
this.closePopover();

this.previousValue = "";
this.focused = false; // invalidating property
Expand All @@ -677,8 +676,9 @@ class Input extends UI5Element {
}

async _handleInput(event) {
await this.getInputDOMRef();
if (event.target === this.inputDomRef) {
const inputDomRef = await this.getInputDOMRef();

if (event.target === inputDomRef) {
// stop the native event, as the semantic "input" would be fired.
event.stopImmediatePropagation();
}
Expand All @@ -687,7 +687,7 @@ class Input extends UI5Element {
- value of the host and the internal input should be differnt in case of actual input
- input is called when a key is pressed => keyup should not be called yet
*/
const skipFiring = (this.inputDomRef.value === this.value) && isIE() && !this._keyDown && !!this.placeholder;
const skipFiring = (inputDomRef.value === this.value) && isIE() && !this._keyDown && !!this.placeholder;

!skipFiring && this.fireEventByAction(this.ACTION_USER_INPUT);

Expand All @@ -709,8 +709,7 @@ class Input extends UI5Element {
async _afterOpenPopover() {
// Set initial focus to the native input
if (isPhone()) {
await this.getInputDOMRef();
this.inputDomRef.focus();
(await this.getInputDOMRef()).focus();
}
}

Expand Down Expand Up @@ -741,18 +740,18 @@ class Input extends UI5Element {
}

async openPopover() {
this.popover = await this._getPopover();
if (this.popover) {
const popover = await this._getPopover();

if (popover) {
this._isPopoverOpen = true;
this.popover.openBy(this);
popover.openBy(this);
}
}

closePopover() {
if (this.isOpen()) {
this._isPopoverOpen = false;
this.popover && this.popover.close();
}
async closePopover() {
const popover = await this._getPopover();

popover && popover.close();
}

async _getPopover() {
Expand Down Expand Up @@ -791,14 +790,15 @@ class Input extends UI5Element {
? this.valueBeforeItemSelection !== itemText : this.value !== itemText;

this.hasSuggestionItemSelected = true;
this.fireEvent(this.EVENT_SUGGESTION_ITEM_SELECT, { item });

if (fireInput) {
this.value = itemText;
this.valueBeforeItemSelection = itemText;
this.fireEvent(this.EVENT_INPUT);
this.fireEvent(this.EVENT_CHANGE);
}

this.fireEvent(this.EVENT_SUGGESTION_ITEM_SELECT, { item });
}

previewSuggestion(item) {
Expand Down Expand Up @@ -839,7 +839,7 @@ class Input extends UI5Element {
return;
}

const inputValue = this.getInputValue();
const inputValue = await this.getInputValue();
const isSubmit = action === this.ACTION_ENTER;
const isUserInput = action === this.ACTION_USER_INPUT;

Expand Down Expand Up @@ -875,28 +875,22 @@ class Input extends UI5Element {
}
}

getInputValue() {
const inputDOM = this.getDomRef();
if (inputDOM) {
return this.inputDomRef.value;
async getInputValue() {
const domRef = this.getDomRef();

if (domRef) {
return (await this.getInputDOMRef()).value;
}
return "";
}

async getInputDOMRef() {
let inputDomRef;

if (isPhone() && this.Suggestions) {
if (isPhone() && this.Suggestions && this.suggestionItems.length) {
await this.Suggestions._respPopover();
inputDomRef = this.Suggestions && this.Suggestions.responsivePopover.querySelector(".ui5-input-inner-phone");
}

if (!inputDomRef) {
inputDomRef = this.getDomRef().querySelector(`#${this.getInputId()}`);
return this.Suggestions && this.Suggestions.responsivePopover.querySelector(".ui5-input-inner-phone");
}

this.inputDomRef = inputDomRef;
return this.inputDomRef;
return this.getDomRef().querySelector(`input`);
}

getLabelableElementId() {
Expand Down
10 changes: 5 additions & 5 deletions packages/main/src/MultiComboBox.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -21,12 +21,12 @@
{{#each items}}
{{#if this.selected}}
<ui5-token
?readonly="{{../readonly}}"
class="ui5-multi-combobox-token"
data-ui5-id="{{this._id}}"
part="token-{{@index}}"
?readonly="{{../readonly}}"
class="ui5-multi-combobox-token"
data-ui5-id="{{this._id}}"
part="token-{{@index}}"
text="{{this.text}}"
>
{{this.text}}
</ui5-token>
{{/if}}
{{/each}}
Expand Down
2 changes: 1 addition & 1 deletion packages/main/src/MultiComboBox.js
Original file line number Diff line number Diff line change
Expand Up @@ -410,7 +410,7 @@ class MultiComboBox extends UI5Element {

tokenizer.tokens.forEach(token => { token.selected = false; });

this._tokenizer.contentDom.scrollLeft = 0;
this._tokenizer.scrollToStart();

if (tokensCount === 0 && this._deleting) {
setTimeout(() => {
Expand Down
29 changes: 29 additions & 0 deletions packages/main/src/MultiInput.hbs
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
{{>include "./Input.hbs"}}

{{#*inline "preContent"}}
<ui5-tokenizer
class="ui5-multi-input-tokenizer"
.morePopoverOpener={{this}}
.popoverMinWidth={{_inputWidth}}
?expanded="{{expandedTokenizer}}"
show-more
@show-more-items-press={{showMorePress}}
@token-delete={{tokenDelete}}
@focusout="{{_tokenizerFocusOut}}"
>
<slot name="tokens"></slot>
</ui5-tokenizer>
{{/inline}}


{{#*inline "postContent"}}
{{#if showValueHelpIcon}}
<ui5-icon
@click={{valueHelpPress}}
@mousedown={{valueHelpMouseDown}}
@mouseup={{valueHelpMouseUp}}
input-icon
name="value-help"
></ui5-icon>
{{/if}}
{{/inline}}
Loading

0 comments on commit 5d7e7df

Please sign in to comment.