|
| 1 | +import React from 'react'; |
| 2 | +import { render } from 'react-dom'; |
| 3 | +import Most, { connect } from '../../../lib/react-most' |
| 4 | +import {from, lensProp, over, set, inc, dec, identity, compose} from 'ramda' |
| 5 | +import Type from 'union-type' |
| 6 | +export default Type({ |
| 7 | + Inc: [Number], |
| 8 | + Dec: [Number], |
| 9 | + Double: [], |
| 10 | + Half: [] |
| 11 | +}) |
| 12 | + |
| 13 | +const CounterView = props => ( |
| 14 | + <div> |
| 15 | + <button onClick={props.actions.half}>/2</button> |
| 16 | + <button onClick={()=>props.actions.dec(1)}>-</button> |
| 17 | + <span>{props.count}</span> |
| 18 | + <button onClick={()=>props.actions.inc(1)}>+</button> |
| 19 | + <button onClick={props.actions.double}>*2</button> |
| 20 | + </div> |
| 21 | +) |
| 22 | + |
| 23 | +CounterView.defaultProps = { count: 0 }; |
| 24 | + |
| 25 | +const lensCount = lensProp('count') |
| 26 | + |
| 27 | +const doublable = connect(intent$ => { |
| 28 | + return { |
| 29 | + sink$: intent$.map(Intent.case({ |
| 30 | + Double: () => over(lensCount, x=>x*2), |
| 31 | + Half: () => over(lensCount, x=>x/2), |
| 32 | + _: () => identity |
| 33 | + })), |
| 34 | + actions: { |
| 35 | + double: Intent.Double, |
| 36 | + half: Intent.Half, |
| 37 | + } |
| 38 | + } |
| 39 | +}) |
| 40 | + |
| 41 | +const increasable = connect(intent$ => { |
| 42 | + return { |
| 43 | + sink$: intent$.map(Intent.case({ |
| 44 | + Inc: (v) => over(lensCount, inc(v)), |
| 45 | + Dec: (v) => over(lensCount, dec(v)), |
| 46 | + _: () => identity |
| 47 | + })), |
| 48 | + actions: { |
| 49 | + inc: Intent.Inc, |
| 50 | + dec: Intent.Dec, |
| 51 | + } |
| 52 | + } |
| 53 | +}) |
| 54 | + |
| 55 | +const Counter = doublable(increasable(CounterView)) |
| 56 | + |
| 57 | +render( |
| 58 | + <Most> |
| 59 | + <Counter /> |
| 60 | + </Most> |
| 61 | + , document.getElementById('app')); |
0 commit comments