| 1 | import * as React from 'react';
|
| 2 | import { Animated, ColorValue, StyleProp, View, ViewStyle } from 'react-native';
|
| 3 | import Button from './Button/Button';
|
| 4 | import type { IconSource } from './Icon';
|
| 5 | import Surface from './Surface';
|
| 6 | import type { $Omit, $RemoveChildren, ThemeProp } from '../types';
|
| 7 | export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
|
| 8 | /**
|
| 9 | * Whether the Snackbar is currently visible.
|
| 10 | */
|
| 11 | visible: boolean;
|
| 12 | /**
|
| 13 | * Label and press callback for the action button. It should contain the following properties:
|
| 14 | * - `label` - Label of the action button
|
| 15 | * - `onPress` - Callback that is called when action button is pressed.
|
| 16 | */
|
| 17 | action?: $RemoveChildren<typeof Button> & {
|
| 18 | label: string;
|
| 19 | };
|
| 20 | /**
|
| 21 | * @supported Available in v5.x with theme version 3
|
| 22 | * Icon to display when `onIconPress` is defined. Default will be `close` icon.
|
| 23 | */
|
| 24 | icon?: IconSource;
|
| 25 | /**
|
| 26 | * @supported Available in v5.x with theme version 3
|
| 27 | * Color of the ripple effect.
|
| 28 | */
|
| 29 | rippleColor?: ColorValue;
|
| 30 | /**
|
| 31 | * @supported Available in v5.x with theme version 3
|
| 32 | * Function to execute on icon button press. The icon button appears only when this prop is specified.
|
| 33 | */
|
| 34 | onIconPress?: () => void;
|
| 35 | /**
|
| 36 | * @supported Available in v5.x with theme version 3
|
| 37 | * Accessibility label for the icon button. This is read by the screen reader when the user taps the button.
|
| 38 | */
|
| 39 | iconAccessibilityLabel?: string;
|
| 40 | /**
|
| 41 | * The duration for which the Snackbar is shown.
|
| 42 | */
|
| 43 | duration?: number;
|
| 44 | /**
|
| 45 | * Callback called when Snackbar is dismissed. The `visible` prop needs to be updated when this is called.
|
| 46 | */
|
| 47 | onDismiss: () => void;
|
| 48 | /**
|
| 49 | * Text content of the Snackbar.
|
| 50 | */
|
| 51 | children: React.ReactNode;
|
| 52 | /**
|
| 53 | * @supported Available in v5.x with theme version 3
|
| 54 | * Changes Snackbar shadow and background on iOS and Android.
|
| 55 | */
|
| 56 | elevation?: 0 | 1 | 2 | 3 | 4 | 5 | Animated.Value;
|
| 57 | /**
|
| 58 | * Specifies the largest possible scale a text font can reach.
|
| 59 | */
|
| 60 | maxFontSizeMultiplier?: number;
|
| 61 | /**
|
| 62 | * Style for the wrapper of the snackbar
|
| 63 | */
|
| 64 | wrapperStyle?: StyleProp<ViewStyle>;
|
| 65 | style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
|
| 66 | ref?: React.RefObject<View>;
|
| 67 | /**
|
| 68 | * @optional
|
| 69 | */
|
| 70 | theme?: ThemeProp;
|
| 71 | /**
|
| 72 | * TestID used for testing purposes
|
| 73 | */
|
| 74 | testID?: string;
|
| 75 | };
|
| 76 | /**
|
| 77 | * Snackbars provide brief feedback about an operation through a message rendered at the bottom of the container in which it's wrapped.
|
| 78 | *
|
| 79 | * Note: To display it as a popup, regardless of the parent's position, wrap it with a `Portal` component – refer to the example in the "More Examples` section.
|
| 80 | *
|
| 81 | * ## Usage
|
| 82 | * ```js
|
| 83 | * import * as React from 'react';
|
| 84 | * import { View, StyleSheet } from 'react-native';
|
| 85 | * import { Button, Snackbar } from 'react-native-paper';
|
| 86 | *
|
| 87 | * const MyComponent = () => {
|
| 88 | * const [visible, setVisible] = React.useState(false);
|
| 89 | *
|
| 90 | * const onToggleSnackBar = () => setVisible(!visible);
|
| 91 | *
|
| 92 | * const onDismissSnackBar = () => setVisible(false);
|
| 93 | *
|
| 94 | * return (
|
| 95 | * <View style={styles.container}>
|
| 96 | * <Button onPress={onToggleSnackBar}>{visible ? 'Hide' : 'Show'}</Button>
|
| 97 | * <Snackbar
|
| 98 | * visible={visible}
|
| 99 | * onDismiss={onDismissSnackBar}
|
| 100 | * action={{
|
| 101 | * label: 'Undo',
|
| 102 | * onPress: () => {
|
| 103 | * // Do something
|
| 104 | * },
|
| 105 | * }}>
|
| 106 | * Hey there! I'm a Snackbar.
|
| 107 | * </Snackbar>
|
| 108 | * </View>
|
| 109 | * );
|
| 110 | * };
|
| 111 | *
|
| 112 | * const styles = StyleSheet.create({
|
| 113 | * container: {
|
| 114 | * flex: 1,
|
| 115 | * justifyContent: 'space-between',
|
| 116 | * },
|
| 117 | * });
|
| 118 | *
|
| 119 | * export default MyComponent;
|
| 120 | * ```
|
| 121 | */
|
| 122 | declare const Snackbar: {
|
| 123 | ({ visible, action, icon, onIconPress, iconAccessibilityLabel, duration, onDismiss, children, elevation, wrapperStyle, style, theme: themeOverrides, maxFontSizeMultiplier, rippleColor, testID, ...rest }: Props): React.JSX.Element | null;
|
| 124 | /**
|
| 125 | * Show the Snackbar for a short duration.
|
| 126 | */
|
| 127 | DURATION_SHORT: number;
|
| 128 | /**
|
| 129 | * Show the Snackbar for a medium duration.
|
| 130 | */
|
| 131 | DURATION_MEDIUM: number;
|
| 132 | /**
|
| 133 | * Show the Snackbar for a long duration.
|
| 134 | */
|
| 135 | DURATION_LONG: number;
|
| 136 | };
|
| 137 | export default Snackbar;
|
| 138 | //# sourceMappingURL=Snackbar.d.ts.map |
| \ | No newline at end of file |