@metamask/design-system-react-native/dist/components/TextButton/TextButton.mjs.map

Design System React Native

{"version":3,"file":"TextButton.mjs","sourceRoot":"","sources":["../../../src/components/TextButton/TextButton.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,6CAA6C;AACnE,OAAO,QAAO,EAAE,WAAW,EAAE,cAAc;;AAC3C,OAAO,EAAE,SAAS,EAAE,8BAAqB;AAEzC,OAAO,EAAE,cAAc,EAAE,8BAAoB;AAC7C,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,0BAAgB;AACzC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,0BAAgB;AAE3C,OAAO,EAAE,+BAA+B,EAAE,mCAA+B;AAGzE,MAAM,CAAC,MAAM,UAAU,GAA8B,CAAC,EACpD,QAAQ,EACR,IAAI,GAAG,cAAc,CAAC,MAAM,EAC5B,SAAS,EACT,aAAa,EACb,cAAc,EACd,cAAc,EACd,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,UAAU,GAAG,KAAK,EAClB,SAAS,GAAG,KAAK,EACjB,WAAW,GAAG,EAAE,EAChB,iBAAiB,EACjB,kBAAkB,EAClB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,WAAW,EAAE,CAAC;IACzB;;;OAGG;IACH,2DAA2D;IAC3D,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,EAAE,CAAA,QACjC,+BAA+B,CAAC,IAAI,CACtC,EAGC,CAAC;IACF,MAAM,cAAc,GAAG,CAAC,UAAU,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC;IAEnD,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,OAAgB,EAAU,EAAE;QAC3B,IAAI,SAAS,EAAE;YACb,OAAO,sBAAsB,CAAC;SAC/B;QACD,OAAO,OAAO,CAAC,CAAC,CAAC,8BAA8B,CAAC,CAAC,CAAC,sBAAsB,CAAC;IAC3E,CAAC,EACD,CAAC,SAAS,CAAC,CACZ,CAAC;IAEF,MAAM,iBAAiB,GAAG,WAAW,CACnC,CAAC,OAAgB,EAAU,EAAE,CAC3B,SAAS,IAAI,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,cAAc,EACrD,CAAC,SAAS,CAAC,CACZ,CAAC;IAEF,OAAO,CACL,CAAC,IAAI,CACH;MAAA,CAAC,SAAS,CACR,iBAAiB,CAAC,CAAC,iBAAiB,IAAI,QAAQ,CAAC,CACjD,kBAAkB,CAAC,CAAC,kBAAkB,CAAC,CACvC,QAAQ,CAAC,CAAC,UAAU,CAAC,CACrB,KAAK,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC;YACtB,EAAE,SAAS,EAAE,CAAC,EAAE,UAAU,EAAE,cAAc,EAAE,CAAC,EAAE;YAC/C,EAAE,CAAA,yBAAyB,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,gBAAgB,IAAI,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,aAAa,IAAI,WAAW,EAAE;YAClI,KAAK;SACN,CAAC,CACF,IAAI,KAAK,CAAC,CAEV;QAAA,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAChB,EACE;YAAA,CAAC,aAAa,CAAC,CAAC,CAAC,CACf,CAAC,IAAI,CACH,IAAI,CAAC,CAAC,aAAa,CAAC,CACpB,IAAI,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAClB,MAAM,CAAC,YAAY,CACnB,WAAW,CAAC,CAAC,GAAG,YAAY,CAAC,OAAO,CAAC,OAAO,CAAC,CAC7C,IAAI,cAAc,CAAC,EACnB,CACH,CAAC,CAAC,CAAC,CACF,cAAc,CACf,CAED;;YAAA,CAAC,IAAI,CACH,OAAO,CAAC,CAAC,+BAA+B,CAAC,IAAI,CAAC,CAAC,CAC/C,UAAU,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,CAC9B,IAAI,SAAS,CAAC,CACd,WAAW,CAAC,CAAC,IAAI,YAAY,CAAC,OAAO,CAAC,IAAI,iBAAiB,CAAC,OAAO,CAAC,IAAI,SAAS,EAAE,WAAW,IAAI,EAAE,GAAG,CAAC,CAExG;cAAA,CAAC,QAAQ,CACX;YAAA,EAAE,IAAI,CAEN;;YAAA,CAAC,WAAW,CAAC,CAAC,CAAC,CACb,CAAC,IAAI,CACH,IAAI,CAAC,CAAC,WAAW,CAAC,CAClB,IAAI,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAClB,MAAM,CAAC,UAAU,CACjB,WAAW,CAAC,CAAC,GAAG,YAAY,CAAC,OAAO,CAAC,OAAO,CAAC,CAC7C,IAAI,YAAY,CAAC,EACjB,CACH,CAAC,CAAC,CAAC,CACF,YAAY,CACb,CACH;UAAA,GAAG,CACJ,CACH;MAAA,EAAE,SAAS,CACb;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React, { useCallback } from 'react';\nimport { Pressable } from 'react-native';\n\nimport { TextButtonSize } from '../../types';\nimport { Icon, IconSize } from '../Icon';\nimport { Text, FontWeight } from '../Text';\n\nimport { MAP_TEXTBUTTON_SIZE_TEXTVARIANT } from './TextButton.constants';\nimport type { TextButtonProps } from './TextButton.types';\n\nexport const TextButton: React.FC<TextButtonProps> = ({\n  children,\n  size = TextButtonSize.BodyMd,\n  textProps,\n  startIconName,\n  startIconProps,\n  startAccessory,\n  endIconName,\n  endIconProps,\n  endAccessory,\n  isDisabled = false,\n  isInverse = false,\n  twClassName = '',\n  accessibilityRole,\n  accessibilityLabel,\n  style,\n  ...props\n}) => {\n  const tw = useTailwind();\n  /**\n   * Calculating the baselineOffset. This baselineOffset is needed to make sure\n   * the TextButton aligns perfectly when placed within Text elements\n   */\n  // eslint-disable-next-line tailwindcss/no-custom-classname\n  const { fontSize, lineHeight } = tw`text-${\n    MAP_TEXTBUTTON_SIZE_TEXTVARIANT[size] as string\n  }` as {\n    fontSize: number;\n    lineHeight: number;\n  };\n  const baselineOffset = (lineHeight - fontSize) / 2;\n\n  const getTextColor = useCallback(\n    (pressed: boolean): string => {\n      if (isInverse) {\n        return 'text-primary-inverse';\n      }\n      return pressed ? 'text-primary-default-pressed' : 'text-primary-default';\n    },\n    [isInverse],\n  );\n\n  const getTextDecoration = useCallback(\n    (pressed: boolean): string =>\n      isInverse || pressed ? 'underline' : 'no-underline',\n    [isInverse],\n  );\n\n  return (\n    <Text>\n      <Pressable\n        accessibilityRole={accessibilityRole ?? 'button'}\n        accessibilityLabel={accessibilityLabel}\n        disabled={isDisabled}\n        style={({ pressed }) => [\n          { transform: [{ translateY: baselineOffset }] },\n          tw`flex-row items-center ${pressed ? 'bg-pressed' : 'bg-transparent'} ${isDisabled ? 'opacity-50' : 'opacity-100'} ${twClassName}`,\n          style,\n        ]}\n        {...props}\n      >\n        {({ pressed }) => (\n          <>\n            {startIconName ? (\n              <Icon\n                name={startIconName}\n                size={IconSize.Sm}\n                testID=\"start-icon\"\n                twClassName={`${getTextColor(pressed)} mr-1`}\n                {...startIconProps}\n              />\n            ) : (\n              startAccessory\n            )}\n\n            <Text\n              variant={MAP_TEXTBUTTON_SIZE_TEXTVARIANT[size]}\n              fontWeight={FontWeight.Medium}\n              {...textProps}\n              twClassName={` ${getTextColor(pressed)} ${getTextDecoration(pressed)} ${textProps?.twClassName ?? ''} `}\n            >\n              {children}\n            </Text>\n\n            {endIconName ? (\n              <Icon\n                name={endIconName}\n                size={IconSize.Sm}\n                testID=\"end-icon\"\n                twClassName={`${getTextColor(pressed)} ml-1`}\n                {...endIconProps}\n              />\n            ) : (\n              endAccessory\n            )}\n          </>\n        )}\n      </Pressable>\n    </Text>\n  );\n};\n"]}