react-simple-animate - npm Package Compare versions

Comparing version 3.3.13 to 3.4.0

dist/index.es.js

@@ -1,2 +0,2 @@
-import { useState, useRef, useCallback, useEffect, createElement, createContext, useContext, useMemo } from 'react';
+import * as React from 'react';
 
@@ -27,3 +27,3 @@ var calculateTotalDuration = ({ duration = 0.3, delay = 0, overlay = 0, }) => duration + delay - overlay || 0;
 
-const AnimateContext = createContext({
+const AnimateContext = React.createContext({
     animationStates: {},
@@ -33,5 +33,5 @@ register: (data) => { },
 function AnimateGroup({ play, sequences = [], children, }) {
-    const [animationStates, setAnimationStates] = useState({});
-    const animationsRef = useRef({});
-    const register = useCallback((data) => {
+    const [animationStates, setAnimationStates] = React.useState({});
+    const animationsRef = React.useRef({});
+    const register = React.useCallback((data) => {
         const { sequenceIndex, sequenceId } = data;
@@ -42,3 +42,3 @@ if (!isUndefined(sequenceId) || !isUndefined(sequenceIndex)) {
     }, []);
-    useEffect(() => {
+    React.useEffect(() => {
         const sequencesToAnimate = Array.isArray(sequences) && sequences.length
@@ -71,3 +71,3 @@ ? sequences
     }, [play]);
-    return (createElement(AnimateContext.Provider, { value: { animationStates, register } }, children));
+    return (React.createElement(AnimateContext.Provider, { value: { animationStates, register } }, children));
 }
@@ -79,7 +79,7 @@
     const { play, children, render, start, end, complete = '', onComplete, delay = 0, duration = DEFAULT_DURATION, easeType = DEFAULT_EASE_TYPE, sequenceId, sequenceIndex, } = props;
-    const onCompleteTimeRef = useRef();
-    const [style, setStyle] = useState(start || {});
-    const { register, animationStates = {} } = useContext(AnimateContext);
+    const onCompleteTimeRef = React.useRef();
+    const [style, setStyle] = React.useState(start || {});
+    const { register, animationStates = {} } = React.useContext(AnimateContext);
     const id = getSequenceId(sequenceIndex, sequenceId);
-    useEffect(() => {
+    React.useEffect(() => {
         if ((!isUndefined(sequenceIndex) && sequenceIndex >= 0) || sequenceId) {
@@ -90,3 +90,3 @@ register(props);
     }, []);
-    useEffect(() => {
+    React.useEffect(() => {
         const animationState = animationStates[id] || {};
@@ -113,3 +113,3 @@ setStyle(Object.assign(Object.assign({}, (play || animationState.play ? end : start)), { transition: `${ALL} ${duration}s ${easeType} ${parseFloat(animationState.delay || delay)}s` }));
     ]);
-    return render ? render({ style }) : createElement("div", { style: style }, children);
+    return render ? render({ style }) : React.createElement("div", { style: style }, children);
 }
@@ -187,8 +187,8 @@
     let pauseValue;
-    const animationNameRef = useRef({
+    const animationNameRef = React.useRef({
         forward: '',
         reverse: '',
     });
-    const controlled = useRef(false);
-    const styleTagRef = useRef({
+    const controlled = React.useRef(false);
+    const styleTagRef = React.useRef({
         forward: { sheet: {} },
@@ -198,6 +198,6 @@ reverse: { sheet: {} },
     const id = getSequenceId(sequenceIndex, sequenceId);
-    const { register, animationStates = {} } = useContext(AnimateContext);
+    const { register, animationStates = {} } = React.useContext(AnimateContext);
     const animateState = animationStates[id] || {};
-    const [, forceUpdate] = useState(false);
-    useEffect(() => {
+    const [, forceUpdate] = React.useState(false);
+    React.useEffect(() => {
         const styleTag = styleTagRef.current;
@@ -241,3 +241,3 @@ const animationName = animationNameRef.current;
     };
-    return render ? render({ style }) : createElement("div", { style: style || {} }, children);
+    return render ? render({ style }) : React.createElement("div", { style: style || {} }, children);
 }
@@ -247,4 +247,4 @@
     const { start, end, complete, onComplete, delay = 0, duration = DEFAULT_DURATION, easeType = DEFAULT_EASE_TYPE, } = props;
-    const transition = useMemo(() => `${ALL} ${duration}s ${easeType} ${delay}s`, [duration, easeType, delay]);
-    const [animate, setAnimate] = useState({
+    const transition = React.useMemo(() => `${ALL} ${duration}s ${easeType} ${delay}s`, [duration, easeType, delay]);
+    const [animate, setAnimate] = React.useState({
         isPlaying: false,
@@ -254,4 +254,4 @@ style: Object.assign(Object.assign({}, start), { transition }),
     const { isPlaying, style } = animate;
-    const onCompleteTimeRef = useRef();
-    useEffect(() => {
+    const onCompleteTimeRef = React.useRef();
+    React.useEffect(() => {
         if ((onCompleteTimeRef.current || complete) && isPlaying) {
@@ -272,3 +272,3 @@ onCompleteTimeRef.current = setTimeout(() => {
         style,
-        play: useCallback((isPlaying) => {
+        play: React.useCallback((isPlaying) => {
             setAnimate(Object.assign(Object.assign({}, animate), { style: Object.assign(Object.assign({}, (isPlaying ? end : start)), { transition }), isPlaying }));
@@ -281,15 +281,15 @@ }, []),
     const { duration = DEFAULT_DURATION, delay = 0, easeType = DEFAULT_EASE_TYPE, direction = DEFAULT_DIRECTION, fillMode = DEFAULT_FILLMODE, iterationCount = 1, keyframes, } = props;
-    const animationNameRef = useRef({
+    const animationNameRef = React.useRef({
         forward: '',
         reverse: '',
     });
-    const styleTagRef = useRef({
+    const styleTagRef = React.useRef({
         forward: { sheet: {} },
         reverse: { sheet: {} },
     });
-    const { register } = useContext(AnimateContext);
-    const [isPlaying, setIsPlaying] = useState(null);
-    const [isPaused, setIsPaused] = useState(false);
-    const playRef = useRef();
-    useEffect(() => {
+    const { register } = React.useContext(AnimateContext);
+    const [isPlaying, setIsPlaying] = React.useState(null);
+    const [isPaused, setIsPaused] = React.useState(false);
+    const playRef = React.useRef();
+    React.useEffect(() => {
         const styleTag = styleTagRef.current;
@@ -341,8 +341,8 @@ const animationName = animationNameRef.current;
     const defaultArray = createArrayWithNumbers(sequences.length).map((_, index) => props.sequences[index].start);
-    const [styles, setStyles] = useState(defaultArray);
-    const [isPlaying, setPlaying] = useState(false);
-    const animationNamesRef = useRef([]);
-    const styleTagRef = useRef([]);
-    const playRef = useRef();
-    useEffect(() => {
+    const [styles, setStyles] = React.useState(defaultArray);
+    const [isPlaying, setPlaying] = React.useState(false);
+    const animationNamesRef = React.useRef([]);
+    const styleTagRef = React.useRef([]);
+    const playRef = React.useRef();
+    React.useEffect(() => {
         sequences.forEach(({ keyframes = false }, i) => {
@@ -349,0 +349,0 @@ if (!Array.isArray(keyframes)) {

dist/index.js

@@ -7,2 +7,22 @@ 'use strict';
 
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
 var calculateTotalDuration = ({ duration = 0.3, delay = 0, overlay = 0, }) => duration + delay - overlay || 0;
@@ -32,3 +52,3 @@
 
-const AnimateContext = React.createContext({
+const AnimateContext = React__namespace.createContext({
     animationStates: {},
@@ -38,5 +58,5 @@ register: (data) => { },
 function AnimateGroup({ play, sequences = [], children, }) {
-    const [animationStates, setAnimationStates] = React.useState({});
-    const animationsRef = React.useRef({});
-    const register = React.useCallback((data) => {
+    const [animationStates, setAnimationStates] = React__namespace.useState({});
+    const animationsRef = React__namespace.useRef({});
+    const register = React__namespace.useCallback((data) => {
         const { sequenceIndex, sequenceId } = data;
@@ -47,3 +67,3 @@ if (!isUndefined(sequenceId) || !isUndefined(sequenceIndex)) {
     }, []);
-    React.useEffect(() => {
+    React__namespace.useEffect(() => {
         const sequencesToAnimate = Array.isArray(sequences) && sequences.length
@@ -76,3 +96,3 @@ ? sequences
     }, [play]);
-    return (React.createElement(AnimateContext.Provider, { value: { animationStates, register } }, children));
+    return (React__namespace.createElement(AnimateContext.Provider, { value: { animationStates, register } }, children));
 }
@@ -84,7 +104,7 @@
     const { play, children, render, start, end, complete = '', onComplete, delay = 0, duration = DEFAULT_DURATION, easeType = DEFAULT_EASE_TYPE, sequenceId, sequenceIndex, } = props;
-    const onCompleteTimeRef = React.useRef();
-    const [style, setStyle] = React.useState(start || {});
-    const { register, animationStates = {} } = React.useContext(AnimateContext);
+    const onCompleteTimeRef = React__namespace.useRef();
+    const [style, setStyle] = React__namespace.useState(start || {});
+    const { register, animationStates = {} } = React__namespace.useContext(AnimateContext);
     const id = getSequenceId(sequenceIndex, sequenceId);
-    React.useEffect(() => {
+    React__namespace.useEffect(() => {
         if ((!isUndefined(sequenceIndex) && sequenceIndex >= 0) || sequenceId) {
@@ -95,3 +115,3 @@ register(props);
     }, []);
-    React.useEffect(() => {
+    React__namespace.useEffect(() => {
         const animationState = animationStates[id] || {};
@@ -118,3 +138,3 @@ setStyle(Object.assign(Object.assign({}, (play || animationState.play ? end : start)), { transition: `${ALL} ${duration}s ${easeType} ${parseFloat(animationState.delay || delay)}s` }));
     ]);
-    return render ? render({ style }) : React.createElement("div", { style: style }, children);
+    return render ? render({ style }) : React__namespace.createElement("div", { style: style }, children);
 }
@@ -192,8 +212,8 @@
     let pauseValue;
-    const animationNameRef = React.useRef({
+    const animationNameRef = React__namespace.useRef({
         forward: '',
         reverse: '',
     });
-    const controlled = React.useRef(false);
-    const styleTagRef = React.useRef({
+    const controlled = React__namespace.useRef(false);
+    const styleTagRef = React__namespace.useRef({
         forward: { sheet: {} },
@@ -203,6 +223,6 @@ reverse: { sheet: {} },
     const id = getSequenceId(sequenceIndex, sequenceId);
-    const { register, animationStates = {} } = React.useContext(AnimateContext);
+    const { register, animationStates = {} } = React__namespace.useContext(AnimateContext);
     const animateState = animationStates[id] || {};
-    const [, forceUpdate] = React.useState(false);
-    React.useEffect(() => {
+    const [, forceUpdate] = React__namespace.useState(false);
+    React__namespace.useEffect(() => {
         const styleTag = styleTagRef.current;
@@ -246,3 +266,3 @@ const animationName = animationNameRef.current;
     };
-    return render ? render({ style }) : React.createElement("div", { style: style || {} }, children);
+    return render ? render({ style }) : React__namespace.createElement("div", { style: style || {} }, children);
 }
@@ -252,4 +272,4 @@
     const { start, end, complete, onComplete, delay = 0, duration = DEFAULT_DURATION, easeType = DEFAULT_EASE_TYPE, } = props;
-    const transition = React.useMemo(() => `${ALL} ${duration}s ${easeType} ${delay}s`, [duration, easeType, delay]);
-    const [animate, setAnimate] = React.useState({
+    const transition = React__namespace.useMemo(() => `${ALL} ${duration}s ${easeType} ${delay}s`, [duration, easeType, delay]);
+    const [animate, setAnimate] = React__namespace.useState({
         isPlaying: false,
@@ -259,4 +279,4 @@ style: Object.assign(Object.assign({}, start), { transition }),
     const { isPlaying, style } = animate;
-    const onCompleteTimeRef = React.useRef();
-    React.useEffect(() => {
+    const onCompleteTimeRef = React__namespace.useRef();
+    React__namespace.useEffect(() => {
         if ((onCompleteTimeRef.current || complete) && isPlaying) {
@@ -277,3 +297,3 @@ onCompleteTimeRef.current = setTimeout(() => {
         style,
-        play: React.useCallback((isPlaying) => {
+        play: React__namespace.useCallback((isPlaying) => {
             setAnimate(Object.assign(Object.assign({}, animate), { style: Object.assign(Object.assign({}, (isPlaying ? end : start)), { transition }), isPlaying }));
@@ -286,15 +306,15 @@ }, []),
     const { duration = DEFAULT_DURATION, delay = 0, easeType = DEFAULT_EASE_TYPE, direction = DEFAULT_DIRECTION, fillMode = DEFAULT_FILLMODE, iterationCount = 1, keyframes, } = props;
-    const animationNameRef = React.useRef({
+    const animationNameRef = React__namespace.useRef({
         forward: '',
         reverse: '',
     });
-    const styleTagRef = React.useRef({
+    const styleTagRef = React__namespace.useRef({
         forward: { sheet: {} },
         reverse: { sheet: {} },
     });
-    const { register } = React.useContext(AnimateContext);
-    const [isPlaying, setIsPlaying] = React.useState(null);
-    const [isPaused, setIsPaused] = React.useState(false);
-    const playRef = React.useRef();
-    React.useEffect(() => {
+    const { register } = React__namespace.useContext(AnimateContext);
+    const [isPlaying, setIsPlaying] = React__namespace.useState(null);
+    const [isPaused, setIsPaused] = React__namespace.useState(false);
+    const playRef = React__namespace.useRef();
+    React__namespace.useEffect(() => {
         const styleTag = styleTagRef.current;
@@ -346,8 +366,8 @@ const animationName = animationNameRef.current;
     const defaultArray = createArrayWithNumbers(sequences.length).map((_, index) => props.sequences[index].start);
-    const [styles, setStyles] = React.useState(defaultArray);
-    const [isPlaying, setPlaying] = React.useState(false);
-    const animationNamesRef = React.useRef([]);
-    const styleTagRef = React.useRef([]);
-    const playRef = React.useRef();
-    React.useEffect(() => {
+    const [styles, setStyles] = React__namespace.useState(defaultArray);
+    const [isPlaying, setPlaying] = React__namespace.useState(false);
+    const animationNamesRef = React__namespace.useRef([]);
+    const styleTagRef = React__namespace.useRef([]);
+    const playRef = React__namespace.useRef();
+    React__namespace.useEffect(() => {
         sequences.forEach(({ keyframes = false }, i) => {
@@ -354,0 +374,0 @@ if (!Array.isArray(keyframes)) {

dist/types.d.ts

@@ -1,4 +0,2 @@
-export interface Style {
-    [key: string]: string | number;
-}
+import * as React from 'react';
 export interface AnimationType {
@@ -13,3 +11,3 @@ play?: boolean;
     render?: (data: {
-        style: Style | null;
+        style: React.CSSProperties | null;
     }) => any;
@@ -28,4 +26,4 @@ sequenceId?: string | number;
     iterationCount?: number;
-    start?: Style;
-    end?: Style;
+    start?: React.CSSProperties;
+    end?: React.CSSProperties;
     overlay?: number;
@@ -43,5 +41,5 @@ duration?: number;
     onComplete?: () => void;
-    start?: Style;
-    end?: Style;
-    complete?: Style;
+    start?: React.CSSProperties;
+    end?: React.CSSProperties;
+    complete?: React.CSSProperties;
     animationStates?: AnimationStateType;
@@ -48,0 +46,0 @@ }

dist/useAnimate.d.ts

@@ -1,6 +0,7 @@
-import { AnimationProps, Style } from './types';
+import * as React from 'react';
+import { AnimationProps } from './types';
 export default function useAnimate(props: AnimationProps): {
     isPlaying: boolean;
-    style: Style;
+    style: React.CSSProperties;
     play: (boolean: any) => void;
 };

dist/useAnimateGroup.d.ts

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

dist/useAnimateKeyframes.d.ts

@@ -1,4 +0,5 @@
-import { AnimateKeyframesProps, Style } from './types';
+import * as React from 'react';
+import { AnimateKeyframesProps } from './types';
 export default function useAnimateKeyframes(props: AnimateKeyframesProps): {
-    style: Style;
+    style: React.CSSProperties;
     play: (boolean: any) => void;
@@ -5,0 +6,0 @@ pause: (boolean: any) => void;

package.json

 {
   "name": "react-simple-animate",
-  "version": "3.3.13",
+  "version": "3.4.0",
   "description": "react simple animate",
@@ -25,3 +25,3 @@ "main": "dist/index.js",
     "test": "jest --coverage",
-    "testw": "yarn test -- --watchAll",
+    "test:watch": "yarn test -- --watchAll",
     "prepublish": "yarn test && yarn run clean && yarn build"
@@ -28,0 +28,0 @@ },

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

56187

increased by2.22%

Lines of code

924

increased by2.1%

No dependency changes