cyclejs-modal
Version:
An easy way to open custom modals in a cyclejs app
55 lines • 2.09 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var xstream_1 = require("xstream");
var run_1 = require("@cycle/run");
var dom_1 = require("@cycle/dom");
var cycle_onionify_1 = require("cycle-onionify");
var isolate_1 = require("@cycle/isolate");
var modalify_1 = require("../../../src/modalify");
function main(sources) {
var DOM = sources.DOM, onion = sources.onion, modal = sources.modal;
var isolatedModal = isolate_1.default(Modal, 'child');
var modalSinks = modal.sinks(['onion', 'modal']);
return {
DOM: onion.state$.map(function (state) {
return dom_1.div([
dom_1.span("My state: " + JSON.stringify(state)),
dom_1.button('.button', ['open modal'])
]);
}),
onion: xstream_1.default.merge(xstream_1.default.of(function () { return ({ i: 7, child: { foo: 'something' } }); }), modalSinks.onion),
modal: xstream_1.default.merge(DOM.select('.button')
.events('click')
.mapTo({
type: 'open',
component: isolatedModal,
sources: sources,
id: 'myModal'
}), modalSinks.modal)
};
}
function Modal(_a) {
var DOM = _a.DOM, onion = _a.onion;
return {
DOM: onion.state$.map(function (state) {
return dom_1.div('.div', [
dom_1.span('.span', [
"This is a modal. My state: " + JSON.stringify(state) + " :)"
]),
dom_1.button('.set', ['Set to "SOMETHING"']),
dom_1.button('.button', ['close'])
]);
}),
modal: DOM.select('.button')
.events('click')
.mapTo({ type: 'close' }),
onion: DOM.select('.set')
.events('click')
.mapTo(function () { return ({ foo: 'SOMETHING' }); })
};
}
var wrappedMain = cycle_onionify_1.default(modalify_1.modalify(main, { background: 'rgba(0,0,0,0.2)' }));
run_1.run(wrappedMain, {
DOM: dom_1.makeDOMDriver('#app')
});
//# sourceMappingURL=index.js.map