Remove behavior & added only the essential code, fix imports, fix sty… #16
Conversation
herberthobregon
commented
May 23, 2018
herberthobregon
commented
- Remove behavior & added only the essential code to work
- Fix imports
- Fix styles to have a behavior like a paper-input & that the paper-dropdown occupies its own space and does not stretch it inside
- [*] Stable
…les to have a behavior like a paper-input
| @@ -85,7 +86,7 @@ import PaperDropdownBehavior from './paper-dropdown-element-behavior'; | |||
| * @element paper-dropdown | |||
| * @demo demo/index.html | |||
| */ | |||
| class PaperDropDown extends Polymer.mixinBehaviors([PaperDropdownBehavior], Polymer.Element) { | |||
There was a problem hiding this comment.
Mixin is a way in polymer to abstract out code / functionality which can be overridden by someone using the component.
Example: the validation in IronValidatableBehavior which we override for our custom validation. Which in turn can be overridden by someone using paper-dropdown. Also, removing the IronValidatableBehavior should result in form validation to fail. Did you test it?
| const re = new RegExp(searchText, "gi"); | ||
| return (re.exec(currentValue) != null); | ||
| } | ||
|
|
There was a problem hiding this comment.
You didn't even add _getValidatity which means this PR is not tested for form validation which is very essential for any input component.
| display: inline-block; | ||
| outline: none; | ||
| } | ||
|
|
| @@ -303,6 +332,9 @@ class PaperDropDown extends Polymer.mixinBehaviors([PaperDropdownBehavior], Poly | |||
| :host * { | |||
| outline: none; | |||
| } | |||
| paper-dropdown-menu{ | |||
| display: block; | |||
| } | |||
There was a problem hiding this comment.
paper-dropdown is supposed to be just a wrapper around paper-dropdown-menu and hence should not add any custom css to it. If need arises, user can use --paper-dropdown-menu css mixin to apply their custom css.
| @@ -422,7 +454,7 @@ class PaperDropDown extends Polymer.mixinBehaviors([PaperDropdownBehavior], Poly | |||
| if (this.multi) { | |||
| this.set('value', selectedItems.map(item => this._getItemValue(item))); | |||
|
|
|||
| const { items } = this.$.list; | |||
| const {items} = this.$.list; | |||
There was a problem hiding this comment.
We are going to stick to airbnb code style from now on. This change will cause lint issues.
You must have got error which trying to commit, please don't ignore lint error message as soon I will add travis build process to have all these checks.
| @@ -516,7 +548,7 @@ class PaperDropDown extends Polymer.mixinBehaviors([PaperDropdownBehavior], Poly | |||
| * @private | |||
| */ | |||
| _updateSelected(value) { | |||
| const { items } = this.$.list; | |||
| const {items} = this.$.list; | |||
| @@ -541,7 +573,7 @@ class PaperDropDown extends Polymer.mixinBehaviors([PaperDropdownBehavior], Poly | |||
| * @private | |||
| */ | |||
| _updateValue(selected) { | |||
| const { items } = this.$.list; | |||
| const {items} = this.$.list; | |||
| @@ -561,10 +593,10 @@ class PaperDropDown extends Polymer.mixinBehaviors([PaperDropdownBehavior], Poly | |||
| */ | |||
| _onOpenedChanged(opened) { | |||
| if (opened) { | |||
| this.dispatchEvent(new CustomEvent('open', { detail: null, bubbles: false })); | |||
| this.dispatchEvent(new CustomEvent('open', {detail: null, bubbles: false})); | |||
| } else { | ||
| this.set('_searchText', ''); | ||
| this.dispatchEvent(new CustomEvent('close', { detail: null, bubbles: false })); | ||
| this.dispatchEvent(new CustomEvent('close', {detail: null, bubbles: false})); |
| @@ -587,7 +619,7 @@ class PaperDropDown extends Polymer.mixinBehaviors([PaperDropdownBehavior], Poly | |||
| * @private | |||
| */ | |||
| _filter(searchText) { | |||
| const { items } = this.$.list; | |||
| const {items} = this.$.list; | |||
|
Closing this because of inactivity. |
