Skip to content

Commit d946a45

Browse files
esracoskunesracoskun
committed
MeetingMessage created
1 parent 216b504 commit d946a45

7 files changed

Lines changed: 291 additions & 1 deletion

File tree

‎example/App.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,9 @@ export class App extends Component {
8888
case 4:
8989
type = 'spotify';
9090
break;
91+
case 5:
92+
type = 'meet';
93+
break;
9194
default:
9295
type = 'text';
9396
status = 'read';
@@ -104,6 +107,22 @@ export class App extends Component {
104107
titleColor: this.getRandomColor(),
105108
message: loremIpsum({ count: 1, units: 'sentences' }),
106109
}) : null,
110+
meet: this.token() >= 1 ? ({
111+
id: parseInt(Math.random() * 10 % 6),
112+
meetSubject: loremIpsum({ count: 2, units: 'words' }),
113+
title: loremIpsum({ count: 2, units: 'words' }),
114+
date: +new Date(),
115+
dataSource: Array(this.token() + 5).fill(1).map(x => ({
116+
id: String(Math.random()),
117+
avatar: `data:image/png;base64,${this.photo()}`,
118+
message: loremIpsum({ count: 1, units: 'sentences' }),
119+
title: loremIpsum({ count: 2, units: 'words' }),
120+
lazyLoadingImage: `data:image/png;base64,${this.photo()}`,
121+
alt: loremIpsum({ count: 2, units: 'words' }),
122+
avatarFlexible: true,
123+
date: +new Date(),
124+
})),
125+
}) : null,
107126
type: type,
108127
theme: 'white',
109128
view: 'list',

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-chat-elements",
3-
"version": "10.10.2",
3+
"version": "10.11.2",
44
"description": "Reactjs chat components",
55
"author": "Avare Kodcu <abdurrahmaneker58@gmail.com>",
66
"main": "dist/main.js",

‎src/MeetingMessage/MeetingMessage.css‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
.rce-mbox-mtmg {
2+
user-select: none;
3+
display: flex;
4+
justify-content: center;
5+
align-content: center;
6+
padding-bottom: 25px;
7+
min-width: 500px;
8+
max-width: 500px;
9+
}
10+
11+
.rce-mtmg {
12+
width: 100%;
13+
position: relative;
14+
background: #f5f5f5;
15+
display: flex;
16+
flex-direction: column;
17+
margin: 5px 0px;
18+
float: left;
19+
border-radius: 2px;
20+
}
21+
22+
.rce-mtmg-subject {
23+
text-align: start;
24+
display: inline-block;
25+
font-size: 15px;
26+
padding: 5px;
27+
}
28+
29+
.rce-mtmg-toogleItem {
30+
width: 100%;
31+
height: 100%;
32+
}
33+
34+
.rce-mtmg-toogleClick {
35+
height: 50px;
36+
background: #6264a7;
37+
color: white;
38+
font-size: 15px;
39+
display: flex;
40+
justify-content: space-between;
41+
}
42+
43+
.rce-mtmg-toogleClick:hover {
44+
opacity: 0.9;
45+
}
46+
47+
.rce-mtmg-item {
48+
display: flex;
49+
align-items: center;
50+
justify-content: flex-start;
51+
padding: 0px 10px;
52+
}
53+
54+
.rce-mtmg-item > svg {
55+
width: 23px;
56+
height: 23px;
57+
padding: 10px;
58+
}
59+
60+
.rce-mtmg-content {
61+
display: flex;
62+
flex-direction: column;
63+
padding: 0 10px;
64+
}
65+
66+
.rce-mtmg-date {
67+
color: #cecece;
68+
font-size: 13px;
69+
}
70+
71+
.rce-mtmg-toogleContent {
72+
height: auto;
73+
min-height: 60px;
74+
flex-direction: column;
75+
}
76+
77+
.rce-mtmg-right-icon {
78+
display: flex;
79+
align-items: center;
80+
position: relative;
81+
right: 10px;
82+
cursor: pointer;
83+
}
84+
85+
.rce-mtmg-right-icon > svg {
86+
width: 23px;
87+
height: 23px;
88+
}
89+
90+
.rce-mitem {
91+
display: flex;
92+
}
93+
94+
.rce-mitem:hover {
95+
background: #d0d0d0;
96+
}
97+
98+
.rce-mitem-body {
99+
display: flex;
100+
justify-content: center;
101+
align-items: flex-start;
102+
flex-direction: column;
103+
padding: 8px;
104+
max-width: 500px;
105+
width: 400px;
106+
}
107+
108+
.rce-mitem-body--top {
109+
display: flex;
110+
align-items: center;
111+
}
112+
113+
.rce-mitem-body--top-title {
114+
font-size: 16px;
115+
padding: 0px 15px 0 0;
116+
text-transform: uppercase;
117+
font-weight: 600;
118+
}
119+
120+
.rce-mitem-body--bottom-title {
121+
color: #252525;
122+
font-size: 15px;
123+
}
124+
125+
.rce-mitem-body--top-time {
126+
font-size: 12px;
127+
color: rgba(0,0,0,0.4);
128+
}

