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

package/Button/index.tsx

@@ -5,6 +5,8 @@ import {
   TouchableOpacity,
   TouchableOpacityProps,
   View,
+  ViewStyle,
+  GestureResponderEvent,
 } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import { useComponentId } from '../Application';
@@ -22,7 +24,6 @@ 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 {
   /**
@@ -51,16 +52,6 @@ export interface ButtonProps extends TouchableOpacityProps {
   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',
@@ -76,21 +67,20 @@ const Button: FC<ButtonProps> = ({
 }) => {
   const { theme, config } = useContext(ApplicationContext);
   const skeleton = useContext(SkeletonContext);
-  const componentName = 'Button';
   const animationRef = useRef<LottieView>(null);
+  const pressAnim = useRef(new Animated.Value(0)).current;
 
+  const componentName = 'Button';
   const { componentId } = useComponentId(
     `${componentName}/${title}`,
     rest.accessibilityLabel,
   );
 
-  const { gradient, color } = config?.navigationBar?.buttonColors ?? {};
-  const isDisabled = type === 'disabled' || loading;
-
-  const pressAnim = useRef(new Animated.Value(0)).current;
-
-  const animateIn = () => {
-    if (isDisabled) return;
+  /**
+   * animate press in
+   */
+  const animateIn = (event: GestureResponderEvent) => {
+    rest?.onPressIn?.(event);
     Animated.timing(pressAnim, {
       toValue: 1,
       duration: 100,
@@ -98,7 +88,11 @@ const Button: FC<ButtonProps> = ({
     }).start();
   };
 
-  const animateOut = () => {
+  /**
+   * animate press out
+   */
+  const animateOut = (event: GestureResponderEvent) => {
+    rest?.onPressIn?.(event);
     Animated.timing(pressAnim, {
       toValue: 0,
       duration: 100,
@@ -106,22 +100,38 @@ const Button: FC<ButtonProps> = ({
     }).start();
   };
 
-  let gradientPros;
-  if (gradient?.length > 0 && type === 'primary') {
-    gradientPros = {
-      colors: gradient,
-      start: { x: 1, y: 0.5 },
-      end: { x: 0, y: 0.5 },
-    };
-  }
-
-  const loadingOnLeft = shouldLoadingOnLeft(iconLeft, iconRight);
+  /**
+   * determine loading position
+   * @param left
+   * @param right
+   * @param isLeft
+   */
+  const shouldShowLoading = (
+    left?: string,
+    right?: string,
+    isLeft?: boolean,
+  ): boolean => {
+    const hasLeft = !!left;
+    const hasRight = !!right;
+
+    const loadingOnLeft =
+      (!hasLeft && !hasRight) ||
+      (hasLeft && !hasRight);
+
+    return isLeft === loadingOnLeft;
+  };
 
+  /**
+   * export size style
+   */
   const getSizeStyle = () => {
     const styleSheet: { [key: string]: any } = styles;
     return styleSheet[size ?? 'small'];
   };
 
+  /**
+   * export type style
+   */
   const getTypeStyle = () => {
     switch (type) {
       case 'disabled':
@@ -203,6 +213,9 @@ const Button: FC<ButtonProps> = ({
     }
   };
 
+  /**
+   * export text color
+   */
   const getTextColor = (): string => {
     switch (type) {
       case 'disabled':
@@ -237,6 +250,10 @@ const Button: FC<ButtonProps> = ({
     );
   };
 
+  /**
+   * render icon
+   * @param position
+   */
   const renderIcon = (position: 'left' | 'right') => {
     const iconSize = getIconSize();
     const space = getIconSpace();
@@ -245,9 +262,6 @@ const Button: FC<ButtonProps> = ({
     const isLeft = position === 'left';
     const icon = isLeft ? iconLeft : iconRight;
 
-    const showLoading =
-      loading && ((isLeft && loadingOnLeft) || (!isLeft && !loadingOnLeft));
-
     const style = [
       isLeft ? styles.leading : styles.trailing,
       {
@@ -258,7 +272,9 @@ const Button: FC<ButtonProps> = ({
       },
     ];
 
-    if (showLoading) {
+    const showLoading = shouldShowLoading(iconLeft, iconRight, isLeft);
+
+    if (loading && showLoading) {
       return (
         <LottieView
           ref={animationRef}
@@ -286,28 +302,36 @@ const Button: FC<ButtonProps> = ({
     return null;
   };
 
+  const { gradient, color } = config?.navigationBar?.buttonColors ?? {};
+  const isDisabled = type === 'disabled' || loading;
+  let gradientPros;
+  if (gradient?.length > 0 && type === 'primary') {
+    gradientPros = {
+      colors: gradient,
+      start: { x: 1, y: 0.5 },
+      end: { x: 0, y: 0.5 },
+    };
+  }
+
   const sizeStyle = getSizeStyle();
   const typeStyle = getTypeStyle();
-
-  const containerStyle = StyleSheet.flatten([
+  const containerStyle: ViewStyle = StyleSheet.flatten([
     full && { width: '100%' },
     loading && { opacity: 0.75 },
   ]);
-
   const buttonStyle = StyleSheet.flatten([
     sizeStyle,
     typeStyle,
+    {
+      marginHorizontal: pressAnim.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0, 2],
+      }),
+    },
   ]);
 
-  const innerAnimatedStyle = {
-    marginHorizontal: pressAnim.interpolate({
-      inputRange: [0, 1],
-      outputRange: [0, 2],
-    }),
-  };
-
   if (skeleton?.loading) {
-    return <Skeleton style={[containerStyle, buttonStyle, {paddingHorizontal: 0}]} />;
+    return <Skeleton style={[buttonStyle, styles.skeleton]} />;
   }
 
   return (
@@ -317,8 +341,9 @@ const Button: FC<ButtonProps> = ({
         componentId,
         params,
         action: 'click',
-      }}>
-      <AnimatedTouchable
+      }}
+    >
+      <TouchableOpacity
         {...rest}
         accessibilityLabel={componentId}
         accessibilityRole="button"
@@ -328,18 +353,12 @@ const Button: FC<ButtonProps> = ({
           ...accessibilityState,
         }}
         disabled={isDisabled}
-        activeOpacity={0.5}
+        activeOpacity={0.75}
         style={containerStyle}
         onPressIn={animateIn}
         onPressOut={animateOut}
-        onPress={rest.onPress}
       >
-        <Animated.View
-          style={[
-            buttonStyle,
-            innerAnimatedStyle,
-          ]}
-        >
+        <Animated.View style={buttonStyle}>
           {renderIcon('left')}
           {renderTitle()}
           {renderIcon('right')}
@@ -348,7 +367,7 @@ const Button: FC<ButtonProps> = ({
           )}
           {gradientPros && <View style={styles.strokeView} />}
         </Animated.View>
-      </AnimatedTouchable>
+      </TouchableOpacity>
     </ComponentContext.Provider>
   );
 };

package/Button/styles.ts

@@ -1,4 +1,4 @@
-import {StyleSheet} from 'react-native';
+import { StyleSheet } from 'react-native';
 
 export default StyleSheet.create({
   large: {
@@ -57,4 +57,7 @@ export default StyleSheet.create({
     borderWidth: 0.5,
     borderColor: '#FFF9E1',
   },
+  skeleton: {
+    paddingHorizontal: 0,
+  },
 });

package/package.json

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