@momo-kits/collapse 0.103.2-rc.4 → 0.103.2-rc.41

package/index.tsx

@@ -4,6 +4,7 @@ import {
   LayoutAnimation,
   Platform,
   Text as RNText,
+  ScrollView,
   TouchableOpacity,
   UIManager,
   View,
@@ -43,6 +44,7 @@ const Collapse = React.forwardRef<CollapseHandle, CollapseProps>(
       useBackgroundCollapseButton = false,
       headerAlign = 'flex-start',
       expandDefault = false,
+      disabledAnimated = false,
     },
     ref
   ) => {
@@ -106,7 +108,7 @@ const Collapse = React.forwardRef<CollapseHandle, CollapseProps>(
     };
 
     const onPressHeader = () => {
-      onPress?.();
+      onPress?.(expanded);
 
       LayoutAnimation.configureNext({
         duration: 300,
@@ -183,21 +185,39 @@ const Collapse = React.forwardRef<CollapseHandle, CollapseProps>(
     };
 
     const renderContent = () => {
+      if (scrollEnabled) {
+        const ParentComponent = disabledAnimated
+          ? ScrollView
+          : Animated.ScrollView;
+        return (
+          <ParentComponent
+            scrollEnabled={scrollEnabled}
+            showsVerticalScrollIndicator={false}
+            style={[
+              scrollEnabled && {
+                maxHeight: scrollContentMaxHeight,
+              },
+              expanded && {
+                borderTopWidth: borderWidth,
+                borderColor,
+              },
+            ]}>
+            {expanded && children}
+          </ParentComponent>
+        );
+      }
+
+      const ParentComponent = disabledAnimated ? View : Animated.View;
       return (
-        <Animated.ScrollView
-          scrollEnabled={scrollEnabled}
-          showsVerticalScrollIndicator={false}
+        <ParentComponent
           style={[
-            scrollEnabled && {
-              maxHeight: scrollContentMaxHeight,
-            },
             expanded && {
               borderTopWidth: borderWidth,
               borderColor,
             },
           ]}>
           {expanded && children}
-        </Animated.ScrollView>
+        </ParentComponent>
       );
     };
     return (

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/collapse",
-    "version": "0.103.2-rc.4",
+    "version": "0.103.2-rc.41",
     "private": false,
     "main": "index.tsx",
     "peerDependencies": {

package/types.ts

@@ -27,8 +27,9 @@ export type CollapseProps = {
   /**
    * Optional. A callback function that is triggered when the collapse component is pressed or
    * selected. This function is typically used to toggle the view state of the collapsible content.
+   * Add isExpanded as a parameter to know the current state of the collapse, for tracking.
    */
-  onPress?: () => void;
+  onPress?: (isExpanded: boolean) => void;
 
   /**
    * Optional. If `true`, a border is displayed around the collapse component, visually separating
@@ -52,6 +53,15 @@ export type CollapseProps = {
   expandDefault?: boolean;
 
   children?: React.ReactNode;
+
+  /**
+   * Optional. If `true`, the collapse component will not use Animated.View for the transition
+   * effect when expanding or collapsing. This is useful when the component is nested within
+   * another collapsible component that already has an animated transition effect.
+   * Can be use to fix the iseue: If WebView is the children of Collapse, the WebView will be blank when collapse is expanded.
+   * Defaults to `false` if not provided.
+   */
+  disabledAnimated?: boolean;
 };
 
 export type CollapseHandle = {