mediasfu-reactnative
Version:
MediaSFU Prebuilt React Native SDK
144 lines (143 loc) • 3.89 kB
TypeScript
import React from 'react';
import { Socket } from 'socket.io-client';
import { SendMessageOptions } from '../../methods/messageMethods/sendMessage';
import { CoHostResponsibility, EventType, Message, Participant, ShowAlert } from '../../@types/types';
/**
* Interface defining the props for the MessagePanel component.
*/
export interface MessagePanelOptions {
/**
* Array of messages to display.
*/
messages: Message[];
/**
* Total number of messages.
*/
messagesLength: number;
/**
* Type of the message panel ('direct' or 'group').
*/
type: 'direct' | 'group';
/**
* Username of the current user.
*/
username: string;
/**
* Function to handle sending messages.
*/
onSendMessagePress: (options: SendMessageOptions) => Promise<void>;
/**
* Background color of the message panel.
* @default '#f5f5f5'
*/
backgroundColor?: string;
/**
* Indicates if the input field is focused.
*/
focusedInput: boolean;
/**
* Function to show alerts.
*/
showAlert?: ShowAlert;
/**
* Type of the event.
*/
eventType: EventType;
/**
* Username of the member.
*/
member: string;
/**
* Level of the user.
*/
islevel: string;
/**
* Flag to start a direct message.
*/
startDirectMessage: boolean;
/**
* Function to update the start direct message flag.
*/
updateStartDirectMessage: (start: boolean) => void;
/**
* Details of the direct message.
*/
directMessageDetails: Participant | null;
/**
* Function to update direct message details.
*/
updateDirectMessageDetails: (participant: Participant | null) => void;
/**
* Array of co-host responsibilities.
*/
coHostResponsibility: CoHostResponsibility[];
/**
* Username of the co-host.
*/
coHost: string;
/**
* Name of the chat room.
*/
roomName: string;
/**
* Socket object for real-time communication.
*/
socket: Socket;
/**
* Settings for the chat.
*/
chatSetting: string;
}
/**
* MessagePanel component renders a panel for displaying and sending messages.
*
* @component
* @param {MessagePanelOptions} props - The properties for the MessagePanel component.
* @returns {JSX.Element} The rendered MessagePanel component.
*
* @example
* ```tsx
* import React from 'react';
* import { MessagePanel } from 'mediasfu-reactnative';
*
* function App() {
* const messages = [
* { sender: 'Alice', message: 'Hello!', timestamp: '10:00', receivers: [], group: true },
* { sender: 'Bob', message: 'Hi Alice!', timestamp: '10:01', receivers: [], group: true },
* ];
*
* const handleSendMessage = async (options) => {
* // Logic to handle message sending
* console.log('Message sent:', options);
* };
*
* return (
* <MessagePanel
* messages={messages}
* messagesLength={messages.length}
* type="group"
* username="john_doe"
* onSendMessagePress={handleSendMessage}
* backgroundColor="#f5f5f5"
* focusedInput={true}
* eventType="conference"
* member="john_doe"
* islevel="1"
* startDirectMessage={false}
* updateStartDirectMessage={(start) => console.log('Start Direct Message:', start)}
* directMessageDetails={null}
* updateDirectMessageDetails={(participant) => console.log('Direct Message Participant:', participant)}
* coHostResponsibility={[{ name: 'chat', value: true }]}
* coHost="jane_doe"
* roomName="MainRoom"
* socket={socketInstance}
* chatSetting="default"
* />
* );
* }
*
* export default App;
* ```
*/
declare const MessagePanel: React.FC<MessagePanelOptions>;
export default MessagePanel;