esoftplay 0.0.126-e → 0.0.126-f

package/modules/lib/collaps.tsx

@@ -3,9 +3,9 @@
 import { useSafeState } from 'esoftplay';
 
 
-import React, { useCallback } from 'react';
+import React, { useEffect } from 'react';
 import { Pressable } from 'react-native';
-import Animated, { interpolate, useAnimatedStyle, useSharedValue, withSpring, withTiming } from 'react-native-reanimated';
+import Animated, { runOnJS, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 
 
 export interface LibCollapsArgs {
@@ -17,42 +17,51 @@ export interface LibCollapsProps {
   style?: any
 }
 export default function m(props: LibCollapsProps): any {
-  const animHeight = useSharedValue(-1)
-  const bodyHeight = useSharedValue(1)
   const [expand, setExpand] = useSafeState(props.show)
+  const opacity = useSharedValue(0);
+  const translateY = useSharedValue(-10);
 
-  const heightStyle = useAnimatedStyle(() => {
+  const animatedStyle = useAnimatedStyle(() => {
     return {
-      overflow: 'hidden',
-      height: interpolate(animHeight.value,
-        [0, 1, 2],
-        [0, bodyHeight.value, bodyHeight.value * 2]),
-      opacity: interpolate(animHeight.value,
-        [-1, 0],
-        [0, 1])
+      opacity: opacity.value,
+      transform: [{ translateY: translateY.value }],
+    };
+  });
+
+  useEffect(() => {
+    if (expand) {
+      toggleAnimation()
     }
-  })
+  }, [expand])
+
+  const toggleAnimation = () => {
+    opacity.value = withTiming(opacity.value === 0 ? 1 : 0, { duration: 300 }, (status) => {
+      if (opacity.value == 0 && status) {
+        runOnJS(setExpand)(false)
+      }
+    });
+    translateY.value = withTiming(opacity.value !== 0 ? -10 : 0, { duration: 300})
+  };
 
-  const toggle = useCallback(() => {
-    animHeight.value = animHeight.value == 0 ? withSpring(1) : withTiming(0)
-    setExpand(animHeight.value != 1)
-  }, [])
+  function toggle() {
+    if (!expand) {
+      setExpand(true)
+    } else {
+      toggleAnimation()
+    }
+  }
 
   return (
-    <Animated.View style={{ overflow: 'hidden' }} >
-      <Pressable onPress={toggle} >
+    <Animated.View>
+       <Pressable onPress={toggle} style={{zIndex:11}} >
         {props.header(expand)}
       </Pressable>
-      <Animated.View
-        onLayout={({ nativeEvent: { layout: { height } } }) => {
-          if (height && animHeight.value == -1) {
-            bodyHeight.value = height + 5
-            animHeight.value = props.show ? 1 : 0
-          }
-        }}
-        style={[heightStyle]}>
-        {props.children}
-      </Animated.View>
+      {expand &&
+        <Animated.View
+          style={[{ paddingBottom: expand ? 10 : 0, zIndex:10 }, animatedStyle]}>
+          {props.children}
+        </Animated.View>
+      }
     </Animated.View>
   )
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "esoftplay",
-  "version": "0.0.126-e",
+  "version": "0.0.126-f",
   "description": "embedding data from esoftplay framework (web based) into mobile app",
   "main": "cache/index.js",
   "types": "../../index.d.ts",