@@ -78,32 +78,66 @@ let Eg4 = Xeg4.map(a=>({sum: a})).apply(ViewEg4)
7878xmount ( < Eg4 /> , document . getElementById ( 'eg4' ) )
7979
8080function bmiCalc ( weight , height ) {
81- return fetch ( `https://gist.github.com.ru/jcouyang/edc3d175769e893b39e6c5be12a8526f?height=${ height } ${ weight } )
82- . then ( resp => resp . json ( ) )
83- . then ( json => json . result )
84- }
81+ return fetch ( `https://gist.github.com.ru/jcouyang/edc3d175769e893b39e6c5be12a8526f?height=${ height } ${ weight } )
82+ . then ( resp => resp . json ( ) )
83+ . then ( json => json . result )
84+ }
85+ 86+ let xweigth = Xstream . fromEvent ( 'change' , 'weight' , '70' )
87+ let xheight = Xstream . fromEvent ( 'change' , 'height' , '175' )
8588
86- let promiseXstream = lift2 < "Xstream" , string , string , Promise < any > > ( bmiCalc ) (
87- Xstream . fromEvent ( 'change' , 'weight' , '70' ) ,
88- Xstream . fromEvent ( 'change' , 'height' , '175' )
89- )
89+ let promiseXstream = lift2 < "Xstream" , string , string , Promise < any > > ( bmiCalc ) (
90+ xweigth ,
91+ xheight
92+ )
9093
9194let Xeg5 = FlatMap . Xstream . flatMap ( Xstream . fromPromise , promiseXstream )
92- . toFantasyX ( )
93- 94- let ViewEg5 = props => (
95- < div >
96- < label > Height: { props . height } cm
97- < input type = "range" name = "height" onChange = { props . actions . fromEvent } min = "150" max = "200" defaultValue = { props . height } />
98- </ label >
99- < label > Weight: { props . weight } kg
100- < input type = "range" name = "weight" onChange = { props . actions . fromEvent } min = "40" max = "100" defaultValue = { props . weight } />
101- </ label >
102- < p > HEALTH: < span > { props . health } </ span > </ p >
103- < p > BMI: < span className = "result" > { props . bmi } </ span > </ p >
104- </ div >
105- )
106- 107- let Eg5 = Xeg5 . apply ( ViewEg5 )
95+ . toFantasyX ( )
96+ 97+ let ViewEg5 = props => (
98+ < div >
99+ < label > Height: { props . height } cm
100+ < input type = "range" name = "height" onChange = { props . actions . fromEvent } min = "150" max = "200" defaultValue = { props . height } />
101+ </ label >
102+ < label > Weight: { props . weight } kg
103+ < input type = "range" name = "weight" onChange = { props . actions . fromEvent } min = "40" max = "100" defaultValue = { props . weight } />
104+ </ label >
105+ < p > HEALTH: < span > { props . health } </ span > </ p >
106+ < p > BMI: < span className = "result" > { props . bmi } </ span > </ p >
107+ </ div >
108+ )
109+ 110+ let Eg5 = Xeg5 . apply ( ViewEg5 )
108111
109112xmount ( < Eg5 /> , document . getElementById ( 'eg5' ) )
113+ 114+ let Xeg6 = Xstream . fromEvent ( 'click' , 'increment' )
115+ . toFantasyX < { count :number } > ( )
116+ . map ( x => 1 )
117+ . foldS ( ( acc , a ) => {
118+ return { count : ( acc . count || 0 ) + a } } )
119+ 120+ let ViewEg6 = props => < p >
121+ < span className = "result" > { props . count || 0 } </ span >
122+ < input type = "button" name = "increment" value = "+1" onClick = { e => props . actions . fromEvent ( e ) } />
123+ </ p >
124+ 125+ let Eg6 = Xeg6 . apply ( ViewEg6 )
126+ 127+ xmount ( < Eg6 /> , document . getElementById ( 'eg6' ) )
128+ 129+ let Xeg7 = Xstream . fromEvent ( 'click' , 'decrement' )
130+ . toFantasyX < { count :number } > ( )
131+ . map ( x => - 1 )
132+ . foldS ( ( acc , a ) => {
133+ return { count : ( acc . count || 0 ) + a } } )
134+ 135+ let ViewEg7 = props => < p >
136+ < input type = "button" name = "decrement" value = "-" onClick = { e => props . actions . fromEvent ( e ) } />
137+ < span className = "result" > { props . count || 0 } </ span >
138+ < input type = "button" name = "increment" value = "+" onClick = { e => props . actions . fromEvent ( e ) } />
139+ </ p >
140+ 141+ let Eg7 = Xeg7 . merge ( Xeg6 ) . apply ( ViewEg7 )
142+ 143+ xmount ( < Eg7 /> , document . getElementById ( 'eg7' ) )
0 commit comments