Author: smaisonneuve Date: 2015-04-27 11:48:09 +0000 (Mon, 27 Apr 2015) New Revision: 1258 Url: http://forge.nuiton.org/projects/sandbox/repository/revisions/1258 Log: [Wit] - Timeline: create a wrapper TimelineSession to take react key into account Modified: wit/js/components/Timeline.js Modified: wit/js/components/Timeline.js =================================================================== --- wit/js/components/Timeline.js 2015-04-27 09:48:55 UTC (rev 1257) +++ wit/js/components/Timeline.js 2015-04-27 11:48:09 UTC (rev 1258) @@ -40,28 +40,25 @@ // Build timeline - var items = [], style; + var items = [], data; if (sessions[0].startDate.isAfter(startDate)) { - var style = { - width: (sessions[0].startDate.diff(startDate) / endDate.diff(startDate) * 100 ) +"%", - }; - var items = [( - <div className="slice" style={style}></div> - )]; + + data = { width: (sessions[0].startDate.diff(startDate) / endDate.diff(startDate) * 100 ) +"%" } + items = [<TimelineSession key={startDate.unix()} data={data}/>]; + } - + items = items.concat( sessions.map(function(session) { - style = { - background: session.color, + data = { + title: session.name, + color: session.color, width: (session.duration / endDate.diff(startDate) * 100 || 0) +"%", - flexGrow: !session.duration ? "1":"0" + grow: !session.duration ? "1":"0" }; - var title = session.name; - return ( - <div className="slice" style={style} title={title}>{title}</div> - ); + + return <TimelineSession key={session.startDate.unix()} data={data} /> }) ); @@ -77,4 +74,20 @@ </div> ); } +}); + +var TimelineSession = React.createClass({ + render: function () { + var data = this.props.data; + + var title = data.title || ""; + var style = { + background: data.color, + width: data.width, + flexGrow: data.grow + }; + return ( + <div className="slice" style={style} title={title}>{title}</div> + ); + } }); \ No newline at end of file