mediasfu-reactnative-expo
Version:
MediaSFU Prebuilt React Native (Expo) SDK
175 lines (169 loc) • 5.48 kB
JavaScript
import React, { useEffect, useState } from "react";
import { Modal, View, Text, Pressable, StyleSheet, Dimensions, ScrollView, } from "react-native";
import { FontAwesome5 } from "@expo/vector-icons";
import CustomButtons from "./CustomButtons";
import MeetingIdComponent from "./MeetingIDComponent";
import MeetingPasscodeComponent from "./MeetingPasscodeComponent";
import ShareButtonsComponent from "./ShareButtonsComponent";
import { getModalPosition } from "../../methods/utils/getModalPosition";
/**
* MenuModal - A React Native component that displays a modal with various menu options and buttons.
*
* @component
* @param {MenuModalOptions} props - The properties passed to the MenuModal component.
* @returns {JSX.Element} - The MenuModal component JSX element.
* @example
* ```tsx
* import React from 'react';
* import { MenuModal } from 'mediasfu-reactnative-expo';
*
* function App() {
* return (
* <MenuModal
* backgroundColor="#83c0e9"
* isVisible={true}
* onClose={() => console.log('Modal closed')}
* customButtons={[
* {
* action: () => console.log('Button pressed'),
* show: true,
* backgroundColor: '#4CAF50',
* icon: 'check-circle',
* text: 'Confirm',
* },
* ]}
* shareButtons={true}
* position="bottomRight"
* roomName="MeetingRoom123"
* adminPasscode="123456"
* islevel="2"
* eventType="video"
* localLink="http://localhost:3000"
* />
* );
* }
*
* export default App;
* ```
*/
const MenuModal = ({ backgroundColor = "#83c0e9", isVisible, onClose, customButtons = [], shareButtons = true, position = "bottomRight", roomName, adminPasscode, islevel, eventType, localLink, }) => {
const [modalWidth, setModalWidth] = useState(0.7 * Dimensions.get("window").width);
useEffect(() => {
const updateDimensions = () => {
let width = 0.7 * Dimensions.get("window").width;
if (width > 450) {
width = 450;
}
setModalWidth(width);
};
const subscribe = Dimensions.addEventListener("change", updateDimensions);
// Initial call
updateDimensions();
return () => {
subscribe.remove();
};
}, []);
return (<Modal transparent animationType="fade" visible={isVisible} onRequestClose={onClose}>
<View style={[styles.modalContainer, getModalPosition({ position })]}>
<View style={[styles.modalContent, { backgroundColor, width: modalWidth }]}>
{/* Header */}
<View style={styles.modalHeader}>
<Text style={styles.modalTitle}>
<FontAwesome5 name="bars" style={styles.icon}/> Menu
</Text>
<Pressable onPress={onClose} style={styles.closeButton} accessibilityRole="button" accessibilityLabel="Close Menu Modal">
<FontAwesome5 name="times" style={styles.icon}/>
</Pressable>
</View>
{/* Divider */}
<View style={styles.hr}/>
<View style={styles.modalBody}>
<ScrollView style={styles.scrollView}>
<View style={styles.listGroup}>
<CustomButtons buttons={customButtons}/>
{/* Separator */}
<View style={styles.separator}/>
{/* Meeting Passcode - Visible only for level 2 users */}
{islevel === "2" && (<MeetingPasscodeComponent meetingPasscode={adminPasscode}/>)}
{/* Meeting ID */}
<MeetingIdComponent meetingID={roomName}/>
{/* Share Buttons */}
{shareButtons && (<ShareButtonsComponent meetingID={roomName} eventType={eventType} localLink={localLink}/>)}
</View>
</ScrollView>
</View>
</View>
</View>
</Modal>);
};
export default MenuModal;
/**
* Stylesheet for the MenuModal component.
*/
const styles = StyleSheet.create({
modalContainer: {
flex: 1,
...StyleSheet.absoluteFillObject,
justifyContent: "flex-end",
alignItems: "flex-end",
},
modalContent: {
height: "70%",
backgroundColor: "#83c0e9",
borderRadius: 0,
padding: 10,
maxHeight: "70%",
maxWidth: "75%",
overflow: "hidden",
borderWidth: 2,
borderColor: "black",
// Shadow for iOS
shadowColor: "#000",
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.25,
shadowRadius: 4,
// Elevation for Android
elevation: 5,
},
scrollView: {
flex: 1,
maxHeight: "100%",
maxWidth: "100%",
},
modalHeader: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
marginBottom: 15,
},
modalTitle: {
fontSize: 18,
fontWeight: "bold",
color: "black",
},
closeButton: {
padding: 5,
},
icon: {
fontSize: 20,
color: "black",
},
hr: {
height: 1,
backgroundColor: "black",
marginVertical: 15,
},
modalBody: {
flex: 1,
},
listGroup: {
margin: 0,
padding: 0,
},
separator: {
height: 1,
backgroundColor: "#ffffff",
marginVertical: 10,
},
});
//# sourceMappingURL=MenuModal.js.map