Skip to content

Instantly share code, notes, and snippets.

@irae

irae/.gitignore

Last active August 29, 2015 13:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save irae/9862890 to your computer and use it in GitHub Desktop.
Save irae/9862890 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="/react/build/react-with-addons.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 4s ease-in;
}
.fade-enter.fade-enter-active {
opacity: 1;
background-color: #00ff00;
}
</style>
</head>
<body>
<h1>Rendered</h1>
<div id="content">(data)</div>
<p>When this works, item 1 should always have exactly 2 lines, item 2 should have exactly 3 lines and item 3 exactly 1 line; no lines should be added (the underlying app state always have 2, 3 and 1 lines).
<p>Also, no lines should remain green after fading in.
<h1>Sketch</h1>
<pre>
+----------------------------------------------------+
| container |
| |
| +------------+ +------------+ +------------+ |
| | item1 | | item2 | | item3 | |
| | +-------+ | | +-------+ | | +-------+ | |
| | | line1 | | | | line1 | | | | line1 | | |
| | +-------+ | | +-------+ | | +-------+ | |
| | +-------+ | | +-------+ | | | |
| | | line2 | | | | line2 | | | | |
| | +-------+ | | +-------+ | | | |
| | | | +-------+ | | | |
| | | | | line3 | | | | |
| | | | +-------+ | | | |
| +------------+ +------------+ +------------+ |
| |
+----------------------------------------------------+
</pre>
<script type="text/javascript" src="jsbin.hokahaze.js"></script>
</body>
</html>
Raw
jsbin.hokahaze.coffee
CSSTransitionGroup = React.addons.CSSTransitionGroup
{div, a, p, h1, h2, h3, h4, form, input, button, span, ul, li} = React.DOM
firstLine = null
Line = React.createClass
render: ->
(div {className: 'line'}, [@props.data])
Item = React.createClass
render: ->
hdr = @props.item.hdr
lines = @props.item.lines.map (line, i) ->
#key = "#{hdr}-#{i}"
key = "#{hdr}-#{line}"
#console.log "key: #{key}"
(Line {data: line, key: key})
(div {className: "item"},
(h2 {}, hdr),
(div {},
(CSSTransitionGroup {transitionName: "fade", transitionLeave: false}, lines)))
#(div {}, lines)])
Container = React.createClass
render: ->
items = @props.items.map (item) ->
(Item {item: item, key: 'item-'+item.hdr})
(div {className: "container"},
(h2 {}, 'container'),
(div {}, items))
items = [
{
hdr: "item1"
lines: [
"line1"
"line2"
]
},{
hdr: "item2"
lines: [
"line1"
"line2"
"line3"
]
},{
hdr: "item3"
lines: [
"line1"
]
}]
linectr = 20
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#{linectr++}"
timeMutate = (delay) ->
mutateLoop = ->
mutate()
mutateStop || setTimeout mutateLoop, Math.random()*delay
mutateLoop()
document.addEventListener 'DOMContentLoaded', ->
myinstance = React.renderComponent (Container {items: items}), document.getElementById "content"
window.mutateStop = false
window.mutate = ->
mutateRandom items
myinstance.setProps items: items
#if firstLine isnt null
# firstLine.setProps data: Math.floor Math.random()*10
timeMutate 1000
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment