| 1 | {"version":3,"sources":["IconButton.tsx"],"names":["React","View","StyleSheet","color","TouchableRipple","Icon","CrossFadeIcon","withTheme","IconButton","icon","customColor","size","accessibilityLabel","disabled","onPress","animated","theme","style","rest","iconColor","colors","text","rippleColor","alpha","rgb","string","IconComponent","buttonSize","styles","container","width","height","borderRadius","supported","top","left","bottom","right","create","alignItems","justifyContent","overflow","margin","opacity"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {\n View,\n ViewStyle,\n StyleSheet,\n StyleProp,\n GestureResponderEvent,\n TouchableWithoutFeedback,\n} from 'react-native';\nimport color from 'color';\n\nimport TouchableRipple from './TouchableRipple/TouchableRipple';\nimport Icon, { IconSource } from './Icon';\nimport CrossFadeIcon from './CrossFadeIcon';\nimport { withTheme } from '../core/theming';\n\nimport type { $RemoveChildren } from '../types';\n\ntype Props = $RemoveChildren<typeof TouchableRipple> & {\n /**\n * Icon to display.\n */\n icon: IconSource;\n /**\n * Color of the icon.\n */\n color?: string;\n /**\n * Size of the icon.\n */\n size?: number;\n /**\n * Whether the button is disabled. A disabled button is greyed out and `onPress` is not called on touch.\n */\n disabled?: boolean;\n /**\n * Whether an icon change is animated.\n */\n animated?: boolean;\n /**\n * Accessibility label for the button. This is read by the screen reader when the user taps the button.\n */\n accessibilityLabel?: string;\n /**\n * Function to execute on press.\n */\n onPress?: (e: GestureResponderEvent) => void;\n style?: StyleProp<ViewStyle>;\n ref?: React.RefObject<TouchableWithoutFeedback>;\n /**\n * @optional\n */\n theme: ReactNativePaper.Theme;\n};\n\n/**\n * An icon button is a button which displays only an icon without a label.\n * By default button has 150% size of the icon.\n *\n * <div class=\"screenshots\">\n * <figure>\n * <img src=\"screenshots/icon-button-1.png\" />\n * <figcaption>Icon button</figcaption>\n * </figure>\n * <figure>\n * <img src=\"screenshots/icon-button-2.png\" />\n * <figcaption>Pressed icon button</figcaption>\n * </figure>\n * </div>\n *\n * ## Usage\n * ```js\n * import * as React from 'react';\n * import { IconButton, Colors } from 'react-native-paper';\n *\n * const MyComponent = () => (\n * <IconButton\n * icon=\"camera\"\n * color={Colors.red500}\n * size={20}\n * onPress={() => console.log('Pressed')}\n * />\n * );\n *\n * export default MyComponent;\n * ```\n *\n * @extends TouchableRipple props https://callstack.github.io/react-native-paper/touchable-ripple.html\n */\nconst IconButton = ({\n icon,\n color: customColor,\n size = 24,\n accessibilityLabel,\n disabled,\n onPress,\n animated = false,\n theme,\n style,\n ...rest\n}: Props) => {\n const iconColor =\n typeof customColor !== 'undefined' ? customColor : theme.colors.text;\n const rippleColor = color(iconColor).alpha(0.32).rgb().string();\n const IconComponent = animated ? CrossFadeIcon : Icon;\n const buttonSize = size * 1.5;\n return (\n <TouchableRipple\n borderless\n centered\n onPress={onPress}\n rippleColor={rippleColor}\n style={[\n styles.container,\n { width: buttonSize, height: buttonSize, borderRadius: buttonSize / 2 },\n disabled && styles.disabled,\n style,\n ]}\n accessibilityLabel={accessibilityLabel}\n // @ts-expect-error We keep old a11y props for backwards compat with old RN versions\n accessibilityTraits={disabled ? ['button', 'disabled'] : 'button'}\n accessibilityComponentType=\"button\"\n accessibilityRole=\"button\"\n accessibilityState={{ disabled }}\n disabled={disabled}\n hitSlop={\n TouchableRipple.supported\n ? { top: 10, left: 10, bottom: 10, right: 10 }\n : { top: 6, left: 6, bottom: 6, right: 6 }\n }\n {...rest}\n >\n <View>\n <IconComponent color={iconColor} source={icon} size={size} />\n </View>\n </TouchableRipple>\n );\n};\n\nconst styles = StyleSheet.create({\n container: {\n alignItems: 'center',\n justifyContent: 'center',\n overflow: 'hidden',\n margin: 6,\n },\n disabled: {\n opacity: 0.32,\n },\n});\n\nexport default withTheme(IconButton);\n"]} |