import xs from "xstream";
import {run} from "@cycle/run";
import {div, input, p, makeDOMDriver} from "@cycle/dom";
import {html} from "snabbdom-jsx";
function main(sources) {
const weightProps$ = xs.of({
label: "Weight", unit: "kg", min: 40, value: 70, max: 150
})
const heightProps$ = xs.of({
label: "Height", unit: "cm", min: 10, value: 170, max: 210
})
const weightSources = {
DOM: sources.DOM,
props: weightProps$
}
const heightSources = {
DOM: sources.DOM,
props: heightProps$
}
const weightSlider = LabeledSlider(weightSources)
const heightSlider = LabeledSlider(heightSources)
const weightDom$ = weightSlider.DOM
const weightValue$ = weightSlider.value
const heightVDom$ = heightSlider.DOM
const heightValue$ = heightSlider.value
const value$ = xs.combine(weightValue$, heightValue$)
.map( ([weight, height]) => {
const heightMeters = height * 0.01
const bmi = Math.round(weight / (heightMeters * heightMeters))
return bmi
})
const dom$ = xs.combine(value$, weightDom$, heightVDom$)
.map( ([bmi, weight, height]) => {
return <div>
{ weight }
{ height }
<h2>{ "BMI is " + bmi }</h2>
</div>
})
return {
DOM: dom$
}
}
function LabeledSlider(sources) {
const domSources = sources.DOM
const props$ = sources.props
const newValue$ = domSources
.select(".slider")
.events("input")
.map(ev => ev.target.value)
const state$ = props$
.map(
props => newValue$.map(val => ({
label: props.label,
unit: props.unit,
min: props.min,
value: val,
max: props.max
})).startWith(props)
)
.flatten()
.remember()
const vdom$ = state$.map( state => {
return <div class="labeled-slider">
<span class="label">{state.label + " " + state.value + state.unit}</span>
<input type="range" class="slider" min={state.min} max={state.max} value={state.value}/>
</div>
})
const sinks = {
DOM: vdom$,
value: state$.map(val => val.value),
}
return sinks
}
const drivers = {
DOM: makeDOMDriver("-sharpapp")
};
run(main, drivers);