[Assorted-commits] SF.net SVN: assorted:[1883] sandbox/trunk/src/web/react/index.coffee

[<yan...@us...>]

Revision: 1883
          http://sourceforge.net/p/assorted/svn/1883
Author:   yangzhang
Date:     2014-05-25 07:43:59 +0000 (Sun, 25 May 2014)
Log Message:
-----------
Add React experiments with refs

Modified Paths:
--------------
    sandbox/trunk/src/web/react/index.coffee

Modified: sandbox/trunk/src/web/react/index.coffee
===================================================================
--- sandbox/trunk/src/web/react/index.coffee	2014-05-24 18:58:59 UTC (rev 1882)
+++ sandbox/trunk/src/web/react/index.coffee	2014-05-25 07:43:59 UTC (rev 1883)
@@ -33,9 +33,14 @@
       R.input {type: 'text', value: @state.msg2, onChange: @handleChange2}
 )
 
-Main = React.createClass(
+TextExperiments = React.createClass(
   getInitialState: ->
     counter: 0
+  componentDidMount: ->
+    setInterval(
+      => @setState(counter: @state.counter + 1)
+      1000
+    )
   render: ->
     R.div {},
       PropsVsState {initCount: @state.counter}
@@ -43,9 +48,40 @@
       InputTextChanges()
 )
 
+######
+
+HigherOrder = React.createClass(
+  handleClick: ->
+    alert if _.isArray(@refs.outer.props.children) then 'array' else 'object'
+  render: ->
+    R.div {},
+      R.div {ref: 'outer'}, @props.contents()
+      R.button {onClick: @handleClick}, "tell me what's in contents()"
+)
+
+RefExperiments = React.createClass(
+  render: ->
+    R.div {},
+      HigherOrder {
+        contents: -> [
+          R.label {}, 'hello'
+          R.label {}, 'world'
+        ]
+      }
+      HigherOrder {
+        contents: ->
+          R.label {}, 'hello'
+      }
+)
+
+######
+
+Main = React.createClass(
+  render: ->
+    R.div {},
+      TextExperiments {}
+      RefExperiments {}
+)
+
 $ ->
   main = React.renderComponent(Main(), $('.main')[0])
-  setInterval(
-    -> main.setState(counter: main.state.counter + 1)
-    1000
-  )

This was sent by the SourceForge.net collaborative development platform, the world's largest Open Source development site.