Merge pull request #125 from Detaysoft/meeting

Meeting Feature Added!

README.md

@@ -60,6 +60,8 @@ import { MessageBox } from 'react-chat-elements/native';
 12. [Avatar](#avatar-component)
 13. [LocationMessage](#locationmessage-component)
 14. [SpotifyMessage](#spotifymessage-component)
+15. [MeetingItem](#meetingitem-component)
+16. [MeetingList](#meetinglist-component)
 
 ## ChatItem Component
 
@@ -555,3 +557,72 @@ import { SpotifyMessage } from 'react-chat-elements'
 | data | {} | object | message data |
 | width | 300 | int | spotify embed width |
 | height | 380 | int | spotify embed height |
+
+
+## MeetingItem Component
+
+![meeting-photo](https://user-images.githubusercontent.com/15075759/90499887-cd878500-e152-11ea-9e13-80118bf2c94f.png)
+
+```javascript
+import { MeetingItem } from 'react-chat-elements'
+
+<MeetingItem
+    subject={'New Release!!!'}
+    avatars={[
+        src: 'https://facebook.github.io/react/img/logo.svg'
+    ]}
+    onMeetingClick={console.log}
+    onShareClick={console.log}/>
+```
+#### MeetingItem props
+
+| prop | default | type | description |
+| ---- | ---- | ---- | ---- |
+| subject | none | string | MeetingItem subject |
+| subjectLimit | 60 | int | MeetingItem subject text limit |
+| date | none | date | MeetingItem date |
+| dateString | none | string | MeetingItem represents dateString or timeagojs(now, date) |
+| lazyLoadingImage | none | image path | lazy loading image |
+| onClick | none | function | MeetingItem on click |
+| onMeetingClick | none | function | MeetingItem on meeting click |
+| onShareClick | none | function | MeetingItem on share click |
+| avatars | none | date | MeetingItem avatars |
+| avatarLimit | 5 | date | MeetingItem avatars limit |
+
+
+## MeetingList Component
+
+![meetingList-photo](https://user-images.githubusercontent.com/15075759/90499889-ce201b80-e152-11ea-9cdb-7c3ef0e04b4e.png)
+
+```javascript
+import { MeetingList } from 'react-chat-elements'
+
+<MeetingList
+    className='meeting-list'
+    dataSource={[
+        {
+            id: '1',
+            subject: 'New Release',
+            date: new Date(),
+            avatars: [{
+               src: 'https://facebook.github.io/react/img/logo.svg',
+            }]
+        },
+        .
+        .
+        .
+    ]} />
+```
+
+#### MeetingList props
+
+| prop | default | type | description |
+| ---- | ---- | ---- | ---- |
+| className | none | string | optional meeting list className |
+| dataSource | [] | array | meeting list array |
+| onClick | none | function | meeting list item on click (meeting(object) is returned) |
+| onMeetingClick | none | function | meeting list item on meeting click (meeting(object) is returned) |
+| onShareClick | none | function | meeting list item on share click (meeting(object) is returned) |
+| onContextMenu | none | function | meeting list item on context menu (meeting(object) is returned) |
+| onAvatarError | none | function | meeting list item on error avatar img |
+| lazyLoadingImage | none | image path | lazy loading image |

example/App.js

@@ -12,6 +12,7 @@ import {
     SideBar,
     Dropdown,
     Popup,
+    MeetingList,
 } from '../src';
 
 import FaSearch from 'react-icons/lib/fa/search';
@@ -34,6 +35,7 @@ export class App extends Component {
 
         this.state = {
             show: true,
+            list: 'chat',
             messageList: [],
         };
     }
@@ -186,6 +188,17 @@ export class App extends Component {
                             ]} />
                     ),
                 };
+            case 'meeting':
+                return {
+                    id: String(Math.random()),
+                    lazyLoadingImage: `data:image/png;base64,${this.photo()}`,
+                    avatarFlexible: true,
+                    subject: loremIpsum({ count: 1, units: 'sentences' }),
+                    date: new Date(),
+                    avatars: Array(this.token() + 2).fill(1).map(x => ({
+                        src: `data:image/png;base64,${this.photo()}`,
+                    })),
+                };
         }
     }
 
@@ -203,41 +216,60 @@ export class App extends Component {
             arr.push(i);
 
         var chatSource = arr.map(x => this.random('chat'));
+        var meetingSource = arr.map(x => this.random('meeting'));
 
         return (
             <div className='container'>
                 <div
                     className='chat-list'>
                     <SideBar
                         top={
-                            <Popup
-                                // show={this.state.show}
-                                header='Lorem ipsum dolor sit amet.'
-                                headerButtons={[{
-                                    type: 'transparent',
-                                    color: 'black',
-                                    onClick: () => {
-                                        this.setState({ show: false })
-                                    },
-                                    icon: {
-                                        component: <FaClose />,
-                                        size: 18
-                                    }
-                                }]}
-                                text='Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem animi veniam voluptas eius!'
-                                footerButtons={[{
-                                    color: 'white',
-                                    backgroundColor: '#ff5e3e',
-                                    text: "Vazgeç",
-                                }, {
-                                    color: 'white',
-                                    backgroundColor: 'lightgreen',
-                                    text: "Tamam",
-                                }]} />
+                            <div>
+                                <Popup
+                                    // show={this.state.show}
+                                    header='Lorem ipsum dolor sit amet.'
+                                    headerButtons={[{
+                                        type: 'transparent',
+                                        color: 'black',
+                                        onClick: () => {
+                                            this.setState({ show: false })
+                                        },
+                                        icon: {
+                                            component: <FaClose />,
+                                            size: 18
+                                        }
+                                    }]}
+                                    text='Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem animi veniam voluptas eius!'
+                                    footerButtons={[{
+                                        color: 'white',
+                                        backgroundColor: '#ff5e3e',
+                                        text: "Vazgeç",
+                                    }, {
+                                        color: 'white',
+                                        backgroundColor: 'lightgreen',
+                                        text: "Tamam",
+                                    }]} />
+
+                                <Button
+                                    type='transparent'
+                                    color='black'
+                                    text={this.state.list === 'chat' ? 'MeetingList' : 'ChatList'}
+                                    onClick={() => {
+                                        this.setState({
+                                            list: this.state.list === 'chat' ? 'meeeting' : 'chat',
+                                        });
+                                    }}/>
+                            </div>
                         }
                         center={
+                            this.state.list === 'chat' ?
                             <ChatList
                                 dataSource={chatSource} />
+                            :
+                            <MeetingList
+                                onMeetingClick={console.log}
+                                onShareClick={console.log}
+                                dataSource={meetingSource} />
                         }
                         bottom={
                             <span>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-chat-elements",
-  "version": "10.9.3",
+  "version": "10.10.0",
   "description": "Reactjs chat components",
   "author": "Avare Kodcu <[email protected]>",
   "main": "dist/main.js",

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

@@ -6,11 +6,11 @@ exports[`Input component should render without issues 1`] = `
 >
   <input
     className="rce-input"
+    defaultValue=""
     onChange={[Function]}
     placeholder=""
     style={null}
     type="text"
-    value=""
   />
 </div>
 `;

src/MeetingItem/MeetingItem.css

@@ -0,0 +1,117 @@
+.rce-container-mtitem {
+    flex-direction: column;
+    display: block;
+    overflow: hidden;
+    min-width: 240px;
+}
+
+.rce-mtitem {
+    position: relative;
+    background: white;
+    display: flex;
+    flex-direction: column;
+    user-select: none;
+    max-width: 100%;
+    overflow: hidden;
+    min-width: 240px;
+    border-bottom: 1px solid rgba(0,0,0,.05);
+}
+
+.rce-mtitem:hover {
+    background: #fbfbfb;
+}
+
+
+.rce-mtitem-subject {
+    padding: 0 10px;
+    margin-top: 5px;
+    font-size: 15px;
+    overflow: hidden;
+    color: #333;
+    max-height: 35px;
+    text-overflow: ellipsis;
+}
+
+.rce-mtitem-body {
+    display: flex;
+    flex: 1;
+    flex-direction: row;
+    display: flex;
+    justify-content: center;
+    padding: 0 10px;
+    overflow: hidden;
+    align-items: center;
+}
+
+.rce-mtitem-body--avatars {
+    display: flex;
+    flex: 1;
+    overflow: hidden;
+    opacity: 0.7;
+}
+
+.rce-mtitem-body--functions {
+    width: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+}
+
+.rce-mtitem-footer {
+    padding: 0 10px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 5px;
+}
+
+.rce-mtitem-body--avatars .rce-avatar-container {
+    margin-left: -15px;
+    border: 2px solid #fff;
+}
+
+.rce-mtitem-body--avatars .rce-avatar-container:first-child {
+    margin: 0;
+}
+
+.rce-mtitem-letter {
+    color: #fff;
+    background: #e48989;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.rce-mtitem-button {
+    font-size: 25px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+    background: #5ba7c5;
+    border-radius: 100%;
+    padding: 3px;
+    transition: 300ms;
+}
+
+.rce-mtitem-share {
+    font-size: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #5ba7c5;
+    margin: -10px 0;
+    transition: 300ms;
+}
+
+
+.rce-mtitem-button:hover,
+.rce-mtitem-share:hover {
+    opacity: 0.8;
+    cursor: pointer;
+}
+
+.rce-mtitem-date {
+    color: #9f9f9f;
+    font-size: 13px;
+}