UNPKG

4.93 kBTypeScriptView Raw
1import * as React from 'react';
2import { ColorValue, GestureResponderEvent, StyleProp, TextStyle, ViewProps, ViewStyle, PressableAndroidRippleConfig } from 'react-native';
3import type { Style } from './utils';
4import type { ThemeProp } from '../../types';
5export declare type Props = {
6 /**
7 * Title text for the list accordion.
8 */
9 title: React.ReactNode;
10 /**
11 * Description text for the list accordion.
12 */
13 description?: React.ReactNode;
14 /**
15 * Callback which returns a React element to display on the left side.
16 */
17 left?: (props: {
18 color: string;
19 style: Style;
20 }) => React.ReactNode;
21 /**
22 * Callback which returns a React element to display on the right side.
23 */
24 right?: (props: {
25 isExpanded: boolean;
26 }) => React.ReactNode;
27 /**
28 * Whether the accordion is expanded
29 * If this prop is provided, the accordion will behave as a "controlled component".
30 * You'll need to update this prop when you want to toggle the component or on `onPress`.
31 */
32 expanded?: boolean;
33 /**
34 * Function to execute on press.
35 */
36 onPress?: (e: GestureResponderEvent) => void;
37 /**
38 * Function to execute on long press.
39 */
40 onLongPress?: (e: GestureResponderEvent) => void;
41 /**
42 * The number of milliseconds a user must touch the element before executing `onLongPress`.
43 */
44 delayLongPress?: number;
45 /**
46 * Content of the section.
47 */
48 children: React.ReactNode;
49 /**
50 * @optional
51 */
52 theme?: ThemeProp;
53 /**
54 * Type of background drawabale to display the feedback (Android).
55 * https://reactnative.dev/docs/pressable#rippleconfig
56 */
57 background?: PressableAndroidRippleConfig;
58 /**
59 * Style that is passed to the wrapping TouchableRipple element.
60 */
61 style?: StyleProp<ViewStyle>;
62 /**
63 * Style that is passed to Title element.
64 */
65 titleStyle?: StyleProp<TextStyle>;
66 /**
67 * Style that is passed to Description element.
68 */
69 descriptionStyle?: StyleProp<TextStyle>;
70 /**
71 * Color of the ripple effect.
72 */
73 rippleColor?: ColorValue;
74 /**
75 * Truncate Title text such that the total number of lines does not
76 * exceed this number.
77 */
78 titleNumberOfLines?: number;
79 /**
80 * Truncate Description text such that the total number of lines does not
81 * exceed this number.
82 */
83 descriptionNumberOfLines?: number;
84 /**
85 * Specifies the largest possible scale a title font can reach.
86 */
87 titleMaxFontSizeMultiplier?: number;
88 /**
89 * Specifies the largest possible scale a description font can reach.
90 */
91 descriptionMaxFontSizeMultiplier?: number;
92 /**
93 * Id is used for distinguishing specific accordion when using List.AccordionGroup. Property is required when using List.AccordionGroup and has no impact on behavior when using standalone List.Accordion.
94 */
95 id?: string | number;
96 /**
97 * TestID used for testing purposes
98 */
99 testID?: string;
100 /**
101 * Accessibility label for the TouchableRipple. This is read by the screen reader when the user taps the touchable.
102 */
103 accessibilityLabel?: string;
104 /**
105 * `pointerEvents` passed to the `View` container
106 */
107 pointerEvents?: ViewProps['pointerEvents'];
108};
109/**
110 * A component used to display an expandable list item.
111 *
112 * ## Usage
113 * ```js
114 * import * as React from 'react';
115 * import { List } from 'react-native-paper';
116 *
117 * const MyComponent = () => {
118 * const [expanded, setExpanded] = React.useState(true);
119 *
120 * const handlePress = () => setExpanded(!expanded);
121 *
122 * return (
123 * <List.Section title="Accordions">
124 * <List.Accordion
125 * title="Uncontrolled Accordion"
126 * left={props => <List.Icon {...props} icon="folder" />}>
127 * <List.Item title="First item" />
128 * <List.Item title="Second item" />
129 * </List.Accordion>
130 *
131 * <List.Accordion
132 * title="Controlled Accordion"
133 * left={props => <List.Icon {...props} icon="folder" />}
134 * expanded={expanded}
135 * onPress={handlePress}>
136 * <List.Item title="First item" />
137 * <List.Item title="Second item" />
138 * </List.Accordion>
139 * </List.Section>
140 * );
141 * };
142 *
143 * export default MyComponent;
144 * ```
145 */
146declare const ListAccordion: {
147 ({ left, right, title, description, children, theme: themeOverrides, titleStyle, descriptionStyle, titleNumberOfLines, descriptionNumberOfLines, rippleColor: customRippleColor, style, id, testID, background, onPress, onLongPress, delayLongPress, expanded: expandedProp, accessibilityLabel, pointerEvents, titleMaxFontSizeMultiplier, descriptionMaxFontSizeMultiplier, }: Props): React.JSX.Element;
148 displayName: string;
149};
150export default ListAccordion;
151//# sourceMappingURL=ListAccordion.d.ts.map
\No newline at end of file