@momo-kits/collapse 0.80.9 → 0.81.2

package/index.tsx

@@ -1,9 +1,28 @@
-import React, {FC, useContext, useRef, useState} from 'react';
-import {TouchableOpacity, View, Animated, Easing} from 'react-native';
-import {ApplicationContext, Icon, Image, Text} from '@momo-kits/foundation';
-import {CollapseProps} from './types';
+import React, {FC, useContext, useState} from 'react';
+import {
+  Animated,
+  LayoutAnimation,
+  Platform,
+  TouchableOpacity,
+  UIManager,
+  View,
+} from 'react-native';
+import {
+  ApplicationContext,
+  Icon,
+  Image,
+  Tag,
+  Text,
+} from '@momo-kits/foundation';
+import {CollapseProps, CollapseImageSize} from './types';
 import styles from './styles';
 
+if (Platform.OS === 'android') {
+  if (UIManager.setLayoutAnimationEnabledExperimental) {
+    UIManager.setLayoutAnimationEnabledExperimental(true);
+  }
+}
+
 const Collapse: FC<CollapseProps> = ({
   image,
   title = 'Title',
@@ -11,10 +30,14 @@ const Collapse: FC<CollapseProps> = ({
   onPress,
   showBorder,
   children,
+  imageSize = 24,
+  subTitle,
+  tagProps,
+  scrollEnabled = false,
+  scrollContentMaxHeight = 240,
 }) => {
   const {theme} = useContext(ApplicationContext);
   const [expanded, setExpanded] = useState(false);
-  const [height, setHeight] = useState(0);
 
   const iconSource = expanded
     ? 'arrow_chevron_up_small'
@@ -22,60 +45,41 @@ const Collapse: FC<CollapseProps> = ({
   const radiusStyle = {borderBottomLeftRadius: 0, borderBottomRightRadius: 0};
   const borderWidth = showBorder ? 1 : 0;
 
-  const animation = useRef(new Animated.Value(0)).current;
-  const opacity = useRef(new Animated.Value(0)).current;
-  const containerHeight = animation.interpolate({
-    inputRange: [0, 1],
-    outputRange: [-height, 0],
-  });
+  const renderInfo = () => {
+    if (subTitle) {
+      return (
+        <Text numberOfLines={1} typography={'paragraph_default'}>
+          {subTitle}
+        </Text>
+      );
+    }
+    if (tagProps) {
+      return <Tag {...tagProps} />;
+    }
 
-  const expand = () => {
-    Animated.parallel([
-      Animated.timing(animation, {
-        toValue: 1,
-        duration: 300,
-        easing: Easing.linear,
-        useNativeDriver: false,
-      }),
-      Animated.timing(opacity, {
-        toValue: 1,
-        duration: 100,
-        easing: Easing.linear,
-        useNativeDriver: false,
-      }),
-    ]).start();
+    return null;
   };
-  const collapse = () => {
-    Animated.parallel([
-      Animated.timing(animation, {
-        toValue: 0,
-        duration: 300,
-        easing: Easing.linear,
-        useNativeDriver: false,
-      }),
-      Animated.timing(opacity, {
-        toValue: 0,
-        duration: 300,
-        easing: Easing.linear,
-        useNativeDriver: false,
-      }),
-    ]).start();
+
+  const onPressHeader = () => {
+    onPress?.();
+
+    LayoutAnimation.configureNext({
+      duration: 300,
+      create: {
+        type: LayoutAnimation.Types.easeInEaseOut,
+        property: LayoutAnimation.Properties.opacity,
+      },
+      update: {type: LayoutAnimation.Types.easeInEaseOut},
+    });
+
+    setExpanded(!expanded);
   };
 
   const renderHeader = () => {
-    const _onPress = () => {
-      onPress?.();
-      if (!expanded) {
-        expand();
-      } else {
-        collapse();
-      }
-      setExpanded(!expanded);
-    };
     return (
       <TouchableOpacity
         activeOpacity={1}
-        onPress={_onPress}
+        onPress={onPressHeader}
         style={[
           styles.header,
           {
@@ -85,39 +89,49 @@ const Collapse: FC<CollapseProps> = ({
           },
           expanded && radiusStyle,
         ]}>
-        {!!image && <Image source={{uri: image}} style={styles.image} />}
+        {!!image && (
+          <Image
+            source={{uri: image}}
+            style={[styles.image, {width: imageSize, height: imageSize}]}
+          />
+        )}
         <View style={styles.headerContent}>
-          <Text numberOfLines={1} typography={'header_default'}>
-            {title}
-          </Text>
-          {!!description && (
-            <Text numberOfLines={2} typography={'description_default'}>
-              {description}
+          <View style={styles.flex2}>
+            <Text numberOfLines={1} typography={'header_default'}>
+              {title}
             </Text>
-          )}
+            {!!description && (
+              <Text numberOfLines={2} typography={'description_default'}>
+                {description}
+              </Text>
+            )}
+          </View>
+          <View style={styles.infoWrap}>{renderInfo()}</View>
         </View>
-        <Icon source={iconSource} />
+        <Icon source={iconSource} style={styles.icon} />
       </TouchableOpacity>
     );
   };
 
   const renderContent = () => {
     return (
-      <Animated.View
-        onLayout={e => {
-          setHeight(e.nativeEvent.layout.height);
-        }}
-        style={{
-          transform: [{translateY: containerHeight}],
-          zIndex: -1,
-          opacity,
-        }}>
-        {children}
-      </Animated.View>
+      <Animated.ScrollView
+        scrollEnabled={scrollEnabled}
+        showsVerticalScrollIndicator={false}
+        style={[
+          scrollEnabled && {
+            maxHeight: scrollContentMaxHeight,
+          },
+          {
+            backgroundColor: theme.colors.background.surface,
+          },
+        ]}>
+        {expanded && children}
+      </Animated.ScrollView>
     );
   };
   return (
-    <View style={{overflow: 'hidden'}}>
+    <View>
       {renderHeader()}
       {renderContent()}
     </View>
@@ -125,3 +139,4 @@ const Collapse: FC<CollapseProps> = ({
 };
 
 export default Collapse;
+export type {CollapseProps, CollapseImageSize};

package/package.json

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

package/styles.ts

@@ -3,8 +3,7 @@ import {Spacing, Radius} from '@momo-kits/foundation';
 
 export default StyleSheet.create({
   image: {
-    width: 24,
-    height: 24,
+    borderRadius: Radius.XS,
     marginRight: Spacing.S,
   },
   header: {
@@ -13,5 +12,12 @@ export default StyleSheet.create({
     paddingVertical: Spacing.S,
     borderRadius: Radius.S,
   },
-  headerContent: {flex: 1},
+  headerContent: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  infoWrap: {maxWidth: 200, alignItems: 'flex-end', marginLeft: Spacing.S},
+  flex2: {flex: 2},
+  icon: {marginLeft: Spacing.S},
 });

package/types.ts

@@ -1,8 +1,7 @@
-/**
- * Props for the Collapse component. The Collapse component is an interactive component
- * typically used to show and hide content via user interaction, often used for FAQs,
- * toggles, or detailed breakdowns in a condensed space.
- */
+import {TagProps} from '@momo-kits/foundation';
+
+export type CollapseImageSize = 24 | 32 | 40;
+
 export type CollapseProps = {
   /**
    * The title represents what is being collapsed or expanded. It is usually a summary or
@@ -37,4 +36,11 @@ export type CollapseProps = {
    * Defaults to `false` if not provided.
    */
   showBorder?: boolean;
+
+  imageSize?: CollapseImageSize;
+
+  subTitle?: string;
+  tagProps?: TagProps;
+  scrollEnabled?: boolean;
+  scrollContentMaxHeight?: number;
 };