mariusk · March 28, 2014 21:37
diff --git a/README.txt b/README.txt
 You can find a screenshot containing the actual render together with my
 sketch at http://snag.gy/qec82.jpg .

 It's pretty basic, a "container" containing "items" containing "lines", where
 lines get modified at random about every half second. For simplicity, now lines
 are deleted or added yet, they are just mutated as-is.

 What I'm trying to accomplish is mutating the lines with animation effects
 using React and CSSTransitionGroup by changing the state from outside the
 classes themselves (typically what would happen with an updated pushed from
 a server). Everything except the animation/transitions seem to be working.

 I suspect the reason I am not able to get it working is because I mutate and
 set the "global" state (state of all items), in effect recreating all items
 and lines every time.

 So what I am trying to figure out is the "correct" way of mutating the lines
 individually based on updates from the server, and when/how I need to keep
 class instances around individually (versus how much "magic" goes on inside
 React).
diff --git a/ex.coffee b/ex.coffee
 React = require "/Users/marius/src/react/build/modules/ReactWithAddons"
 CSSTransitionGroup = React.addons.CSSTransitionGroup

 {div, a, p, h1, h2, h3, h4, form, input, button, span, ul, li} = React.DOM

 Line = React.createClass
  render: ->
    (div {className: 'line', key: @props.key}, [@props.data])

 Item = React.createClass
  render: ->
    hdr = @props.item.hdr
    lines = @props.item.lines.map (line, i) ->
      (Line {data: line, key: "#{hdr}-#{i}"})

    (div {className: "item"}, [
      (h2 {}, [hdr])
      (div {},
        (CSSTransitionGroup {transitionName: "fade"}, lines))])

    #(div {}, lines)])

 Container = React.createClass
  render: ->
    items = @props.items.map (item) ->
      (Item {item: item})

    (div {className: "container"}, [
      (h2 {}, ['container'])
      (div {}, items)])

 items = [
  {
    hdr: "item1"
    lines: [
      "line1"
      "line2"
    ]
  },{
    hdr: "item2"
    lines: [
      "line1"
      "line2"
      "line3"
    ]
  },{
    hdr: "item3"
    lines: [
      "line1"
    ]
  }]

 mutateRandom = (items) ->
  itemno = Math.floor Math.random()*items.length
  item = items[itemno]
  lineno = Math.floor Math.random()*item.lines.length
  #console.log "mutating item #{itemno} line #{lineno}"
  item.lines[lineno] = "line#{(Math.floor Math.random()*100)+1}"

 timeMutate = (instance, items, delay) ->
  mutate = ->
    mutateRandom items
    instance.setProps items: items
    setTimeout mutate, Math.random()*delay
  mutate()

 document.addEventListener 'DOMContentLoaded', ->
  myinstance = React.renderComponent (Container {items: items}), document.getElementById "content"
  timeMutate myinstance, items, 1000
