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

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

@@ -9,7 +9,7 @@ import {
   ComponentContext,
   MiniAppContext,
 } from '../Context';
-import { Colors } from '../Consts';
+import { Colors, Radius } from '../Consts';
 import { Icon } from '../Icon';
 import styles from './styles';
 
@@ -30,6 +30,11 @@ export interface IconButtonProps extends TouchableOpacityProps {
    */
   size?: 'large' | 'small';
 
+  /**
+   * Optional. Defines the shape of the IconButton. Defaults to 'circle'.
+   */
+  shape?: 'circle' | 'square' | 'rectangle';
+
   /**
    * Optional. Params auto tracking component.
    */
@@ -40,6 +45,7 @@ const IconButton: React.FC<IconButtonProps> = ({
   type = 'primary',
   icon,
   size,
+  shape = 'circle',
   params,
   ...rest
 }) => {
@@ -49,13 +55,25 @@ const IconButton: React.FC<IconButtonProps> = ({
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
   /**
-   * get size icon button
+   * get box size + border radius for icon button by size and shape.
+   * circle keeps the fully-rounded default; square/rectangle use Radius.S.
+   * rectangle is wider than tall.
    */
-  const getSizeStyle = () => {
-    if (size === 'small') {
-      return styles.small;
+  const getShapeStyle = () => {
+    const box = size === 'small' ? 40 : 48;
+    switch (shape) {
+      case 'square':
+        return { width: box, height: box, borderRadius: Radius.S };
+      case 'rectangle':
+        return {
+          width: size === 'small' ? 48 : 56,
+          height: box,
+          borderRadius: Radius.S,
+        };
+      case 'circle':
+      default:
+        return { width: box, height: box, borderRadius: Radius.XL };
     }
-    return styles.large;
   };
 
   /**
@@ -117,7 +135,11 @@ const IconButton: React.FC<IconButtonProps> = ({
   };
 
   const activeOpacity = type === 'disabled' ? 0.75 : 0.5;
-  const buttonStyle = StyleSheet.flatten([getTypeStyle(), getSizeStyle()]);
+  const buttonStyle = StyleSheet.flatten([
+    getTypeStyle(),
+    getShapeStyle(),
+    styles.base,
+  ]);
   const iconSize = size === 'small' ? 16 : 24;
 
   return (

package/IconButton/styles.ts

@@ -1,18 +1,8 @@
 import { StyleSheet } from 'react-native';
-import { Radius, Colors } from '../Consts';
+import { Colors } from '../Consts';
 
 export default StyleSheet.create({
-  large: {
-    width: 48,
-    height: 48,
-    borderRadius: Radius.XL,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  small: {
-    width: 40,
-    height: 40,
-    borderRadius: Radius.XL,
+  base: {
     justifyContent: 'center',
     alignItems: 'center',
   },

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.162.2-beta.17",
+    "version": "0.162.2-beta.18",
     "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"
-}
+}