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

package/IconButton/index.tsx

@@ -9,7 +9,7 @@ import {
   ComponentContext,
   MiniAppContext,
 } from '../Context';
-import { Colors, Radius } from '../Consts';
+import { Colors } from '../Consts';
 import { Icon } from '../Icon';
 import styles from './styles';
 
@@ -28,12 +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. Defaults to 'circle'.
+   * Optional. Defines the shape of the IconButton.
    */
-  shape?: 'circle' | 'square' | 'rectangle';
+  shape?: 'circle' | 'square';
 
   /**
    * Optional. Params auto tracking component.
@@ -55,27 +55,26 @@ const IconButton: React.FC<IconButtonProps> = ({
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
   /**
-   * 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.
+   * get size icon button
    */
-  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':
+  const getSizeStyle = () => {
+    switch (size) {
+      case 'small':
+        return styles.small;
+      case 'medium':
+        return styles.medium;
       default:
-        return { width: box, height: box, borderRadius: Radius.XL };
+        return styles.large;
     }
   };
 
+  /**
+   * get shape icon button
+   */
+  const getShapeStyle = () => {
+    return shape === 'square' ? styles.square : styles.circle;
+  };
+
   /**
    * get style for icon button by type
    */
@@ -137,10 +136,11 @@ const IconButton: React.FC<IconButtonProps> = ({
   const activeOpacity = type === 'disabled' ? 0.75 : 0.5;
   const buttonStyle = StyleSheet.flatten([
     getTypeStyle(),
-    getShapeStyle(),
     styles.base,
+    getSizeStyle(),
+    getShapeStyle(),
   ]);
-  const iconSize = size === 'small' ? 16 : 24;
+  const iconSize = size === 'small' || size === 'medium' ? 16 : 24;
 
   return (
     <ComponentContext.Provider

package/IconButton/styles.ts

@@ -1,10 +1,28 @@
 import { StyleSheet } from 'react-native';
-import { Colors } from '../Consts';
+import { Radius, Colors } from '../Consts';
 
 export default StyleSheet.create({
   base: {
     justifyContent: 'center',
     alignItems: 'center',
   },
+  large: {
+    width: 48,
+    height: 48,
+  },
+  medium: {
+    width: 36,
+    height: 36,
+  },
+  small: {
+    width: 28,
+    height: 28,
+  },
+  circle: {
+    borderRadius: Radius.XL,
+  },
+  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.18",
+    "version": "0.162.2-beta.19",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},