@momo-kits/foundation 0.162.2-beta.17 → 0.162.2-beta.19

package/Button/index.tsx

@@ -49,12 +49,6 @@ export interface ButtonProps extends TouchableOpacityProps {
   iconRight?: string;
   iconLeft?: string;
   title: string;
-  /**
-   * When true, hides the label and renders only the centered icon.
-   * `title` stays required and is used as the accessibility label.
-   * Icon-only buttons hug their icon, so the `full` prop is ignored.
-   */
-  iconOnly?: boolean;
   tintColor?: string;
   loading?: boolean;
   onPress: () => void;
@@ -68,7 +62,6 @@ const Button: FC<ButtonProps> = ({
   full = true,
   iconRight,
   iconLeft,
-  iconOnly = false,
   loading = false,
   title = 'Button',
   params,
@@ -270,8 +263,8 @@ const Button: FC<ButtonProps> = ({
       {
         width: iconSize,
         height: iconSize,
-        marginRight: !iconOnly && isLeft ? space : 0,
-        marginLeft: !iconOnly && !isLeft ? space : 0,
+        marginRight: isLeft ? space : 0,
+        marginLeft: isLeft ? 0 : space,
       },
     ];
 
@@ -319,14 +312,10 @@ const Button: FC<ButtonProps> = ({
   const sizeStyle = getSizeStyle();
   const typeStyle = getTypeStyle();
   const containerStyle: ViewStyle = StyleSheet.flatten([
-    full && !iconOnly && { width: '100%' },
+    full && { width: '100%' },
     loading && { opacity: 0.75 },
   ]);
-  const buttonStyle = StyleSheet.flatten([
-    sizeStyle,
-    typeStyle,
-    iconOnly && styles.iconOnly,
-  ]);
+  const buttonStyle = StyleSheet.flatten([sizeStyle, typeStyle]);
 
   const animatedStyle = useAnimatedStyle(() => {
     return {
@@ -363,8 +352,8 @@ const Button: FC<ButtonProps> = ({
         onPressOut={animateOut}
       >
         <Reanimated.View style={[buttonStyle, animatedStyle]}>
-          {renderIcon('left')}
-          {!iconOnly && renderTitle()}
+        {renderIcon('left')}
+          {renderTitle()}
           {renderIcon('right')}
           {gradientPros && (
             <LinearGradient {...gradientPros} style={styles.gradientView} />

package/Button/styles.ts

@@ -29,9 +29,6 @@ export default StyleSheet.create({
     paddingHorizontal: 8,
     minWidth: 60,
   },
-  iconOnly: {
-    minWidth: 0,
-  },
   leading: {
     overflow: 'hidden',
     alignItems: 'center',

package/IconButton/index.tsx

@@ -28,7 +28,12 @@ export interface IconButtonProps extends TouchableOpacityProps {
   /**
    * Optional. Defines the size of the IconButton.
    */
-  size?: 'large' | 'small';
+  size?: 'large' | 'medium' | 'small';
+
+  /**
+   * Optional. Defines the shape of the IconButton.
+   */
+  shape?: 'circle' | 'square';
 
   /**
    * Optional. Params auto tracking component.
@@ -40,6 +45,7 @@ const IconButton: React.FC<IconButtonProps> = ({
   type = 'primary',
   icon,
   size,
+  shape = 'circle',
   params,
   ...rest
 }) => {
@@ -52,10 +58,21 @@ const IconButton: React.FC<IconButtonProps> = ({
    * get size icon button
    */
   const getSizeStyle = () => {
-    if (size === 'small') {
-      return styles.small;
+    switch (size) {
+      case 'small':
+        return styles.small;
+      case 'medium':
+        return styles.medium;
+      default:
+        return styles.large;
     }
-    return styles.large;
+  };
+
+  /**
+   * get shape icon button
+   */
+  const getShapeStyle = () => {
+    return shape === 'square' ? styles.square : styles.circle;
   };
 
   /**
@@ -117,8 +134,13 @@ const IconButton: React.FC<IconButtonProps> = ({
   };
 
   const activeOpacity = type === 'disabled' ? 0.75 : 0.5;
-  const buttonStyle = StyleSheet.flatten([getTypeStyle(), getSizeStyle()]);
-  const iconSize = size === 'small' ? 16 : 24;
+  const buttonStyle = StyleSheet.flatten([
+    getTypeStyle(),
+    styles.base,
+    getSizeStyle(),
+    getShapeStyle(),
+  ]);
+  const iconSize = size === 'small' || size === 'medium' ? 16 : 24;
 
   return (
     <ComponentContext.Provider

package/IconButton/styles.ts

@@ -2,19 +2,27 @@ import { StyleSheet } from 'react-native';
 import { Radius, Colors } from '../Consts';
 
 export default StyleSheet.create({
+  base: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
   large: {
     width: 48,
     height: 48,
-    borderRadius: Radius.XL,
-    justifyContent: 'center',
-    alignItems: 'center',
+  },
+  medium: {
+    width: 36,
+    height: 36,
   },
   small: {
-    width: 40,
-    height: 40,
+    width: 28,
+    height: 28,
+  },
+  circle: {
     borderRadius: Radius.XL,
-    justifyContent: 'center',
-    alignItems: 'center',
+  },
+  square: {
+    borderRadius: Radius.S,
   },
   debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.162.2-beta.17",
+    "version": "0.162.2-beta.19",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},
@@ -8,19 +8,19 @@
         "@momo-kits/foundation"
     ],
     "dependencies": {
+        "react-native-fast-image": "git+https://oauth2:TGi6oBj-LdzsKpLXQSoH@gitlab.mservice.com.vn/momo-platform/public/react-native-fast-image.git#v8.11.0",
         "@react-navigation/bottom-tabs": "7.4.2",
         "@react-navigation/core": "7.12.1",
         "@react-navigation/elements": "2.5.2",
         "@react-navigation/native": "7.1.14",
         "@react-navigation/routers": "7.4.1",
         "@react-navigation/stack": "7.4.2",
-        "@shopify/flash-list": "2.1.0",
-        "lottie-react-native": "7.2.4",
-        "react-native-fast-image": "git+https://oauth2:TGi6oBj-LdzsKpLXQSoH@gitlab.mservice.com.vn/momo-platform/public/react-native-fast-image.git#v8.11.0",
         "react-native-gesture-handler": "2.27.1",
         "react-native-linear-gradient": "git+https://oauth2:TGi6oBj-LdzsKpLXQSoH@gitlab.mservice.com.vn/momo-platform/public/react-native-linear-gradient#v3.0.0",
         "react-native-reanimated": "4.2.2",
-        "react-native-safe-area-context": "5.5.2"
+        "react-native-safe-area-context": "5.5.2",
+        "@shopify/flash-list": "2.1.0",
+        "lottie-react-native": "7.2.4"
     },
     "peerDependencies": {
         "react-native": "*"
@@ -32,4 +32,4 @@
         "registry": "https://registry.npmjs.org/"
     },
     "license": "MoMo"
-}
+}