import React, { memo } from 'react'; import classnames from 'classnames'; import stringToRGB from 'utils/color'; const Message = ({ message, coloredNick, style, onNickClick }) => { const className = classnames('message', { [`message-${message.type}`]: message.type }); style = { ...style, paddingLeft: `${window.messageIndent + 15}px`, textIndent: `-${window.messageIndent}px` }; const senderStyle = {}; if (message.from && coloredNick) { senderStyle.color = stringToRGB(message.from); } return ( <p className={className} style={style}> <span className="message-time">{message.time} </span> {message.from && ( <span className="message-sender" style={senderStyle} onClick={() => onNickClick(message.from)} > {message.from} </span> )} <span> {message.content}</span> </p> ); }; export default memo(Message);