Skip to content

Commit

Permalink
New: Icon support for paper-chip-input
Browse files Browse the repository at this point in the history
  • Loading branch information
@leodido
Marco Feuerstein authored and leodido committed May 2, 2018
1 parent 19df4a5 commit 4cc5b5b
Show file tree
Hide file tree
Showing 2 changed files with 81 additions and 15 deletions.
80 changes: 73 additions & 7 deletions paper-chip-input.html
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,14 @@
<link rel="import" href="../polymer/polymer-element.html">
<link rel="import" href="../polymer/lib/elements/dom-if.html">
<link rel="import" href="../polymer/lib/elements/dom-repeat.html">
<link rel="import" href="./paper-chip.html">
<link rel="import" href="../iron-input/iron-input.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../paper-input/paper-input-behavior.html">
<link rel="import" href="../paper-input/paper-input-container.html">
<link rel="import" href="../paper-input/paper-input-error.html">
<link rel="import" href="../paper-input/paper-input-char-counter.html">
<link rel="import" href="../paper-item/paper-icon-item.html">
<link rel="import" href="../paper-item/paper-item.html">
<link rel="import" href="../paper-listbox/paper-listbox.html">
<link rel="import" href="../paper-material/paper-material.html">
Expand Down Expand Up @@ -177,6 +180,9 @@
<dom-repeat items="[[values]]" as="value">
<template>
<paper-chip value="[[value]]" on-remove="_removeChip" removable single-line>
<template is="dom-if" if="[[_lookupHasIcon(value)]]">
<iron-icon icon="[[_lookupIcon(value)]]" src="[[_lookupIconSrc(value)]]" slot="icon"></iron-icon>
</template>
<span slot="label" class="label">[[_lookupLabel(value)]]</span>
</paper-chip>
</template>
Expand Down Expand Up @@ -209,9 +215,13 @@
<paper-listbox tabindex="0" id="list">
<dom-repeat items="[[_source]]">
<template>
<paper-item tabindex="0" value="[[_computeValue(item)]]" label-text="[[_computeLabel(item)]]" on-tap="_select">[[_computeLabel(item)]]
<paper-ripple></paper-ripple>
</paper-item>
<paper-icon-item tabindex="0" value="[[_computeValue(item)]]" label-text="[[_computeLabel(item)]]" icon="[[_computeIcon(item)]]" icon-src="[[_computeIconSrc(item)]]" on-tap="_select">
<template is="dom-if" if="[[_hasIcon(item)]]">
<iron-icon icon="[[_computeIcon(item)]]" src="[[_computeIconSrc(item)]]" slot="item-icon"></iron-icon>
</template>
[[_computeLabel(item)]]
<paper-ripple></paper-ripple>
</paper-icon-item>
</template>
</dom-repeat>
</paper-listbox>
Expand Down Expand Up @@ -242,6 +252,14 @@
type: String,
value: "value"
},
iconProperty: {
type: String,
value: "icon"
},
iconSrcProperty: {
type: String,
value: "iconSrc"
},
hidden: {
type: Boolean,
value: true
Expand Down Expand Up @@ -309,7 +327,9 @@
if (el instanceof PaperChip && el.value !== undefined) {
const item = {
[this.displayProperty]: el.label,
[this.valueProperty]: el.value
[this.valueProperty]: el.value,
[this.iconProperty]: el.icon,
[this.iconSrcProperty]: el.iconSrc
}

this.push("datasource", item)
Expand Down Expand Up @@ -572,6 +592,12 @@
return this._computeLabel(item).toLowerCase().startsWith(value.toLowerCase())
})
}

_lookupItem(value) {
return this.datasource.find((item) => {
return this._computeValue(item) === value
})
}

_computeValue(item) {
return item[this.valueProperty] !== undefined ? item[this.valueProperty] : item
Expand All @@ -582,9 +608,7 @@
}

