addon/components/ui-message.js

  1. import layout from '../templates/components/ui-message';
  2. import Component from '@ember/component';
  3. import { getWithDefault } from '@ember/object';
  4. import { warn } from '@ember/debug';
  5. import { run } from '@ember/runloop';
  6. import { computed } from '@ember/object';
  7.  
  8.  
  9. /**
  10. ui-message component
  11.  
  12. @module components
  13. @namespace components
  14. @class UiMessage
  15. @constructor
  16. */
  17. export default Component.extend({
  18.     layout: layout,
  19.     header: null,
  20.     /**
  21.      * The message to show
  22.      *
  23.      * @property {String} message
  24.      * @default  null
  25.      */
  26.     message: null,
  27.     /**
  28.      * The messages to show
  29.      *
  30.      * @property {Array} message
  31.      * @default  null
  32.      */
  33.     messages: null,
  34.     /**
  35.      * allow to close messsage, by default false  
  36.      *
  37.      * @property {Boolean} close
  38.      * @default  false
  39.      */
  40.     close: false,
  41.     tagName: 'div',
  42.     /**
  43.      * Class name to apply to the message
  44.      *
  45.      * @property {String} theme
  46.     */
  47.     theme: '',
  48.  
  49.     /**
  50.      * Class name to apply to the message
  51.      *
  52.      * @property {String} class
  53.     */
  54.     class: '',
  55.     /**
  56.      * timeout to close message, by default 0  
  57.      *
  58.      * @property {Number} timeout
  59.      * @default  false
  60.      */
  61.     timeout: 0,
  62.     classNameBindings: ['_uiClass', '_theme', '_size', 'theme', '_componentClass'],
  63.     _uiClass: 'ui',
  64.     _componentClass: 'message',
  65.     _theme: computed('type', {
  66.         get() {
  67.             const typeClass = getWithDefault(this, 'type', '');
  68.             return `${typeClass}`;
  69.         },
  70.         set() {
  71.             warn('`_type` is read only');
  72.             return this;
  73.         }
  74.     }),
  75.     _size: computed('size', {
  76.         get() {
  77.             const sizeClass = getWithDefault(this, 'size', '');
  78.             return `${sizeClass}`;
  79.         },
  80.         set() {
  81.             warn('`_size` is read only');
  82.             return this;
  83.         }
  84.     }),
  85.     init(){
  86.         this._super(...arguments);
  87.         if(this.get('timeout') > 0){
  88.             run.later(this, function() {
  89.                 this.send('closeMessage');
  90.             }, this.get('timeout'));
  91.         }
  92.     },
  93.     actions: {
  94.         /**
  95.         close message event
  96.         @event closeMessage
  97.         */
  98.         closeMessage() {
  99.             if(this && this.$()){
  100.                 this.$().transition('fade');
  101.             }
  102.             run.next(this, () => {
  103.                 if(this) {
  104.                     this.destroy();
  105.                 }
  106.             });
  107.             if(typeof this.attrs.onClose === 'function'){
  108.                 this.attrs.onClose();
  109.             }
  110.         }
  111.     }
  112. });