| 1 | import * as React from 'react';
|
| 2 | import { AccessibilityState, Animated, ColorValue, GestureResponderEvent, PressableAndroidRippleConfig, StyleProp, View, ViewStyle } from 'react-native';
|
| 3 | import type { $Omit, $RemoveChildren, ThemeProp } from '../../types';
|
| 4 | import { IconSource } from '../Icon';
|
| 5 | import Surface from '../Surface';
|
| 6 | type FABSize = 'small' | 'medium' | 'large';
|
| 7 | type FABMode = 'flat' | 'elevated';
|
| 8 | type IconOrLabel = {
|
| 9 | icon: IconSource;
|
| 10 | label?: string;
|
| 11 | } | {
|
| 12 | icon?: IconSource;
|
| 13 | label: string;
|
| 14 | };
|
| 15 | export type Props = $Omit<$RemoveChildren<typeof Surface>, 'mode'> & {
|
| 16 | /**
|
| 17 | * Icon to display for the `FAB`. It's optional only if `label` is defined.
|
| 18 | */
|
| 19 | icon?: IconSource;
|
| 20 | /**
|
| 21 | * Optional label for extended `FAB`. It's optional only if `icon` is defined.
|
| 22 | */
|
| 23 | label?: string;
|
| 24 | /**
|
| 25 | * Make the label text uppercased.
|
| 26 | */
|
| 27 | uppercase?: boolean;
|
| 28 | /**
|
| 29 | * Type of background drawabale to display the feedback (Android).
|
| 30 | * https://reactnative.dev/docs/pressable#rippleconfig
|
| 31 | */
|
| 32 | background?: PressableAndroidRippleConfig;
|
| 33 | /**
|
| 34 | * Accessibility label for the FAB. This is read by the screen reader when the user taps the FAB.
|
| 35 | * Uses `label` by default if specified.
|
| 36 | */
|
| 37 | accessibilityLabel?: string;
|
| 38 | /**
|
| 39 | * Accessibility state for the FAB. This is read by the screen reader when the user taps the FAB.
|
| 40 | */
|
| 41 | accessibilityState?: AccessibilityState;
|
| 42 | /**
|
| 43 | * Whether an icon change is animated.
|
| 44 | */
|
| 45 | animated?: boolean;
|
| 46 | /**
|
| 47 | * @deprecated Deprecated in v.5x - use prop size="small".
|
| 48 | *
|
| 49 | * Whether FAB is mini-sized, used to create visual continuity with other elements. This has no effect if `label` is specified.
|
| 50 | */
|
| 51 | small?: boolean;
|
| 52 | /**
|
| 53 | * Custom color for the icon and label of the `FAB`.
|
| 54 | */
|
| 55 | color?: string;
|
| 56 | /**
|
| 57 | * Color of the ripple effect.
|
| 58 | */
|
| 59 | rippleColor?: ColorValue;
|
| 60 | /**
|
| 61 | * Whether `FAB` is disabled. A disabled button is greyed out and `onPress` is not called on touch.
|
| 62 | */
|
| 63 | disabled?: boolean;
|
| 64 | /**
|
| 65 | * Whether `FAB` is currently visible.
|
| 66 | */
|
| 67 | visible?: boolean;
|
| 68 | /**
|
| 69 | * Whether to show a loading indicator.
|
| 70 | */
|
| 71 | loading?: boolean;
|
| 72 | /**
|
| 73 | * Function to execute on press.
|
| 74 | */
|
| 75 | onPress?: (e: GestureResponderEvent) => void;
|
| 76 | /**
|
| 77 | * Function to execute on long press.
|
| 78 | */
|
| 79 | onLongPress?: (e: GestureResponderEvent) => void;
|
| 80 | /**
|
| 81 | * The number of milliseconds a user must touch the element before executing `onLongPress`.
|
| 82 | */
|
| 83 | delayLongPress?: number;
|
| 84 | /**
|
| 85 | * @supported Available in v5.x with theme version 3
|
| 86 | *
|
| 87 | * Size of the `FAB`.
|
| 88 | * - `small` - FAB with small height (40).
|
| 89 | * - `medium` - FAB with default medium height (56).
|
| 90 | * - `large` - FAB with large height (96).
|
| 91 | */
|
| 92 | size?: FABSize;
|
| 93 | /**
|
| 94 | * Custom size for the `FAB`. This prop takes precedence over size prop
|
| 95 | */
|
| 96 | customSize?: number;
|
| 97 | /**
|
| 98 | * @supported Available in v5.x with theme version 3
|
| 99 | *
|
| 100 | * Mode of the `FAB`. You can change the mode to adjust the the shadow:
|
| 101 | * - `flat` - button without a shadow.
|
| 102 | * - `elevated` - button with a shadow.
|
| 103 | */
|
| 104 | mode?: FABMode;
|
| 105 | /**
|
| 106 | * @supported Available in v5.x with theme version 3
|
| 107 | *
|
| 108 | * Color mappings variant for combinations of container and icon colors.
|
| 109 | */
|
| 110 | variant?: 'primary' | 'secondary' | 'tertiary' | 'surface';
|
| 111 | /**
|
| 112 | * Specifies the largest possible scale a label font can reach.
|
| 113 | */
|
| 114 | labelMaxFontSizeMultiplier?: number;
|
| 115 | style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
|
| 116 | /**
|
| 117 | * @optional
|
| 118 | */
|
| 119 | theme?: ThemeProp;
|
| 120 | /**
|
| 121 | * TestID used for testing purposes
|
| 122 | */
|
| 123 | testID?: string;
|
| 124 | ref?: React.RefObject<View>;
|
| 125 | } & IconOrLabel;
|
| 126 | /**
|
| 127 | * A floating action button represents the primary action on a screen. It appears in front of all screen content.
|
| 128 | *
|
| 129 | * ## Usage
|
| 130 | * ```js
|
| 131 | * import * as React from 'react';
|
| 132 | * import { StyleSheet } from 'react-native';
|
| 133 | * import { FAB } from 'react-native-paper';
|
| 134 | *
|
| 135 | * const MyComponent = () => (
|
| 136 | * <FAB
|
| 137 | * icon="plus"
|
| 138 | * style={styles.fab}
|
| 139 | * onPress={() => console.log('Pressed')}
|
| 140 | * />
|
| 141 | * );
|
| 142 | *
|
| 143 | * const styles = StyleSheet.create({
|
| 144 | * fab: {
|
| 145 | * position: 'absolute',
|
| 146 | * margin: 16,
|
| 147 | * right: 0,
|
| 148 | * bottom: 0,
|
| 149 | * },
|
| 150 | * })
|
| 151 | *
|
| 152 | * export default MyComponent;
|
| 153 | * ```
|
| 154 | */
|
| 155 | declare const FAB: import("../../utils/forwardRef").ForwardRefComponent<View, Props>;
|
| 156 | export default FAB;
|
| 157 | export { FAB };
|
| 158 | //# sourceMappingURL=FAB.d.ts.map |
| \ | No newline at end of file |