mediasfu-reactnative/dist/types/src/components/menuComponents/CustomButtons.d.ts

MediaSFU Prebuilt React Native SDK

import React from 'react';
import { StyleProp, TextStyle } from 'react-native';
/**
 * Interface defining the structure of each custom button.
 */
export interface CustomButton {
    /**
     * Function to be called when the button is pressed.
     */
    action: () => void;
    /**
     * Determines if the button should be displayed.
     */
    show: boolean;
    /**
     * The background color of the button.
     * @default 'transparent'
     */
    backgroundColor?: string;
    /**
     * Determines if the button should be disabled.
     * @default false
     */
    disabled?: boolean;
    /**
     * The name of the FontAwesome5 icon to be displayed on the button.
     */
    icon?: string;
    /**
     * The style to be applied to the icon.
     */
    iconStyle?: StyleProp<TextStyle>;
    /**
     * The text to be displayed on the button.
     */
    text?: string;
    /**
     * The style to be applied to the text.
     */
    textStyle?: StyleProp<TextStyle>;
    /**
     * A custom component to be rendered inside the button instead of icon and text.
     */
    customComponent?: React.ReactNode;
}
/**
 * Interface defining the props for the CustomButtons component.
 */
export interface CustomButtonsOptions {
    /**
     * An array of button configurations to be rendered.
     */
    buttons: CustomButton[];
}
export type CustomButtonsType = (options: CustomButtonsOptions) => JSX.Element;
/**
 * 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;
 * ```
 */
declare const CustomButtons: React.FC<CustomButtonsOptions>;
export default CustomButtons;