mediasfu-reactnative-expo
Version:
MediaSFU Prebuilt React Native (Expo) SDK
78 lines (77 loc) • 3.08 kB
TypeScript
import React from "react";
import { StyleProp, ViewStyle } from "react-native";
import { FontAwesome5 } from "@expo/vector-icons";
export interface ButtonTouch {
name?: string;
icon?: keyof typeof FontAwesome5.glyphMap;
alternateIcon?: keyof typeof FontAwesome5.glyphMap;
onPress?: () => void;
backgroundColor?: {
default?: string;
pressed?: string;
};
active?: boolean;
alternateIconComponent?: JSX.Element;
iconComponent?: JSX.Element;
customComponent?: JSX.Element;
color?: string;
activeColor?: string;
inActiveColor?: string;
show?: boolean;
disabled?: boolean;
}
export interface ControlButtonsComponentTouchOptions {
buttons: ButtonTouch[];
position?: "left" | "right" | "middle";
location?: "top" | "bottom" | "center";
direction?: "horizontal" | "vertical";
buttonsContainerStyle?: StyleProp<ViewStyle>;
alternateIconComponent?: JSX.Element;
iconComponent?: JSX.Element;
showAspect?: boolean;
}
export type ControlButtonsComponentTouchType = (options: ControlButtonsComponentTouchOptions) => JSX.Element;
/**
* ControlButtonsComponentTouch renders a set of interactive control buttons with customizable layout, alignment, and display options.
*
* This component allows for horizontal or vertical arrangement of buttons, each with optional icons, custom components, and
* configurable background colors and active states.
*
* @component
* @param {ControlButtonsComponentTouchOptions} props - Options for the ControlButtonsComponentTouch component.
* @param {ButtonTouch[]} props.buttons - Array of button configurations, including icon, background color, and onPress functionality.
* @param {'left' | 'right' | 'middle'} [props.position='left'] - Horizontal alignment of the button container.
* @param {'top' | 'bottom' | 'center'} [props.location='top'] - Vertical alignment of the button container.
* @param {'horizontal' | 'vertical'} [props.direction='horizontal'] - Arrangement direction of buttons in the container.
* @param {StyleProp<ViewStyle>} [props.buttonsContainerStyle] - Additional custom styles for the button container.
* @param {boolean} [props.showAspect=false] - Controls the visibility of the button container.
*
* @returns {JSX.Element} The rendered ControlButtonsComponentTouch component.
*
* @example
* ```tsx
* import React from 'react';
* import { ControlButtonsComponentTouch } from 'mediasfu-reactnative-expo';
*
* function App() {
* const buttons = [
* { name: 'Start', icon: 'play', onPress: () => console.log('Start'), active: true },
* { name: 'Stop', icon: 'stop', onPress: () => console.log('Stop') },
* ];
*
* return (
* <ControlButtonsComponentTouch
* buttons={buttons}
* position="middle"
* location="bottom"
* direction="horizontal"
* showAspect={true}
* />
* );
* }
*
* export default App;
* ```
*/
declare const ControlButtonsComponentTouch: React.FC<ControlButtonsComponentTouchOptions>;
export default ControlButtonsComponentTouch;