@neko-os/ui 0.0.11 → 0.0.12

package/dist/abstractions/AnimatedView.native.js

@@ -1 +1 @@
-import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/abstractions/AnimatedView.native.js";import{map,prop}from'ramda';import Animated,{useAnimatedStyle}from'react-native-reanimated';import{jsx as _jsx}from"react/jsx-runtime";export function AbsAnimatedView(_ref){var children=_ref.children,style=_ref.style,_ref$animatedStyles=_ref.animatedStyles,animatedStyles=_ref$animatedStyles===void 0?[]:_ref$animatedStyles;return _jsx(Animated.View,{style:[style].concat(_toConsumableArray(animatedStyles)),children:children});}
+import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/abstractions/AnimatedView.native.js";import Animated from'react-native-reanimated';import{jsx as _jsx}from"react/jsx-runtime";export function AbsAnimatedView(_ref){var children=_ref.children,style=_ref.style,_ref$animatedStyles=_ref.animatedStyles,animatedStyles=_ref$animatedStyles===void 0?[]:_ref$animatedStyles;return _jsx(Animated.View,{style:[style].concat(_toConsumableArray(animatedStyles)),children:children});}

package/dist/modifiers/animations/animatedEffects.web.js

@@ -1 +1 @@
-import{useAnimatedEffect as useAnimatedEffectNative}from"./animatedEffects.native";export var useAnimatedEffects=useAnimatedEffectNative;
+import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _excluded=["open","onClose","lazy","unmountOnClose"];import{pipe}from'ramda';import{useSharedValue}from'react-native-reanimated';import React from'react';import{useFadeEffect}from"./fadeEffect";import{useScaleEffect}from"./scaleEffect";import{useSlideEffect}from"./slideEffect";export function useAnimatedEffects(_ref){var _ref2=_slicedToArray(_ref,2),values=_ref2[0],_ref2$=_ref2[1],_ref2$$open=_ref2$.open,open=_ref2$$open===void 0?true:_ref2$$open,onClose=_ref2$.onClose,_ref2$$lazy=_ref2$.lazy,lazy=_ref2$$lazy===void 0?false:_ref2$$lazy,_ref2$$unmountOnClose=_ref2$.unmountOnClose,unmountOnClose=_ref2$$unmountOnClose===void 0?false:_ref2$$unmountOnClose,props=_objectWithoutProperties(_ref2$,_excluded);var unmountTimerRef=React.useRef();var _React$useState=React.useState(0),_React$useState2=_slicedToArray(_React$useState,2),totalDuration=_React$useState2[0],setTotalDuration=_React$useState2[1];var _React$useState3=React.useState(open||!lazy),_React$useState4=_slicedToArray(_React$useState3,2),hasOpened=_React$useState4[0],setHasOpened=_React$useState4[1];var _React$useState5=React.useState(open||!lazy),_React$useState6=_slicedToArray(_React$useState5,2),render=_React$useState6[0],setRender=_React$useState6[1];var useRegisterEffect=function useRegisterEffect(effect){React.useEffect(function(){if(!(effect!=null&&effect.duration))return;setTotalDuration(function(v){return v>effect.duration?v:effect.duration;});},[]);};var translate=useSharedValue(0);React.useEffect(function(){if(open){clearTimeout(unmountTimerRef==null?void 0:unmountTimerRef.current);setHasOpened(true);setRender(true);}else if(unmountOnClose){unmountTimerRef.current=setTimeout(function(){return setRender(false);},totalDuration);}},[open]);return pipe(useFadeEffect,useSlideEffect,useScaleEffect)([Object.assign({},values,{animatedStyles:[],useRegisterEffect:useRegisterEffect,useAddTransition:function useAddTransition(){},open:open,onClose:onClose,lazy:lazy,unmountOnClose:unmountOnClose,hasOpened:hasOpened,setHasOpened:setHasOpened,render:render,setRender:setRender}),Object.assign({},props,{animatedStyles:[]})]);}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neko-os/ui",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "author": "Christian Storch <ccstorch@gmail.com>",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/abstractions/AnimatedView.native.js

@@ -1,5 +1,4 @@
-import { map, prop } from 'ramda'
-import Animated, { useAnimatedStyle } from 'react-native-reanimated'
+import Animated from 'react-native-reanimated'
 
 export function AbsAnimatedView({ children, style, animatedStyles = [] }) {
   return <Animated.View style={[style, ...animatedStyles]}>{children}</Animated.View>

package/src/modifiers/animations/animatedEffects.js

@@ -24,7 +24,6 @@ export function useAnimatedEffects([values, { open, onClose, lazy = false, unmou
   const useAddTransition = (effect, transition) => {
     React.useEffect(() => {
       if (!effect?.duration) return
-
       setTransitions((v) => [...v, transition])
     }, [])
   }

package/src/modifiers/animations/animatedEffects.web.js

@@ -1,3 +1,55 @@
-import { useAnimatedEffect as useAnimatedEffectNative } from './animatedEffects.native'
+import { pipe } from 'ramda'
+import { useSharedValue } from 'react-native-reanimated'
+import React from 'react'
 
-export const useAnimatedEffects = useAnimatedEffectNative
+import { useFadeEffect } from './fadeEffect'
+import { useScaleEffect } from './scaleEffect'
+import { useSlideEffect } from './slideEffect'
+
+export function useAnimatedEffects([values, { open = true, onClose, lazy = false, unmountOnClose = false, ...props }]) {
+  const unmountTimerRef = React.useRef()
+  const [totalDuration, setTotalDuration] = React.useState(0)
+  const [hasOpened, setHasOpened] = React.useState(open || !lazy)
+  const [render, setRender] = React.useState(open || !lazy)
+
+  const useRegisterEffect = (effect) => {
+    React.useEffect(() => {
+      if (!effect?.duration) return
+      setTotalDuration((v) => (v > effect.duration ? v : effect.duration))
+    }, [])
+  }
+
+  const translate = useSharedValue(0)
+
+  React.useEffect(() => {
+    if (open) {
+      clearTimeout(unmountTimerRef?.current)
+      setHasOpened(true)
+      setRender(true)
+    } else if (unmountOnClose) {
+      unmountTimerRef.current = setTimeout(() => setRender(false), totalDuration)
+    }
+  }, [open])
+
+  return pipe(
+    useFadeEffect, //
+    useSlideEffect,
+    useScaleEffect
+  )([
+    {
+      ...values,
+      animatedStyles: [],
+      useRegisterEffect,
+      useAddTransition: () => {},
+      open,
+      onClose,
+      lazy,
+      unmountOnClose,
+      hasOpened,
+      setHasOpened,
+      render,
+      setRender,
+    },
+    { ...props, animatedStyles: [] },
+  ])
+}