Merge pull request #44 from unicef-polymer/develop

Develop
unicef-polymer · Feb 3, 2017 · b83ca4c · b83ca4c
2 parents b53b635 + 5c9bba1
commit b83ca4c
Show file tree

Hide file tree

Showing 6 changed files with 493 additions and 113 deletions.
diff --git a/README.md b/README.md
@@ -6,6 +6,7 @@ Dropdown menu with search and multiple options selection
 
 
 * autoValidate - boolean
+* customObjectOptions - Boolean, Default: false
 * disabled - Boolean Default: false
 * dynamicAlign - Boolean Default: false
 * emptyValue - Boolean Default: false
@@ -16,14 +17,19 @@ Dropdown menu with search and multiple options selection
 * label - String
 * menuOpened - Boolean Default: false – notifies
 * multi - Boolean Default: false
+* noChangeEvent - Boolean, Default: false
+* optionLabel - String, Default: label
 * options - Array
+* optionValue - String, Default: 'value'
 * placeholder - string
 * required - boolean
 * search - String
+* selected - Number/Array - notifies
 * selectedValues - Object notifies
 * showLimitWarning - Boolean
 * shownItems - Array
 * shownItemsLimit - Number Default: 50
+* updateSelected - Boolean, Default: false
 * value - String
 
 ## Usage
