addon/components/ui-message.js
import layout from '../templates/components/ui-message';
import Component from '@ember/component';
import { getWithDefault } from '@ember/object';
import { warn } from '@ember/debug';
import { run } from '@ember/runloop';
import { computed } from '@ember/object';
/**
ui-message component
@module components
@namespace components
@class UiMessage
@constructor
*/
export default Component.extend({
layout: layout,
header: null,
/**
* The message to show
*
* @property {String} message
* @default null
*/
message: null,
/**
* The messages to show
*
* @property {Array} message
* @default null
*/
messages: null,
/**
* allow to close messsage, by default false
*
* @property {Boolean} close
* @default false
*/
close: false,
tagName: 'div',
/**
* Class name to apply to the message
*
* @property {String} theme
*/
theme: '',
/**
* Class name to apply to the message
*
* @property {String} class
*/
class: '',
/**
* timeout to close message, by default 0
*
* @property {Number} timeout
* @default false
*/
timeout: 0,
classNameBindings: ['_uiClass', '_theme', '_size', 'theme', '_componentClass'],
_uiClass: 'ui',
_componentClass: 'message',
_theme: computed('type', {
get() {
const typeClass = getWithDefault(this, 'type', '');
return `${typeClass}`;
},
set() {
warn('`_type` is read only');
return this;
}
}),
_size: computed('size', {
get() {
const sizeClass = getWithDefault(this, 'size', '');
return `${sizeClass}`;
},
set() {
warn('`_size` is read only');
return this;
}
}),
init(){
this._super(...arguments);
if(this.get('timeout') > 0){
run.later(this, function() {
this.send('closeMessage');
}, this.get('timeout'));
}
},
actions: {
/**
close message event
@event closeMessage
*/
closeMessage() {
if(this && this.$()){
this.$().transition('fade');
}
run.next(this, () => {
if(this) {
this.destroy();
}
});
if(typeof this.attrs.onClose === 'function'){
this.attrs.onClose();
}
}
}
});