foldable

Author: jcouyang

docs/src/main/tut/examples/example.tsx

@@ -78,32 +78,66 @@ let Eg4 = Xeg4.map(a=>({sum: a})).apply(ViewEg4)
 xmount(<Eg4/>, document.getElementById('eg4') )
 
 function bmiCalc(weight, height) {
-    return fetch(`https://gist.github.com.ru/jcouyang/edc3d175769e893b39e6c5be12a8526f?height=${height}&weight=${weight}`)
-        .then(resp => resp.json())
-        .then(json => json.result)
-  }
+  return fetch(`https://gist.github.com.ru/jcouyang/edc3d175769e893b39e6c5be12a8526f?height=${height}&weight=${weight}`)
+    .then(resp => resp.json())
+    .then(json => json.result)
+}
+
+let xweigth = Xstream.fromEvent('change', 'weight', '70')
+let xheight = Xstream.fromEvent('change', 'height', '175')
 
-  let promiseXstream = lift2<"Xstream", string, string, Promise<any>>(bmiCalc)(
-    Xstream.fromEvent('change', 'weight', '70'),
-    Xstream.fromEvent('change', 'height', '175')
-  )
+let promiseXstream = lift2<"Xstream", string, string, Promise<any>>(bmiCalc)(
+  xweigth,
+  xheight
+)
 
 let Xeg5 = FlatMap.Xstream.flatMap(Xstream.fromPromise, promiseXstream)
-.toFantasyX()
-
-   let ViewEg5 = props => (
-     <div>
-       <label>Height: {props.height} cm
-         <input type="range" name="height" onChange={props.actions.fromEvent} min="150" max="200" defaultValue={props.height} />
-       </label>
-       <label>Weight: {props.weight} kg
-         <input type="range" name="weight" onChange={props.actions.fromEvent} min="40" max="100" defaultValue={props.weight} />
-       </label>
-       <p>HEALTH: <span>{props.health}</span></p>
-       <p>BMI: <span className="result">{props.bmi}</span></p>
-     </div>
-   )
-
-   let Eg5 = Xeg5.apply(ViewEg5)
+    .toFantasyX()
+
+let ViewEg5 = props => (
+    <div>
+    <label>Height: {props.height} cm
+    <input type="range" name="height" onChange={props.actions.fromEvent} min="150" max="200" defaultValue={props.height} />
+    </label>
+    <label>Weight: {props.weight} kg
+    <input type="range" name="weight" onChange={props.actions.fromEvent} min="40" max="100" defaultValue={props.weight} />
+    </label>
+    <p>HEALTH: <span>{props.health}</span></p>
+    <p>BMI: <span className="result">{props.bmi}</span></p>
+    </div>
+)
+
+let Eg5 = Xeg5.apply(ViewEg5)
 
 xmount(<Eg5/>, document.getElementById('eg5') )
+
+let Xeg6 = Xstream.fromEvent('click', 'increment')
+    .toFantasyX<{count:number}>()
+    .map(x => 1)
+    .foldS((acc, a) => {
+      return { count: (acc.count||0) + a }})
+
+let ViewEg6 = props => <p>
+    <span className="result">{props.count || 0}</span>
+    <input type="button" name="increment" value="+1" onClick={e=>props.actions.fromEvent(e)} />
+    </p>
+
+let Eg6 = Xeg6.apply(ViewEg6)
+
+xmount(<Eg6/>, document.getElementById('eg6') )
+
+let Xeg7 = Xstream.fromEvent('click', 'decrement')
+      .toFantasyX<{count:number}>()
+      .map(x => -1)
+      .foldS((acc, a) => {
+        return { count: (acc.count||0) + a }})
+
+  let ViewEg7 = props => <p>
+      <input type="button" name="decrement" value="-" onClick={e=>props.actions.fromEvent(e)} />
+      <span className="result">{props.count || 0}</span>
+      <input type="button" name="increment" value="+" onClick={e=>props.actions.fromEvent(e)} />
+  </p>
+
+  let Eg7 = Xeg7.merge(Xeg6).apply(ViewEg7)
+
+xmount(<Eg7/>, document.getElementById('eg7') )