diff --git a/ex.html b/ex.html
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8">
    <script type="text/javascript" charset="utf-8" src="/ex.js"></script>
    <style>
      
      div.container {
        background-color: #f5f5f5;
        display: inline-block;
        padding: 10px;
      }

      div.item {
        display: inline-block;
        padding: 10px;
        margin: 4px;
        background-color: #d5d5d5;
        vertical-align: top;
      }

      .fade-enter {
        opacity: 0.01;
        transition: opacity .5s ease-in;
      }

      .fade-enter.fade-enter-active {
        opacity: 1;
      }

      .fade-leave {
        opacity: 1;
        transition: opacity .5s ease-in;
      }

      .fade-leave.fade-leave-active {
        opacity: 0.01;
      }

    </style>
  </head>
  <body>
    <h1>Rendered</h1>
    <div id="content">(data)</div>

    <h1>Sketch</h1>
 <pre>

 +----------------------------------------------------+
 | container                                          |
 |                                                    |
 | +------------+  +------------+ +------------+      |
 | | item1      |  | item2      | | item3      |      |
 | |  +-------+ |  |  +-------+ | |  +-------+ |      |
 | |  | line1 | |  |  | line1 | | |  | line1 | |      |
 | |  +-------+ |  |  +-------+ | |  +-------+ |      |
 | |  +-------+ |  |  +-------+ | |            |      |
 | |  | line2 | |  |  | line2 | | |            |      |
 | |  +-------+ |  |  +-------+ | |            |      |
 | |            |  |  +-------+ | |            |      |
 | |            |  |  | line3 | | |            |      |
 | |            |  |  +-------+ | |            |      |
 | +------------+  +------------+ +------------+      |
 |                                                    |
 +----------------------------------------------------+

 </pre>

  </body>
 </html>
	You can find a screenshot containing the actual render together with my
	sketch at http://snag.gy/qec82.jpg .

	It's pretty basic, a "container" containing "items" containing "lines", where
	lines get modified at random about every half second. For simplicity, now lines
	are deleted or added yet, they are just mutated as-is.

	What I'm trying to accomplish is mutating the lines with animation effects
	using React and CSSTransitionGroup by changing the state from outside the
	classes themselves (typically what would happen with an updated pushed from
	a server). Everything except the animation/transitions seem to be working.

	I suspect the reason I am not able to get it working is because I mutate and
	set the "global" state (state of all items), in effect recreating all items
	and lines every time.

	So what I am trying to figure out is the "correct" way of mutating the lines
	individually based on updates from the server, and when/how I need to keep
	class instances around individually (versus how much "magic" goes on inside
	React).
	React = require "/Users/marius/src/react/build/modules/ReactWithAddons"
	CSSTransitionGroup = React.addons.CSSTransitionGroup

	{div, a, p, h1, h2, h3, h4, form, input, button, span, ul, li} = React.DOM

	Line = React.createClass
	render: ->
	(div {className: 'line', key: @props.key}, [@props.data])

	Item = React.createClass
	render: ->
	hdr = @props.item.hdr
	lines = @props.item.lines.map (line, i) ->
	(Line {data: line, key: "#{hdr}-#{i}"})

	(div {className: "item"}, [
	(h2 {}, [hdr])
	(div {},
	(CSSTransitionGroup {transitionName: "fade"}, lines))])

	#(div {}, lines)])

	Container = React.createClass
	render: ->
	items = @props.items.map (item) ->
	(Item {item: item})

	(div {className: "container"}, [
	(h2 {}, ['container'])
	(div {}, items)])

	items = [
	{
	hdr: "item1"
	lines: [
	"line1"
	"line2"
	]
	},{
	hdr: "item2"
	lines: [
	"line1"
	"line2"
	"line3"
	]
	},{
	hdr: "item3"
	lines: [
	"line1"
	]
	}]

	mutateRandom = (items) ->
	itemno = Math.floor Math.random()*items.length
	item = items[itemno]
	lineno = Math.floor Math.random()*item.lines.length
	#console.log "mutating item #{itemno} line #{lineno}"
	item.lines[lineno] = "line#{(Math.floor Math.random()*100)+1}"

	timeMutate = (instance, items, delay) ->
	mutate = ->
	mutateRandom items
	instance.setProps items: items
	setTimeout mutate, Math.random()*delay
	mutate()

	document.addEventListener 'DOMContentLoaded', ->
	myinstance = React.renderComponent (Container {items: items}), document.getElementById "content"
	timeMutate myinstance, items, 1000
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<script type="text/javascript" charset="utf-8" src="/ex.js"></script>
	<style>

	div.container {
	background-color: #f5f5f5;
	display: inline-block;
	padding: 10px;
	}

	div.item {
	display: inline-block;
	padding: 10px;
	margin: 4px;
	background-color: #d5d5d5;
	vertical-align: top;
	}

	.fade-enter {
	opacity: 0.01;
	transition: opacity .5s ease-in;
	}

	.fade-enter.fade-enter-active {
	opacity: 1;
	}

	.fade-leave {
	opacity: 1;
	transition: opacity .5s ease-in;
	}

	.fade-leave.fade-leave-active {
	opacity: 0.01;
	}

	</style>
	</head>
	<body>
	<h1>Rendered</h1>
	<div id="content">(data)</div>

	<h1>Sketch</h1>
	<pre>

	+----------------------------------------------------+
	\| container \|
	\| \|
	\| +------------+ +------------+ +------------+ \|
	\| \| item1 \| \| item2 \| \| item3 \| \|
	\| \| +-------+ \| \| +-------+ \| \| +-------+ \| \|
	\| \| \| line1 \| \| \| \| line1 \| \| \| \| line1 \| \| \|
	\| \| +-------+ \| \| +-------+ \| \| +-------+ \| \|
	\| \| +-------+ \| \| +-------+ \| \| \| \|
	\| \| \| line2 \| \| \| \| line2 \| \| \| \| \|
	\| \| +-------+ \| \| +-------+ \| \| \| \|
	\| \| \| \| +-------+ \| \| \| \|
	\| \| \| \| \| line3 \| \| \| \| \|
	\| \| \| \| +-------+ \| \| \| \|
	\| +------------+ +------------+ +------------+ \|
	\| \|
	+----------------------------------------------------+

	</pre>

	</body>
	</html>