Open jsguy opened 9 years ago
you mean a flash-message component?
Yes pretty much - this will be separate from miso (a standalone NPM), so if you know of a nice one, we can use it instead of making our own - it must have a small footprint, and allow flexibility in how it is presented...
did a simple component for my project:
'use strict';
var m = require('mithril');
var remove = require('lodash').remove;
var icons = require('../icons');
var messages = [];
var id = 0;
function info(text, duration) {
duration = duration || 5000;
m.startComputation();
var message = {
id: id++,
type: 'info',
text: text,
state: 'new'
};
messages.push(message);
setTimeout(function() {
m.startComputation();
message.state = 'visible';
m.endComputation();
}, 10);
setTimeout(function() {
m.startComputation();
message.state = 'hidden';
m.endComputation();
}, duration);
setTimeout(function() {
m.startComputation();
remove(messages, message);
m.endComputation();
}, duration + 1000);
m.endComputation();
}
function view() {
if (!messages.length) {
return;
}
return m('ul.messages', messages.map(function(message) {
return m('li', {
key: message.id,
className: message.state
}, [
icons.message[message.type],
m('.text', message.text)
]);
}));
}
function clearAll() {
messages = [];
}
module.exports = {
view: view,
info: info,
clearAll: clearAll
};
This needs to be improved of cause
See issue 2 for details and discussion