Merge pull request #159 from Detaysoft/meeting-link

meetingLink added

Author: esracoskun

README.md

@@ -62,6 +62,7 @@ import { MessageBox } from 'react-chat-elements/native';
 14. [SpotifyMessage](#spotifymessage-component)
 15. [MeetingItem](#meetingitem-component)
 16. [MeetingList](#meetinglist-component)
+17. [MeetingLink](#meetinglink-component)
 
 ## ChatItem Component
 
@@ -154,6 +155,7 @@ import { MessageBox } from 'react-chat-elements'
 | onReplyMessageClick | none | function | reply message on click event |
 | onRemoveMessageClick | none | function | message remove on click event |
 | onMeetingMoreSelect | none | function | message list item onMeetingMoreSelect event, gets 3 parameters: message item, index of item, event |
+| onMeetingLinkClick | none | function | meeting link on click event |
 | onContextMenu | none | function | message contextmenu click event |
 | forwarded | none | boolean | message forward icon |
 | replyButton | none | boolean | message reply icon |
@@ -251,6 +253,26 @@ import { MeetingMessage } from 'react-chat-elements'
 | onMeetingVideoLinkClick | none | function | meeting video link message on click event (message(object) is returned) |
 | onMeetingMoreSelect | none | function | message list item onMeetingMoreSelect event, gets 3 parameters: message item, index of item, event |
 
+
+## MeetingLink Component
+
+![meetinglink-photo](https://user-images.githubusercontent.com/53093667/152175228-4fcb5d83-8a54-4378-8cb3-c85f939e510f.png)
+
+```javascript
+import { MeetingLink } from 'react-chat-elements'
+<MeetingLink
+    meetingID='1'
+    title='Lorem ipsum dolor sit amet.'/>
+```
+
+#### MeetingLink props
+
+| prop | default | type | description |
+| ---- | ---- | ---- | ---- |
+| meetingID | none | string | Meeting Link id |
+| title | none | string | Meeting Link title |
+| onMeetingLinkClick | none | function | meeting link on click event |
+
 ## SystemMessage Component
 
 ```javascript

example/App.js

@@ -43,7 +43,7 @@ export class App extends Component {
     }
 
     UNSAFE_componentWillMount() {
-        this.addMessage(7)
+        this.addMessage(8)
     }
 
     getRandomColor() {
@@ -100,6 +100,9 @@ export class App extends Component {
                     case 7:
                         mtype = 'audio';
                         break;
+                    case 8:
+                        mtype = 'meetingLink';
+                        break;
                     default:
                         mtype = 'text';
                         status = 'read';

package.json

@@ -22,11 +22,11 @@
     "jest": "21.2.1",
     "lorem-ipsum": "^1.0.4",
     "nwb": "^0.23.0",
-    "react": "16.0.0-beta.5",
+    "react": "^17.0.2",
     "react-dom": "^16.3.0",
     "react-native": "0.49.5",
     "react-scripts": "^1.0.10",
-    "react-test-renderer": "16.0.0-beta.5",
+    "react-test-renderer": "^17.0.2",
     "webpack-cli": "^3.3.0",
     "webpack-node-externals": "^1.6.0"
   },

src/MeetingLink/MeetingLink.css

@@ -0,0 +1,45 @@
+.rce-mtlink {
+  padding-bottom: 15px;
+  min-width: 400px;
+}
+
+.rce-mtlink-content {
+  background-color: #e2dfec;
+  border-radius: 100px;
+  padding: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  overflow: hidden;
+}
+
+.rce-mtlink-item {
+  color: #6c687c;
+  display: flex;
+  align-items: center;
+  user-select: none;
+  max-width: 100%;
+  overflow: hidden;
+  min-width: 240px;
+  justify-content: flex-start;
+}
+
+.rce-mtlink-title {
+  color: #07030a;
+  padding-left: 7px;
+  font-size: 15px;
+}
+
+.rce-mtlink-btn {
+  background: #ededed;
+  border-radius: 50%;
+  margin-left: 15px;
+  display: flex;
+  padding: 7px;
+  cursor: pointer;
+}
+
+.rce-mtlink-svg {
+  color: #585858;
+  font-size: 16px;
+}

src/MeetingLink/MeetingLink.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import './MeetingLink.css';
+
+import MdOutlineVideoCameraFront from 'react-icons/lib/md/video-call';
+
+function MeetingLink({meetingID, title, onMeetingMoreSelect}) {
+  const onHandleClick = () => {
+    onMeetingMoreSelect(meetingID);
+  }
+
+  return (
+    <div className='rce-mtlink'>
+      <div className='rce-mtlink-content'>
+        <div className='rce-mtlink-item'>
+          <div className='rce-mtlink-title'>
+            {title}
+          </div>
+        </div>
+        <div className='rce-mtlink-btn' onClick={onHandleClick}>
+          <MdOutlineVideoCameraFront className='rce-mtlink-svg'/>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+MeetingLink.defaultProps = {
+  meetingID: '',
+  title: '',
+  onMeetingMoreSelect: () => void(0),
+};
+
+export default MeetingLink;

src/MeetingLink/__tests__/MeetingLink.js

@@ -0,0 +1,13 @@
+import React, { Component } from 'react';
+import { shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
+import MeetingLink from '../MeetingLink';
+
+describe('MeetingLink component', () => {
+  it('should render without issues', () => {
+    const component = shallow(<MeetingLink status='read'/>);
+
+    expect(component.length).toBe(1);
+    expect(toJson(component)).toMatchSnapshot();
+  });
+});

src/MeetingLink/__tests__/__snapshots__/MeetingLink.js.snap

@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MeetingLink component should render without issues 1`] = `
+<div
+  className="rce-mtlink"
+>
+  <div
+    className="rce-mtlink-content"
+  >
+    <div
+      className="rce-mtlink-item"
+    >
+      <div
+        className="rce-mtlink-title"
+      />
+    </div>
+    <div
+      className="rce-mtlink-btn"
+      onClick={[Function]}
+    >
+      <MdVideoCall
+        className="rce-mtlink-svg"
+      />
+    </div>
+  </div>
+</div>
+`;

src/MessageBox/MessageBox.js

@@ -10,6 +10,7 @@ import ReplyMessage from '../ReplyMessage/ReplyMessage';
 import MeetingMessage from '../MeetingMessage/MeetingMessage';
 import VideoMessage from '../VideoMessage/VideoMessage';
 import AudioMessage from '../AudioMessage/AudioMessage';
+import MeetingLink from '../MeetingLink/MeetingLink';
 
 import Avatar from '../Avatar/Avatar';
 
@@ -258,6 +259,14 @@ export class MessageBox extends React.PureComponent {
                                         text={this.props.text} />
                                 }
 
+                                {
+                                    this.props.type === 'meetingLink' &&
+                                    <MeetingLink
+                                        meetingID={this.props.meetingID}
+                                        title={this.props.text}
+                                        onMeetingMoreSelect={this.props.onMeetingLinkClick}/>
+                                }
+
                                 <div
                                     className={classNames(
                                         'rce-mbox-time',

src/MessageList/MessageList.js

@@ -155,6 +155,11 @@ export class MessageList extends Component {
             this.props.onMeetingMoreSelect(item, i, e);
     }
 
+    onMeetingLinkClick(item, i, e) {
+        if (this.props.onMeetingLinkClick instanceof Function)
+            this.props.onMeetingLinkClick(item, i, e);
+    }
+
     render() {
         return (
             <div
@@ -183,6 +188,7 @@ export class MessageList extends Component {
                                 onMeetingMessageClick={this.props.onMeetingMessageClick && ((e) => this.onMeetingMessageClick(x, i, e))}
                                 onMeetingTitleClick={this.props.onMeetingTitleClick}
                                 onMeetingVideoLinkClick={this.props.onMeetingVideoLinkClick}
+                                onMeetingLinkClick={this.props.onMeetingLinkClick && ((e) => this.onMeetingLinkClick(x, i, e))}
                             />
                         ))
                     }