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

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.16",
+    "version": "0.162.2-beta.18",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},