UNPKG

@metamask/design-system-react-native

Version:
1 lines 2.79 kB
{"version":3,"file":"ButtonAnimated.mjs","sourceRoot":"","sources":["../../../../src/components/temp-components/ButtonAnimated/ButtonAnimated.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,MAAK,cAAc;;AAE1B,OAAO,EAAE,SAAS,EAAE,8BAAqB;AACzC,OAAO,QAAQ,EAAE,EACf,cAAc,EACd,gBAAgB,EAChB,UAAU,EACV,MAAM,EACP,gCAAgC;AAIjC,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,SAAS,EACT,UAAU,EACV,QAAQ,EACR,GAAG,KAAK,EACY,EAAE,EAAE;IACxB,MAAM,SAAS,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC;IACpC,MAAM,UAAU,GAAG,gBAAgB,CAAC,GAAG,EAAE;QACvC,OAAO;YACL,SAAS,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,CAAC,KAAK,EAAE,CAAC;SACxC,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,MAAM,gBAAgB,GAAG,CAAC,KAA4B,EAAE,EAAE;QACxD,SAAS,CAAC,KAAK,GAAG,UAAU,CAAC,IAAI,EAAE;YACjC,QAAQ,EAAE,GAAG;YACb,MAAM,EAAE,MAAM,CAAC,MAAM,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;SACxC,CAAC,CAAC;QACH,SAAS,EAAE,CAAC,KAAK,CAAC,CAAC;IACrB,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,CAAC,KAA4B,EAAE,EAAE;QACzD,SAAS,CAAC,KAAK,GAAG,UAAU,CAAC,CAAC,EAAE;YAC9B,QAAQ,EAAE,GAAG;YACb,MAAM,EAAE,MAAM,CAAC,MAAM,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;SACxC,CAAC,CAAC;QACH,UAAU,EAAE,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,QAAQ,CAAC,IAAI,CACZ,KAAK,CAAC,CAAC,CAAC,UAAU,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,cAAc,EAAE,QAAQ,EAAE,CAAC,CAAC,CAExE;MAAA,CAAC,SAAS,CACR,SAAS,CAAC,CAAC,gBAAgB,CAAC,CAC5B,UAAU,CAAC,CAAC,iBAAiB,CAAC,CAC9B,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,IAAI,KAAK,CAAC,EAEd;IAAA,EAAE,QAAQ,CAAC,IAAI,CAAC,CACjB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport type { GestureResponderEvent } from 'react-native';\nimport { Pressable } from 'react-native';\nimport Animated, {\n useSharedValue,\n useAnimatedStyle,\n withTiming,\n Easing,\n} from 'react-native-reanimated';\n\nimport type { ButtonAnimatedProps } from './ButtonAnimated.types';\n\nexport const ButtonAnimated = ({\n onPressIn,\n onPressOut,\n disabled,\n ...props\n}: ButtonAnimatedProps) => {\n const animation = useSharedValue(1);\n const scaleStyle = useAnimatedStyle(() => {\n return {\n transform: [{ scale: animation.value }],\n };\n });\n\n const onPressInHandler = (event: GestureResponderEvent) => {\n animation.value = withTiming(0.97, {\n duration: 100,\n easing: Easing.bezier(0.3, 0.8, 0.3, 1),\n });\n onPressIn?.(event);\n };\n\n const onPressOutHandler = (event: GestureResponderEvent) => {\n animation.value = withTiming(1, {\n duration: 100,\n easing: Easing.bezier(0.3, 0.8, 0.3, 1),\n });\n onPressOut?.(event);\n };\n\n return (\n <Animated.View\n style={[scaleStyle, { alignItems: 'center', justifyContent: 'center' }]}\n >\n <Pressable\n onPressIn={onPressInHandler}\n onPressOut={onPressOutHandler}\n disabled={disabled}\n {...props}\n />\n </Animated.View>\n );\n};\n"]}