mediasfu-reactnative
Version:
MediaSFU Prebuilt React Native SDK
75 lines (74 loc) • 2.91 kB
TypeScript
import React from 'react';
import { StyleProp, ViewStyle } from 'react-native';
export interface AltButton {
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;
inActiveColor?: string;
show?: boolean;
}
export interface ControlButtonsAltComponentOptions {
buttons: AltButton[];
position?: 'left' | 'right' | 'middle';
location?: 'top' | 'bottom' | 'center';
direction?: 'horizontal' | 'vertical';
buttonsContainerStyle?: StyleProp<ViewStyle>;
alternateIconComponent?: JSX.Element;
iconComponent?: JSX.Element;
showAspect?: boolean;
}
export type ControlButtonsAltComponentType = (options: ControlButtonsAltComponentOptions) => React.ReactNode;
/**
* ControlButtonsAltComponent renders a set of customizable control buttons with adjustable layout, styling, and alignment options.
*
* This component displays a collection of control buttons that can be horizontally or vertically aligned, with additional options
* to define icon behavior, active states, and color schemes. Each button can have an icon, alternate icon, or custom component.
*
* @component
* @param {ControlButtonsAltComponentOptions} props - Configuration options for the control buttons.
* @param {AltButton[]} props.buttons - Array of button options, each with properties for icon, label, and behavior.
* @param {'left' | 'right' | 'middle'} [props.position='left'] - Horizontal alignment of the button group.
* @param {'top' | 'bottom' | 'center'} [props.location='top'] - Vertical alignment of the button group.
* @param {'horizontal' | 'vertical'} [props.direction='horizontal'] - Layout direction for the buttons.
* @param {StyleProp<ViewStyle>} [props.buttonsContainerStyle] - Custom styles for the container.
* @param {boolean} [props.showAspect=false] - Controls the visibility of the button group.
*
* @returns {JSX.Element} The rendered ControlButtonsAltComponent.
*
* @example
* ```tsx
* import React from 'react';
* import { ControlButtonsAltComponent } 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 (
* <ControlButtonsAltComponent
* buttons={buttons}
* position="middle"
* location="bottom"
* direction="horizontal"
* showAspect={true}
* />
* );
* }
*
* export default App;
* ```
*/
declare const ControlButtonsAltComponent: React.FC<ControlButtonsAltComponentOptions>;
export default ControlButtonsAltComponent;