Example #1
0
  target.prototype.componentWillMount = function componentWillMount() {
    this.__subscription = stateSubject
      .map(state => (args.length ? pick(state, args) : state))
      .subscribe(state => this.setState(state),
        this.onError,
        this.onComplete);

    willMount.call(this);
  };
Example #2
0
function main(sources) {
    const storedData = storage.get('svg-data');
    const selection$ = new BehaviorSubject(storedData ? storedData.selection : initialSelection);
    const svgs$ = new BehaviorSubject(storedData ? storedData.svgs : initialSVGs);
    const names$ = svgs$.map(svgs => svgs.map(({ name }) => name));
    const state$ = Observable.combineLatest(svgs$, selection$, (svgs, selection) => ({ svgs, selection }));
    const validSelection$ = state$.map(({ svgs, selection }) => (0 <= selection && selection < svgs.length));
    const currentSVG$ = state$.withLatestFrom(validSelection$, ({ svgs, selection }, validSelection) => validSelection ? svgs[selection] : null);
    const currentName$ = currentSVG$.map(svg => svg ? svg.name: '');
    const currentData$ = currentSVG$.map(svg => svg ? svg.data: '');

    state$.subscribe(state => {
        storage.set('svg-data', state);
    });

    const DOM = sources.DOM;
    const tabs = Tabs({ DOM, names$, selection$ });

    const addTabButton = Button({ DOM, props$: Observable.of({ label: '+' }) });
    addTabButton.click$.subscribe(AddTab({ tabs$: svgs$, selection$, name$: Observable.of('svg') }));

    const removeTabButton = Button({ DOM, props$: Observable.of({ label: '-' }) });
    removeTabButton.click$.subscribe(RemoveTab({ tabs$: svgs$, selection$ }));

    const renameTabButton = Button({ DOM, props$: Observable.of({ label: '_' }) });
    const showRenameTabDialog$ = renameTabButton.click$.map(event => true);
    const renameTabDialog = InputDialog({ DOM, valueOnShow$: currentName$, visible$: showRenameTabDialog$ });
    renameTabDialog.confirm$.subscribe(RenameTab({ tabs$: svgs$, selection$ }));

    const svgInput = Input({ DOM, data$: currentData$, enabled$: validSelection$, type$: Observable.of('textarea') });
    const svgRenderer = SVGRenderer({ value$: svgInput.value$ });

    const newSVGs$ = svgInput.input$.withLatestFrom(svgs$, selection$, (value, svgs, selection) => {
        const newSVGs = svgs.slice();
        newSVGs[selection] = { name: newSVGs[selection].name, data: value };
        return newSVGs;
    });
    newSVGs$.subscribe(svgs$);

    const vleftControls$ = Observable.combineLatest(tabs.DOM, addTabButton.DOM, (vtabs, vaddTabButton) => div('.controls.left-controls', [vtabs, vaddTabButton]));
    const vrightControls$ = Observable.combineLatest(renameTabButton.DOM, removeTabButton.DOM, (vrenameTabButton, vremoveTabButton) => div('.controls.right-controls', [vrenameTabButton, vremoveTabButton]));
    const vcontrols$ = Observable.combineLatest(vleftControls$, vrightControls$, (vleftControls, vrightControls) => div('.controls', [vleftControls, vrightControls]));
    const veditor$ = Observable.combineLatest(svgInput.DOM, svgRenderer.DOM, (vinput, vrenderer) => div('.svg-editor', [vinput, vrenderer]));
    const vapp$ = Observable.combineLatest(vcontrols$, veditor$, renameTabDialog.DOM, (vcontrols, veditor, vrenameTabDialog) => div('.app', [vcontrols, veditor, vrenameTabDialog]));

    return {
        DOM: vapp$
    };
}
Example #3
0
          'attributes': {'data-item-id': itemData.id},
          'ev-input': function (ev) { itemWidthChanged$.onNext(ev); }
        })
      ]),
      h('div', String(itemData.width)),
      h('button', {
        'attributes': {'data-item-id': itemData.id},
        'ev-click': function (ev) { removeClicks$.onNext(ev); }
      }, 'Remove')
    ]
  );
}

var vtree$ = modelItems$
  .map(function (itemsData) {
    return h('div.everything', {}, [
      vrenderTopButtons(),
      itemsData.map(vrenderItem)
    ]);
  });

module.exports = {
  observe: observe,
  vtree$: vtree$,
  removeClicks$: removeClicks$,
  addOneClicks$: addOneClicks$,
  addManyClicks$: addManyClicks$,
  itemColorChanged$: itemColorChanged$,
  itemWidthChanged$: itemWidthChanged$
};
Example #4
0
vtree$ = modelTodos$
    .map(function(todosData) {
        todosData = todosData || [];

        return h('div.container', {}, [
            h('section#todoapp', [
                vrenderSectionHeader(),
                h('section#main', {
                    style: {
                        display: todosData.length ? 'block' : 'none'
                    }
                }, [
                    h('input#toggle-all', {
                        type: 'checkbox',
                        'ev-change': function(ev) {
                            todoToggleAll$.onNext(ev);
                        }
                    }),
                    h('label', {
                        attributes: {
                            'for': 'toggle-all'
                        }
                    }, ['Mark all as complete']),
                    h('ul', { id: 'todo-list' }, [
                        todosData.map(vrenderTodo)
                    ])
                ]),
                vrenderSectionFooter(todosData)
            ]),
            vrenderFooter()
        ]);
    });
Example #5
0
}

// Subscribe to the remote monitor to synchronize local state
// Use it only when you want time travelling
RemoteDev.subscribe(state => {
  subject.onNext(toImmutable(state));
});

// Instead of using a `dispatch` function, you can just subscribe an observer,
// but you'll get only new states without knowing which action changed them
// subject.subscribe(data => { RemoteDev.send('', action.state); });

let store = toImmutable(initialSatate);
let subject = new Rx.BehaviorSubject(store);

subject.map(store => store.get('todos'))
  .distinctUntilChanged()
  .subscribe(persist.set);

todoActions.subjects.add.subscribe((text) => {
  store = store.updateIn(['todos'], (todos) => {
    return todos.push(todoRecord()({
      text
    }));
  });

  dispatch({ type: 'add', state: store });
});

todoActions.subjects.delete.subscribe((id) => {
  store = store.updateIn(['todos'], (todos) => {