mediasfu-reactnative-expo
Version:
mediasfu-reactnative-expo – Expo-managed React Native WebRTC SDK for video conferencing, webinars, live streaming, broadcast, screen sharing, whiteboard, chat, recording, live subtitles, translation, and AI agent rooms on iOS, Android, and web. Prebuilt r
124 lines (121 loc) • 3.75 kB
JavaScript
// RenderRequestComponent.tsx
import React from 'react';
import { View, Text, Pressable, StyleSheet, } from 'react-native';
import { FontAwesome } from '@expo/vector-icons';
import { getModalBodyTheme } from '../../components_modern/core/modalBodyTheme';
/**
* RenderRequestComponent displays a single request item in a list, providing actions to accept or reject the request.
* It uses FontAwesome icons to represent different request types.
*
* @component
* @param {RenderRequestComponentOptions} props - The properties for the RenderRequestComponent.
* @returns {JSX.Element} The rendered RenderRequestComponent.
*
* @example
* ```tsx
* import React from 'react';
* import { RenderRequestComponent } from 'mediasfu-reactnative-expo';
*
* const request = {
* id: 1,
* name: 'Request to share screen',
* icon: 'fa-desktop',
* };
*
* function handleRequestAction(action) {
* console.log(`Request ${action}`);
* }
*
* const requestList = [request];
*
* function App() {
* return (
* <RenderRequestComponent
* request={request}
* onRequestItemPress={handleRequestAction}
* requestList={requestList}
* updateRequestList={(newRequestList) => console.log(newRequestList)}
* roomName="MainRoom"
* socket={socketInstance}
* />
* );
* }
*
* export default App;
* ```
*/
const RenderRequestComponent = ({ request, onRequestItemPress, requestList, updateRequestList, roomName, socket, isDarkMode, }) => {
const theme = getModalBodyTheme(isDarkMode);
/**
* Maps the request.icon to the corresponding FontAwesome icon name.
*/
const keyMap = {
'fa-microphone': 'microphone',
'fa-desktop': 'desktop',
'fa-video': 'video-camera',
'fa-comments': 'comments',
};
/**
* Handles the action when a request is accepted or rejected.
*
* @param action - The action taken ('accepted' or 'rejected').
*/
const handleRequestAction = (action) => {
onRequestItemPress({
request,
updateRequestList,
requestList,
action,
roomName,
socket,
});
};
return (<View style={[styles.requestRow, { borderBottomColor: theme.dividerColor }]}>
{/* Request Name */}
<View style={styles.requestNameContainer}>
<Text style={[styles.requestNameText, { color: theme.textColor }]}>{request.name}</Text>
</View>
{/* Icon */}
<View style={styles.iconContainer}>
<FontAwesome name={keyMap[request.icon]} size={24} color={theme.iconColor}/>
</View>
{/* Accept Button */}
<Pressable onPress={() => handleRequestAction('accepted')} style={styles.actionButton}>
<FontAwesome name="check" size={24} color={theme.successColor}/>
</Pressable>
{/* Reject Button */}
<Pressable onPress={() => handleRequestAction('rejected')} style={styles.actionButton}>
<FontAwesome name="times" size={24} color={theme.dangerColor}/>
</Pressable>
</View>);
};
export default RenderRequestComponent;
/**
* Stylesheet for the RenderRequestComponent.
*/
const styles = StyleSheet.create({
requestRow: {
flexDirection: 'row',
alignItems: 'center',
paddingVertical: 5,
borderBottomWidth: 1,
borderBottomColor: '#ddd',
},
requestNameContainer: {
flex: 5,
},
requestNameText: {
fontSize: 14,
color: '#000000',
},
iconContainer: {
flex: 2,
alignItems: 'center',
},
actionButton: {
flex: 2,
alignItems: 'center',
justifyContent: 'center',
},
});
//# sourceMappingURL=RenderRequestComponent.js.map