@cleartrip/ct-design-button 5.19.0 → 5.21.0-SNAPSHOT-native-main.1

package/dist/Button.native.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.native.d.ts","sourceRoot":"","sources":["../packages/components/Button/src/Button.native.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAa,IAAI,EAAE,MAAM,cAAc,CAAC;AAwC/C,QAAA,MAAM,MAAM;;;;;;;;;;;;YAAZ,CAAA;iBAKa,CAAC;kBAKP,CAAC;2BAKO,CAAC;2BAMV,CAAD;;;+BA0DJ,CAAC;AAIF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Button.native.d.ts","sourceRoot":"","sources":["../packages/components/Button/src/Button.native.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAEhE,OAAO,EAAa,IAAI,EAAE,MAAM,cAAc,CAAC;AA+C/C,QAAA,MAAM,MAAM;;;;;;;;;;;;YAdM,CAAC;iBAIf,CAAJ;kBAMc,CAAC;2BAEoE,CAAC;2BAO3E,CAAC;;;+BAiGT,CAAC;AAIF,eAAe,MAAM,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cleartrip/ct-design-button",
-  "version": "5.19.0",
+  "version": "5.21.0-SNAPSHOT-native-main.1",
   "description": "",
   "types": "dist/index.d.ts",
   "react-native": "src/index.ts",
@@ -26,21 +26,31 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
-    "@cleartrip/ct-design-typography": "5.18.0",
-    "@cleartrip/ct-design-conditional-wrap": "5.19.0",
-    "@cleartrip/ct-design-types": "5.18.0",
-    "@cleartrip/ct-design-dotted-loader": "5.19.0",
-    "@cleartrip/ct-design-theme": "5.18.0",
-    "@cleartrip/ct-design-style-manager": "5.18.0",
-    "@cleartrip/ct-design-event-propagation": "5.19.0",
-    "@cleartrip/ct-design-container": "5.19.0"
+    "@cleartrip/ct-design-typography": "5.21.0-SNAPSHOT-native-main.1",
+    "@cleartrip/ct-design-container": "5.21.0-SNAPSHOT-native-main.1",
+    "@cleartrip/ct-design-conditional-wrap": "5.21.0-SNAPSHOT-native-main.1",
+    "@cleartrip/ct-design-dotted-loader": "5.21.0-SNAPSHOT-native-main.1",
+    "@cleartrip/ct-design-theme": "5.21.0-SNAPSHOT-native-main.1",
+    "@cleartrip/ct-design-types": "5.21.0-SNAPSHOT-native-main.1",
+    "@cleartrip/ct-design-style-manager": "5.21.0-SNAPSHOT-native-main.1",
+    "@cleartrip/ct-design-event-propagation": "5.21.0-SNAPSHOT-native-main.1"
   },
   "devDependencies": {
     "@emotion/babel-plugin": "^11.12.0"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
-    "react-dom": ">=16.8.0"
+    "react-dom": ">=16.8.0",
+    "react-native": ">=0.68.0",
+    "react-native-reanimated": ">=3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react-native": {
+      "optional": true
+    },
+    "react-native-reanimated": {
+      "optional": true
+    }
   },
   "publishConfig": {
     "access": "public"

package/src/Button.native.tsx

@@ -1,6 +1,7 @@
-import React, { forwardRef, useMemo } from 'react';
+import React, { forwardRef, useCallback, useMemo } from 'react';
 
 import { Pressable, View } from 'react-native';
+import Animated, { useAnimatedStyle, useSharedValue, withTiming, Easing } from 'react-native-reanimated';
 import { useStyles } from '@cleartrip/ct-design-style-manager';
 import { useTheme } from '@cleartrip/ct-design-theme';
 import { makeStyles } from '@cleartrip/ct-design-style-manager';
@@ -40,6 +41,12 @@ const staticButtonStyles = makeStyles((theme) => {
   };
 });
 
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+const PRESS_IN_SCALE = 0.96;
+const PRESS_ANIMATION_DURATION = 120;
+const pressAnimationConfig = { duration: PRESS_ANIMATION_DURATION, easing: Easing.out(Easing.quad) };
+
 const Button = forwardRef(
   (
     {
@@ -86,12 +93,35 @@ const Button = forwardRef(
 
     const mergedEvents = useMergeEvents({ onClick: [onClick] });
 
+    const pressProgress = useSharedValue(0);
+
+    const animatedPressStyle = useAnimatedStyle(() => {
+      const scale = 1 + pressProgress.value * (PRESS_IN_SCALE - 1);
+      return {
+        transform: [{ scale }],
+      };
+    });
+
+    const handlePressIn = useCallback(() => {
+      pressProgress.value = withTiming(1, pressAnimationConfig, (finished) => {
+        if (finished) {
+          pressProgress.value = withTiming(0, pressAnimationConfig);
+        }
+      });
+    }, [pressProgress]);
+
     return (
       <Conditional
         condition={!!onClick}
         wrap={(children) => <EventCollectorProvider value={mergedEvents}>{children}</EventCollectorProvider>}
       >
-        <Pressable ref={ref} disabled={disabled || loading} style={mergedRootStyles} onPress={onClick}>
+        <AnimatedPressable
+          ref={ref}
+          disabled={disabled || loading}
+          style={[mergedRootStyles, animatedPressStyle]}
+          onPress={onClick}
+          onPressIn={handlePressIn}
+        >
           {loading ? (
             <DottedLoader />
           ) : (
@@ -115,7 +145,7 @@ const Button = forwardRef(
               )}
             </>
           )}
-        </Pressable>
+        </AnimatedPressable>
       </Conditional>
     );
   },