mediasfu-reactnative
Version:
MediaSFU Prebuilt React Native SDK
107 lines • 3.39 kB
JavaScript
// CustomButtons.tsx
import React from 'react';
import { View, Text, Pressable, StyleSheet, } from 'react-native';
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
/**
* CustomButtons renders a list of customizable buttons, each with configurable actions, icons, and display options.
*
* @example
* ```tsx
* import React from 'react';
* import { CustomButtons } from 'mediasfu-reactnative';
*
* function App() {
* return (
* <CustomButtons
* buttons={[
* {
* action: () => console.log('Confirm pressed'),
* show: true,
* backgroundColor: '#4CAF50',
* icon: 'check-circle',
* text: 'Confirm',
* textStyle: { color: 'white', fontWeight: 'bold' },
* },
* {
* action: () => console.log('Delete pressed'),
* show: true,
* backgroundColor: '#F44336',
* icon: 'trash',
* text: 'Delete',
* textStyle: { color: 'white' },
* },
* {
* action: () => console.log('Disabled pressed'),
* show: true,
* disabled: true,
* backgroundColor: '#9E9E9E',
* text: 'Disabled',
* },
* ]}
* />
* );
* }
*
* export default App;
* ```
*/
const CustomButtons = ({ buttons }) => (<View style={styles.customButtonsContainer}>
{buttons.map((button, index) => (<Pressable key={index} onPress={button.action} style={[
styles.customButton,
{
backgroundColor: button.backgroundColor || 'transparent',
display: button.show ? 'flex' : 'none',
opacity: button.disabled ? 0.6 : 1,
},
]} disabled={button.disabled} accessibilityRole="button" accessibilityLabel={button.text || 'Custom Button'}>
<View style={styles.buttonContent}>
{button.icon ? (<>
<FontAwesome5 name={button.icon} style={styles.customButtonIcon}/>
{button.text && (<Text style={[styles.customButtonText, button.textStyle]}>
{button.text}
</Text>)}
</>) : button.customComponent ? (button.customComponent) : null}
</View>
</Pressable>))}
</View>);
export default CustomButtons;
/**
* Stylesheet for the CustomButtons component.
*/
const styles = StyleSheet.create({
customButtonsContainer: {
flexDirection: 'column',
flexWrap: 'wrap',
justifyContent: 'space-between',
alignItems: 'flex-start',
},
customButton: {
width: '100%',
marginVertical: 15,
padding: 15,
borderRadius: 6,
alignItems: 'flex-start',
justifyContent: 'flex-start',
// Shadow for iOS
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.25,
shadowRadius: 3.84,
// Elevation for Android
elevation: 5,
},
buttonContent: {
flexDirection: 'row',
alignItems: 'flex-start',
justifyContent: 'flex-start',
},
customButtonIcon: {
fontSize: 20,
color: '#000000', // Default color for the button icon
marginRight: 4,
},
customButtonText: {
color: '#000000', // Default color for the button text
},
});
//# sourceMappingURL=CustomButtons.js.map