addon/mixins/ui-select-base.js

  1. import Mixin from '@ember/object/mixin'; 
  2. import EmberObject from '@ember/object'; 
  3. import { observer } from '@ember/object'; 
  4. import { A } from '@ember/array'; 
  5.  
  6.  
  7. /**
  8. ui-select-base mixin
  9.  
  10. @module mixins
  11. @namespace mixins
  12. @class UiSelectBase
  13. @constructor
  14. */
  15. export default Mixin.create({
  16.     tagName: 'div',
  17.  
  18.     /**
  19.      * value  for the select 
  20.      *
  21.      * @property {String} value
  22.      */
  23.     value: '',
  24.     /**
  25.      *  label for the select radio group component
  26.      *
  27.      * @property {String} label
  28.      */
  29.     label: '',
  30.  
  31.     /**
  32.      * name key for option, by default name
  33.      *
  34.      * @property {String} namePath
  35.      * @default 'value'
  36.      */
  37.     labelPath: 'name',
  38.  
  39.     /**
  40.      * value key for option, by default value
  41.      *
  42.      * @property {String} valuePath
  43.      * @default 'value'
  44.      */
  45.     valuePath: 'value',
  46.     /**
  47.      * placeholder for blank option
  48.      *
  49.      * @property {String} placeholder
  50.      */
  51.     placeholder: '',
  52.  
  53.     /**
  54.      * the select theme
  55.      *
  56.      * @property {String} theme
  57.      */
  58.     theme: '',
  59.  
  60.     /**
  61.      * the select theme
  62.      *
  63.      * @property {String} class
  64.      */
  65.     class: '',
  66.  
  67.     /**
  68.      * options for the select component
  69.      *
  70.      * @property {Array} options
  71.      */
  72.     options: null,
  73.  
  74.     /**
  75.      * options for the select component
  76.      * @private
  77.      * @property {Array} _options
  78.      */
  79.     _options: null,
  80.  
  81.     classNameBindings: ['_uiClass', 'search:search:', '_multiple:multiple:', 'class', 'theme', '_theme', '_componentClass'],
  82.     _uiClass: 'ui',
  83.     _theme: 'selection',
  84.     _componentClass: 'dropdown',
  85.     _multiple: false,
  86.     /**
  87.      * allow select to search or not , by default false
  88.      *
  89.      * @property {Boolean} search
  90.      * @default false
  91.      */
  92.     search: false,
  93.  
  94.     /**
  95.      * inner value state just for outer value change
  96.      *
  97.      * @private
  98.      * @property {String} _value
  99.      */
  100.     _value: null,
  101.  
  102.     /**
  103.      * selected items to 
  104.      *
  105.      * @property {String} _selectedOptions
  106.      */
  107.     _selectedOptions: null,
  108.  
  109.     didInsertElement() {
  110.         this.renderDropDown();
  111.     },
  112.     /**
  113.      * @method setupOptions 
  114.      * @observes "options" property
  115.      * @returns  {void}
  116.      */
  117.     setupOptions() {
  118.         if (this.options) {
  119.             this._options.clear();
  120.             for (var i = 0; i < this.options.length; i++) {
  121.                 let item = this.options[i];
  122.                 let label = item[this.get('labelPath')];
  123.                 let value = item[this.get('valuePath')];
  124.                 let checked = this.isOptionChecked(value);
  125.                 let obj = EmberObject.create({
  126.                     'label': label,
  127.                     'value': String(value),
  128.                     'selected': checked
  129.                 });
  130.                 if (checked) {
  131.                     this._selectedOptions.pushObject(obj);
  132.                 }
  133.                 this._options.pushObject(obj);
  134.             }
  135.         }
  136.     },
  137.     optionsChange: observer('options', function(){
  138.         this.setupOptions();
  139.     }),
  140.     init() {
  141.         this._super(...arguments);
  142.         this.set('_selectedOptions', A());
  143.         this.set('_options', A());
  144.         this.setupOptions();
  145.     }
  146. });