mediasfu-reactnative
Version:
MediaSFU Prebuilt React Native SDK
79 lines (78 loc) • 3.04 kB
TypeScript
import React from 'react';
import { StyleProp, ViewStyle } from 'react-native';
export interface Button {
name?: string;
icon?: string;
alternateIcon?: string;
onPress?: () => void;
backgroundColor?: {
default?: string;
pressed?: string;
};
active?: boolean;
alternateIconComponent?: JSX.Element;
iconComponent?: JSX.Element;
customComponent?: JSX.Element;
color?: string;
activeColor?: string;
inActiveColor?: string;
disabled?: boolean;
show?: boolean;
}
export interface ControlButtonsComponentOptions {
buttons: Button[];
buttonColor?: string;
buttonBackgroundColor?: {
default?: string;
pressed?: string;
};
alignment?: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
vertical?: boolean;
buttonsContainerStyle?: StyleProp<ViewStyle>;
alternateIconComponent?: JSX.Element;
iconComponent?: JSX.Element;
}
export type ControlButtonsComponentType = (options: ControlButtonsComponentOptions) => JSX.Element;
/**
* ControlButtonsComponent renders a set of customizable control buttons with options for layout, style, and alignment.
*
* This component supports flexible alignment, background colors, vertical/horizontal orientation, and custom icon behavior.
* Each button can display an icon, alternate icon, or a custom component with active and disabled states.
*
* @component
* @param {ControlButtonsComponentOptions} props - Configuration options for the control buttons.
* @param {Button[]} props.buttons - Array of button configurations, including icon, color, and onPress behavior.
* @param {string} [props.buttonColor] - Default color for the button icons.
* @param {object} [props.buttonBackgroundColor] - Background colors for buttons, with `default` and `pressed` states.
* @param {'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly'} [props.alignment='flex-start'] - Alignment of buttons in the container.
* @param {boolean} [props.vertical=false] - Determines whether buttons are arranged vertically.
* @param {StyleProp<ViewStyle>} [props.buttonsContainerStyle] - Additional custom styles for the container.
*
* @returns {JSX.Element} The rendered ControlButtonsComponent.
*
* @example
* ```tsx
* import React from 'react';
* import { ControlButtonsComponent } from 'mediasfu-reactnative';
*
* function App() {
* const buttons = [
* { name: 'Play', icon: 'play', onPress: () => console.log('Play pressed'), active: true },
* { name: 'Stop', icon: 'stop', onPress: () => console.log('Stop pressed') }
* ];
*
* return (
* <ControlButtonsComponent
* buttons={buttons}
* alignment="center"
* buttonBackgroundColor={{ default: '#333', pressed: '#555' }}
* vertical={false}
* />
* );
* }
*
* export default App;
* ```
*/
declare const ControlButtonsComponent: React.FC<ControlButtonsComponentOptions>;
export default ControlButtonsComponent;