Skip to content

Commit fe1b60b

Browse files
esracoskunesracoskun
committed
MeetingMessage edited
1 parent 9eb63ac commit fe1b60b

9 files changed

Lines changed: 419 additions & 57 deletions

File tree

‎README.md‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -143,6 +143,9 @@ import { MessageBox } from 'react-chat-elements'
143143
| onTitleClick | none | function | message title on click event |
144144
| onForwardClick | none | function | message forward on click event |
145145
| onReplyClick | none | function | message reply on click event |
146+
| onMeetingMessageClick | none | function | meeting message on click event |
147+
| onMeetingTitleClick | none | function | meeting title message on click event |
148+
| onMeetingVideoLinkClick | none | function | meeting video link message on click event |
146149
| onReplyMessageClick | none | function | reply message on click event |
147150
| onContextMenu | none | function | message contextmenu click event |
148151
| forwarded | none | boolean | message forward icon |
@@ -177,6 +180,66 @@ import { MessageBox } from 'react-chat-elements'
177180
![reply-message](https://user-images.githubusercontent.com/15075759/80224625-9dbbeb00-8652-11ea-994f-022be0cffe30.png)
178181

179182

183+
## MeetingMessage Component
184+
185+
```javascript
186+
import { MeetingMessage } from 'react-chat-elements'
187+
188+
<MeetingMessage
189+
meetSubject={'New Release'}
190+
title={'in ullamco'}
191+
date={new Date()}
192+
altTitle={'Commodo aliquip'}
193+
participants={[
194+
{
195+
id: '1',
196+
title: 'Facebook',
197+
},
198+
.
199+
.
200+
.
201+
]}
202+
dataSource={[
203+
{
204+
id: '1',
205+
avatar: 'https://facebook.github.io/react/img/logo.svg',
206+
message: 'Lorem ipsum dolor sit amet.',
207+
title: 'Elit magna',
208+
avatarFlexible: true,
209+
date: new Date(),
210+
event: {[
211+
title: 'Toplantı sona erdi!',
212+
avatars={[
213+
src: 'https://facebook.github.io/react/img/logo.svg'
214+
]}
215+
]}
216+
record: {[
217+
avatar: 'https://facebook.github.io/react/img/logo.svg',
218+
title: 'Arama',
219+
savedBy: 'Kaydeden: Elit magna',
220+
time: new Date(),
221+
]}
222+
},
223+
.
224+
.
225+
.
226+
]} />
227+
```
228+
229+
#### MeetingMessage props
230+
231+
| prop | default | type | description |
232+
| ---- | ---- | ---- | ---- |
233+
| meetSubject | none | string | Meeting messagee |
234+
| title | none | string | Meeting title |
235+
| date | new Date() | Date | Meeting date |
236+
| altTitle | none | string | Meeting subtitle |
237+
| participants | [] | array | Meeting participant array |
238+
| dataSource | [] | array | meeting list array |
239+
| onMeetingMessageClick | none | function | meeting message on click event (message(object) is returned) |
240+
| onMeetingTitleClick | none | function | meeting title message on click event (message(object) is returned) |
241+
| onMeetingVideoLinkClick | none | function | meeting video link message on click event (message(object) is returned) |
242+
180243
## SystemMessage Component
181244

182245
```javascript

‎example/App.js‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -108,19 +108,33 @@ export class App extends Component {
108108
message: loremIpsum({ count: 1, units: 'sentences' }),
109109
}) : null,
110110
meeting: this.token() >= 1 ? ({
111-
id: parseInt(Math.random() * 10 % 6),
112111
meetSubject: loremIpsum({ count: 2, units: 'words' }),
113112
title: loremIpsum({ count: 2, units: 'words' }),
114113
date: +new Date(),
114+
altTitle: loremIpsum({ count: 2, units: 'words' }),
115+
participants: Array(this.token() + 6).fill(1).map(x => ({
116+
id: parseInt(Math.random() * 10 % 6),
117+
title: loremIpsum({ count: 1, units: 'words' }),
118+
})),
115119
dataSource: Array(this.token() + 5).fill(1).map(x => ({
116120
id: String(Math.random()),
117121
avatar: `data:image/png;base64,${this.photo()}`,
118122
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' }),
123+
title: loremIpsum({ count: 2, units: 'words' }),
122124
avatarFlexible: true,
123125
date: +new Date(),
126+
event: {
127+
title: loremIpsum({ count: 2, units: 'words' }),
128+
avatars: Array(this.token() + 2).fill(1).map(x => ({
129+
src: `data:image/png;base64,${this.photo()}`,
130+
})),
131+
},
132+
record: {
133+
avatar: `data:image/png;base64,${this.photo()}`,
134+
title: loremIpsum({ count: 1, units: 'words' }),
135+
savedBy: 'Kaydeden: ' + loremIpsum({ count: 2, units: 'words' }),
136+
time: new Date().toLocaleString(),
137+
},
124138
})),
125139
}) : null,
126140
type: type,

‎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.11.2",
3+
"version": "10.11.0",
44
"description": "Reactjs chat components",
55
"author": "Avare Kodcu <abdurrahmaneker58@gmail.com>",
66
"main": "dist/main.js",

‎src/MeetingMessage/MeetingMessage.css‎

Lines changed: 124 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
display: flex;
44
justify-content: center;
55
align-content: center;
6-
padding-bottom: 25px;
6+
padding-bottom: 13px;
77
min-width: 500px;
88
max-width: 500px;
99
}
@@ -23,15 +23,15 @@
2323
text-align: start;
2424
display: inline-block;
2525
font-size: 15px;
26-
padding: 5px;
26+
padding: 5px 9px;
2727
}
2828

2929
.rce-mtmg-toogleItem {
3030
width: 100%;
3131
height: 100%;
3232
}
3333

34-
.rce-mtmg-toogleClick {
34+
.rce-mtmg-body {
3535
height: 50px;
3636
background: #6264a7;
3737
color: white;
@@ -40,7 +40,7 @@
4040
justify-content: space-between;
4141
}
4242

43-
.rce-mtmg-toogleClick:hover {
43+
.rce-mtmg-body:hover {
4444
opacity: 0.9;
4545
}
4646

@@ -68,12 +68,39 @@
6868
font-size: 13px;
6969
}
7070

71+
.rce-mtmg-body-bottom {
72+
display: flex;
73+
flex-direction: row;
74+
padding: 9px;
75+
color: #6264a7;
76+
cursor: pointer;
77+
}
78+
79+
.rce-mtmg-bottom--tptitle {
80+
display: flex;
81+
justify-content: center;
82+
align-items: center;
83+
}
84+
85+
.rce-mtmg-bottom--tptitle > svg{
86+
color: #6264a7a1;
87+
}
88+
89+
.rce-mtmg-body-bottom--bttitle > span {
90+
padding: 0 0 0 6px;
91+
}
92+
7193
.rce-mtmg-toogleContent {
94+
display: none;
7295
height: auto;
7396
min-height: 60px;
7497
flex-direction: column;
7598
}
7699

100+
.rce-mtmg-toogleContent--click {
101+
display: flex;
102+
}
103+
77104
.rce-mtmg-right-icon {
78105
display: flex;
79106
align-items: center;
@@ -101,28 +128,118 @@
101128
align-items: flex-start;
102129
flex-direction: column;
103130
padding: 8px;
104-
max-width: 500px;
105-
width: 400px;
106131
}
107132

108133
.rce-mitem-body--top {
109134
display: flex;
110135
align-items: center;
136+
margin-bottom: 2px;
111137
}
112138

113139
.rce-mitem-body--top-title {
114140
font-size: 16px;
115141
padding: 0px 15px 0 0;
116-
text-transform: uppercase;
142+
text-transform: capitalize;
117143
font-weight: 600;
118144
}
119145

146+
.rce-mitem-body--top-title:hover {
147+
cursor: pointer;
148+
text-decoration: underline;
149+
color: #6264a7;
150+
}
151+
120152
.rce-mitem-body--bottom-title {
121153
color: #252525;
122154
font-size: 15px;
155+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
123156
}
124157

125158
.rce-mitem-body--top-time {
126159
font-size: 12px;
127160
color: rgba(0,0,0,0.4);
128161
}
162+
163+
.rce-mitem-bottom-body {
164+
padding: 10px 8px;
165+
}
166+
167+
.rce-mitem-bottom-body-top {
168+
display: flex;
169+
flex-direction: column;
170+
}
171+
172+
.rce-mitem-avatar-content {
173+
position: absolute;
174+
right: 10px;
175+
display: flex;
176+
}
177+
178+
.rce-mitem-avatar {
179+
padding: 0 3px 0 0;
180+
}
181+
182+
.rce-mitem-avatar img {
183+
width: 50px;
184+
height: 50px;
185+
border: none !important;
186+
background: #ccc;
187+
border-radius: 100%;
188+
}
189+
190+
.rce-mtmg-call-record {
191+
width: 350px;
192+
height: 85%;
193+
background: #eaeaea;
194+
margin-top: 11px;
195+
}
196+
197+
.rce-mtmg-call-body {
198+
display: flex;
199+
align-items: flex-start;
200+
flex-direction: row;
201+
position: relative;
202+
}
203+
204+
.rce-mtmg-call-avatars {
205+
width: 140px !important;
206+
height: 100px !important;
207+
position: relative;
208+
}
209+
210+
.rce-mtmg-call-avatars img {
211+
width: 100% !important;
212+
height: 100% !important;
213+
background: #ccc;
214+
}
215+
216+
.rce-mtmg-call-body-title {
217+
display: flex;
218+
position: relative;
219+
flex-direction: column;
220+
top: 30px;
221+
left: 15px;
222+
}
223+
.rce-mtmg-call-body-bottom {
224+
color: #505050;
225+
text-overflow: ellipsis;
226+
white-space: nowrap;
227+
overflow: hidden;
228+
width: 185px;
229+
font-size: 12px;
230+
}
231+
232+
.rce-mtmg-record:hover {
233+
background: #d0d0d0;
234+
}
235+
236+
.rce-mtmg-record-time {
237+
position: absolute;
238+
bottom: 5px;
239+
right: 5px;
240+
font-size: 13px;
241+
background: #000000cf;
242+
color: white;
243+
padding: 4px;
244+
border-radius: 5px;
245+
}

0 commit comments

Comments
 (0)