_lookupLabel(value) {
const item = this.datasource.find((item) => {
return this._computeValue(item) === value
})
const item = this._lookupItem(value)

if (item !== undefined) {
return this._computeLabel(item)
Expand All @@ -593,6 +617,48 @@
return value
}

_computeIcon(item) {
return item[this.iconProperty] ? item[this.iconProperty] : ""
}

_computeIconSrc(item) {
return item[this.iconSrcProperty] ? item[this.iconSrcProperty] : ""
}

_lookupIcon(value) {
const item = this._lookupItem(value)

if (item !== undefined) {
return this._computeIcon(item)
}

return ""
}

_lookupIconSrc(value) {
const item = this._lookupItem(value)

if (item !== undefined) {
return this._computeIconSrc(item)
}

return ""
}

_hasIcon(item) {
return Boolean(this._computeIcon(item) || this._computeIconSrc(item))
}

_lookupHasIcon(value) {
const item = this._lookupItem(value)

if (item !== undefined) {
return this._hasIcon(item)
}

return false
}

_hideTips() {
if (this.autocomplete) {
this.shadowRoot.querySelector("#tips") ? this.shadowRoot.querySelector("#tips").scrollTop = 0 : ""
Expand Down
16 changes: 8 additions & 8 deletions test/paper-chip-input.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -243,7 +243,7 @@
test("showing suggested items works", (done) => {
enterCharacter(element, "A")
flush(() => {
const items = element.shadowRoot.querySelectorAll("paper-item")
const items = element.shadowRoot.querySelectorAll("paper-icon-item")
expect(items.length).to.equal(5)
done()
})
Expand All @@ -253,7 +253,7 @@
enterCharacter(element, "A")
enterCharacter(element, "l")
flush(() => {
const items = element.shadowRoot.querySelectorAll("paper-item")
const items = element.shadowRoot.querySelectorAll("paper-icon-item")
expect(items.length).to.equal(2)
done()
})
Expand All @@ -262,7 +262,7 @@
test("clicking on suggested item adds it", (done) => {
enterCharacter(element, "A")
flush(() => {
const items = element.shadowRoot.querySelectorAll("paper-item")
const items = element.shadowRoot.querySelectorAll("paper-icon-item")
items[0].click()
expect(element.values[0]).to.equal('AL')
done()
Expand All @@ -272,7 +272,7 @@
test("adding other suggested items works", (done) => {
enterCharacter(element, "A")
flush(() => {
const items = element.shadowRoot.querySelectorAll("paper-item")
const items = element.shadowRoot.querySelectorAll("paper-icon-item")

items[1].click()

Expand Down Expand Up @@ -304,7 +304,7 @@

enterCharacter(element, "V")
flush(() => {
const items = element.shadowRoot.querySelectorAll("paper-item")
const items = element.shadowRoot.querySelectorAll("paper-icon-item")
expect(items.length).to.equal(6)

done()
Expand All @@ -317,7 +317,7 @@
expect(element.hidden).to.be.false

flush(() => {
const items = element.shadowRoot.querySelectorAll("paper-item")
const items = element.shadowRoot.querySelectorAll("paper-icon-item")
items[0].click()

expect(element.values[0]).to.equal('AL')
Expand Down Expand Up @@ -353,7 +353,7 @@
test("paper-chip elements within paper-chip-input (with autocomplete) works correctly ", (done) => {
enterCharacter(element, "A")
flush(() => {
const items = element.shadowRoot.querySelectorAll("paper-item")
const items = element.shadowRoot.querySelectorAll("paper-icon-item")
items[0].click()
expect(element.values[0]).to.equal('AL')

Expand Down Expand Up @@ -429,7 +429,7 @@
enterCharacter(inputWithAutocomplete, "l")

flush(() => {
const items = inputWithAutocomplete.shadowRoot.querySelectorAll("paper-item")
const items = inputWithAutocomplete.shadowRoot.querySelectorAll("paper-icon-item")
items[0].click()
})

Expand Down

0 comments on commit 4cc5b5b

Please sign in to comment.