CP-9963 - [Component] AnimatedPressable (#2324)

Author: bogdandobritoiu

packages/k2-alpine/src/components/Animated/Animated.stories.tsx

@@ -1,17 +1,24 @@
 import React, { useEffect, useState } from 'react'
-import { ScrollView, Text } from '../Primitives'
+import { useTheme } from '../../hooks'
+import { alpha } from '../../utils'
+import { showAlert } from '../Alert/Alert'
+import { ScrollView, Text, View } from '../Primitives'
+import { AnimatedPressable } from './AnimatedPressable'
 import { AnimatedText } from './AnimatedText'
 
 export default {
   title: 'Animated'
 }
 
 export const All = (): JSX.Element => {
+  const {
+    theme: { colors }
+  } = useTheme()
   const [characters, setCharacters] = useState(107.25)
 
   useEffect(() => {
     const interval = setInterval(() => {
-      setCharacters(prev => parseFloat((prev + 0.22).toFixed(2)))
+      setCharacters(prev => parseFloat((prev + 0.23).toFixed(2)))
     }, 2000)
     return () => {
       clearInterval(interval)
@@ -24,8 +31,40 @@ export const All = (): JSX.Element => {
         width: '100%'
       }}
       contentContainerStyle={{ padding: 16, gap: 16, alignItems: 'center' }}>
-      <Text variant="heading6">Animated Text</Text>
-      <AnimatedText characters={`$${characters}`} />
+      <View
+        style={{
+          gap: 16
+        }}>
+        <Text variant="heading6">Animated Text</Text>
+        <AnimatedText characters={`$${characters}`} />
+      </View>
+      <View
+        style={{
+          gap: 16,
+          alignItems: 'center'
+        }}>
+        <Text variant="heading6">Animated Pressable</Text>
+        <AnimatedPressable
+          onPress={() =>
+            showAlert({
+              title: 'Pressed',
+              buttons: [
+                {
+                  text: 'OK'
+                }
+              ]
+            })
+          }>
+          <View
+            sx={{
+              width: 100,
+              height: 100,
+              backgroundColor: alpha(colors.$textPrimary, 0.1),
+              borderRadius: 18
+            }}
+          />
+        </AnimatedPressable>
+      </View>
     </ScrollView>
   )
 }

packages/k2-alpine/src/components/Animated/AnimatedPressable.tsx

@@ -0,0 +1,71 @@
+import React, { memo, useCallback } from 'react'
+import { GestureResponderEvent, PressableProps } from 'react-native'
+import { Pressable } from 'dripsy'
+import Animated, {
+  runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+  withTiming
+} from 'react-native-reanimated'
+import { throttle } from 'lodash'
+import { ANIMATED } from '../../utils'
+
+interface AnimatedPressable extends PressableProps {
+  children: JSX.Element
+}
+
+const AnimatedPress = Animated.createAnimatedComponent(Pressable)
+
+export const AnimatedPressable = memo(
+  ({ children, onPress, ...props }: AnimatedPressable) => {
+    const opacity = useSharedValue(1)
+    const scale = useSharedValue(1)
+
+    const onPressIn = (): void => {
+      'worklet'
+      opacity.value = withTiming(0.5, ANIMATED.TIMING_CONFIG)
+      scale.value = withSpring(ANIMATED.SCALE, ANIMATED.SPRING_CONFIG)
+    }
+
+    const onPressOut = (event: GestureResponderEvent): void => {
+      'worklet'
+      opacity.value = withTiming(1, ANIMATED.TIMING_CONFIG)
+      scale.value = withSpring(1, ANIMATED.SPRING_CONFIG, () => {
+        if (onPress) {
+          runOnJS(onPressEvent)(event)
+        }
+      })
+    }
+
+    const onPressEvent = useCallback(
+      (event: GestureResponderEvent) => {
+        throttle(
+          () => {
+            onPress?.(event)
+          },
+          1000,
+          { leading: true, trailing: false }
+        )
+      },
+      [onPress]
+    )
+
+    const animatedStyle = useAnimatedStyle(() => {
+      return {
+        opacity: opacity.value,
+        transform: [{ scale: scale.value }]
+      }
+    })
+
+    return (
+      <AnimatedPress
+        onPressIn={onPressIn}
+        onPressOut={onPressOut}
+        {...props}
+        style={[props.style, animatedStyle]}>
+        {children}
+      </AnimatedPress>
+    )
+  }
+)

packages/k2-alpine/src/components/Animated/AnimatedText.tsx

@@ -1,9 +1,8 @@
-import React, { useEffect } from 'react'
+import React, { memo, useCallback, useEffect } from 'react'
 
 import { SxProp } from 'dripsy'
 import { LayoutChangeEvent } from 'react-native'
 import Animated, {
-  Easing,
   FadeIn,
   FadeOut,
   LinearTransition,
@@ -14,6 +13,7 @@ import Animated, {
   withTiming
 } from 'react-native-reanimated'
 import { TextVariant } from '../../theme/tokens/text'
+import { ANIMATED } from '../../utils'
 import { Text } from '../Primitives'
 
 export const AnimatedText = ({
@@ -26,7 +26,7 @@ export const AnimatedText = ({
   variant?: TextVariant
   sx?: SxProp
   onLayout?: (event: LayoutChangeEvent) => void
-}) => {
+}): JSX.Element => {
   return (
     <Animated.View
       layout={LinearTransition.springify()}
@@ -51,51 +51,38 @@ export const AnimatedText = ({
   )
 }
 
-export const AnimateFadeScale = ({
-  children,
-  delay = 0
-}: {
-  children: JSX.Element
-  delay?: number
-}) => {
-  const opacity = useSharedValue(0)
-  const scale = useSharedValue(0.8)
+export const AnimateFadeScale = memo(
+  ({ children, delay = 0 }: { children: JSX.Element; delay?: number }) => {
+    const opacity = useSharedValue(0)
+    const scale = useSharedValue(0.8)
 
-  useEffect(() => {
-    animate()
-  }, [])
+    const animate = useCallback(() => {
+      'worklet'
+      opacity.value = withDelay(delay, withTiming(1, ANIMATED.TIMING_CONFIG))
+      scale.value = withDelay(delay, withSpring(1, ANIMATED.SPRING_CONFIG))
+    }, [delay, opacity, scale])
 
-  const animate = () => {
-    'worklet'
-    opacity.value = withDelay(
-      delay,
-      withTiming(1, {
-        duration: 500,
-        easing: Easing.bezier(0.25, 1, 0.5, 1)
-      })
-    )
-    scale.value = withDelay(
-      delay,
-      withSpring(1, { damping: 10, stiffness: 200, mass: 0.5 })
-    )
-  }
+    useEffect(() => {
+      animate()
+    }, [animate])
 
-  const animatedStyle = useAnimatedStyle(() => {
-    return {
-      opacity: opacity.value,
-      transform: [{ scale: scale.value }]
-    }
-  }, [])
+    const animatedStyle = useAnimatedStyle(() => {
+      return {
+        opacity: opacity.value,
+        transform: [{ scale: scale.value }]
+      }
+    }, [])
 
-  return (
-    <Animated.View
-      entering={FadeIn}
-      exiting={FadeOut}
-      style={[
-        animatedStyle,
-        { justifyContent: 'flex-start', alignItems: 'flex-start' }
-      ]}>
-      {children}
-    </Animated.View>
-  )
-}
+    return (
+      <Animated.View
+        entering={FadeIn}
+        exiting={FadeOut}
+        style={[
+          animatedStyle,
+          { justifyContent: 'flex-start', alignItems: 'flex-start' }
+        ]}>
+        {children}
+      </Animated.View>
+    )
+  }
+)

packages/k2-alpine/src/components/Tooltip/Tooltip.tsx

@@ -26,10 +26,10 @@ export const Tooltip = ({
     bottom: 13,
     left: 13
   }
-}: TooltipProps) => {
+}: TooltipProps): JSX.Element => {
   const { theme } = useTheme()
 
-  const onPress = () => {
+  const onPress = (): void => {
     showAlert({
       title,
       description,

packages/k2-alpine/src/components/index.ts

@@ -22,3 +22,4 @@ export * from './Header/NavigationTitleHeader'
 export * from './Dropdown/usePopoverAnchor'
 export * from './Toggle/Toggle'
 export * from './Animated/AnimatedText'
+export * from './Animated/AnimatedPressable'

packages/k2-alpine/src/utils/animations.ts

@@ -0,0 +1,23 @@
+import { Easing } from 'react-native-reanimated'
+
+export const SCALE = 0.96
+export const EASING = Easing.bezier(0.25, 1, 0.5, 1) // EaseOutQuart
+export const DURATION = 500
+
+export const SPRING_CONFIG = {
+  damping: 10,
+  stiffness: 200,
+  mass: 0.5
+}
+export const TIMING_CONFIG = {
+  duration: DURATION,
+  easing: EASING
+}
+
+export const ANIMATED = {
+  DURATION,
+  EASING,
+  SPRING_CONFIG,
+  TIMING_CONFIG,
+  SCALE
+}

packages/k2-alpine/src/utils/index.ts

@@ -1,2 +1,3 @@
 export * from './colors'
 export * from './screens'
+export * from './animations'