‎src/MeetingMessage/MeetingMessage.js‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
import React, { Component } from 'react';
2+
import './MeetingMessage.css';
3+
4+
import FaCalendar from 'react-icons/lib/fa/calendar';
5+
import MdMoreHoriz from 'react-icons/lib/md/more-horiz'
6+
import IoVideoCamera from 'react-icons/lib/io/ios-videocam'
7+
8+
import {
9+
format,
10+
} from'timeago.js';
11+
12+
import Avatar from '../Avatar/Avatar';
13+
14+
import classNames from 'classnames';
15+
16+
export class MeetingMessage extends Component {
17+
constructor(props) {
18+
super(props);
19+
20+
}
21+
22+
toggleClick(id) {
23+
var x = document.getElementById(id);
24+
if (x.style.display === "none" || x.style.display === "") {
25+
x.style.display = "flex";
26+
} else {
27+
x.style.display = "none";
28+
}
29+
}
30+
31+
render() {
32+
const {
33+
id,
34+
title,
35+
meetSubject,
36+
onClick,
37+
date,
38+
dataSource,
39+
} = this.props;
40+
41+
const dateText = date && !isNaN(date) && (format(date));
42+
43+
return (
44+
<div
45+
className="rce-mbox-mtmg"
46+
onClick={onClick}>
47+
<div className="rce-mtmg">
48+
<div
49+
className="rce-mtmg-subject">
50+
{meetSubject || 'Unknown'}
51+
</div>
52+
<div
53+
className="rce-mtmg-toogleClick"
54+
onClick={() => this.toggleClick(id)}>
55+
<div className="rce-mtmg-item">
56+
<FaCalendar />
57+
<div className="rce-mtmg-content">
58+
<span className="rce-mtmg-title">
59+
{title}
60+
</span>
61+
<span className='rce-mtmg-date'>
62+
{dateText}
63+
</span>
64+
</div>
65+
</div>
66+
<div className="rce-mtmg-right-icon">
67+
<MdMoreHoriz/>
68+
</div>
69+
</div>
70+
<div id={id}
71+
className="rce-mtmg-toogleContent"
72+
style={{display: "none"}} >
73+
{
74+
dataSource &&
75+
dataSource.map((x, i) => {
76+
return (
77+
<div className="rce-mitem">
78+
<div className="rce-mitem-body">
79+
<div className="rce-mitem-body--top">
80+
<div className="rce-mitem-body--top-title">
81+
{x.title}
82+
</div>
83+
<div className="rce-mitem-body--top-time">
84+
{
85+
x.date &&
86+
!isNaN(x.date) &&
87+
(format(x.date))
88+
}
89+
</div>
90+
</div>
91+
<div className="rce-mitem-body--bottom">
92+
<div
93+
className="rce-mitem-body--bottom-title" >
94+
{x.message}
95+
</div>
96+
</div>
97+
</div>
98+
</div>
99+
)
100+
})
101+
}
102+
</div>
103+
</div>
104+
</div>
105+
);
106+
}
107+
}
108+
109+
MeetingMessage.defaultProps = {
110+
id: '',
111+
alt: '',
112+
title: '',
113+
meetSubject: '',
114+
message: '',
115+
dataSource: [],
116+
date: new Date(),
117+
onClick: () => void(0),
118+
onAvatarError: () => void(0),
119+
};
120+
121+
export default MeetingMessage;

‎src/MessageBox/MessageBox.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import SystemMessage from '../SystemMessage/SystemMessage';
77
import LocationMessage from '../LocationMessage/LocationMessage';
88
import SpotifyMessage from '../SpotifyMessage/SpotifyMessage';
99
import ReplyMessage from '../ReplyMessage/ReplyMessage';
10+
import MeetingMessage from '../MeetingMessage/MeetingMessage';
1011

1112
import Avatar from '../Avatar/Avatar';
1213

@@ -186,6 +187,18 @@ export class MessageBox extends Component {
186187
uri={this.props.uri || this.props.text} />
187188
}
188189

190+
{
191+
this.props.type === 'meet' &&
192+
this.props.meet &&
193+
<MeetingMessage
194+
id={this.props.meet.id}
195+
meetSubject={this.props.meet.meetSubject}
196+
title={this.props.meet.title}
197+
date={this.props.meet.date}
198+
dataSource={this.props.meet.dataSource}
199+
onMeetingMessageClick={this.props.onMeetingMessageClick} />
200+
}
201+
189202
<div
190203
className={classNames(
191204
'rce-mbox-time',

‎src/MessageList/MessageList.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,11 @@ export class MessageList extends Component {
9999
this.props.onMessageFocused(item, i, e);
100100
}
101101

102+
onMeetingMessageClick(item, i, e) {
103+
if (this.props.onMeetingMessageClick instanceof Function)
104+
this.props.onMeetingMessageClick(item, i, e);
105+
}
106+
102107
loadRef(ref) {
103108
this.mlistRef = ref;
104109
if (this.props.cmpRef instanceof Function)
@@ -163,6 +168,7 @@ export class MessageList extends Component {
163168
onClick={this.props.onClick && ((e) => this.onClick(x, i, e))}
164169
onContextMenu={this.props.onContextMenu && ((e) => this.onContextMenu(x, i, e))}
165170
onMessageFocused={this.props.onMessageFocused && ((e) => this.onMessageFocused(x, i, e))}
171+
onMeetingMessageClick={this.props.onMeetingMessageClick && ((e) => this.onMeetingMessageClick(x, i, e))}
166172
/>
167173
))
168174
}
@@ -195,6 +201,7 @@ MessageList.defaultProps = {
195201
onForwardClick: null,
196202
onReplyClick: null,
197203
onReplyMessageClick: null,
204+
onMeetingMessageClick: null,
198205
onDownButtonClick: null,
199206
onOpen: null,
200207
onPhotoError: null,

‎src/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import Popup from './Popup/Popup';
1313
import ReplyMessage from './ReplyMessage/ReplyMessage';
1414
import MeetingItem from './MeetingItem/MeetingItem';
1515
import MeetingList from './MeetingList/MeetingList';
16+
import MeetingMessage from './MeetingMessage/MeetingMessage';
1617

1718

1819
export {
@@ -31,4 +32,5 @@ export {
3132
ReplyMessage,
3233
MeetingItem,
3334
MeetingList,
35+
MeetingMessage,
3436
};

0 commit comments

Comments
 (0)