react-simple-animate - npm Package Compare versions

Comparing version 3.1.0-beta.2 to 3.1.0

dist/index.es.js

@@ -157,10 +157,13 @@ import * as React from 'react';
 
+var getPlayState = (isPlay) => isPlay ? 'running' : 'paused';
+
 const { useRef: useRef$2, useEffect: useEffect$2, useContext: useContext$1, useState: useState$2 } = React;
 function AnimateKeyframes(props) {
-    const { children, play, render, duration = 0.3, delay = 0, easeType = 'linear', direction = 'normal', fillMode = 'none', iterationCount = 1, keyframes, } = props;
+    const { children, play, render, duration = 0.3, delay = 0, easeType = 'linear', direction = 'normal', fillMode = 'none', iterationCount = 1, sequenceIndex, keyframes, sequenceId, } = props;
     const animationNameRef = useRef$2('');
+    const id = getSequenceId(sequenceIndex, sequenceId);
     const styleTagRef = useRef$2({
         sheet: {},
     });
-    const { register } = useContext$1(AnimateContext);
+    const { register, animationStates = {} } = useContext$1(AnimateContext);
     const forceUpdate = useState$2(false)[1];
@@ -179,7 +182,5 @@ useEffect$2(() => {
     }, []);
-    const style = animationNameRef.current
-        ? {
-            animation: `${duration}s ${easeType} ${delay}s ${iterationCount} ${direction} ${fillMode} ${play ? 'running' : 'paused'} ${animationNameRef.current || ''}`,
-        }
-        : null;
+    const style = {
+        animation: `${duration}s ${easeType} ${delay}s ${iterationCount} ${direction} ${fillMode} ${getPlayState((animationStates[id] || {}).play || play)} ${animationNameRef.current || ''}`,
+    };
     return render ? render({ style }) : createElement("div", { style: style || {} }, children);
@@ -236,7 +237,5 @@ }
     };
-    const style = animationNameRef.current
-        ? {
-            animation: `${duration}s ${easeType} ${delay}s ${iterationCount} ${direction} ${fillMode} ${isPlaying ? 'running' : 'paused'} ${animationNameRef.current || ''}`,
-        }
-        : null;
+    const style = {
+        animation: `${duration}s ${easeType} ${delay}s ${iterationCount} ${direction} ${fillMode} ${getPlayState(isPlaying)} ${animationNameRef.current || ''}`,
+    };
     return {
@@ -282,12 +281,9 @@ style,
             const delayDuration = currentIndex === 0 ? delay : totalDuration;
+            const transition = `all ${duration}s ${easeType} ${delayDuration}s`;
             totalDuration = calculateTotalDuration({ duration, delay, overlay }) + totalDuration;
-            if (keyframes) {
-                return isPlay
-                    ? {
-                        animation: `${duration}s ${easeType} ${delayDuration}s ${iterationCount} ${direction} ${fillMode} ${isPlaying ? 'running' : 'paused'} ${animationNamesRef.current[currentIndex]}`,
-                    }
-                    : {};
-            }
-            const transition = `all ${duration}s ${easeType} ${delayDuration}s`;
-            return Object.assign({}, (isPlay ? end : start), { transition });
+            return keyframes
+                ? {
+                    animation: `${duration}s ${easeType} ${delayDuration}s ${iterationCount} ${direction} ${fillMode} ${getPlayState(isPlay)} ${animationNamesRef.current[currentIndex]}`,
+                }
+                : Object.assign({}, (isPlay ? end : start), { transition });
         });
@@ -294,0 +290,0 @@ // @ts-ignore

dist/index.js

@@ -160,10 +160,13 @@ 'use strict';
 
+var getPlayState = (isPlay) => isPlay ? 'running' : 'paused';
+
 const { useRef: useRef$2, useEffect: useEffect$2, useContext: useContext$1, useState: useState$2 } = React;
 function AnimateKeyframes(props) {
-    const { children, play, render, duration = 0.3, delay = 0, easeType = 'linear', direction = 'normal', fillMode = 'none', iterationCount = 1, keyframes, } = props;
+    const { children, play, render, duration = 0.3, delay = 0, easeType = 'linear', direction = 'normal', fillMode = 'none', iterationCount = 1, sequenceIndex, keyframes, sequenceId, } = props;
     const animationNameRef = useRef$2('');
+    const id = getSequenceId(sequenceIndex, sequenceId);
     const styleTagRef = useRef$2({
         sheet: {},
     });
-    const { register } = useContext$1(AnimateContext);
+    const { register, animationStates = {} } = useContext$1(AnimateContext);
     const forceUpdate = useState$2(false)[1];
@@ -182,7 +185,5 @@ useEffect$2(() => {
     }, []);
-    const style = animationNameRef.current
-        ? {
-            animation: `${duration}s ${easeType} ${delay}s ${iterationCount} ${direction} ${fillMode} ${play ? 'running' : 'paused'} ${animationNameRef.current || ''}`,
-        }
-        : null;
+    const style = {
+        animation: `${duration}s ${easeType} ${delay}s ${iterationCount} ${direction} ${fillMode} ${getPlayState((animationStates[id] || {}).play || play)} ${animationNameRef.current || ''}`,
+    };
     return render ? render({ style }) : React.createElement("div", { style: style || {} }, children);
@@ -239,7 +240,5 @@ }
     };
-    const style = animationNameRef.current
-        ? {
-            animation: `${duration}s ${easeType} ${delay}s ${iterationCount} ${direction} ${fillMode} ${isPlaying ? 'running' : 'paused'} ${animationNameRef.current || ''}`,
-        }
-        : null;
+    const style = {
+        animation: `${duration}s ${easeType} ${delay}s ${iterationCount} ${direction} ${fillMode} ${getPlayState(isPlaying)} ${animationNameRef.current || ''}`,
+    };
     return {
@@ -285,12 +284,9 @@ style,
             const delayDuration = currentIndex === 0 ? delay : totalDuration;
+            const transition = `all ${duration}s ${easeType} ${delayDuration}s`;
             totalDuration = calculateTotalDuration({ duration, delay, overlay }) + totalDuration;
-            if (keyframes) {
-                return isPlay
-                    ? {
-                        animation: `${duration}s ${easeType} ${delayDuration}s ${iterationCount} ${direction} ${fillMode} ${isPlaying ? 'running' : 'paused'} ${animationNamesRef.current[currentIndex]}`,
-                    }
-                    : {};
-            }
-            const transition = `all ${duration}s ${easeType} ${delayDuration}s`;
-            return Object.assign({}, (isPlay ? end : start), { transition });
+            return keyframes
+                ? {
+                    animation: `${duration}s ${easeType} ${delayDuration}s ${iterationCount} ${direction} ${fillMode} ${getPlayState(isPlay)} ${animationNamesRef.current[currentIndex]}`,
+                }
+                : Object.assign({}, (isPlay ? end : start), { transition });
         });
@@ -297,0 +293,0 @@ // @ts-ignore

dist/useAnimateKeyframes.d.ts

@@ -5,5 +5,5 @@ import { AnimateKeyframesProps } from './types';
         animation: string;
-    } | null;
+    };
     play: (isPlay: boolean) => void;
     isPlaying: boolean;
 };

package.json

 {
   "name": "react-simple-animate",
-  "version": "3.1.0-beta.2",
+  "version": "3.1.0",
   "description": "react simple animate",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

283292

increased by13.95%

Number of package files

333

increased by24.72%

Number of low quality alerts

0

decreased by-100%

Worsened metrics

Lines of code

696

decreased by-1%

No dependency changes