mediasfu-reactnative
Version:
MediaSFU Prebuilt React Native SDK
72 lines • 2.78 kB
JavaScript
// MainGridComponent.tsx
import React from 'react';
import { View, StyleSheet, } from 'react-native';
import MeetingProgressTimer from './MeetingProgressTimer';
/**
* MainGridComponent renders a main grid container with customizable dimensions, background color, and optional components.
* This component includes an optional meeting progress timer and allows the display of child components in a centered layout.
*
* @component
* @param {MainGridComponentOptions} props - Configuration options for MainGridComponent.
* @param {React.ReactNode} props.children - Components or elements to display inside the grid.
* @param {string} props.backgroundColor - Background color of the grid container.
* @param {number} props.height - Height of the grid container.
* @param {number} props.width - Width of the grid container.
* @param {boolean} [props.showAspect=true] - Controls whether the grid container is visible.
* @param {string} [props.timeBackgroundColor='transparent'] - Background color of the meeting progress timer.
* @param {boolean} [props.showTimer=true] - Controls visibility of the meeting progress timer.
* @param {string} props.meetingProgressTime - Time to display on the meeting progress timer.
*
* @returns {JSX.Element} The MainGridComponent with configurable dimensions, background color, and optional timer.
*
* @example
* ```tsx
* import React from 'react';
* import { MainGridComponent } from 'mediasfu-reactnative';
*
* function App() {
* return (
* <MainGridComponent
* backgroundColor="lightgray"
* height={500}
* width={300}
* showAspect={true}
* timeBackgroundColor="blue"
* showTimer={true}
* meetingProgressTime="12:34"
* >
* <Text>Grid Content</Text>
* </MainGridComponent>
* );
* }
*
* export default App;
* ```
*/
const MainGridComponent = ({ children, backgroundColor, height, width, showAspect = true, timeBackgroundColor = 'transparent', showTimer = true, meetingProgressTime, }) => (<View style={[
styles.maingridContainer,
{
backgroundColor,
height,
width,
display: showAspect ? 'flex' : 'none',
},
]}>
{showTimer && (<MeetingProgressTimer meetingProgressTime={meetingProgressTime} initialBackgroundColor={timeBackgroundColor} showTimer={showTimer}/>)}
{children}
</View>);
export default MainGridComponent;
/**
* Stylesheet for the MainGridComponent.
*/
const styles = StyleSheet.create({
maingridContainer: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
borderStyle: 'solid',
borderColor: '#000',
borderWidth: 4,
},
});
//# sourceMappingURL=MainGridComponent.js.map