react-native-paper
Version:
Material design for React Native
115 lines • 3.65 kB
TypeScript
import * as React from 'react';
import { GestureResponderEvent, StyleProp, TextStyle, ViewStyle } from 'react-native';
import type { ThemeProp } from 'src/types';
import type { IconSource } from '../Icon';
type ConditionalValue<T extends string = string> = {
/**
* Array of the currently selected segmented button values.
*/
value: T[];
/**
* Support multiple selected options.
*/
multiSelect: true;
/**
* Function to execute on selection change
*/
onValueChange: (value: T[]) => void;
} | {
/**
* Value of the currently selected segmented button.
*/
value: T;
/**
* Support multiple selected options.
*/
multiSelect?: false;
/**
* Function to execute on selection change
*/
onValueChange: (value: T) => void;
};
export type Props<T extends string = string> = {
/**
* Buttons to display as options in toggle button.
* Button should contain the following properties:
* - `value`: value of button (required)
* - `icon`: icon to display for the item
* - `disabled`: whether the button is disabled
* - `accessibilityLabel`: acccessibility label for the button. This is read by the screen reader when the user taps the button.
* - `checkedColor`: custom color for checked Text and Icon
* - `uncheckedColor`: custom color for unchecked Text and Icon
* - `onPress`: callback that is called when button is pressed
* - `label`: label text of the button
* - `showSelectedCheck`: show optional check icon to indicate selected state
* - `style`: pass additional styles for the button
* - `testID`: testID to be used on tests
*/
buttons: {
value: T;
icon?: IconSource;
disabled?: boolean;
accessibilityLabel?: string;
checkedColor?: string;
uncheckedColor?: string;
onPress?: (event: GestureResponderEvent) => void;
label?: string;
showSelectedCheck?: boolean;
style?: StyleProp<ViewStyle>;
labelStyle?: StyleProp<TextStyle>;
testID?: string;
}[];
/**
* Density is applied to the height, to allow usage in denser UIs
*/
density?: 'regular' | 'small' | 'medium' | 'high';
style?: StyleProp<ViewStyle>;
theme?: ThemeProp;
} & ConditionalValue<T>;
/**
* Segmented buttons can be used to select options, switch views or sort elements.</br>
*
* ## Usage
* ```js
* import * as React from 'react';
* import { SafeAreaView, StyleSheet } from 'react-native';
* import { SegmentedButtons } from 'react-native-paper';
*
* const MyComponent = () => {
* const [value, setValue] = React.useState('');
*
* return (
* <SafeAreaView style={styles.container}>
* <SegmentedButtons
* value={value}
* onValueChange={setValue}
* buttons={[
* {
* value: 'walk',
* label: 'Walking',
* },
* {
* value: 'train',
* label: 'Transit',
* },
* { value: 'drive', label: 'Driving' },
* ]}
* />
* </SafeAreaView>
* );
* };
*
* const styles = StyleSheet.create({
* container: {
* flex: 1,
* alignItems: 'center',
* },
* });
*
* export default MyComponent;
*```
*/
declare const SegmentedButtons: <T extends string = string>({ value, onValueChange, buttons, multiSelect, density, style, theme: themeOverrides, }: Props<T>) => React.JSX.Element;
export default SegmentedButtons;
export { SegmentedButtons as SegmentedButtons };
//# sourceMappingURL=SegmentedButtons.d.ts.map