cyclejs-modal/build/es6/examples/onionify/src/index.js

An easy way to open custom modals in a cyclejs app

import xs from 'xstream';
import { run } from '@cycle/run';
import { button, div, span, makeDOMDriver } from '@cycle/dom';
import onionify from 'cycle-onionify';
import isolate from '@cycle/isolate';
import { modalify } from '../../../src/modalify';
function main(sources) {
    var DOM = sources.DOM, onion = sources.onion, modal = sources.modal;
    var isolatedModal = isolate(Modal, 'child');
    var modalSinks = modal.sinks(['onion', 'modal']);
    return {
        DOM: onion.state$.map(function (state) {
            return div([
                span("My state: " + JSON.stringify(state)),
                button('.button', ['open modal'])
            ]);
        }),
        onion: xs.merge(xs.of(function () { return ({ i: 7, child: { foo: 'something' } }); }), modalSinks.onion),
        modal: xs.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 div('.div', [
                span('.span', [
                    "This is a modal. My state: " + JSON.stringify(state) + " :)"
                ]),
                button('.set', ['Set to "SOMETHING"']),
                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 = onionify(modalify(main, { background: 'rgba(0,0,0,0.2)' }));
run(wrappedMain, {
    DOM: makeDOMDriver('#app')
});
//# sourceMappingURL=index.js.map