|
|
@ -9,7 +9,11 @@ let chat = create({
|
|
|
|
render: function() {
|
|
|
|
render: function() {
|
|
|
|
let tmpEvents = [
|
|
|
|
let tmpEvents = [
|
|
|
|
{sender: "Foks", content: "Hello"},
|
|
|
|
{sender: "Foks", content: "Hello"},
|
|
|
|
{sender: "Foks", content: "This is Neo v4"}
|
|
|
|
{sender: "Foks", content: "This is Neo v4"},
|
|
|
|
|
|
|
|
{sender: "Foks", content: "Here are a bunch of test messages\nWithout Multiple\nLines\n:("},
|
|
|
|
|
|
|
|
{sender: "Foks", content: "Look at these nice colors"},
|
|
|
|
|
|
|
|
{sender: "Foks", content: "And the font"},
|
|
|
|
|
|
|
|
{sender: "Foks", content: "And the avatars"}
|
|
|
|
]
|
|
|
|
]
|
|
|
|
let events = tmpEvents.map((event, id) => {
|
|
|
|
let events = tmpEvents.map((event, id) => {
|
|
|
|
return <Event event={event} key={id}/>
|
|
|
|
return <Event event={event} key={id}/>
|
|
|
@ -17,7 +21,7 @@ let chat = create({
|
|
|
|
//TODO: replace with something that only renders events in view
|
|
|
|
//TODO: replace with something that only renders events in view
|
|
|
|
return <div className="chat">
|
|
|
|
return <div className="chat">
|
|
|
|
<div className="events">
|
|
|
|
<div className="events">
|
|
|
|
Chat content
|
|
|
|
{events}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
}
|
|
|
|
}
|
|
|
@ -25,11 +29,25 @@ let chat = create({
|
|
|
|
|
|
|
|
|
|
|
|
let Event = create({
|
|
|
|
let Event = create({
|
|
|
|
displayName: "Event",
|
|
|
|
displayName: "Event",
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
getInitialState: function() {
|
|
|
|
|
|
|
|
let color = ["red", "green", "yellow", "blue", "purple", "cyan"][Math.floor(Math.random()*6)]
|
|
|
|
|
|
|
|
//TODO: HTML Sanitize
|
|
|
|
|
|
|
|
// needs an unsafe html content set
|
|
|
|
|
|
|
|
let parsedBody = this.props.event.content.replace(/\n/g, "<br>")
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
|
|
|
color: color,
|
|
|
|
|
|
|
|
parsedBody: parsedBody
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
render: function() {
|
|
|
|
render: function() {
|
|
|
|
return <div className="event">
|
|
|
|
return <div className="event">
|
|
|
|
<img id="avatar" src="https://placekitten.com/200/200"/>
|
|
|
|
<svg id="avatar" data-jdenticon-value={this.props.event.sender}></svg>
|
|
|
|
<span id="content">{this.props.event.sender}</span>
|
|
|
|
<div className="body">
|
|
|
|
<div id="content">{this.props.event.content}</div>
|
|
|
|
<div id="name" className={`fg-palet-${this.state.color}`}>{this.props.event.sender}</div>
|
|
|
|
|
|
|
|
<div id="content">{this.state.parsedBody}</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
})
|
|
|
|