73e8f2d4c8
* hidously mangle ChatView to start moving it to React * fix up Realtime/index.js - should be good now? * in theory this should compile * ok the MapChat renders using react... * move Handlers code into react - woot * try reintegrating backbone * fix wrapper styling * chat box opens and closes properly * make the unread count work * organize more sanely * refactor some of the ChatView functions * removed management of chatview from room * css can stop handling logic right about now * makin things work * don't need room here anymore * set raw html in message * make pending work * removeParticipant when mapper left was broken * re-enable scrolling, focus, and blur
46 lines
1.6 KiB
JavaScript
46 lines
1.6 KiB
JavaScript
import React, { PropTypes, Component } from 'react'
|
|
|
|
class Participant extends Component {
|
|
render() {
|
|
const { conversationLive, mapperIsLive, isParticipating, isPending, id, self, image, username, selfName, color } = this.props
|
|
return (
|
|
<div className={`participant participant-${id} ${self ? 'is-self' : ''}`}>
|
|
<div className="chat-participant-image">
|
|
<img src={image} style={{ border: `2px solid ${color}`}} />
|
|
</div>
|
|
<div className="chat-participant-name">
|
|
{username} {self ? '(me)' : ''}
|
|
</div>
|
|
{!self && !conversationLive && <button
|
|
className={`button chat-participant-invite-call ${isPending ? 'pending' : ''}`}
|
|
onClick={() => !isPending && this.props.inviteACall(id)} // Realtime.inviteACall(id)
|
|
/>}
|
|
{!self && mapperIsLive && !isParticipating && <button
|
|
className={`button chat-participant-invite-join ${isPending ? 'pending' : ''}`}
|
|
onClick={() => !isPending && this.props.inviteToJoin(id)} // Realtime.inviteToJoin(id)
|
|
/>}
|
|
{isParticipating && <span className="chat-participant-participating">
|
|
<div className="green-dot"></div>
|
|
</span>}
|
|
<div className="clearfloat"></div>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|
|
Participant.propTypes = {
|
|
conversationLive: PropTypes.bool,
|
|
mapperIsLive: PropTypes.bool,
|
|
isParticipating: PropTypes.bool,
|
|
isPending: PropTypes.bool,
|
|
color: PropTypes.string, // css color
|
|
id: PropTypes.number,
|
|
image: PropTypes.string, // image url
|
|
self: PropTypes.bool,
|
|
username: PropTypes.string,
|
|
inviteACall: PropTypes.func,
|
|
inviteToJoin: PropTypes.func
|
|
}
|
|
|
|
export default Participant
|