meeting link changes

Author: Emre Güdür

example/utils/MessageTypes.ts

@@ -1,6 +1,7 @@
 import loremIpsum from 'lorem-ipsum'
 import { MessageType } from '../../src/type'
 import { getRandomColor, photo, token } from './common'
+import { MdOutlineVideoCall } from 'react-icons/md'
 
 export const photoMessage: MessageType = {
   type: 'photo',
@@ -320,6 +321,20 @@ export const meetingMessage: MessageType = {
 
 export const meetingLinkMessage: MessageType = {
   type: 'meetingLink',
+  actionButtons: [
+    {
+      onClickButton(id) {
+        console.log(id)
+      },
+      Component: () => MdOutlineVideoCall({ size: '25px' }),
+    },
+    {
+      onClickButton(id) {
+        console.log(id)
+      },
+      Component: () => MdOutlineVideoCall({ size: '25px' }),
+    },
+  ],
   meetingID: String(Math.random()),
   id: String(Math.random()),
   position: token() >= 1 ? 'right' : 'left',

example/utils/common.ts

@@ -18,7 +18,7 @@ export const getRandomColor = () => {
 }
 
 export const token = () => {
-  return Math.floor((Math.random() * 10) % 8)
+  return Math.floor((Math.random() * 10) % 9)
 }
 
 export function useForceUpdate() {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-chat-elements",
-  "version": "12.0.0",
+  "version": "12.0.1",
   "description": "Reactjs chat components",
   "author": "Avare Kodcu <abdurrahmaneker58@gmail.com>",
   "main": "dist/main.js",

src/MeetingLink/MeetingLink.css

@@ -5,7 +5,7 @@
 
 .rce-mtlink-content {
   background-color: #e2dfec;
-  border-radius: 100px;
+  border-radius: 4px;
   padding: 10px;
   display: flex;
   align-items: center;
@@ -32,14 +32,16 @@
 
 .rce-mtlink-btn {
   background: #ededed;
-  border-radius: 50%;
-  margin-left: 15px;
+  border-radius: 4px;
   display: flex;
-  padding: 7px;
-  cursor: pointer;
+  margin-left: 5px;
 }
 
-.rce-mtlink-svg {
-  color: #585858;
-  font-size: 16px;
+.rce-mtlink-btn-content {
+  padding: 4px;
+  cursor: pointer;
+  border-right: 1px solid;
+}
+.rce-mtlink-btn-content:last-child {
+  border-right: none;
 }

src/MeetingLink/MeetingLink.tsx

@@ -1,22 +1,23 @@
 import { FC } from 'react'
 import './MeetingLink.css'
 
-import { MdOutlineVideoCall } from 'react-icons/md'
-import { IMeetingLinkMessageProps } from '../type'
+import { IMeetingLinkMessageProps, MeetingLinkActionButtons } from '../type'
 
 const MeetingLink: FC<IMeetingLinkMessageProps> = props => {
-  const onHandleClick = (): void => {
-    props.onMeetingLinkClick?.(props.meetingID || '')
-  }
-
   return (
-    <div className='rce-mtlink' onClick={onHandleClick}>
+    <div className='rce-mtlink'>
       <div className='rce-mtlink-content'>
         <div className='rce-mtlink-item'>
           <div className='rce-mtlink-title'>{props.text}</div>
         </div>
         <div className='rce-mtlink-btn'>
-          <MdOutlineVideoCall className='rce-mtlink-svg' />
+          {props.actionButtons.map((Item: MeetingLinkActionButtons) => {
+            return (
+              <div className='rce-mtlink-btn-content' onClick={() => Item.onClickButton(props.meetingID)}>
+                <Item.Component />
+              </div>
+            )
+          })}
         </div>
       </div>
     </div>

src/MessageBox/MessageBox.css

@@ -216,6 +216,7 @@
   font-size: 12px;
   right: -4px;
   bottom: -5px;
+  user-select: none;
 }
 
 .rce-mbox-time.non-copiable:before {

src/type.d.ts

@@ -628,6 +628,14 @@ export interface IMeetingLinkMessage extends IMessage {
   meetingID?: string
 }
 
+export type TActionButton = React.FunctionComponent<any>
+
+export interface MeetingLinkActionButtons {
+  // return meeting id
+  onClickButton: (id: string) => void
+  Component: TActionButton
+}
+
 /**
  * IMeetingLinkMessageProps Interface
  * @prop type The Meeting Link Message's type is "meetingLink" and required.
@@ -636,7 +644,7 @@ export interface IMeetingLinkMessage extends IMessage {
  * @prop onMeetingMoreSelect The Meeting More Select Message's function onMeetingMoreSelect(event: React.MouseEvent<T, MouseEvent>) and optional.
  */
 export interface IMeetingLinkMessageProps extends IMeetingLinkMessage {
-  onMeetingLinkClick?: (id: string) => void
+  actionButtons?: MeetingLinkActionButtons[]
 }
 
 /**