@momo-kits/foundation 0.152.1-beta.2 → 0.152.1-beta.4

package/Application/types.ts

@@ -138,7 +138,7 @@ export type Tool = {
 };
 
 export type FeaturesFlag = {
-  enableForceFoundationList?: boolean;
+  enableFoundationList?: boolean;
   enableBottomTabAnimation?: boolean;
   enableHapticBottomTab?: boolean;
   enableHapticDialog?: boolean;

package/Button/index.tsx

@@ -1,4 +1,4 @@
-import React, {FC, useContext} from 'react';
+import React, { FC, useContext, useRef } from 'react';
 import {
   Animated,
   StyleSheet,
@@ -17,11 +17,12 @@ import { Text } from '../Text';
 import { Typography } from '../Text/types';
 import { Colors, Spacing } from '../Consts';
 import styles from './styles';
-import {Icon} from '../Icon';
-import {Skeleton} from '../Skeleton';
+import { Icon } from '../Icon';
+import { Skeleton } from '../Skeleton';
 import LottieView from 'lottie-react-native';
 
 const AnimationLinear = Animated.createAnimatedComponent(LinearGradient);
+const AnimatedTouchable = Animated.createAnimatedComponent(TouchableOpacity);
 
 export interface ButtonProps extends TouchableOpacityProps {
   /**
@@ -40,48 +41,26 @@ export interface ButtonProps extends TouchableOpacityProps {
    *  Defines the size of the button.
    */
   size?: 'large' | 'medium' | 'small';
-
-  /**
-   * If true, the button will take the full width of its container.
-   */
   full?: boolean;
-
-  /**
-   *  Specifies the name of the icon that should be placed on the right side of the button.
-   */
   iconRight?: string;
-
-  /**
-   *  Specifies the name of the icon that should be placed on the left side of the button.
-   */
   iconLeft?: string;
-
-  /**
-   * Represents the text that will be displayed on the button.
-   */
   title: string;
-
-  /**
-   *  If true, the icon of button will use the tint color provided by its container.
-   */
   tintColor?: string;
-
-  /**
-   *  If true, the icon of button will use be show indicator loading.
-   */
   loading?: boolean;
-
-  /**
-   *  A callback function that is called when the button is pressed.
-   */
   onPress: () => void;
-
-  /**
-   * Optional. Params auto tracking component.
-   */
   params?: any;
 }
 
+const shouldLoadingOnLeft = (iconLeft?: string, iconRight?: string): boolean => {
+  const hasLeft = !!iconLeft;
+  const hasRight = !!iconRight;
+
+  if (!hasLeft && !hasRight) return true;
+  if (hasLeft && !hasRight) return true;
+  if (!hasLeft && hasRight) return false;
+  return false;
+};
+
 const Button: FC<ButtonProps> = ({
   type = 'primary',
   size = 'large',
@@ -104,10 +83,30 @@ const Button: FC<ButtonProps> = ({
     `${componentName}/${title}`,
     rest.accessibilityLabel,
   );
+
   const { gradient, color } = config?.navigationBar?.buttonColors ?? {};
-  let gradientPros;
   const isDisabled = type === 'disabled' || loading;
 
+  const pressAnim = useRef(new Animated.Value(0)).current;
+
+  const animateIn = () => {
+    if (isDisabled) return;
+    Animated.timing(pressAnim, {
+      toValue: 1,
+      duration: 100,
+      useNativeDriver: false,
+    }).start();
+  };
+
+  const animateOut = () => {
+    Animated.timing(pressAnim, {
+      toValue: 0,
+      duration: 100,
+      useNativeDriver: false,
+    }).start();
+  };
+
+  let gradientPros;
   if (gradient?.length > 0 && type === 'primary') {
     gradientPros = {
       colors: gradient,
@@ -116,6 +115,8 @@ const Button: FC<ButtonProps> = ({
     };
   }
 
+  const loadingOnLeft = shouldLoadingOnLeft(iconLeft, iconRight);
+
   const getSizeStyle = () => {
     const styleSheet: { [key: string]: any } = styles;
     return styleSheet[size ?? 'small'];
@@ -166,14 +167,13 @@ const Button: FC<ButtonProps> = ({
       case 'medium':
       case 'small':
         return 16;
-
       default:
         return 24;
     }
   };
 
   /**
-   * export icon size
+   * export icon space
    */
   const getIconSpace = () => {
     switch (size) {
@@ -182,7 +182,6 @@ const Button: FC<ButtonProps> = ({
         return 8;
       case 'small':
         return 4;
-
       default:
         return 8;
     }
@@ -199,7 +198,6 @@ const Button: FC<ButtonProps> = ({
         return 'action_s_bold';
       case 'small':
         return 'action_xs_bold';
-
       default:
         return 'action_default_bold';
     }
@@ -239,15 +237,28 @@ const Button: FC<ButtonProps> = ({
     );
   };
 
-  /**
-   * render leading
-   */
-  const renderLeading = () => {
+  const renderIcon = (position: 'left' | 'right') => {
     const iconSize = getIconSize();
-    const marginRight = getIconSpace();
+    const space = getIconSpace();
     const textColor = tintColor ?? getTextColor();
 
-    if (loading) {
+    const isLeft = position === 'left';
+    const icon = isLeft ? iconLeft : iconRight;
+
+    const showLoading =
+      loading && ((isLeft && loadingOnLeft) || (!isLeft && !loadingOnLeft));
+
+    const style = [
+      isLeft ? styles.leading : styles.trailing,
+      {
+        width: iconSize,
+        height: iconSize,
+        marginRight: isLeft ? space : 0,
+        marginLeft: isLeft ? 0 : space,
+      },
+    ];
+
+    if (showLoading) {
       return (
         <LottieView
           ref={animationRef}
@@ -259,63 +270,44 @@ const Button: FC<ButtonProps> = ({
             { keypath: 'loading 3.Ellipse 1.Stroke 1', color: textColor },
             { keypath: 'base pink 2.Ellipse 1.Stroke 1', color: textColor },
           ]}
-          style={[
-            styles.trailing,
-            {
-              width: iconSize,
-              height: iconSize,
-              marginRight,
-              borderRadius: Spacing.M,
-            },
-          ]}
+          style={[style, { borderRadius: Spacing.M }]}
         />
       );
     }
-    if (iconLeft) {
+
+    if (icon) {
       return (
-        <View
-          style={[
-            styles.leading,
-            { width: iconSize, height: iconSize, marginRight },
-          ]}
-        >
-          <Icon color={textColor} source={iconLeft} size={iconSize} />
+        <View style={style}>
+          <Icon color={textColor} source={icon} size={iconSize} />
         </View>
       );
     }
+
+    return null;
   };
 
-  /**
-   * render trailing
-   */
-  const renderTrailing = () => {
-    const textColor = tintColor ?? getTextColor();
-    const marginLeft = getIconSpace();
+  const sizeStyle = getSizeStyle();
+  const typeStyle = getTypeStyle();
 
-    if (iconRight) {
-      const iconSize = getIconSize();
-      return (
-        <View
-          style={[
-            styles.trailing,
-            { width: iconSize, height: iconSize, marginLeft },
-          ]}
-        >
-          <Icon color={textColor} source={iconRight} size={iconSize} />
-        </View>
-      );
-    }
-  };
+  const containerStyle = StyleSheet.flatten([
+    full && { width: '100%' },
+    loading && { opacity: 0.75 },
+  ]);
 
   const buttonStyle = StyleSheet.flatten([
-    getSizeStyle(),
-    getTypeStyle(),
-    full && {width: '100%'},
-    loading && {opacity: 0.75}
+    sizeStyle,
+    typeStyle,
   ]);
 
+  const innerAnimatedStyle = {
+    marginHorizontal: pressAnim.interpolate({
+      inputRange: [0, 1],
+      outputRange: [0, 2],
+    }),
+  };
+
   if (skeleton?.loading) {
-    return <Skeleton style={[buttonStyle, { paddingHorizontal: 0 }]} />;
+    return <Skeleton style={[containerStyle, buttonStyle, {paddingHorizontal: 0}]} />;
   }
 
   return (
@@ -325,9 +317,8 @@ const Button: FC<ButtonProps> = ({
         componentId,
         params,
         action: 'click',
-      }}
-    >
-      <TouchableOpacity
+      }}>
+      <AnimatedTouchable
         {...rest}
         accessibilityLabel={componentId}
         accessibilityRole="button"
@@ -338,16 +329,26 @@ const Button: FC<ButtonProps> = ({
         }}
         disabled={isDisabled}
         activeOpacity={0.5}
-        style={buttonStyle}
+        style={containerStyle}
+        onPressIn={animateIn}
+        onPressOut={animateOut}
+        onPress={rest.onPress}
       >
-        {renderLeading()}
-        {renderTitle()}
-        {renderTrailing()}
-        {gradientPros && (
-          <AnimationLinear {...gradientPros} style={styles.gradientView} />
-        )}
-        {gradientPros && <View style={styles.strokeView} />}
-      </TouchableOpacity>
+        <Animated.View
+          style={[
+            buttonStyle,
+            innerAnimatedStyle,
+          ]}
+        >
+          {renderIcon('left')}
+          {renderTitle()}
+          {renderIcon('right')}
+          {gradientPros && (
+            <AnimationLinear {...gradientPros} style={styles.gradientView} />
+          )}
+          {gradientPros && <View style={styles.strokeView} />}
+        </Animated.View>
+      </AnimatedTouchable>
     </ComponentContext.Provider>
   );
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.152.1-beta.2",
+    "version": "0.152.1-beta.4",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},