MessageBox title features edited.

Author: abdurrahmanekr

README.md

@@ -76,11 +76,14 @@ import { MessageBox } from 'react-chat-elements'
 | position | left | string | message box position |
 | type | text | string | message type (text, photo, file) |
 | text | none | string | message text |
+| title | none | string | message title |
+| titleColor | none | string(color) | message title color |
 | data | {} | object | message data |
 | date | new Date() | Date | message date |
 | onClick | none | function | message on click (message(object) is returned) |
 | onOpen | none | function | message on open (file or photo) (message(object) is returned) |
 | onDownload | none | function | message on download (file or photo) (message(object) is returned) |
+| onTitleClick | none | function | message title on click event |
 
 
 ## SystemMessage Component

example/App.js

@@ -36,6 +36,15 @@ export class App extends Component {
 		// setInterval(this.addMessage.bind(this), 3000);
 	}
 
+	getRandomColor() {
+		var letters = '0123456789ABCDEF';
+		var color = '#';
+		for (var i = 0; i < 6; i++) {
+			color += letters[Math.floor(Math.random() * 16)];
+		}
+		return color;
+	}
+
 	token() {
 		return (parseInt(Math.random() * 10 % 3));
 	}
@@ -61,6 +70,8 @@ export class App extends Component {
 				return {
 					position: (this.token() >= 1 ? 'right' : 'left'),
 					type: type,
+					title: loremIpsum({ count: 2, units: 'words' }),
+					titleColor: this.getRandomColor(),
 					text: loremIpsum({ count: 1, units: 'sentences' }),
 					data: {
 						uri: `data:image/png;base64,${this.photo(150)}`,
@@ -162,10 +173,13 @@ export class App extends Component {
 					<MessageList
 						className='message-list'
 						onDownload={() => {
-							debugger;
+							console.log('onDownload');
+						}}
+						onTitleClick={() => {
+							console.log('onTitleClick');
 						}}
 						onOpen={() => {
-							debugger;
+							console.log('onOpen');
 						}}
 						lockable={true}
 						dataSource={this.state.messageList} />
@@ -176,16 +190,9 @@ export class App extends Component {
 						multiline={true}
 						// buttonsFloat='left'
 						rightButtons={
-							<Dropdown
-								items={[
-									'asdasd',
-									'Lorem ipsum dolor sit amet.',
-								]}
-								buttonProps={{
-									text: 'Boşu Boşuna'
-								}}
-								onSelect={this.addMessage.bind(this)}
-								animationPosition='southeast'/>
+							<Button
+								text='Gönder'
+								onClick={this.addMessage.bind(this)}/>
 						}/>
 				</div>
 

src/MessageBox/MessageBox.css

@@ -60,8 +60,16 @@
 	fill: white;
 }
 
-.rce-mbox-title{
+.rce-mbox-title {
 	margin: 0;
-	font-size: 10px;
-	color:#4f81a1;
+	margin-bottom: 8px;
+	font-weight: 500;
+	font-size: 13px;
+	color: #4f81a1;
+	user-select: none;
+	cursor: pointer;
+}
+
+.rce-mbox-title:hover {
+	text-decoration: underline;
 }

src/MessageBox/MessageBox.js

@@ -20,7 +20,7 @@ export class MessageBox extends Component {
 					className={positionCls}>
 					{
 						this.props.title &&
-						<p className="rce-mbox-title">{this.props.title}</p>
+						<p style={this.props.titleColor && {color: this.props.titleColor}} onClick={this.props.onTitleClick} className="rce-mbox-title">{this.props.title}</p>
 					}
 
 					{
@@ -83,6 +83,8 @@ MessageBox.defaultProps = {
 	type: 'text',
 	text: '',
 	title: null,
+	titleColor: null,
+	onTitleClick: null,
 	date: new Date(),
 	data: {},
 	onClick: null,

src/MessageList/MessageList.js

@@ -52,6 +52,11 @@ export class MessageList extends Component {
 			this.props.onClick(item, i);
 	}
 
+	onTitleClick(item, i) {
+		if (this.props.onTitleClick instanceof Function)
+			this.props.onTitleClick(item, i);
+	}
+
 	render() {
 		return (
 			<div
@@ -64,6 +69,7 @@ export class MessageList extends Component {
 							{...x}
 							onOpen={() => this.onOpen(x, i)}
 							onDownload={() => this.onDownload(x, i)}
+							onTitleClick={() => this.onTitleClick(x, i)}
 							onClick={() => this.onClick(x, i)} />
 					))
 				}
@@ -74,6 +80,7 @@ export class MessageList extends Component {
 
 MessageList.defaultProps = {
 	onClick: null,
+	onTitleClick: null,
 	onOpen: null,
 	onDownload: null,
 	dataSource: [],