cyclejs-modal
Version:
An easy way to open custom modals in a cyclejs app
71 lines • 2.1 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import xs from 'xstream';
import { run } from '@cycle/run';
import { button, div, span, makeDOMDriver } from '@cycle/dom';
import { modalify } from '../../../src/modalify';
/**
* modalAnimationWrapper - wraps the component embed in the modal
* will handle the enter and leave animation of the modal
*
*/
function modalAnimationWrapper(component) {
return function (sources) {
var instance = component(sources);
var animation = {
transition: 'transform 1s',
transform: 'translateY(-100%)',
delayed: {
transform: 'translateY(0)'
},
remove: {
transform: 'translateY(-100%)'
}
};
return __assign({}, instance, { DOM: instance.DOM.map(function (vnode) {
return div('.modal-container', { style: animation }, div('.modal-content', vnode));
}) });
};
}
function main(_a) {
var DOM = _a.DOM;
return {
DOM: xs.of(button('.button', ['open modal'])),
modal: DOM.select('.button')
.events('click')
.mapTo({
type: 'open',
component: modalAnimationWrapper(modal)
})
};
}
function modal(_a) {
var DOM = _a.DOM;
return {
DOM: xs.of(div('.div', [
span('.span', ['This is a modal. Yeah? :)']),
button('.close', ['close'])
])),
modal: DOM.select('.close')
.events('click')
.mapTo({ type: 'close' })
};
}
var modalifiedMain = modalify(main, {
name: 'modal',
DOMDriverKey: 'DOM',
center: false
});
run(modalifiedMain, {
DOM: makeDOMDriver('#app')
});
//# sourceMappingURL=index.js.map