UNPKG

22.1 kBTypeScriptView Raw
1import * as React from 'react';
2import { Animated, View, ViewStyle, StyleProp, AccessibilityState } from 'react-native';
3import Surface from '../Surface';
4import { IconSource } from '../Icon';
5import type { $RemoveChildren } from '../../types';
6declare type Props = $RemoveChildren<typeof Surface> & {
7 /**
8 * Icon to display for the `FAB`.
9 */
10 icon: IconSource;
11 /**
12 * Optional label for extended `FAB`.
13 */
14 label?: string;
15 /**
16 * Make the label text uppercased.
17 */
18 uppercase?: boolean;
19 /**
20 * Accessibility label for the FAB. This is read by the screen reader when the user taps the FAB.
21 * Uses `label` by default if specified.
22 */
23 accessibilityLabel?: string;
24 /**
25 * Accessibility state for the FAB. This is read by the screen reader when the user taps the FAB.
26 */
27 accessibilityState?: AccessibilityState;
28 /**
29 * Whether an icon change is animated.
30 */
31 animated?: boolean;
32 /**
33 * Whether FAB is mini-sized, used to create visual continuity with other elements. This has no effect if `label` is specified.
34 */
35 small?: boolean;
36 /**
37 * Custom color for the icon and label of the `FAB`.
38 */
39 color?: string;
40 /**
41 * Whether `FAB` is disabled. A disabled button is greyed out and `onPress` is not called on touch.
42 */
43 disabled?: boolean;
44 /**
45 * Whether `FAB` is currently visible.
46 */
47 visible?: boolean;
48 /**
49 * Whether to show a loading indicator.
50 */
51 loading?: boolean;
52 /**
53 * Function to execute on press.
54 */
55 onPress?: () => void;
56 /**
57 * Function to execute on long press.
58 */
59 onLongPress?: () => void;
60 style?: StyleProp<ViewStyle>;
61 /**
62 * @optional
63 */
64 theme: ReactNativePaper.Theme;
65 testID?: string;
66};
67declare const _default: React.ComponentType<Pick<$RemoveChildren<React.ComponentType<Pick<import("react-native").ViewProps & React.RefAttributes<View> & {
68 children: React.ReactNode;
69 style?: false | import("react-native").RegisteredStyle<ViewStyle> | Animated.Value | Animated.AnimatedInterpolation | Animated.WithAnimatedObject<ViewStyle> | Animated.WithAnimatedArray<ViewStyle | import("react-native").Falsy | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<ViewStyle | import("react-native").Falsy | import("react-native").RegisteredStyle<ViewStyle>> | readonly (ViewStyle | import("react-native").Falsy | import("react-native").RegisteredStyle<ViewStyle>)[]> | null | undefined;
70 theme: ReactNativePaper.Theme;
71}, keyof import("react-native").ViewProps | keyof React.RefAttributes<View>> & {
72 theme?: import("@callstack/react-theme-provider").$DeepPartial<ReactNativePaper.Theme> | undefined;
73}> & import("@callstack/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<React.ComponentType<import("react-native").ViewProps & React.RefAttributes<View> & {
74 children: React.ReactNode;
75 style?: false | import("react-native").RegisteredStyle<ViewStyle> | Animated.Value | Animated.AnimatedInterpolation | Animated.WithAnimatedObject<ViewStyle> | Animated.WithAnimatedArray<ViewStyle | import("react-native").Falsy | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<ViewStyle | import("react-native").Falsy | import("react-native").RegisteredStyle<ViewStyle>> | readonly (ViewStyle | import("react-native").Falsy | import("react-native").RegisteredStyle<ViewStyle>)[]> | null | undefined;
76 theme: ReactNativePaper.Theme;
77}> & (({ style, theme, ...rest }: import("react-native").ViewProps & React.RefAttributes<View> & {
78 children: React.ReactNode;
79 style?: false | import("react-native").RegisteredStyle<ViewStyle> | Animated.Value | Animated.AnimatedInterpolation | Animated.WithAnimatedObject<ViewStyle> | Animated.WithAnimatedArray<ViewStyle | import("react-native").Falsy | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<ViewStyle | import("react-native").Falsy | import("react-native").RegisteredStyle<ViewStyle>> | readonly (ViewStyle | import("react-native").Falsy | import("react-native").RegisteredStyle<ViewStyle>)[]> | null | undefined;
80 theme: ReactNativePaper.Theme;
81}) => JSX.Element), {}>> & {
82 /**
83 * Icon to display for the `FAB`.
84 */
85 icon: IconSource;
86 /**
87 * Optional label for extended `FAB`.
88 */
89 label?: string | undefined;
90 /**
91 * Make the label text uppercased.
92 */
93 uppercase?: boolean | undefined;
94 /**
95 * Accessibility label for the FAB. This is read by the screen reader when the user taps the FAB.
96 * Uses `label` by default if specified.
97 */
98 accessibilityLabel?: string | undefined;
99 /**
100 * Accessibility state for the FAB. This is read by the screen reader when the user taps the FAB.
101 */
102 accessibilityState?: AccessibilityState | undefined;
103 /**
104 * Whether an icon change is animated.
105 */
106 animated?: boolean | undefined;
107 /**
108 * Whether FAB is mini-sized, used to create visual continuity with other elements. This has no effect if `label` is specified.
109 */
110 small?: boolean | undefined;
111 /**
112 * Custom color for the icon and label of the `FAB`.
113 */
114 color?: string | undefined;
115 /**
116 * Whether `FAB` is disabled. A disabled button is greyed out and `onPress` is not called on touch.
117 */
118 disabled?: boolean | undefined;
119 /**
120 * Whether `FAB` is currently visible.
121 */
122 visible?: boolean | undefined;
123 /**
124 * Whether to show a loading indicator.
125 */
126 loading?: boolean | undefined;
127 /**
128 * Function to execute on press.
129 */
130 onPress?: (() => void) | undefined;
131 /**
132 * Function to execute on long press.
133 */
134 onLongPress?: (() => void) | undefined;
135 style?: StyleProp<ViewStyle>;
136 /**
137 * @optional
138 */
139 theme: ReactNativePaper.Theme;
140 testID?: string | undefined;
141}, "label" | "small" | "style" | "pointerEvents" | "color" | "onLayout" | "onPress" | "onLongPress" | "testID" | "nativeID" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "icon" | "visible" | "key" | "hitSlop" | "removeClippedSubviews" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "uppercase" | "disabled" | "loading" | "animated"> & {
142 theme?: import("@callstack/react-theme-provider").$DeepPartial<ReactNativePaper.Theme> | undefined;
143}> & import("@callstack/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<React.ComponentType<$RemoveChildren<React.ComponentType<Pick<import("react-native").ViewProps & React.RefAttributes<View> & {
144 children: React.ReactNode;
145 style?: false | import("react-native").RegisteredStyle<ViewStyle> | Animated.Value | Animated.AnimatedInterpolation | Animated.WithAnimatedObject<ViewStyle> | Animated.WithAnimatedArray<ViewStyle | import("react-native").Falsy | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<ViewStyle | import("react-native").Falsy | import("react-native").RegisteredStyle<ViewStyle>> | readonly (ViewStyle | import("react-native").Falsy | import("react-native").RegisteredStyle<ViewStyle>)[]> | null | undefined;
146 theme: ReactNativePaper.Theme;
147}, keyof import("react-native").ViewProps | keyof React.RefAttributes<View>> & {
148 theme?: import("@callstack/react-theme-provider").$DeepPartial<ReactNativePaper.Theme> | undefined;
149}> & import("@callstack/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<React.ComponentType<import("react-native").ViewProps & React.RefAttributes<View> & {
150 children: React.ReactNode;
151 style?: false | import("react-native").RegisteredStyle<ViewStyle> | Animated.Value | Animated.AnimatedInterpolation | Animated.WithAnimatedObject<ViewStyle> | Animated.WithAnimatedArray<ViewStyle | import("react-native").Falsy | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<ViewStyle | import("react-native").Falsy | import("react-native").RegisteredStyle<ViewStyle>> | readonly (ViewStyle | import("react-native").Falsy | import("react-native").RegisteredStyle<ViewStyle>)[]> | null | undefined;
152 theme: ReactNativePaper.Theme;
153}> & (({ style, theme, ...rest }: import("react-native").ViewProps & React.RefAttributes<View> & {
154 children: React.ReactNode;
155 style?: false | import("react-native").RegisteredStyle<ViewStyle> | Animated.Value | Animated.AnimatedInterpolation | Animated.WithAnimatedObject<ViewStyle> | Animated.WithAnimatedArray<ViewStyle | import("react-native").Falsy | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<ViewStyle | import("react-native").Falsy | import("react-native").RegisteredStyle<ViewStyle>> | readonly (ViewStyle | import("react-native").Falsy | import("react-native").RegisteredStyle<ViewStyle>)[]> | null | undefined;
156 theme: ReactNativePaper.Theme;
157}) => JSX.Element), {}>> & {
158 /**
159 * Icon to display for the `FAB`.
160 */
161 icon: IconSource;
162 /**
163 * Optional label for extended `FAB`.
164 */
165 label?: string | undefined;
166 /**
167 * Make the label text uppercased.
168 */
169 uppercase?: boolean | undefined;
170 /**
171 * Accessibility label for the FAB. This is read by the screen reader when the user taps the FAB.
172 * Uses `label` by default if specified.
173 */
174 accessibilityLabel?: string | undefined;
175 /**
176 * Accessibility state for the FAB. This is read by the screen reader when the user taps the FAB.
177 */
178 accessibilityState?: AccessibilityState | undefined;
179 /**
180 * Whether an icon change is animated.
181 */
182 animated?: boolean | undefined;
183 /**
184 * Whether FAB is mini-sized, used to create visual continuity with other elements. This has no effect if `label` is specified.
185 */
186 small?: boolean | undefined;
187 /**
188 * Custom color for the icon and label of the `FAB`.
189 */
190 color?: string | undefined;
191 /**
192 * Whether `FAB` is disabled. A disabled button is greyed out and `onPress` is not called on touch.
193 */
194 disabled?: boolean | undefined;
195 /**
196 * Whether `FAB` is currently visible.
197 */
198 visible?: boolean | undefined;
199 /**
200 * Whether to show a loading indicator.
201 */
202 loading?: boolean | undefined;
203 /**
204 * Function to execute on press.
205 */
206 onPress?: (() => void) | undefined;
207 /**
208 * Function to execute on long press.
209 */
210 onLongPress?: (() => void) | undefined;
211 style?: StyleProp<ViewStyle>;
212 /**
213 * @optional
214 */
215 theme: ReactNativePaper.Theme;
216 testID?: string | undefined;
217}> & (({ small, icon, label, accessibilityLabel, accessibilityState, animated, color: customColor, disabled, onPress, onLongPress, theme, style, visible, uppercase, loading, testID, ...rest }: Props) => JSX.Element), {}>;
218export default _default;
219declare const FABWithTheme: React.ComponentType<Pick<$RemoveChildren<React.ComponentType<Pick<import("react-native").ViewProps & React.RefAttributes<View> & {
220 children: React.ReactNode;
221 style?: false | import("react-native").RegisteredStyle<ViewStyle> | Animated.Value | Animated.AnimatedInterpolation | Animated.WithAnimatedObject<ViewStyle> | Animated.WithAnimatedArray<ViewStyle | import("react-native").Falsy | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<ViewStyle | import("react-native").Falsy | import("react-native").RegisteredStyle<ViewStyle>> | readonly (ViewStyle | import("react-native").Falsy | import("react-native").RegisteredStyle<ViewStyle>)[]> | null | undefined;
222 theme: ReactNativePaper.Theme;
223}, keyof import("react-native").ViewProps | keyof React.RefAttributes<View>> & {
224 theme?: import("@callstack/react-theme-provider").$DeepPartial<ReactNativePaper.Theme> | undefined;
225}> & import("@callstack/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<React.ComponentType<import("react-native").ViewProps & React.RefAttributes<View> & {
226 children: React.ReactNode;
227 style?: false | import("react-native").RegisteredStyle<ViewStyle> | Animated.Value | Animated.AnimatedInterpolation | Animated.WithAnimatedObject<ViewStyle> | Animated.WithAnimatedArray<ViewStyle | import("react-native").Falsy | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<ViewStyle | import("react-native").Falsy | import("react-native").RegisteredStyle<ViewStyle>> | readonly (ViewStyle | import("react-native").Falsy | import("react-native").RegisteredStyle<ViewStyle>)[]> | null | undefined;
228 theme: ReactNativePaper.Theme;
229}> & (({ style, theme, ...rest }: import("react-native").ViewProps & React.RefAttributes<View> & {
230 children: React.ReactNode;
231 style?: false | import("react-native").RegisteredStyle<ViewStyle> | Animated.Value | Animated.AnimatedInterpolation | Animated.WithAnimatedObject<ViewStyle> | Animated.WithAnimatedArray<ViewStyle | import("react-native").Falsy | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<ViewStyle | import("react-native").Falsy | import("react-native").RegisteredStyle<ViewStyle>> | readonly (ViewStyle | import("react-native").Falsy | import("react-native").RegisteredStyle<ViewStyle>)[]> | null | undefined;
232 theme: ReactNativePaper.Theme;
233}) => JSX.Element), {}>> & {
234 /**
235 * Icon to display for the `FAB`.
236 */
237 icon: IconSource;
238 /**
239 * Optional label for extended `FAB`.
240 */
241 label?: string | undefined;
242 /**
243 * Make the label text uppercased.
244 */
245 uppercase?: boolean | undefined;
246 /**
247 * Accessibility label for the FAB. This is read by the screen reader when the user taps the FAB.
248 * Uses `label` by default if specified.
249 */
250 accessibilityLabel?: string | undefined;
251 /**
252 * Accessibility state for the FAB. This is read by the screen reader when the user taps the FAB.
253 */
254 accessibilityState?: AccessibilityState | undefined;
255 /**
256 * Whether an icon change is animated.
257 */
258 animated?: boolean | undefined;
259 /**
260 * Whether FAB is mini-sized, used to create visual continuity with other elements. This has no effect if `label` is specified.
261 */
262 small?: boolean | undefined;
263 /**
264 * Custom color for the icon and label of the `FAB`.
265 */
266 color?: string | undefined;
267 /**
268 * Whether `FAB` is disabled. A disabled button is greyed out and `onPress` is not called on touch.
269 */
270 disabled?: boolean | undefined;
271 /**
272 * Whether `FAB` is currently visible.
273 */
274 visible?: boolean | undefined;
275 /**
276 * Whether to show a loading indicator.
277 */
278 loading?: boolean | undefined;
279 /**
280 * Function to execute on press.
281 */
282 onPress?: (() => void) | undefined;
283 /**
284 * Function to execute on long press.
285 */
286 onLongPress?: (() => void) | undefined;
287 style?: StyleProp<ViewStyle>;
288 /**
289 * @optional
290 */
291 theme: ReactNativePaper.Theme;
292 testID?: string | undefined;
293}, "label" | "small" | "style" | "pointerEvents" | "color" | "onLayout" | "onPress" | "onLongPress" | "testID" | "nativeID" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "icon" | "visible" | "key" | "hitSlop" | "removeClippedSubviews" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "uppercase" | "disabled" | "loading" | "animated"> & {
294 theme?: import("@callstack/react-theme-provider").$DeepPartial<ReactNativePaper.Theme> | undefined;
295}> & import("@callstack/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<React.ComponentType<$RemoveChildren<React.ComponentType<Pick<import("react-native").ViewProps & React.RefAttributes<View> & {
296 children: React.ReactNode;
297 style?: false | import("react-native").RegisteredStyle<ViewStyle> | Animated.Value | Animated.AnimatedInterpolation | Animated.WithAnimatedObject<ViewStyle> | Animated.WithAnimatedArray<ViewStyle | import("react-native").Falsy | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<ViewStyle | import("react-native").Falsy | import("react-native").RegisteredStyle<ViewStyle>> | readonly (ViewStyle | import("react-native").Falsy | import("react-native").RegisteredStyle<ViewStyle>)[]> | null | undefined;
298 theme: ReactNativePaper.Theme;
299}, keyof import("react-native").ViewProps | keyof React.RefAttributes<View>> & {
300 theme?: import("@callstack/react-theme-provider").$DeepPartial<ReactNativePaper.Theme> | undefined;
301}> & import("@callstack/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<React.ComponentType<import("react-native").ViewProps & React.RefAttributes<View> & {
302 children: React.ReactNode;
303 style?: false | import("react-native").RegisteredStyle<ViewStyle> | Animated.Value | Animated.AnimatedInterpolation | Animated.WithAnimatedObject<ViewStyle> | Animated.WithAnimatedArray<ViewStyle | import("react-native").Falsy | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<ViewStyle | import("react-native").Falsy | import("react-native").RegisteredStyle<ViewStyle>> | readonly (ViewStyle | import("react-native").Falsy | import("react-native").RegisteredStyle<ViewStyle>)[]> | null | undefined;
304 theme: ReactNativePaper.Theme;
305}> & (({ style, theme, ...rest }: import("react-native").ViewProps & React.RefAttributes<View> & {
306 children: React.ReactNode;
307 style?: false | import("react-native").RegisteredStyle<ViewStyle> | Animated.Value | Animated.AnimatedInterpolation | Animated.WithAnimatedObject<ViewStyle> | Animated.WithAnimatedArray<ViewStyle | import("react-native").Falsy | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<ViewStyle | import("react-native").Falsy | import("react-native").RegisteredStyle<ViewStyle>> | readonly (ViewStyle | import("react-native").Falsy | import("react-native").RegisteredStyle<ViewStyle>)[]> | null | undefined;
308 theme: ReactNativePaper.Theme;
309}) => JSX.Element), {}>> & {
310 /**
311 * Icon to display for the `FAB`.
312 */
313 icon: IconSource;
314 /**
315 * Optional label for extended `FAB`.
316 */
317 label?: string | undefined;
318 /**
319 * Make the label text uppercased.
320 */
321 uppercase?: boolean | undefined;
322 /**
323 * Accessibility label for the FAB. This is read by the screen reader when the user taps the FAB.
324 * Uses `label` by default if specified.
325 */
326 accessibilityLabel?: string | undefined;
327 /**
328 * Accessibility state for the FAB. This is read by the screen reader when the user taps the FAB.
329 */
330 accessibilityState?: AccessibilityState | undefined;
331 /**
332 * Whether an icon change is animated.
333 */
334 animated?: boolean | undefined;
335 /**
336 * Whether FAB is mini-sized, used to create visual continuity with other elements. This has no effect if `label` is specified.
337 */
338 small?: boolean | undefined;
339 /**
340 * Custom color for the icon and label of the `FAB`.
341 */
342 color?: string | undefined;
343 /**
344 * Whether `FAB` is disabled. A disabled button is greyed out and `onPress` is not called on touch.
345 */
346 disabled?: boolean | undefined;
347 /**
348 * Whether `FAB` is currently visible.
349 */
350 visible?: boolean | undefined;
351 /**
352 * Whether to show a loading indicator.
353 */
354 loading?: boolean | undefined;
355 /**
356 * Function to execute on press.
357 */
358 onPress?: (() => void) | undefined;
359 /**
360 * Function to execute on long press.
361 */
362 onLongPress?: (() => void) | undefined;
363 style?: StyleProp<ViewStyle>;
364 /**
365 * @optional
366 */
367 theme: ReactNativePaper.Theme;
368 testID?: string | undefined;
369}> & (({ small, icon, label, accessibilityLabel, accessibilityState, animated, color: customColor, disabled, onPress, onLongPress, theme, style, visible, uppercase, loading, testID, ...rest }: Props) => JSX.Element), {}>;
370export { FABWithTheme as FAB };
371
\No newline at end of file