@@ -121,6 +127,54 @@ this.$.dropdownElement.validate();
 this.$.dropdownElementMulti.validate();
 ```
 
+If the options array where objects of this model: `{value: someIntegerValue, label: someLabel}` 
+is not what you need you can use any type of objects. You have to set some properties on the element to tell 
+that you have custom options and which properties to be used as values and labels.
+```javascript
+// options example(used in the demo), in properties object
+customObjOptions: {
+    type: Array,
+    value: function() {
+      var opt = [];
+      for(var i = 1; i <= 100; i++) {
+        opt.push({
+          id: i,
+          option_key: 'opt' + i,
+          option_label: 'Option ' + i,
+          some_other_propery: 'dummy propery for objIdx' + (i -1)
+        });
+      }
+      return opt;
+    }
+}
+```
+```html
+<etools-searchable-multiselection-menu
+        label="Searchable menu, custom objects"
+        options="[[customObjOptions]]"
+        custom-object-options
+        option-value="option_key"
+        option-label="option_label"
+        on-value-change="_singleSelectionChanged"></etools-searchable-multiselection-menu>
+```
+
+If you need only select an option and get option ID (most use cases) or an array of IDs(for multiselection) 
+you can use `selected` property of the element. It only works for integer values, for other types use `selectedValues` property.
+Additionally you can chose to block the change event. Example:
+
+```html
+<p>SelectedID: [[selectedId]]</p>
+<etools-searchable-multiselection-menu
+    label="Searchable menu, custom objects"
+    options="[[customObjOptions]]"
+    custom-object-options
+    option-value="id"
+    option-label="option_label"
+    selected="{{selectedId}}"
+    update-selected no-change-event>
+</etools-searchable-multiselection-menu>
+```
+
 ## Styling
 
 Use this css variables and mixins to style this element.

diff --git a/bower.json b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "etools-searchable-multiselection-menu",
   "description": "Dropdown menu with search and multiple options selection",
-  "version": "1.0.19",
+  "version": "1.0.20",
   "license": "https://github.com/unicef-polymer/etools-searchable-multiselection-menu/blob/master/LICENSE.md",
   "main": "etools-searchable-multiselection-menu.html",
   "dependencies": {

diff --git a/deletable-option-list.html b/deletable-option-list.html
@@ -2,94 +2,116 @@
 <link rel="import" href="../paper-icon-button/paper-icon-button.html">
 
 <dom-module id="deletable-option-list">
-    <template>
-        <style>
-            :host {
-                height: 100%;
-            }
+  <template>
+    <style>
+      :host {
+        height: 100%;
+      }
 
-            span {
-                display: inline-block;
-                width: auto;
-                height: auto;
-                margin-right: 8px;
-                font-size: 16px;
-                line-height: 24px;
-                color: var(--esmm-option-list-color, #212121);
-            }
+      span {
+        display: inline-block;
+        width: auto;
+        height: auto;
+        margin-right: 8px;
+        font-size: 16px;
+        line-height: 24px;
+        color: var(--esmm-option-list-color, #212121);
+      }
 
-            span.placeholder {
-                color: rgba(0,0,0,.38);
-            }
+      span.placeholder {
+        color: rgba(0, 0, 0, .38);
+      }
 
-            paper-icon-button {
-                color: red;
-                opacity: 0.54;
-                padding: 0;
-                height: 18px;
-                width: 18px;
-            }
+      paper-icon-button {
+        color: red;
+        opacity: 0.54;
+        padding: 0;
+        height: 18px;
+        width: 18px;
+      }
 
-            .custom-input {
-                height: auto;
-                padding-right: 24px;
-            }
+      .custom-input {
+        height: auto;
+        padding-right: 24px;
+      }
 
-            *[hidden] {
-                display: none;
-            }
-        </style>
+      *[hidden] {
+        display: none;
+      }
+    </style>
 
-        <div class="paper-input-input custom-input">
+    <div class="paper-input-input custom-input">
 
-            <template is="dom-if" if="[[_showPlaceHolder(optionValue)]]">
-                <span class="placeholder">[[placeholder]]</span>
-            </template>
+      <template is="dom-if" if="[[_showPlaceHolder(optionValue)]]">
+        <span class="placeholder">[[placeholder]]</span>
+      </template>
 
-            <template is="dom-repeat" items="[[optionValue]]">
-                <span>
-                    {{item.label}}
-                    <paper-icon-button hidden$="[[disabled]]" icon="close" on-click="_fireClose"></paper-icon-button>
-                </span>
-            </template>
-        </div>
+      <template is="dom-repeat" items="[[optionValue]]">
+        <span>
+          {{_getItemLabel(item)}}
+          <paper-icon-button hidden$="[[disabled]]" icon="close" on-click="_fireClose"></paper-icon-button>
+        </span>
+      </template>
+    </div>
 
+  </template>
 
-    </template>
+  <script>
+    Polymer({
+      is: 'deletable-option-list',
 
-    <script>
-        Polymer({
-            is: 'deletable-option-list',
+      properties: {
+        placeholder: String,
+        optionValue: {
+          type: Array,
+          value: [],
+          notify: true
+        },
+        disabled: {
+          type: Boolean,
+          value: false
+        },
+        customObjectOptions: {
+          type: Boolean,
+          value: false
+        },
+        optionValueAttribute: {
+          type: String,
+          value: 'value'
+        },
+        optionLabelAttribute: {
+          type: String,
+          value: 'label'
+        }
+      },
 
-            properties: {
-                placeholder: String,
-                optionValue: {
-                    type: Array,
-                    value: [],
-                    notify: true
-                },
-                disabled: {
-                    type: Boolean,
-                    value: false
-                }
-            },
+      _getItemLabel: function(item) {
+        return item[this.optionLabelAttribute];
+      },
 
-            _showPlaceHolder: function(optionValue) {
-                return !optionValue || !optionValue.length;
-            },
+      _showPlaceHolder: function(optionValue) {
+        return !optionValue || !optionValue.length;
+      },
 
-            _fireClose: function(e) {
-                if(this.disabled) {
-                    return;
-                }
-                var details = e.model.item;
-                var newValue = this.optionValue.filter(function(item) {
-                    return parseInt(item.value, 10) !== parseInt(details.value, 10)
-                });
-                newValue = newValue.length > 0 ? newValue : null;
-                this.set('optionValue', newValue);
-                this.fire('option-delete', details);
-            },
-        });
-    </script>
+      _fireClose: function(e) {
+        if (this.disabled) {
+          return;
+        }
+        var details = e.model.item;
+        var removedItemStrValue = (details[this.optionValueAttribute])
+            ? (details[this.optionValueAttribute] + '') : '';
+        var newValue = this.optionValue.filter(function(item) {
+          if (this.customObjectOptions) {
+            var optValue = (item[this.optionValueAttribute]) ? (item[this.optionValueAttribute] + '') : '';
+            return optValue !== removedItemStrValue;
+          } else {
+            return parseInt(item[this.optionValueAttribute], 10) !== parseInt(details[this.optionValueAttribute], 10);
+          }
+        }.bind(this));
+        newValue = newValue.length > 0 ? newValue : null;
+        this.set('optionValue', newValue);
+        this.fire('option-delete', details);
+      },
+    });
+  </script>
 </dom-module>