react-simple-animate - npm Package Compare versions

Comparing version 3.2.0 to 3.2.1

dist/index.es.js

 import * as React from 'react';
-import { createElement, createContext, useState as useState$3, useRef as useRef$3, useEffect as useEffect$3, useContext as useContext$2 } from 'react';
+import { createElement, createContext, useMemo, useRef as useRef$5, useContext as useContext$2, useState as useState$5, useEffect as useEffect$5 } from 'react';
 
@@ -217,27 +217,30 @@ /*! *****************************************************************************
 
+const { useState: useState$3, useEffect: useEffect$3, useRef: useRef$3 } = React;
 function useAnimate(props) {
-    const { start, end, complete, onComplete, delay = 0, duration = 0.3, easeType = 'linear' } = props;
-    const transition = `all ${duration}s ${easeType} ${delay}s`;
+    const { start, end, complete, onComplete, delay = 0, duration = 0.3, easeType = 'linear', } = props;
+    const transition = useMemo(() => `all ${duration}s ${easeType} ${delay}s`, [duration, easeType, delay]);
     const [style, setStyle] = useState$3(Object.assign({}, start, { transition }));
     const [isPlaying, setIsPlaying] = useState$3(false);
-    const onCompleteTimeRef = useRef$3(0);
+    const onCompleteTimeRef = useRef$3();
+    const playRef = useRef$3();
     useEffect$3(() => () => {
         onCompleteTimeRef.current && clearTimeout(onCompleteTimeRef.current);
     }, []);
-    const play = (isPlay) => {
-        setStyle(Object.assign({}, (isPlay ? end : start), { transition }));
-        setIsPlaying(isPlay);
-        if (isPlay && (complete || onComplete)) {
-            // @ts-ignore
+    if (!playRef.current) {
+        playRef.current = (isPlay) => {
+            setStyle(Object.assign({}, (isPlay ? end : start), { transition }));
+            setIsPlaying(true);
             onCompleteTimeRef.current = setTimeout(() => {
-                // @ts-ignore
-                complete && setStyle(complete);
-                onComplete && onComplete();
+                if (isPlay && (complete || onComplete)) {
+                    complete && setStyle(complete);
+                    onComplete && onComplete();
+                }
+                setIsPlaying(false);
             }, msToSec(delay + duration));
-        }
-    };
+        };
+    }
     return {
         isPlaying,
         style,
-        play,
+        play: playRef.current,
     };
@@ -248,7 +251,7 @@ }
     const { duration = 0.3, delay = 0, easeType = 'linear', direction = 'normal', fillMode = 'none', iterationCount = 1, keyframes, } = props;
-    const animationNameRef = useRef$3({
+    const animationNameRef = useRef$5({
         forward: '',
         reverse: '',
     });
-    const styleTagRef = useRef$3({
+    const styleTagRef = useRef$5({
         forward: { sheet: {} },
@@ -258,5 +261,6 @@ reverse: { sheet: {} },
     const { register } = useContext$2(AnimateContext);
-    const [isPlaying, setIsPlaying] = useState$3(true);
-    const [isPaused, setIsPaused] = useState$3(false);
-    useEffect$3(() => {
+    const [isPlaying, setIsPlaying] = useState$5(true);
+    const [isPaused, setIsPaused] = useState$5(false);
+    const playRef = useRef$5();
+    useEffect$5(() => {
         animationNameRef.current.forward = createRandomName();
@@ -280,3 +284,3 @@ let result = createTag({
     }, []);
-    const play = (isPlay) => {
+    playRef.current = playRef.current ? playRef.current : (isPlay) => {
         setIsPlaying(isPlay);
@@ -288,7 +292,9 @@ };
     const style = {
-        animation: `${duration}s ${easeType} ${delay}s ${iterationCount} ${direction} ${fillMode} ${getPlayState(isPaused)} ${(isPlaying ? animationNameRef.current.forward : animationNameRef.current.reverse) || ''}`,
+        animation: `${duration}s ${easeType} ${delay}s ${iterationCount} ${direction} ${fillMode} ${getPlayState(isPaused)} ${(isPlaying
+            ? animationNameRef.current.forward
+            : animationNameRef.current.reverse) || ''}`,
     };
     return {
         style,
-        play,
+        play: playRef.current,
         pause,
@@ -299,2 +305,3 @@ isPlaying,
 
+const { useEffect: useEffect$4, useState: useState$4, useRef: useRef$4 } = React;
 function createArrayWithNumbers(length) {
@@ -306,7 +313,8 @@ return Array.from({ length }, () => null);
     const defaultArray = createArrayWithNumbers(sequences.length);
-    const [styles, setStyles] = useState$3(defaultArray);
-    const [isPlaying, setPlaying] = useState$3(false);
-    const animationNamesRef = useRef$3([]);
-    const styleTagRef = useRef$3([]);
-    useEffect$3(() => {
+    const [styles, setStyles] = useState$4(defaultArray);
+    const [isPlaying, setPlaying] = useState$4(false);
+    const animationNamesRef = useRef$4([]);
+    const styleTagRef = useRef$4([]);
+    const playRef = useRef$4();
+    useEffect$4(() => {
         sequences.forEach(({ keyframes = false }, i) => {
@@ -341,5 +349,7 @@ if (!Array.isArray(keyframes))
     }, []);
-    const play = (isPlay) => {
+    playRef.current = playRef.current ? playRef.current : (isPlay) => {
         let totalDuration = 0;
-        const animationRefWithOrder = isPlay ? animationNamesRef.current : [...animationNamesRef.current].reverse();
+        const animationRefWithOrder = isPlay
+            ? animationNamesRef.current
+            : [...animationNamesRef.current].reverse();
         const styles = (isPlay ? sequences : [...sequences].reverse()).map((current, currentIndex) => {
@@ -349,6 +359,9 @@ const { duration = 0.3, delay = 0, overlay, keyframes, iterationCount = 1, easeType = 'linear', direction = 'normal', fillMode = 'none', end = {}, start = {}, } = current;
             const transition = `all ${duration}s ${easeType} ${delayDuration}s`;
-            totalDuration = calculateTotalDuration({ duration, delay, overlay }) + totalDuration;
+            totalDuration =
+                calculateTotalDuration({ duration, delay, overlay }) + totalDuration;
             return keyframes
                 ? {
-                    animation: `${duration}s ${easeType} ${delayDuration}s ${iterationCount} ${direction} ${fillMode} running ${isPlay ? animationRefWithOrder[currentIndex].forward : animationRefWithOrder[currentIndex].reverse}`,
+                    animation: `${duration}s ${easeType} ${delayDuration}s ${iterationCount} ${direction} ${fillMode} running ${isPlay
+                        ? animationRefWithOrder[currentIndex].forward
+                        : animationRefWithOrder[currentIndex].reverse}`,
                 }
@@ -361,5 +374,5 @@ : Object.assign({}, (isPlay ? end : start), { transition });
     };
-    return { styles, play, isPlaying };
+    return { styles, play: playRef.current, isPlaying };
 }
 
 export { Animate, AnimateGroup, AnimateKeyframes, useAnimate, useAnimateGroup, useAnimateKeyframes };

dist/index.js

@@ -220,27 +220,30 @@ 'use strict';
 
+const { useState: useState$3, useEffect: useEffect$3, useRef: useRef$3 } = React;
 function useAnimate(props) {
-    const { start, end, complete, onComplete, delay = 0, duration = 0.3, easeType = 'linear' } = props;
-    const transition = `all ${duration}s ${easeType} ${delay}s`;
-    const [style, setStyle] = React.useState(Object.assign({}, start, { transition }));
-    const [isPlaying, setIsPlaying] = React.useState(false);
-    const onCompleteTimeRef = React.useRef(0);
-    React.useEffect(() => () => {
+    const { start, end, complete, onComplete, delay = 0, duration = 0.3, easeType = 'linear', } = props;
+    const transition = React.useMemo(() => `all ${duration}s ${easeType} ${delay}s`, [duration, easeType, delay]);
+    const [style, setStyle] = useState$3(Object.assign({}, start, { transition }));
+    const [isPlaying, setIsPlaying] = useState$3(false);
+    const onCompleteTimeRef = useRef$3();
+    const playRef = useRef$3();
+    useEffect$3(() => () => {
         onCompleteTimeRef.current && clearTimeout(onCompleteTimeRef.current);
     }, []);
-    const play = (isPlay) => {
-        setStyle(Object.assign({}, (isPlay ? end : start), { transition }));
-        setIsPlaying(isPlay);
-        if (isPlay && (complete || onComplete)) {
-            // @ts-ignore
+    if (!playRef.current) {
+        playRef.current = (isPlay) => {
+            setStyle(Object.assign({}, (isPlay ? end : start), { transition }));
+            setIsPlaying(true);
             onCompleteTimeRef.current = setTimeout(() => {
-                // @ts-ignore
-                complete && setStyle(complete);
-                onComplete && onComplete();
+                if (isPlay && (complete || onComplete)) {
+                    complete && setStyle(complete);
+                    onComplete && onComplete();
+                }
+                setIsPlaying(false);
             }, msToSec(delay + duration));
-        }
-    };
+        };
+    }
     return {
         isPlaying,
         style,
-        play,
+        play: playRef.current,
     };
@@ -262,2 +265,3 @@ }
     const [isPaused, setIsPaused] = React.useState(false);
+    const playRef = React.useRef();
     React.useEffect(() => {
@@ -282,3 +286,3 @@ animationNameRef.current.forward = createRandomName();
     }, []);
-    const play = (isPlay) => {
+    playRef.current = playRef.current ? playRef.current : (isPlay) => {
         setIsPlaying(isPlay);
@@ -290,7 +294,9 @@ };
     const style = {
-        animation: `${duration}s ${easeType} ${delay}s ${iterationCount} ${direction} ${fillMode} ${getPlayState(isPaused)} ${(isPlaying ? animationNameRef.current.forward : animationNameRef.current.reverse) || ''}`,
+        animation: `${duration}s ${easeType} ${delay}s ${iterationCount} ${direction} ${fillMode} ${getPlayState(isPaused)} ${(isPlaying
+            ? animationNameRef.current.forward
+            : animationNameRef.current.reverse) || ''}`,
     };
     return {
         style,
-        play,
+        play: playRef.current,
         pause,
@@ -301,2 +307,3 @@ isPlaying,
 
+const { useEffect: useEffect$4, useState: useState$4, useRef: useRef$4 } = React;
 function createArrayWithNumbers(length) {
@@ -308,7 +315,8 @@ return Array.from({ length }, () => null);
     const defaultArray = createArrayWithNumbers(sequences.length);
-    const [styles, setStyles] = React.useState(defaultArray);
-    const [isPlaying, setPlaying] = React.useState(false);
-    const animationNamesRef = React.useRef([]);
-    const styleTagRef = React.useRef([]);
-    React.useEffect(() => {
+    const [styles, setStyles] = useState$4(defaultArray);
+    const [isPlaying, setPlaying] = useState$4(false);
+    const animationNamesRef = useRef$4([]);
+    const styleTagRef = useRef$4([]);
+    const playRef = useRef$4();
+    useEffect$4(() => {
         sequences.forEach(({ keyframes = false }, i) => {
@@ -343,5 +351,7 @@ if (!Array.isArray(keyframes))
     }, []);
-    const play = (isPlay) => {
+    playRef.current = playRef.current ? playRef.current : (isPlay) => {
         let totalDuration = 0;
-        const animationRefWithOrder = isPlay ? animationNamesRef.current : [...animationNamesRef.current].reverse();
+        const animationRefWithOrder = isPlay
+            ? animationNamesRef.current
+            : [...animationNamesRef.current].reverse();
         const styles = (isPlay ? sequences : [...sequences].reverse()).map((current, currentIndex) => {
@@ -351,6 +361,9 @@ const { duration = 0.3, delay = 0, overlay, keyframes, iterationCount = 1, easeType = 'linear', direction = 'normal', fillMode = 'none', end = {}, start = {}, } = current;
             const transition = `all ${duration}s ${easeType} ${delayDuration}s`;
-            totalDuration = calculateTotalDuration({ duration, delay, overlay }) + totalDuration;
+            totalDuration =
+                calculateTotalDuration({ duration, delay, overlay }) + totalDuration;
             return keyframes
                 ? {
-                    animation: `${duration}s ${easeType} ${delayDuration}s ${iterationCount} ${direction} ${fillMode} running ${isPlay ? animationRefWithOrder[currentIndex].forward : animationRefWithOrder[currentIndex].reverse}`,
+                    animation: `${duration}s ${easeType} ${delayDuration}s ${iterationCount} ${direction} ${fillMode} running ${isPlay
+                        ? animationRefWithOrder[currentIndex].forward
+                        : animationRefWithOrder[currentIndex].reverse}`,
                 }
@@ -363,3 +376,3 @@ : Object.assign({}, (isPlay ? end : start), { transition });
     };
-    return { styles, play, isPlaying };
+    return { styles, play: playRef.current, isPlaying };
 }
@@ -366,0 +379,0 @@

dist/useAnimate.d.ts

@@ -1,10 +0,6 @@
-import { AnimationProps } from './types';
+import { AnimationProps, Style } from './types';
 export default function useAnimate(props: AnimationProps): {
     isPlaying: boolean;
-    style: {
-        transition: string;
-    } | {
-        transition: string;
-    };
-    play: (isPlay: boolean) => void;
+    style: Style;
+    play: (boolean: any) => void;
 };

dist/useAnimateGroup.d.ts

@@ -1,2 +0,2 @@
-import { HookSequences } from './types';
+import { HookSequences, Style } from './types';
 interface Props {
@@ -6,6 +6,6 @@ sequences: HookSequences;
 export default function useAnimateGroup(props: Props): {
-    styles: null[];
-    play: (isPlay: boolean) => void;
+    styles: (Style | null)[];
+    play: (boolean: any) => void;
     isPlaying: boolean;
 };
 export {};

dist/useAnimateKeyframes.d.ts

@@ -1,9 +0,7 @@
-import { AnimateKeyframesProps } from './types';
+import { AnimateKeyframesProps, Style } from './types';
 export default function useAnimateKeyframes(props: AnimateKeyframesProps): {
-    style: {
-        animation: string;
-    };
-    play: (isPlay: boolean) => void;
-    pause: (isPaused: boolean) => void;
+    style: Style;
+    play: (boolean: any) => void;
+    pause: (boolean: any) => void;
     isPlaying: boolean;
 };

package.json

 {
   "name": "react-simple-animate",
-  "version": "3.2.0",
+  "version": "3.2.1",
   "description": "react simple animate",
@@ -47,4 +47,7 @@ "main": "dist/index.js",
     "eslint": "^5.16.0",
+    "husky": "^3.0.0",
     "jest": "^24.7.1",
+    "lint-staged": "^9.1.0",
     "npm-run-all": "^4.1.5",
+    "pretty-quick": "^1.11.1",
     "react": "^16.8.6",
@@ -57,3 +60,3 @@ "react-dom": "^16.8.6",
     "ts-jest": "^24.0.2",
-    "typescript": "^3.4.3",
+    "typescript": "^3.5.2",
     "uglify-es": "^3.3.9"
@@ -64,3 +67,15 @@ },
     "react-dom": "^16.8.0"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.{tsx,ts}": [
+      "eslint --fix",
+      "prettier --config ./.prettierrc --write",
+      "git add"
+    ]
   }
 }

README.md

@@ -1,4 +0,5 @@
-<div align="center"><a href="https://react-simple-animate.now.sh"><img src="https://raw.githubusercontent.com/bluebill1049/react-simple-animate/master/logo.png" alt="React Simple Animate Logo - UI Animation Made Simple" width="180px" height="180px" /></a></div>
+<div align="center"><p align="center"><a href="https://react-simple-animate.now.sh"><img src="https://raw.githubusercontent.com/bluebill1049/react-simple-animate/master/logo.png" alt="React Simple Animate Logo - UI Animation Made Simple" width="180px" height="180px" /></a></p></div>
 
-# [React Simple Animate](https://react-simple-animate.now.sh) 
+<h1 align="center"><a href="https://react-simple-animate.now.sh">React Simple Animate</a></h1>
+
 [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=React+UI+animation+made+simple&url=https://react-simple-animate.now.sh/) [![CircleCI](https://circleci.com/gh/bluebill1049/react-simple-animate.svg?style=svg)](https://circleci.com/gh/bluebill1049/react-simple-animate) [![Coverage Status](https://coveralls.io/repos/github/bluebill1049/react-simple-animate/badge.svg?branch=master)](https://coveralls.io/github/bluebill1049/react-simple-animate?branch=master) [![npm downloads](https://img.shields.io/npm/dm/react-simple-animate.svg?style=flat-square)](https://www.npmjs.com/package/react-simple-animate) [![npm](https://img.shields.io/npm/dt/react-simple-animate.svg?style=flat-square)](https://www.npmjs.com/package/react-simple-animate) [![npm](https://badgen.net/bundlephobia/minzip/react-simple-animate)](https://badgen.net/bundlephobia/minzip/react-simple-animate)
@@ -34,7 +35,8 @@
   <>
-    {/* This example demonstrate animate individual element. */}
+    {/* animate individual element. */}
     <Animate play start={{ opacity: 0 }} end={{ opacity: 1 }}>
       <h1>React simple animate</h1>
     </Animate>
-    {/* This example demonstrate animate keyframes with individual element. */}
+    
+    {/* animate keyframes with individual element. */}
     <AnimateKeyframes
@@ -47,3 +49,4 @@ play
     </AnimateKeyframes>
-    {/* This example demonstrate animate group of animation with sequenceIndex. */}
+    
+    {/* animate group of animation in sequences */}
     <AnimateGroup play>
@@ -110,2 +113,3 @@ <Animate start={{ opacity: 0 }} end={{ opacity: 1 }} sequenceIndex={0}>
     <a href="https://github.com/wle8300"><img src="https://avatars1.githubusercontent.com/u/150245?s=460&v=4" width="50" height="50" /></a>
+    <a href="https://github.com/yusinto"><img src="https://avatars1.githubusercontent.com/u/1593077?s=460&v=4" width="50" height="50" /></a>
 </p>

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

Improved metrics

Total package byte prevSize

372010

increased by13.34%

Number of package files

469

increased by18.14%

Lines of code

842

increased by2.43%

Number of lines in readme file

113

increased by3.67%

Worsened metrics

Dev dependency count

25

increased by13.64%

No dependency changes