@madeja-studio/telar/lib/module/animation/useAnimation.js

UI component library by Madeja Studio

"use strict";

import { useSpring } from '@react-spring/native';
import { useCallback } from 'react';
import { merge } from 'smob';
export const useAnimation = (animations, config = {}) => {
  const from = merge(...animations.map(a => a.from));
  const to = merge(...animations.map(a => a.to));
  const [style, api] = useSpring(() => ({
    config: config.springConfig ?? {
      friction: 30,
      tension: 500
    },
    from,
    to: config?.hasEnterTransition ? to : undefined
  }));
  const animatedStyle = animations.reduce((acc, animation) => {
    if (!animation.style) {
      return acc;
    }
    return merge(acc, animation.style(acc));
  }, style);
  const animationStart = useCallback(props => {
    api.start({
      to,
      ...props
    });
  }, [api, to]);
  const animationStop = useCallback(props => {
    api.start({
      to: from,
      ...props
    });
  }, [api, from]);
  return {
    animatedStyle,
    animationStart,
    animationStop,
    api
  };
};
//# sourceMappingURL=useAnimation.js.map