Skip to content

Commit b27c218

Browse files
abdurrahmanekrabdurrahmanekr
authored
Merge pull request #125 from Detaysoft/meeting
Meeting Feature Added!
2 parents 8a4c7f3 + 1851d19 commit b27c218

File tree

13 files changed

+519
-26
lines changed

13 files changed

+519
-26
lines changed

‎README.md‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,8 @@ import { MessageBox } from 'react-chat-elements/native';
6060
12. [Avatar](#avatar-component)
6161
13. [LocationMessage](#locationmessage-component)
6262
14. [SpotifyMessage](#spotifymessage-component)
63+
15. [MeetingItem](#meetingitem-component)
64+
16. [MeetingList](#meetinglist-component)
6365

6466
## ChatItem Component
6567

@@ -555,3 +557,72 @@ import { SpotifyMessage } from 'react-chat-elements'
555557
| data | {} | object | message data |
556558
| width | 300 | int | spotify embed width |
557559
| height | 380 | int | spotify embed height |
560+
561+
562+
## MeetingItem Component
563+
564+
![meeting-photo](https://user-images.githubusercontent.com/15075759/90499887-cd878500-e152-11ea-9e13-80118bf2c94f.png)
565+
566+
```javascript
567+
import { MeetingItem } from 'react-chat-elements'
568+
569+
<MeetingItem
570+
subject={'New Release!!!'}
571+
avatars={[
572+
src: 'https://facebook.github.io/react/img/logo.svg'
573+
]}
574+
onMeetingClick={console.log}
575+
onShareClick={console.log}/>
576+
```
577+
#### MeetingItem props
578+
579+
| prop | default | type | description |
580+
| ---- | ---- | ---- | ---- |
581+
| subject | none | string | MeetingItem subject |
582+
| subjectLimit | 60 | int | MeetingItem subject text limit |
583+
| date | none | date | MeetingItem date |
584+
| dateString | none | string | MeetingItem represents dateString or timeagojs(now, date) |
585+
| lazyLoadingImage | none | image path | lazy loading image |
586+
| onClick | none | function | MeetingItem on click |
587+
| onMeetingClick | none | function | MeetingItem on meeting click |
588+
| onShareClick | none | function | MeetingItem on share click |
589+
| avatars | none | date | MeetingItem avatars |
590+
| avatarLimit | 5 | date | MeetingItem avatars limit |
591+
592+
593+
## MeetingList Component
594+
595+
![meetingList-photo](https://user-images.githubusercontent.com/15075759/90499889-ce201b80-e152-11ea-9cdb-7c3ef0e04b4e.png)
596+
597+
```javascript
598+
import { MeetingList } from 'react-chat-elements'
599+
600+
<MeetingList
601+
className='meeting-list'
602+
dataSource={[
603+
{
604+
id: '1',
605+
subject: 'New Release',
606+
date: new Date(),
607+
avatars: [{
608+
src: 'https://facebook.github.io/react/img/logo.svg',
609+
}]
610+
},
611+
.
612+
.
613+
.
614+
]} />
615+
```
616+
617+
#### MeetingList props
618+
619+
| prop | default | type | description |
620+
| ---- | ---- | ---- | ---- |
621+
| className | none | string | optional meeting list className |
622+
| dataSource | [] | array | meeting list array |
623+
| onClick | none | function | meeting list item on click (meeting(object) is returned) |
624+
| onMeetingClick | none | function | meeting list item on meeting click (meeting(object) is returned) |
625+
| onShareClick | none | function | meeting list item on share click (meeting(object) is returned) |
626+
| onContextMenu | none | function | meeting list item on context menu (meeting(object) is returned) |
627+
| onAvatarError | none | function | meeting list item on error avatar img |
628+
| lazyLoadingImage | none | image path | lazy loading image |

‎example/App.js‎

Lines changed: 56 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {
1212
SideBar,
1313
Dropdown,
1414
Popup,
15+
MeetingList,
1516
} from '../src';
1617

1718
import FaSearch from 'react-icons/lib/fa/search';
@@ -34,6 +35,7 @@ export class App extends Component {
3435

3536
this.state = {
3637
show: true,
38+
list: 'chat',
3739
messageList: [],
3840
};
3941
}
@@ -186,6 +188,17 @@ export class App extends Component {
186188
]} />
187189
),
188190
};
191+
case 'meeting':
192+
return {
193+
id: String(Math.random()),
194+
lazyLoadingImage: `data:image/png;base64,${this.photo()}`,
195+
avatarFlexible: true,
196+
subject: loremIpsum({ count: 1, units: 'sentences' }),
197+
date: new Date(),
198+
avatars: Array(this.token() + 2).fill(1).map(x => ({
199+
src: `data:image/png;base64,${this.photo()}`,
200+
})),
201+
};
189202
}
190203
}
191204

@@ -203,41 +216,60 @@ export class App extends Component {
203216
arr.push(i);
204217

205218
var chatSource = arr.map(x => this.random('chat'));
219+
var meetingSource = arr.map(x => this.random('meeting'));
206220

207221
return (
208222
<div className='container'>
209223
<div
210224
className='chat-list'>
211225
<SideBar
212226
top={
213-
<Popup
214-
// show={this.state.show}
215-
header='Lorem ipsum dolor sit amet.'
216-
headerButtons={[{
217-
type: 'transparent',
218-
color: 'black',
219-
onClick: () => {
220-
this.setState({ show: false })
221-
},
222-
icon: {
223-
component: <FaClose />,
224-
size: 18
225-
}
226-
}]}
227-
text='Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem animi veniam voluptas eius!'
228-
footerButtons={[{
229-
color: 'white',
230-
backgroundColor: '#ff5e3e',
231-
text: "Vazgeç",
232-
}, {
233-
color: 'white',
234-
backgroundColor: 'lightgreen',
235-
text: "Tamam",
236-
}]} />
227+
<div>
228+
<Popup
229+
// show={this.state.show}
230+
header='Lorem ipsum dolor sit amet.'
231+
headerButtons={[{
232+
type: 'transparent',
233+
color: 'black',
234+
onClick: () => {
235+
this.setState({ show: false })
236+
},
237+
icon: {
238+
component: <FaClose />,
239+
size: 18
240+
}
241+
}]}
242+
text='Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem animi veniam voluptas eius!'
243+
footerButtons={[{
244+
color: 'white',
245+
backgroundColor: '#ff5e3e',
246+
text: "Vazgeç",
247+
}, {
248+
color: 'white',
249+
backgroundColor: 'lightgreen',
250+
text: "Tamam",
251+
}]} />
252+
253+
<Button
254+
type='transparent'
255+
color='black'
256+
text={this.state.list === 'chat' ? 'MeetingList' : 'ChatList'}
257+
onClick={() => {
258+
this.setState({
259+
list: this.state.list === 'chat' ? 'meeeting' : 'chat',
260+
});
261+
}}/>
262+
</div>
237263
}
238264
center={
265+
this.state.list === 'chat' ?
239266
<ChatList
240267
dataSource={chatSource} />
268+
:
269+
<MeetingList
270+
onMeetingClick={console.log}
271+
onShareClick={console.log}
272+
dataSource={meetingSource} />
241273
}
242274
bottom={
243275
<span>

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

‎src/Input/__tests__/__snapshots__/Input.js.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,11 @@ exports[`Input component should render without issues 1`] = `
66
>
77
<input
88
className="rce-input"
9+
defaultValue=""
910
onChange={[Function]}
1011
placeholder=""
1112
style={null}
1213
type="text"
13-
value=""
1414
/>
1515
</div>
1616
`;

‎src/MeetingItem/MeetingItem.css‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
.rce-container-mtitem {
2+
flex-direction: column;
3+
display: block;
4+
overflow: hidden;
5+
min-width: 240px;
6+
}
7+
8+
.rce-mtitem {
9+
position: relative;
10+
background: white;
11+
display: flex;
12+
flex-direction: column;
13+
user-select: none;
14+
max-width: 100%;
15+
overflow: hidden;
16+
min-width: 240px;
17+
border-bottom: 1px solid rgba(0,0,0,.05);
18+
}
19+
20+
.rce-mtitem:hover {
21+
background: #fbfbfb;
22+
}
23+
24+
25+
.rce-mtitem-subject {
26+
padding: 0 10px;
27+
margin-top: 5px;
28+
font-size: 15px;
29+
overflow: hidden;
30+
color: #333;
31+
max-height: 35px;
32+
text-overflow: ellipsis;
33+
}
34+
35+
.rce-mtitem-body {
36+
display: flex;
37+
flex: 1;
38+
flex-direction: row;
39+
display: flex;
40+
justify-content: center;
41+
padding: 0 10px;
42+
overflow: hidden;
43+
align-items: center;
44+
}
45+
46+
.rce-mtitem-body--avatars {
47+
display: flex;
48+
flex: 1;
49+
overflow: hidden;
50+
opacity: 0.7;
51+
}
52+
53+
.rce-mtitem-body--functions {
54+
width: 60px;
55+
display: flex;
56+
align-items: center;
57+
justify-content: flex-end;
58+
}
59+
60+
.rce-mtitem-footer {
61+
padding: 0 10px;
62+
display: flex;
63+
align-items: center;
64+
justify-content: space-between;
65+
margin-bottom: 5px;
66+
}
67+
68+
.rce-mtitem-body--avatars .rce-avatar-container {
69+
margin-left: -15px;
70+
border: 2px solid #fff;
71+
}
72+
73+
.rce-mtitem-body--avatars .rce-avatar-container:first-child {
74+
margin: 0;
75+
}
76+
77+
.rce-mtitem-letter {
78+
color: #fff;
79+
background: #e48989;
80+
display: flex;
81+
align-items: center;
82+
justify-content: center;
83+
}
84+
85+
.rce-mtitem-button {
86+
font-size: 25px;
87+
display: flex;
88+
align-items: center;
89+
justify-content: center;
90+
color: #fff;
91+
background: #5ba7c5;
92+
border-radius: 100%;
93+
padding: 3px;
94+
transition: 300ms;
95+
}
96+
97+
.rce-mtitem-share {
98+
font-size: 30px;
99+
display: flex;
100+
align-items: center;
101+
justify-content: center;
102+
color: #5ba7c5;
103+
margin: -10px 0;
104+
transition: 300ms;
105+
}
106+
107+
108+
.rce-mtitem-button:hover,
109+
.rce-mtitem-share:hover {
110+
opacity: 0.8;
111+
cursor: pointer;
112+
}
113+
114+
.rce-mtitem-date {
115+
color: #9f9f9f;
116+
font-size: 13px;
117+
}

0 commit comments

Comments
 (0)