{"ast":null,"code":"var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require(\"@babel/runtime/helpers/extends\"));var _objectWithoutProperties2=_interopRequireDefault(require(\"@babel/runtime/helpers/objectWithoutProperties\"));var React=_interopRequireWildcard(require(\"react\"));var _View=_interopRequireDefault(require(\"react-native-web/dist/exports/View\"));var _StyleSheet=_interopRequireDefault(require(\"react-native-web/dist/exports/StyleSheet\"));var _color=_interopRequireDefault(require(\"color\"));var _TouchableRipple=_interopRequireDefault(require(\"./TouchableRipple\"));var _Icon=_interopRequireDefault(require(\"./Icon\"));var _CrossFadeIcon=_interopRequireDefault(require(\"./CrossFadeIcon\"));var _theming=require(\"../core/theming\");var _jsxFileName=\"/Users/satya/Workspace/Callstack/react-native-paper/src/components/IconButton.tsx\";var IconButton=function IconButton(_ref){var icon=_ref.icon,customColor=_ref.color,_ref$size=_ref.size,size=_ref$size===void 0?24:_ref$size,accessibilityLabel=_ref.accessibilityLabel,disabled=_ref.disabled,onPress=_ref.onPress,_ref$animated=_ref.animated,animated=_ref$animated===void 0?false:_ref$animated,theme=_ref.theme,style=_ref.style,rest=(0,_objectWithoutProperties2.default)(_ref,[\"icon\",\"color\",\"size\",\"accessibilityLabel\",\"disabled\",\"onPress\",\"animated\",\"theme\",\"style\"]);var iconColor=typeof customColor!=='undefined'?customColor:theme.colors.text;var rippleColor=(0,_color.default)(iconColor).alpha(0.32).rgb().string();var IconComponent=animated?_CrossFadeIcon.default:_Icon.default;var buttonSize=size*1.5;return React.createElement(_TouchableRipple.default,(0,_extends2.default)({borderless:true,centered:true,onPress:onPress,rippleColor:rippleColor,style:[styles.container,{width:buttonSize,height:buttonSize,borderRadius:buttonSize/2},disabled&&styles.disabled,style],accessibilityLabel:accessibilityLabel,accessibilityTraits:disabled?['button','disabled']:'button',accessibilityComponentType:\"button\",accessibilityRole:\"button\",accessibilityStates:disabled?['disabled']:[],disabled:disabled,hitSlop:_TouchableRipple.default.supported?{top:10,left:10,bottom:10,right:10}:{top:6,left:6,bottom:6,right:6}},rest,{__source:{fileName:_jsxFileName,lineNumber:107}}),React.createElement(_View.default,{__source:{fileName:_jsxFileName,lineNumber:132}},React.createElement(IconComponent,{color:iconColor,source:icon,size:size,__source:{fileName:_jsxFileName,lineNumber:133}})));};var styles=_StyleSheet.default.create({container:{alignItems:'center',justifyContent:'center',overflow:'hidden',margin:6},disabled:{opacity:0.32}});var _default=(0,_theming.withTheme)(IconButton);exports.default=_default;","map":{"version":3,"sources":["IconButton.tsx"],"names":["IconButton","icon","color","customColor","size","accessibilityLabel","disabled","onPress","animated","theme","style","rest","iconColor","rippleColor","IconComponent","buttonSize","styles","width","height","borderRadius","TouchableRipple","top","left","bottom","right","StyleSheet","container","alignItems","justifyContent","overflow","margin","opacity","withTheme"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {\n  View,\n  ViewStyle,\n  StyleSheet,\n  StyleProp,\n  GestureResponderEvent,\n} from 'react-native';\nimport color from 'color';\n\nimport TouchableRipple from './TouchableRipple';\nimport Icon, { IconSource } from './Icon';\nimport CrossFadeIcon from './CrossFadeIcon';\nimport { withTheme } from '../core/theming';\n\nimport { Theme, $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  /**\n   * @optional\n   */\n  theme: 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 */\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)\n    .alpha(0.32)\n    .rgb()\n    .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      accessibilityTraits={disabled ? ['button', 'disabled'] : 'button'}\n      accessibilityComponentType=\"button\"\n      accessibilityRole=\"button\"\n      accessibilityStates={disabled ? ['disabled'] : []}\n      disabled={disabled}\n      hitSlop={\n        // @ts-ignore - this should be fixed in react-theme-providersince withTheme() is not forwarding static property types\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  // @ts-ignore - this should be fixed in react-theme-providersince withTheme() is not forwarding static property types\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"]},"metadata":{},"sourceType":"script"}