mirror of
https://github.com/overleaf/overleaf.git
synced 2024-12-02 18:50:19 -05:00
7c97f8ab6e
* Use new JSX runtime and update Babel Node target * Update .eslintrc * Remove React imports GitOrigin-RevId: 559de0267f8f2934c56a860ea8701bb522aa861a
58 lines
1.5 KiB
JavaScript
58 lines
1.5 KiB
JavaScript
import PropTypes from 'prop-types'
|
|
import { getHueForUserId } from '../../../shared/utils/colors'
|
|
import MessageContent from './message-content'
|
|
|
|
function Message({ message, userId }) {
|
|
function hue(user) {
|
|
return user ? getHueForUserId(user.id, userId) : 0
|
|
}
|
|
|
|
function getMessageStyle(user) {
|
|
return {
|
|
borderColor: `hsl(${hue(user)}, 85%, 40%)`,
|
|
backgroundColor: `hsl(${hue(user)}, 85%, 40%`,
|
|
}
|
|
}
|
|
|
|
function getArrowStyle(user) {
|
|
return {
|
|
borderColor: `hsl(${hue(user)}, 85%, 40%)`,
|
|
}
|
|
}
|
|
|
|
const isMessageFromSelf = message.user ? message.user.id === userId : false
|
|
|
|
return (
|
|
<div className="message-wrapper">
|
|
{!isMessageFromSelf && (
|
|
<div className="name">
|
|
<span>{message.user.first_name || message.user.email}</span>
|
|
</div>
|
|
)}
|
|
<div className="message" style={getMessageStyle(message.user)}>
|
|
{!isMessageFromSelf && (
|
|
<div className="arrow" style={getArrowStyle(message.user)} />
|
|
)}
|
|
<div className="message-content">
|
|
{message.contents.map((content, index) => (
|
|
<MessageContent key={index} content={content} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
Message.propTypes = {
|
|
message: PropTypes.shape({
|
|
contents: PropTypes.arrayOf(PropTypes.string).isRequired,
|
|
user: PropTypes.shape({
|
|
id: PropTypes.string,
|
|
email: PropTypes.string,
|
|
first_name: PropTypes.string,
|
|
}),
|
|
}),
|
|
userId: PropTypes.string.isRequired,
|
|
}
|
|
|
|
export default Message
|