@metamask/design-system-react-native/dist/components/ButtonIcon/ButtonIcon.cjs.map

Design System React Native

{"version":3,"file":"ButtonIcon.cjs","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,qFAAmE;AACnE,+CAAwC;AAGxC,iDAA6C;AAE7C,4CAA+B;AAC/B,gFAAmE;AAEnE,qEAGgC;AAGzB,MAAM,UAAU,GAAG,CAAC,EACzB,IAAI,GAAG,sBAAc,CAAC,EAAE,EACxB,QAAQ,EACR,SAAS,EACT,UAAU,GAAG,KAAK,EAClB,SAAS,GAAG,KAAK,EACjB,UAAU,GAAG,KAAK,EAClB,SAAS,EACT,UAAU,EACV,WAAW,GAAG,EAAE,EAChB,KAAK,EACL,GAAG,KAAK,EACQ,EAAE,EAAE;IACpB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAClD,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IAEzB,4CAA4C;IAC5C,IAAI,eAAe,GAAG,gBAAgB,CAAC;IACvC,IAAI,UAAU,EAAE;QACd,eAAe,GAAG,iBAAiB,CAAC;KACrC;SAAM,IAAI,SAAS,EAAE;QACpB,eAAe,GAAG,YAAY,CAAC;KAChC;IAED,MAAM,qBAAqB,GAAG;;MAE1B,2DAAoC,CAAC,IAAI,CAAC;MAC1C,UAAU,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,YAAY;MAC1C,eAAe;MACf,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,aAAa;MACzC,WAAW,EAAE,CAAC;IAElB,MAAM,qBAAqB,GACzB,SAAS,IAAI,UAAU,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,mBAAmB,CAAC;IAEzE,MAAM,gBAAgB,GAAG,CAAC,KAA4B,EAAE,EAAE;QACxD,YAAY,CAAC,IAAI,CAAC,CAAC;QACnB,SAAS,EAAE,CAAC,KAAK,CAAC,CAAC;IACrB,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,CAAC,KAA4B,EAAE,EAAE;QACzD,YAAY,CAAC,KAAK,CAAC,CAAC;QACpB,UAAU,EAAE,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,+BAAc,CACb,QAAQ,CAAC,CAAC,UAAU,CAAC,CACrB,SAAS,CAAC,CAAC,gBAAgB,CAAC,CAC5B,UAAU,CAAC,CAAC,iBAAiB,CAAC,CAC9B,UAAU,CACV,KAAK,CAAC,CAAC,CAAC,EAAE,CAAA,GAAG,qBAAqB,EAAE,EAAE,KAAK,CAAC,CAAC,CAC7C,MAAM,CAAC,aAAa,CACpB,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,WAAI,CACH,IAAI,CAAC,CAAC,QAAQ,CAAC,CACf,KAAK,CAAC,CAAC,qBAAkC,CAAC,CAC1C,IAAI,CAAC,CAAC,mDAA4B,CAAC,IAAI,CAAC,CAAC,CACzC,IAAI,SAAS,CAAC,EAElB;IAAA,EAAE,+BAAc,CAAC,CAClB,CAAC;AACJ,CAAC,CAAC;AA/DW,QAAA,UAAU,cA+DrB","sourcesContent":["import { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React, { useState } from 'react';\nimport type { GestureResponderEvent } from 'react-native';\n\nimport { ButtonIconSize } from '../../types';\nimport type { IconColor } from '../Icon';\nimport { Icon } from '../Icon';\nimport { ButtonAnimated } from '../temp-components/ButtonAnimated';\n\nimport {\n  MAP_BUTTONICON_SIZE_ICONSIZE,\n  TWCLASSMAP_BUTTONICON_SIZE_DIMENSION,\n} from './ButtonIcon.constants';\nimport type { ButtonIconProps } from './ButtonIcon.types';\n\nexport const ButtonIcon = ({\n  size = ButtonIconSize.Md,\n  iconName,\n  iconProps,\n  isDisabled = false,\n  isInverse = false,\n  isFloating = false,\n  onPressIn,\n  onPressOut,\n  twClassName = '',\n  style,\n  ...props\n}: ButtonIconProps) => {\n  const [isPressed, setIsPressed] = useState(false);\n  const tw = useTailwind();\n\n  // Determine background color based on state\n  let backgroundColor = 'bg-transparent';\n  if (isFloating) {\n    backgroundColor = 'bg-icon-default';\n  } else if (isPressed) {\n    backgroundColor = 'bg-pressed';\n  }\n\n  const twContainerClassNames = `\n    items-center justify-center\n    ${TWCLASSMAP_BUTTONICON_SIZE_DIMENSION[size]}\n    ${isFloating ? 'rounded-full' : 'rounded-sm'}\n    ${backgroundColor}\n    ${isDisabled ? 'opacity-50' : 'opacity-100'}\n    ${twClassName}`;\n\n  const twIconColorClassNames =\n    isInverse || isFloating ? 'text-primary-inverse' : 'text-icon-default';\n\n  const onPressInHandler = (event: GestureResponderEvent) => {\n    setIsPressed(true);\n    onPressIn?.(event);\n  };\n\n  const onPressOutHandler = (event: GestureResponderEvent) => {\n    setIsPressed(false);\n    onPressOut?.(event);\n  };\n\n  return (\n    <ButtonAnimated\n      disabled={isDisabled}\n      onPressIn={onPressInHandler}\n      onPressOut={onPressOutHandler}\n      accessible\n      style={[tw`${twContainerClassNames}`, style]}\n      testID=\"button-icon\"\n      {...props}\n    >\n      <Icon\n        name={iconName}\n        color={twIconColorClassNames as IconColor}\n        size={MAP_BUTTONICON_SIZE_ICONSIZE[size]}\n        {...iconProps}\n      />\n    </ButtonAnimated>\n  );\n};\n"]}