Skip to content

Instantly share code, notes, and snippets.

@pmros pmros/README.md
Last active Aug 15, 2016

Embed
What would you like to do?
Submission app in Cycle JS (using a state store driver)
import xs from 'xstream'
import {h} from '@cycle/dom'
const view = state =>
state.status === 'confirm' ? viewConfirm(state) : viewWaiting(state)
const viewWaiting = state =>
h('button#submit', {attrs: {disabled: state.disabled}}, 'Submit')
const viewConfirm = state =>
h('span', [
h('button#cancel', 'Cancel'),
h('button#confirm', 'Confirm')
])
const domEvents = DOM => ({
submit: DOM.select('#submit').events('click')
, cancel: DOM.select('#cancel').events('click')
, confirm: DOM.select('#confirm').events('click')
})
const modStates = events => ([
events.submit.map(() => state => ({...state, status: 'confirm'}))
, events.cancel.map(() => state => ({...state, status: 'waiting'}))
, events.confirm.map(() => state => ({...state, status: 'waiting'}))
, events.disabled.map(disabled => state => ({...state, disabled}))
])
const main = ({DOM, state, disabled}) => {
const events = {...domEvents(DOM), disabled}
const mods = modStates(events)
const vdom = state.map(state => view(state))
return {
DOM: vdom
, state: xs.merge(...mods)
, submit: events.confirm.mapTo(true)
}
}
const initialState = {
status: 'waiting'
, disabled: true
}
export {main as default, initialState}
import xs from 'xstream'
import {run} from '@cycle/xstream-run'
import {makeDOMDriver} from '@cycle/dom'
import Submission, {initialState as initialStateSubmission} from './examples/submission'
import {initialState as initialStateConfirm} from './examples/confirm'
import equal from 'deep-equal'
const makeStateStoreDriver = (initialState = {}) => input$ =>
input$.fold(([state, e], changeState) => {
const newState = changeState(state)
return [newState, equal(state, newState)]
}, [initialState, false])
.filter(([state, eq]) => !eq)
.map(([state, eq]) => state)
const initialState = {
...initialStateSubmission,
confirm: initialStateConfirm
}
const drivers = {
DOM: makeDOMDriver('#root'),
state: makeStateStoreDriver(initialState)
}
run(Submission, drivers)
import xs from 'xstream'
import {h} from '@cycle/dom'
import {over, lensProp} from 'ramda'
import Confirm from './confirm'
const view = (state, confirm) =>
h('div', [
h('input#field', {props:{value: state.field}}),
confirm,
h('p', `Submitted value: ${state.submission}`)
])
const domEvents = DOM => ({
field: DOM.select('#field').events('keyup').map(e => e.target.value)
})
const modStates = events => ([
events.field.map(value => state => ({...state, field: value}))
, events.submit.map(() =>
state => ({...state, field: '', submission: state.field})
)
])
const modChildState = (state, namespace) => ([
state.map(changeState => over(lensProp(namespace), changeState))
])
const main = ({DOM, state}) => {
const confirm = Confirm({
DOM
, state: state.map(v => v.confirm)
, disabled: state.map(v => v.field === '')
})
const events = {...domEvents(DOM), submit: confirm.submit}
const mods = [
...modStates(events)
, ...modChildState(confirm.state, 'confirm')
]
const vdom = xs.combine(state, confirm.DOM).map(v => view(...v))
return {
DOM: vdom
, state: xs.merge(...mods)
}
}
const initialState = {
field: '',
submission: ''
}
export { main as default, initialState }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.