cyclejs-modal
Version:
An easy way to open custom modals in a cyclejs app
73 lines • 2.25 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);
};
Object.defineProperty(exports, "__esModule", { value: true });
var xstream_1 = require("xstream");
var run_1 = require("@cycle/run");
var dom_1 = require("@cycle/dom");
var modalify_1 = require("../../../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 dom_1.div('.modal-container', { style: animation }, dom_1.div('.modal-content', vnode));
}) });
};
}
function main(_a) {
var DOM = _a.DOM;
return {
DOM: xstream_1.default.of(dom_1.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: xstream_1.default.of(dom_1.div('.div', [
dom_1.span('.span', ['This is a modal. Yeah? :)']),
dom_1.button('.close', ['close'])
])),
modal: DOM.select('.close')
.events('click')
.mapTo({ type: 'close' })
};
}
var modalifiedMain = modalify_1.modalify(main, {
name: 'modal',
DOMDriverKey: 'DOM',
center: false
});
run_1.run(modalifiedMain, {
DOM: dom_1.makeDOMDriver('#app')
});
//# sourceMappingURL=index.js.map