mediasfu-reactnative/dist/types/src/components/requestsComponents/RequestsModal.d.ts

MediaSFU Prebuilt React Native SDK

import React from 'react';
import { Socket } from 'socket.io-client';
import { RenderRequestComponentOptions } from './RenderRequestComponent';
import { RespondToRequestsType } from '../../methods/requestsMethods/respondToRequests';
import { Request } from '../../@types/types';
export interface RequestsModalParameters {
    /**
     * Function to get updated parameters, particularly the filtered request list.
     */
    getUpdatedAllParams: () => {
        filteredRequestList: Request[];
    };
    [key: string]: any;
}
export interface RequestsModalOptions {
    /**
     * Flag to control the visibility of the modal.
     */
    isRequestsModalVisible: boolean;
    /**
     * Callback function to handle the closing of the modal.
     */
    onRequestClose: () => void;
    /**
     * Initial count of requests.
     */
    requestCounter: number;
    /**
     * Function to handle the filter input changes.
     */
    onRequestFilterChange: (text: string) => void;
    /**
     * Function to handle the action when a request item is pressed.
     */
    onRequestItemPress?: RespondToRequestsType;
    /**
     * List of requests.
     */
    requestList: Request[];
    /**
     * Function to update the request list.
     */
    updateRequestList: (newRequestList: Request[]) => void;
    /**
     * Name of the room.
     */
    roomName: string;
    /**
     * Socket instance for real-time communication.
     */
    socket: Socket;
    /**
     * Component to render each request item.
     * Defaults to RenderRequestComponent.
     */
    renderRequestComponent?: React.FC<RenderRequestComponentOptions>;
    /**
     * Background color of the modal.
     * Defaults to '#83c0e9'.
     */
    backgroundColor?: string;
    /**
     * Position of the modal on the screen.
     * Possible values: 'topLeft', 'topRight', 'bottomLeft', 'bottomRight', 'center'.
     * Defaults to 'topRight'.
     */
    position?: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'center';
    /**
     * Additional parameters for the modal.
     */
    parameters: RequestsModalParameters;
}
export type RequestsModalType = (options: RequestsModalOptions) => JSX.Element;
/**
 * RequestsModal component displays a modal that shows a list of participant requests with options to filter, accept, or reject requests.
 *
 * @component
 * @param {RequestsModalOptions} props - The properties for the RequestsModal component.
 * @returns {JSX.Element} The rendered RequestsModal component.
 *
 * @example
 * ```tsx
 * import React from 'react';
 * import { RequestsModal } from 'mediasfu-reactnative';
 *
 * const requestList = [
 *   { id: 1, name: 'Request to share screen', icon: 'fa-desktop' },
 *   { id: 2, name: 'Request to unmute', icon: 'fa-microphone' },
 * ];
 *
 * function App() {
 *   const handleRequestAction = (params) => {
 *     console.log(`Request action taken: ${params.action}`);
 *   };
 *
 *   return (
 *     <RequestsModal
 *       isRequestsModalVisible={true}
 *       onRequestClose={() => console.log('Modal closed')}
 *       requestCounter={requestList.length}
 *       onRequestFilterChange={(text) => console.log('Filter text:', text)}
 *       onRequestItemPress={handleRequestAction}
 *       requestList={requestList}
 *       updateRequestList={(newList) => console.log('Updated request list:', newList)}
 *       roomName="exampleRoom"
 *       socket={socketInstance}
 *       backgroundColor="#83c0e9"
 *       position="topRight"
 *       parameters={{
 *         getUpdatedAllParams: () => ({ filteredRequestList: requestList }),
 *       }}
 *     />
 *   );
 * }
 * export default App;
 * ```
 */
declare const RequestsModal: React.FC<RequestsModalOptions>;
export default RequestsModal;