@momo-kits/collapse 0.81.7 → 0.81.8

package/index.tsx

@@ -6,15 +6,17 @@ import {
   TouchableOpacity,
   UIManager,
   View,
+  Text as RNText,
 } from 'react-native';
 import {
   ApplicationContext,
   Icon,
   Image,
+  scaleSize,
   Tag,
   Text,
 } from '@momo-kits/foundation';
-import {CollapseProps, CollapseImageSize} from './types';
+import {CollapseImageSize, CollapseProps} from './types';
 import styles from './styles';
 
 if (Platform.OS === 'android') {
@@ -35,6 +37,8 @@ const Collapse: FC<CollapseProps> = ({
   tagProps,
   scrollEnabled = false,
   scrollContentMaxHeight = 240,
+  titleSize = 'medium',
+  useBackgroundCollapseButton = false,
 }) => {
   const {theme} = useContext(ApplicationContext);
   const [expanded, setExpanded] = useState(false);
@@ -45,6 +49,35 @@ const Collapse: FC<CollapseProps> = ({
   const radiusStyle = {borderBottomLeftRadius: 0, borderBottomRightRadius: 0};
   const borderWidth = showBorder ? 1 : 0;
 
+  const getTitleTypo = () => {
+    switch (titleSize) {
+      case 'small': {
+        return {
+          fontSize: scaleSize(14),
+          lineHeight: scaleSize(20),
+        };
+      }
+      case 'medium': {
+        return {
+          fontSize: scaleSize(16),
+          lineHeight: scaleSize(22),
+        };
+      }
+      case 'large': {
+        return {
+          fontSize: scaleSize(18),
+          lineHeight: scaleSize(26),
+        };
+      }
+      default: {
+        return {
+          fontSize: scaleSize(14),
+          lineHeight: scaleSize(20),
+        };
+      }
+    }
+  };
+
   const renderInfo = () => {
     if (subTitle) {
       return (
@@ -75,6 +108,23 @@ const Collapse: FC<CollapseProps> = ({
     setExpanded(!expanded);
   };
 
+  const renderCollapseIcon = () => {
+    if (useBackgroundCollapseButton) {
+      return (
+        <View
+          style={[
+            styles.iconWrapper,
+            {
+              backgroundColor: theme.colors.background.tonal,
+            },
+          ]}>
+          <Icon color={theme.colors.primary} source={iconSource} />
+        </View>
+      );
+    }
+    return <Icon source={iconSource} style={styles.icon} />;
+  };
+
   const renderHeader = () => {
     return (
       <TouchableOpacity
@@ -97,9 +147,17 @@ const Collapse: FC<CollapseProps> = ({
         )}
         <View style={styles.headerContent}>
           <View style={styles.flex2}>
-            <Text numberOfLines={1} typography={'header_default'}>
+            <RNText
+              numberOfLines={1}
+              style={[
+                getTitleTypo(),
+                {
+                  fontFamily: `${theme.font}-Semibold`,
+                  color: theme.colors.text.default,
+                },
+              ]}>
               {title}
-            </Text>
+            </RNText>
             {!!description && (
               <Text numberOfLines={2} typography={'description_default'}>
                 {description}
@@ -108,7 +166,7 @@ const Collapse: FC<CollapseProps> = ({
           </View>
           <View style={styles.infoWrap}>{renderInfo()}</View>
         </View>
-        <Icon source={iconSource} style={styles.icon} />
+        {renderCollapseIcon()}
       </TouchableOpacity>
     );
   };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/collapse",
-    "version": "0.81.7",
+    "version": "0.81.8",
     "private": false,
     "main": "index.tsx",
     "peerDependencies": {

package/styles.ts

@@ -19,5 +19,15 @@ export default StyleSheet.create({
   },
   infoWrap: {maxWidth: 200, alignItems: 'flex-end', marginLeft: Spacing.S},
   flex2: {flex: 2},
-  icon: {marginLeft: Spacing.S},
+  iconWrapper: {
+    width: 24,
+    height: 24,
+    borderRadius: Radius.M,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginLeft: Spacing.S,
+  },
+  icon: {
+    marginLeft: Spacing.S,
+  },
 });

package/types.ts

@@ -43,4 +43,6 @@ export type CollapseProps = {
   tagProps?: TagProps;
   scrollEnabled?: boolean;
   scrollContentMaxHeight?: number;
+  titleSize?: 'small' | 'medium' | 'large';
+  useBackgroundCollapseButton?: boolean;
 };