style edited

Author: esracoskun

README.md

@@ -186,7 +186,7 @@ import { MessageBox } from 'react-chat-elements'
 import { MeetingMessage } from 'react-chat-elements'
 
 <MeetingMessage
-    meetSubject={'New Release'}
+    subject={'New Release'}
     title={'in ullamco'}
     date={new Date()}
     altTitle={'Commodo aliquip'}
@@ -230,7 +230,7 @@ import { MeetingMessage } from 'react-chat-elements'
 
 | prop | default | type | description |
 | ---- | ---- | ---- | ---- |
-| meetSubject | none | string | Meeting messagee |
+| subject | none | string | Meeting messagee |
 | title | none | string | Meeting title |
 | date | new Date() | Date | Meeting date |
 | altTitle | none | string | Meeting subtitle |

example/App.js

@@ -108,7 +108,7 @@ export class App extends Component {
                         message: loremIpsum({ count: 1, units: 'sentences' }),
                     }) : null,
                     meeting: this.token() >= 1 ? ({
-                        meetSubject: loremIpsum({ count: 2, units: 'words' }),
+                        subject: loremIpsum({ count: 2, units: 'words' }),
                         title: loremIpsum({ count: 2, units: 'words' }),
                         date: +new Date(),
                         altTitle: loremIpsum({ count: 2, units: 'words' }),

src/MeetingMessage/MeetingMessage.css

@@ -220,6 +220,14 @@
     top: 30px;
     left: 15px;
 }
+
+.rce-mtmg-call-body-title > span {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    width: 185px;
+}
+
 .rce-mtmg-call-body-bottom {
     color: #505050;
     text-overflow: ellipsis;

src/MeetingMessage/MeetingMessage.js

@@ -32,7 +32,7 @@ export class MeetingMessage extends Component {
         const {
             date,
             title,
-            meetSubject,
+            subject,
             onClick,
             altTitle,
             dataSource,
@@ -50,7 +50,7 @@ export class MeetingMessage extends Component {
                 <div className="rce-mtmg">
                     <div
                         className="rce-mtmg-subject">
-                        {meetSubject || 'Unknown Meeting'}
+                        {subject || 'Unknown Meeting'}
                     </div>
                     <div
                         className="rce-mtmg-body"
@@ -159,7 +159,9 @@ export class MeetingMessage extends Component {
                                                                         </div>
                                                                     </div>
                                                                     <div className="rce-mtmg-call-body-title">
-                                                                        {x.record.title}
+                                                                        <span>
+                                                                            {x.record.title}
+                                                                        </span>
                                                                         <div className="rce-mtmg-call-body-bottom">
                                                                             {x.record.savedBy}
                                                                         </div>
@@ -187,7 +189,7 @@ export class MeetingMessage extends Component {
 MeetingMessage.defaultProps = {
     date: new Date(),
     title: '',
-    meetSubject: '',
+    subject: '',
     altTitle: '',
     participantsLimit: 3,
     avatarFlexible: false,

src/MessageBox/MessageBox.js

@@ -190,7 +190,7 @@ export class MessageBox extends Component {
                                     this.props.type === 'meeting' &&
                                     this.props.meeting &&
                                     <MeetingMessage
-                                        meetSubject={this.props.meeting.meetSubject}
+                                        subject={this.props.meeting.subject}
                                         title={this.props.meeting.title}
                                         date={this.props.meeting.date}
                                         altTitle={this.props.meeting.altTitle}