mediasfu-reactnative/dist/src/components/miscComponents/ShareEventModal.js

MediaSFU Prebuilt React Native SDK

// ShareEventModal.tsx
import React from 'react';
import { Modal, View, StyleSheet, Pressable, ScrollView, Dimensions, } from 'react-native';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import { getModalPosition } from '../../methods/utils/getModalPosition';
import MeetingIdComponent from '../menuComponents/MeetingIDComponent';
import MeetingPasscodeComponent from '../menuComponents/MeetingPasscodeComponent';
import ShareButtonsComponent from '../menuComponents/ShareButtonsComponent';
/**
 * ShareEventModal component displays a modal that allows users to share event details,
 * including the room name and an optional admin passcode, with other participants.
 * This modal provides customizable options for positioning, appearance, and shared content.
 *
 * @component
 * @param {ShareEventModalOptions} props - The properties for the ShareEventModal component.
 * @returns {JSX.Element} The rendered ShareEventModal component.
 *
 * @example
 * ```tsx
 * import React, { useState } from 'react';
 * import { ShareEventModal } from 'mediasfu-reactnative';
 *
 * function App() {
 *   const [modalVisible, setModalVisible] = useState(true);
 *
 *   return (
 *     <ShareEventModal
 *       isShareEventModalVisible={modalVisible}
 *       onShareEventClose={() => setModalVisible(false)}
 *       roomName="Room123"
 *       adminPasscode="Passcode456"
 *       islevel="2"
 *       eventType="conference"
 *       backgroundColor="rgba(255, 255, 255, 0.8)"
 *       shareButtons={true}
 *       position="topRight"
 *       localLink="https://example.com"
 *     />
 *   );
 * }
 *
 * export default App;
 * ```
 */
const ShareEventModal = ({ backgroundColor = 'rgba(255, 255, 255, 0.25)', isShareEventModalVisible, onShareEventClose, shareButtons = true, position = 'topRight', roomName, adminPasscode, islevel, eventType, localLink, }) => {
    const screenWidth = Dimensions.get('window').width;
    let modalWidth = 0.8 * screenWidth;
    if (modalWidth > 350) {
        modalWidth = 350;
    }
    return (<Modal transparent animationType="fade" visible={isShareEventModalVisible} onRequestClose={onShareEventClose}>
      <View style={[styles.modalContainer, getModalPosition({ position })]}>
        <View style={[styles.modalContent, { backgroundColor, width: modalWidth }]}>
          <View style={styles.modalHeader}>
            <Pressable onPress={onShareEventClose} style={styles.closeButton}>
              <FontAwesome name="times" style={styles.icon}/>
            </Pressable>
          </View>

          <View style={styles.separator}/>

          {/* Modal Body */}
          <View style={styles.modalBody}>
            <ScrollView contentContainerStyle={styles.bodyContainer}>
              {/* Conditionally render MeetingPasscodeComponent based on islevel */}
              {islevel === '2' && adminPasscode && (<View style={styles.componentContainer}>
                  <MeetingPasscodeComponent meetingPasscode={adminPasscode}/>
                </View>)}

              {/* Meeting ID */}
              <View style={styles.componentContainer}>
                <MeetingIdComponent meetingID={roomName}/>
              </View>

              {/* Share Buttons */}
              {shareButtons && (<View style={styles.componentContainer}>
                  <ShareButtonsComponent meetingID={roomName} eventType={eventType} localLink={localLink}/>
                </View>)}
            </ScrollView>
          </View>
        </View>
      </View>
    </Modal>);
};
export default ShareEventModal;
/**
 * Stylesheet for the ShareEventModal component.
 */
const styles = StyleSheet.create({
    modalContainer: {
        flex: 1,
        justifyContent: 'flex-end',
        alignItems: 'flex-end',
        zIndex: 9,
        elevation: 9,
    },
    modalContent: {
        height: '40%',
        backgroundColor: '#83c0e9',
        borderRadius: 10,
        padding: 10,
        maxHeight: '40%',
        maxWidth: '80%',
        zIndex: 9,
        elevation: 9,
        marginBottom: 10,
    },
    closeButton: {
        alignSelf: 'flex-end',
        padding: 5,
    },
    icon: {
        fontSize: 20,
        color: '#000000',
    },
    separator: {
        height: 1,
        backgroundColor: '#000000',
        marginVertical: 5,
    },
    bodyContainer: {
        paddingBottom: 10,
    },
    componentContainer: {
        marginBottom: 15,
    },
    modalHeader: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        marginBottom: 15,
    },
    modalBody: {
        flex: 1,
    },
});
//# sourceMappingURL=ShareEventModal.js.map