Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-simple-animate
Advanced tools
react-simple-animate - npm Package Compare versions
Comparing version 3.3.7 to 3.3.8
@@ -12,2 +12,2 @@ import * as React from 'react'; | ||
| }>; | ||
| export default function AnimateGroup(props: Props): JSX.Element; | ||
| export default function AnimateGroup({ play, sequences, children, }: Props): JSX.Element; |
@@ -1,30 +0,3 @@ | ||
| import { useState, useRef, useEffect, createElement, createContext, useContext, useMemo } from 'react'; | ||
| import { useState, useRef, useCallback, useEffect, createElement, createContext, useContext, useMemo } from 'react'; | ||
| /*! ***************************************************************************** | ||
| Copyright (c) Microsoft Corporation. | ||
| Permission to use, copy, modify, and/or distribute this software for any | ||
| purpose with or without fee is hereby granted. | ||
| THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH | ||
| REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY | ||
| AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, | ||
| INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM | ||
| LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR | ||
| OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR | ||
| PERFORMANCE OF THIS SOFTWARE. | ||
| ***************************************************************************** */ | ||
| function __rest(s, e) { | ||
| var t = {}; | ||
| for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) | ||
| t[p] = s[p]; | ||
| if (s != null && typeof Object.getOwnPropertySymbols === "function") | ||
| for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { | ||
| if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) | ||
| t[p[i]] = s[p[i]]; | ||
| } | ||
| return t; | ||
| } | ||
| var calculateTotalDuration = ({ duration = 0.3, delay = 0, overlay = 0, }) => duration + delay - overlay || 0; | ||
@@ -35,11 +8,21 @@ | ||
| function getSequenceId(sequenceIndex, sequenceId, defaultValue) { | ||
| if (isUndefined(sequenceId) && isUndefined(sequenceIndex)) | ||
| if (isUndefined(sequenceId) && isUndefined(sequenceIndex)) { | ||
| return defaultValue || 0; | ||
| if (sequenceIndex && sequenceIndex >= 0) | ||
| } | ||
| if (sequenceIndex && sequenceIndex >= 0) { | ||
| return sequenceIndex; | ||
| if (sequenceId) | ||
| } | ||
| if (sequenceId) { | ||
| return sequenceId; | ||
| } | ||
| return 0; | ||
| } | ||
| const DEFAULT_DURATION = 0.3; | ||
| const DEFAULT_EASE_TYPE = 'linear'; | ||
| const DEFAULT_DIRECTION = 'normal'; | ||
| const DEFAULT_FILLMODE = 'none'; | ||
| const RUNNING = 'running'; | ||
| const ALL = 'all'; | ||
| const AnimateContext = createContext({ | ||
@@ -49,12 +32,11 @@ animationStates: {}, | ||
| }); | ||
| function AnimateGroup(props) { | ||
| const { play, sequences = [], children } = props; | ||
| function AnimateGroup({ play, sequences = [], children, }) { | ||
| const [animationStates, setAnimationStates] = useState({}); | ||
| const animationsRef = useRef({}); | ||
| const register = (data) => { | ||
| const register = useCallback((data) => { | ||
| const { sequenceIndex, sequenceId } = data; | ||
| if (isUndefined(sequenceId) && isUndefined(sequenceIndex)) | ||
| return; | ||
| animationsRef.current[getSequenceId(sequenceIndex, sequenceId)] = data; | ||
| }; | ||
| if (!isUndefined(sequenceId) || !isUndefined(sequenceIndex)) { | ||
| animationsRef.current[getSequenceId(sequenceIndex, sequenceId)] = data; | ||
| } | ||
| }, []); | ||
| useEffect(() => { | ||
@@ -65,7 +47,4 @@ const sequencesToAnimate = Array.isArray(sequences) && sequences.length | ||
| const localAnimationState = {}; | ||
| (play ? sequencesToAnimate : [...sequencesToAnimate].reverse()).reduce((previous, current, currentIndex) => { | ||
| const { sequenceId, sequenceIndex } = current, restAttributes = __rest(current, ["sequenceId", "sequenceIndex"]); | ||
| const { duration: defaultDuration, delay, overlay } = restAttributes; | ||
| (play ? sequencesToAnimate : [...sequencesToAnimate].reverse()).reduce((previous, { sequenceId, sequenceIndex, duration = DEFAULT_DURATION, delay, overlay, }, currentIndex) => { | ||
| const id = getSequenceId(sequenceIndex, sequenceId, currentIndex); | ||
| const duration = defaultDuration || 0.3; | ||
| const currentTotalDuration = calculateTotalDuration({ | ||
@@ -90,2 +69,3 @@ duration, | ||
| setAnimationStates(localAnimationState); | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| }, [play]); | ||
@@ -98,3 +78,3 @@ return (createElement(AnimateContext.Provider, { value: { animationStates, register } }, children)); | ||
| function Animate(props) { | ||
| const { play, children, render, start, end, complete = '', onComplete, delay = 0, duration = 0.3, easeType = 'linear', sequenceId, sequenceIndex, } = props; | ||
| const { play, children, render, start, end, complete = '', onComplete, delay = 0, duration = DEFAULT_DURATION, easeType = DEFAULT_EASE_TYPE, sequenceId, sequenceIndex, } = props; | ||
| const onCompleteTimeRef = useRef(); | ||
@@ -105,8 +85,10 @@ const [style, setStyle] = useState(start || {}); | ||
| useEffect(() => { | ||
| if ((!isUndefined(sequenceIndex) && sequenceIndex >= 0) || sequenceId) | ||
| if ((!isUndefined(sequenceIndex) && sequenceIndex >= 0) || sequenceId) { | ||
| register(props); | ||
| } | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| }, []); | ||
| useEffect(() => { | ||
| const animationState = animationStates[id] || {}; | ||
| setStyle(Object.assign(Object.assign({}, (play || animationState.play ? end : start)), { transition: `all ${duration}s ${easeType} ${parseFloat(animationState.delay || delay)}s` })); | ||
| setStyle(Object.assign(Object.assign({}, (play || animationState.play ? end : start)), { transition: `${ALL} ${duration}s ${easeType} ${parseFloat(animationState.delay || delay)}s` })); | ||
| if (play && (complete || onComplete)) { | ||
@@ -118,5 +100,3 @@ onCompleteTimeRef.current = setTimeout(() => { | ||
| } | ||
| return () => { | ||
| onCompleteTimeRef.current && clearTimeout(onCompleteTimeRef.current); | ||
| }; | ||
| return () => onCompleteTimeRef.current && clearTimeout(onCompleteTimeRef.current); | ||
| }, [ | ||
@@ -193,4 +173,5 @@ id, | ||
| const index = Object.values(sheet.cssRules).findIndex(({ name }) => name === deleteName); | ||
| if (index >= 0) | ||
| if (index >= 0) { | ||
| sheet.deleteRule(index); | ||
| } | ||
| }; | ||
@@ -202,6 +183,6 @@ | ||
| var getPlayState = (pause) => pause ? 'paused' : 'running'; | ||
| var getPlayState = (pause) => (pause ? 'paused' : RUNNING); | ||
| function AnimateKeyframes(props) { | ||
| const { children, play = false, pause = false, render, duration = 0.3, delay = 0, easeType = 'linear', direction = 'normal', fillMode = 'none', iterationCount = 1, sequenceIndex, keyframes, sequenceId, } = props; | ||
| const { children, play = false, pause = false, render, duration = DEFAULT_DURATION, delay = 0, easeType = DEFAULT_EASE_TYPE, direction = DEFAULT_DIRECTION, fillMode = DEFAULT_FILLMODE, iterationCount = 1, sequenceIndex, keyframes, sequenceId, } = props; | ||
| let pauseValue; | ||
@@ -219,4 +200,7 @@ const animationNameRef = useRef({ | ||
| const { register, animationStates = {} } = useContext(AnimateContext); | ||
| const animateState = animationStates[id] || {}; | ||
| const [, forceUpdate] = useState(false); | ||
| useEffect(() => { | ||
| const styleTag = styleTagRef.current; | ||
| const animationName = animationNameRef.current; | ||
| animationNameRef.current.forward = createRandomName(); | ||
@@ -227,4 +211,4 @@ let result = createTag({ | ||
| }); | ||
| animationNameRef.current.reverse = createRandomName(); | ||
| styleTagRef.current.forward = result.styleTag; | ||
| animationNameRef.current.reverse = createRandomName(); | ||
| result = createTag({ | ||
@@ -236,14 +220,16 @@ animationName: animationNameRef.current.reverse, | ||
| register(props); | ||
| if (play) | ||
| if (play) { | ||
| forceUpdate(true); | ||
| } | ||
| return () => { | ||
| deleteRules(styleTagRef.current.forward.sheet, animationNameRef.current.forward); | ||
| deleteRules(styleTagRef.current.reverse.sheet, animationNameRef.current.reverse); | ||
| deleteRules(styleTag.forward.sheet, animationName.forward); | ||
| deleteRules(styleTag.reverse.sheet, animationName.reverse); | ||
| }; | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| }, []); | ||
| const animateState = animationStates[id] || {}; | ||
| if (animateState.controlled && !controlled.current) { | ||
| pauseValue = animateState.pause; | ||
| if (!animateState.pause) | ||
| if (!animateState.pause) { | ||
| controlled.current = true; | ||
| } | ||
| } | ||
@@ -254,6 +240,3 @@ else { | ||
| const style = { | ||
| animation: `${duration}s ${easeType} ${animateState.delay || | ||
| delay}s ${iterationCount} ${direction} ${fillMode} ${getPlayState(pauseValue)} ${((animateState.controlled | ||
| ? animateState.play | ||
| : play) | ||
| animation: `${duration}s ${easeType} ${animateState.delay || delay}s ${iterationCount} ${direction} ${fillMode} ${getPlayState(pauseValue)} ${((animateState.controlled ? animateState.play : play) | ||
| ? animationNameRef.current.forward | ||
@@ -266,4 +249,4 @@ : animationNameRef.current.reverse) || ''}`, | ||
| function useAnimate(props) { | ||
| 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 { 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 [style, setStyle] = useState(Object.assign(Object.assign({}, start), { transition })); | ||
@@ -301,3 +284,3 @@ const [isPlaying, setIsPlaying] = useState(false); | ||
| function useAnimateKeyframes(props) { | ||
| const { duration = 0.3, delay = 0, easeType = 'linear', direction = 'normal', fillMode = 'none', iterationCount = 1, keyframes, } = props; | ||
| const { duration = DEFAULT_DURATION, delay = 0, easeType = DEFAULT_EASE_TYPE, direction = DEFAULT_DIRECTION, fillMode = DEFAULT_FILLMODE, iterationCount = 1, keyframes, } = props; | ||
| const animationNameRef = useRef({ | ||
@@ -316,2 +299,4 @@ forward: '', | ||
| useEffect(() => { | ||
| const styleTag = styleTagRef.current; | ||
| const animationName = animationNameRef.current; | ||
| animationNameRef.current.forward = createRandomName(); | ||
@@ -331,5 +316,6 @@ let result = createTag({ | ||
| return () => { | ||
| deleteRules(styleTagRef.current.forward.sheet, animationNameRef.current.forward); | ||
| deleteRules(styleTagRef.current.reverse.sheet, animationNameRef.current.reverse); | ||
| deleteRules(styleTag.forward.sheet, animationName.forward); | ||
| deleteRules(styleTag.reverse.sheet, animationName.reverse); | ||
| }; | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| }, []); | ||
@@ -366,4 +352,5 @@ playRef.current = playRef.current | ||
| sequences.forEach(({ keyframes = false }, i) => { | ||
| if (!Array.isArray(keyframes)) | ||
| if (!Array.isArray(keyframes)) { | ||
| return; | ||
| } | ||
| if (!animationNamesRef.current[i]) { | ||
@@ -387,7 +374,9 @@ animationNamesRef.current[i] = {}; | ||
| return () => Object.values(animationNamesRef).forEach(({ forward, reverse }, i) => { | ||
| if (!styleTagRef[i]) | ||
| if (!styleTagRef[i]) { | ||
| return; | ||
| } | ||
| deleteRules(styleTagRef[i].sheet, forward); | ||
| deleteRules(styleTagRef[i].sheet, reverse); | ||
| }); | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| }, []); | ||
@@ -402,5 +391,5 @@ playRef.current = playRef.current | ||
| const styles = (isPlay ? sequences : [...sequences].reverse()).map((current, currentIndex) => { | ||
| const { duration = 0.3, delay = 0, overlay, keyframes, iterationCount = 1, easeType = 'linear', direction = 'normal', fillMode = 'none', end = {}, start = {}, } = current; | ||
| const { duration = DEFAULT_DURATION, delay = 0, overlay, keyframes, iterationCount = 1, easeType = DEFAULT_EASE_TYPE, direction = DEFAULT_DIRECTION, fillMode = DEFAULT_FILLMODE, end = {}, start = {}, } = current; | ||
| const delayDuration = currentIndex === 0 ? delay : totalDuration; | ||
| const transition = `all ${duration}s ${easeType} ${delayDuration}s`; | ||
| const transition = `${ALL} ${duration}s ${easeType} ${delayDuration}s`; | ||
| totalDuration = | ||
@@ -411,3 +400,3 @@ calculateTotalDuration({ duration, delay, overlay }) + | ||
| ? { | ||
| animation: `${duration}s ${easeType} ${delayDuration}s ${iterationCount} ${direction} ${fillMode} running ${isPlay | ||
| animation: `${duration}s ${easeType} ${delayDuration}s ${iterationCount} ${direction} ${fillMode} ${RUNNING} ${isPlay | ||
| ? animationRefWithOrder[currentIndex].forward | ||
@@ -414,0 +403,0 @@ : animationRefWithOrder[currentIndex].reverse}`, |
@@ -7,29 +7,2 @@ 'use strict'; | ||
| /*! ***************************************************************************** | ||
| Copyright (c) Microsoft Corporation. | ||
| Permission to use, copy, modify, and/or distribute this software for any | ||
| purpose with or without fee is hereby granted. | ||
| THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH | ||
| REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY | ||
| AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, | ||
| INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM | ||
| LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR | ||
| OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR | ||
| PERFORMANCE OF THIS SOFTWARE. | ||
| ***************************************************************************** */ | ||
| function __rest(s, e) { | ||
| var t = {}; | ||
| for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) | ||
| t[p] = s[p]; | ||
| if (s != null && typeof Object.getOwnPropertySymbols === "function") | ||
| for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { | ||
| if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) | ||
| t[p[i]] = s[p[i]]; | ||
| } | ||
| return t; | ||
| } | ||
| var calculateTotalDuration = ({ duration = 0.3, delay = 0, overlay = 0, }) => duration + delay - overlay || 0; | ||
@@ -40,11 +13,21 @@ | ||
| function getSequenceId(sequenceIndex, sequenceId, defaultValue) { | ||
| if (isUndefined(sequenceId) && isUndefined(sequenceIndex)) | ||
| if (isUndefined(sequenceId) && isUndefined(sequenceIndex)) { | ||
| return defaultValue || 0; | ||
| if (sequenceIndex && sequenceIndex >= 0) | ||
| } | ||
| if (sequenceIndex && sequenceIndex >= 0) { | ||
| return sequenceIndex; | ||
| if (sequenceId) | ||
| } | ||
| if (sequenceId) { | ||
| return sequenceId; | ||
| } | ||
| return 0; | ||
| } | ||
| const DEFAULT_DURATION = 0.3; | ||
| const DEFAULT_EASE_TYPE = 'linear'; | ||
| const DEFAULT_DIRECTION = 'normal'; | ||
| const DEFAULT_FILLMODE = 'none'; | ||
| const RUNNING = 'running'; | ||
| const ALL = 'all'; | ||
| const AnimateContext = React.createContext({ | ||
@@ -54,12 +37,11 @@ animationStates: {}, | ||
| }); | ||
| function AnimateGroup(props) { | ||
| const { play, sequences = [], children } = props; | ||
| function AnimateGroup({ play, sequences = [], children, }) { | ||
| const [animationStates, setAnimationStates] = React.useState({}); | ||
| const animationsRef = React.useRef({}); | ||
| const register = (data) => { | ||
| const register = React.useCallback((data) => { | ||
| const { sequenceIndex, sequenceId } = data; | ||
| if (isUndefined(sequenceId) && isUndefined(sequenceIndex)) | ||
| return; | ||
| animationsRef.current[getSequenceId(sequenceIndex, sequenceId)] = data; | ||
| }; | ||
| if (!isUndefined(sequenceId) || !isUndefined(sequenceIndex)) { | ||
| animationsRef.current[getSequenceId(sequenceIndex, sequenceId)] = data; | ||
| } | ||
| }, []); | ||
| React.useEffect(() => { | ||
@@ -70,7 +52,4 @@ const sequencesToAnimate = Array.isArray(sequences) && sequences.length | ||
| const localAnimationState = {}; | ||
| (play ? sequencesToAnimate : [...sequencesToAnimate].reverse()).reduce((previous, current, currentIndex) => { | ||
| const { sequenceId, sequenceIndex } = current, restAttributes = __rest(current, ["sequenceId", "sequenceIndex"]); | ||
| const { duration: defaultDuration, delay, overlay } = restAttributes; | ||
| (play ? sequencesToAnimate : [...sequencesToAnimate].reverse()).reduce((previous, { sequenceId, sequenceIndex, duration = DEFAULT_DURATION, delay, overlay, }, currentIndex) => { | ||
| const id = getSequenceId(sequenceIndex, sequenceId, currentIndex); | ||
| const duration = defaultDuration || 0.3; | ||
| const currentTotalDuration = calculateTotalDuration({ | ||
@@ -95,2 +74,3 @@ duration, | ||
| setAnimationStates(localAnimationState); | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| }, [play]); | ||
@@ -103,3 +83,3 @@ return (React.createElement(AnimateContext.Provider, { value: { animationStates, register } }, children)); | ||
| function Animate(props) { | ||
| const { play, children, render, start, end, complete = '', onComplete, delay = 0, duration = 0.3, easeType = 'linear', sequenceId, sequenceIndex, } = props; | ||
| const { play, children, render, start, end, complete = '', onComplete, delay = 0, duration = DEFAULT_DURATION, easeType = DEFAULT_EASE_TYPE, sequenceId, sequenceIndex, } = props; | ||
| const onCompleteTimeRef = React.useRef(); | ||
@@ -110,8 +90,10 @@ const [style, setStyle] = React.useState(start || {}); | ||
| React.useEffect(() => { | ||
| if ((!isUndefined(sequenceIndex) && sequenceIndex >= 0) || sequenceId) | ||
| if ((!isUndefined(sequenceIndex) && sequenceIndex >= 0) || sequenceId) { | ||
| register(props); | ||
| } | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| }, []); | ||
| React.useEffect(() => { | ||
| const animationState = animationStates[id] || {}; | ||
| setStyle(Object.assign(Object.assign({}, (play || animationState.play ? end : start)), { transition: `all ${duration}s ${easeType} ${parseFloat(animationState.delay || delay)}s` })); | ||
| setStyle(Object.assign(Object.assign({}, (play || animationState.play ? end : start)), { transition: `${ALL} ${duration}s ${easeType} ${parseFloat(animationState.delay || delay)}s` })); | ||
| if (play && (complete || onComplete)) { | ||
@@ -123,5 +105,3 @@ onCompleteTimeRef.current = setTimeout(() => { | ||
| } | ||
| return () => { | ||
| onCompleteTimeRef.current && clearTimeout(onCompleteTimeRef.current); | ||
| }; | ||
| return () => onCompleteTimeRef.current && clearTimeout(onCompleteTimeRef.current); | ||
| }, [ | ||
@@ -198,4 +178,5 @@ id, | ||
| const index = Object.values(sheet.cssRules).findIndex(({ name }) => name === deleteName); | ||
| if (index >= 0) | ||
| if (index >= 0) { | ||
| sheet.deleteRule(index); | ||
| } | ||
| }; | ||
@@ -207,6 +188,6 @@ | ||
| var getPlayState = (pause) => pause ? 'paused' : 'running'; | ||
| var getPlayState = (pause) => (pause ? 'paused' : RUNNING); | ||
| function AnimateKeyframes(props) { | ||
| const { children, play = false, pause = false, render, duration = 0.3, delay = 0, easeType = 'linear', direction = 'normal', fillMode = 'none', iterationCount = 1, sequenceIndex, keyframes, sequenceId, } = props; | ||
| const { children, play = false, pause = false, render, duration = DEFAULT_DURATION, delay = 0, easeType = DEFAULT_EASE_TYPE, direction = DEFAULT_DIRECTION, fillMode = DEFAULT_FILLMODE, iterationCount = 1, sequenceIndex, keyframes, sequenceId, } = props; | ||
| let pauseValue; | ||
@@ -224,4 +205,7 @@ const animationNameRef = React.useRef({ | ||
| const { register, animationStates = {} } = React.useContext(AnimateContext); | ||
| const animateState = animationStates[id] || {}; | ||
| const [, forceUpdate] = React.useState(false); | ||
| React.useEffect(() => { | ||
| const styleTag = styleTagRef.current; | ||
| const animationName = animationNameRef.current; | ||
| animationNameRef.current.forward = createRandomName(); | ||
@@ -232,4 +216,4 @@ let result = createTag({ | ||
| }); | ||
| animationNameRef.current.reverse = createRandomName(); | ||
| styleTagRef.current.forward = result.styleTag; | ||
| animationNameRef.current.reverse = createRandomName(); | ||
| result = createTag({ | ||
@@ -241,14 +225,16 @@ animationName: animationNameRef.current.reverse, | ||
| register(props); | ||
| if (play) | ||
| if (play) { | ||
| forceUpdate(true); | ||
| } | ||
| return () => { | ||
| deleteRules(styleTagRef.current.forward.sheet, animationNameRef.current.forward); | ||
| deleteRules(styleTagRef.current.reverse.sheet, animationNameRef.current.reverse); | ||
| deleteRules(styleTag.forward.sheet, animationName.forward); | ||
| deleteRules(styleTag.reverse.sheet, animationName.reverse); | ||
| }; | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| }, []); | ||
| const animateState = animationStates[id] || {}; | ||
| if (animateState.controlled && !controlled.current) { | ||
| pauseValue = animateState.pause; | ||
| if (!animateState.pause) | ||
| if (!animateState.pause) { | ||
| controlled.current = true; | ||
| } | ||
| } | ||
@@ -259,6 +245,3 @@ else { | ||
| const style = { | ||
| animation: `${duration}s ${easeType} ${animateState.delay || | ||
| delay}s ${iterationCount} ${direction} ${fillMode} ${getPlayState(pauseValue)} ${((animateState.controlled | ||
| ? animateState.play | ||
| : play) | ||
| animation: `${duration}s ${easeType} ${animateState.delay || delay}s ${iterationCount} ${direction} ${fillMode} ${getPlayState(pauseValue)} ${((animateState.controlled ? animateState.play : play) | ||
| ? animationNameRef.current.forward | ||
@@ -271,4 +254,4 @@ : animationNameRef.current.reverse) || ''}`, | ||
| function useAnimate(props) { | ||
| 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 { 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 [style, setStyle] = React.useState(Object.assign(Object.assign({}, start), { transition })); | ||
@@ -306,3 +289,3 @@ const [isPlaying, setIsPlaying] = React.useState(false); | ||
| function useAnimateKeyframes(props) { | ||
| const { duration = 0.3, delay = 0, easeType = 'linear', direction = 'normal', fillMode = 'none', iterationCount = 1, keyframes, } = props; | ||
| const { duration = DEFAULT_DURATION, delay = 0, easeType = DEFAULT_EASE_TYPE, direction = DEFAULT_DIRECTION, fillMode = DEFAULT_FILLMODE, iterationCount = 1, keyframes, } = props; | ||
| const animationNameRef = React.useRef({ | ||
@@ -321,2 +304,4 @@ forward: '', | ||
| React.useEffect(() => { | ||
| const styleTag = styleTagRef.current; | ||
| const animationName = animationNameRef.current; | ||
| animationNameRef.current.forward = createRandomName(); | ||
@@ -336,5 +321,6 @@ let result = createTag({ | ||
| return () => { | ||
| deleteRules(styleTagRef.current.forward.sheet, animationNameRef.current.forward); | ||
| deleteRules(styleTagRef.current.reverse.sheet, animationNameRef.current.reverse); | ||
| deleteRules(styleTag.forward.sheet, animationName.forward); | ||
| deleteRules(styleTag.reverse.sheet, animationName.reverse); | ||
| }; | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| }, []); | ||
@@ -371,4 +357,5 @@ playRef.current = playRef.current | ||
| sequences.forEach(({ keyframes = false }, i) => { | ||
| if (!Array.isArray(keyframes)) | ||
| if (!Array.isArray(keyframes)) { | ||
| return; | ||
| } | ||
| if (!animationNamesRef.current[i]) { | ||
@@ -392,7 +379,9 @@ animationNamesRef.current[i] = {}; | ||
| return () => Object.values(animationNamesRef).forEach(({ forward, reverse }, i) => { | ||
| if (!styleTagRef[i]) | ||
| if (!styleTagRef[i]) { | ||
| return; | ||
| } | ||
| deleteRules(styleTagRef[i].sheet, forward); | ||
| deleteRules(styleTagRef[i].sheet, reverse); | ||
| }); | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| }, []); | ||
@@ -407,5 +396,5 @@ playRef.current = playRef.current | ||
| const styles = (isPlay ? sequences : [...sequences].reverse()).map((current, currentIndex) => { | ||
| const { duration = 0.3, delay = 0, overlay, keyframes, iterationCount = 1, easeType = 'linear', direction = 'normal', fillMode = 'none', end = {}, start = {}, } = current; | ||
| const { duration = DEFAULT_DURATION, delay = 0, overlay, keyframes, iterationCount = 1, easeType = DEFAULT_EASE_TYPE, direction = DEFAULT_DIRECTION, fillMode = DEFAULT_FILLMODE, end = {}, start = {}, } = current; | ||
| const delayDuration = currentIndex === 0 ? delay : totalDuration; | ||
| const transition = `all ${duration}s ${easeType} ${delayDuration}s`; | ||
| const transition = `${ALL} ${duration}s ${easeType} ${delayDuration}s`; | ||
| totalDuration = | ||
@@ -416,3 +405,3 @@ calculateTotalDuration({ duration, delay, overlay }) + | ||
| ? { | ||
| animation: `${duration}s ${easeType} ${delayDuration}s ${iterationCount} ${direction} ${fillMode} running ${isPlay | ||
| animation: `${duration}s ${easeType} ${delayDuration}s ${iterationCount} ${direction} ${fillMode} ${RUNNING} ${isPlay | ||
| ? animationRefWithOrder[currentIndex].forward | ||
@@ -419,0 +408,0 @@ : animationRefWithOrder[currentIndex].reverse}`, |
@@ -26,3 +26,3 @@ export interface Style { | ||
| fillMode?: 'none' | 'forwards' | 'backwards' | 'both'; | ||
| iterationCount?: string | number; | ||
| iterationCount?: number; | ||
| start?: Style; | ||
@@ -29,0 +29,0 @@ end?: Style; |
@@ -1,1 +0,1 @@ | ||
| export default function getSequenceId(sequenceIndex: number | undefined, sequenceId: string | number | undefined, defaultValue?: string | number): string | number; | ||
| export default function getSequenceId(sequenceIndex?: number, sequenceId?: string | number, defaultValue?: string | number): number | string; |
| { | ||
| "name": "react-simple-animate", | ||
| "version": "3.3.7", | ||
| "version": "3.3.8", | ||
| "description": "react simple animate", | ||
@@ -41,4 +41,4 @@ "main": "dist/index.js", | ||
| "@types/react-test-renderer": "^16.9.2", | ||
| "@typescript-eslint/eslint-plugin": "^2.34.0", | ||
| "@typescript-eslint/parser": "^2.34.0", | ||
| "@typescript-eslint/eslint-plugin": "^3.0.0", | ||
| "@typescript-eslint/parser": "^3.0.0", | ||
| "coveralls": "^3.0.3", | ||
@@ -48,5 +48,6 @@ "enzyme": "^3.11.0", | ||
| "eslint": "^7.0.0", | ||
| "eslint-plugin-react-hooks": "^4.0.2", | ||
| "husky": "^4.2.5", | ||
| "jest": "^26.0.1", | ||
| "lint-staged": "^10.2.4", | ||
| "lint-staged": "^10.2.6", | ||
| "npm-run-all": "^4.1.5", | ||
@@ -57,7 +58,8 @@ "prettier": "^2.0.5", | ||
| "react-test-renderer": "^16.13.1", | ||
| "rollup": "^2.10.5", | ||
| "rollup": "^2.10.7", | ||
| "rollup-plugin-typescript2": "^0.27.1", | ||
| "ts-jest": "^26.0.0", | ||
| "typescript": "^3.9.3", | ||
| "uglify-es": "^3.3.9" | ||
| "uglify-es": "^3.3.9", | ||
| "eslint-plugin-react": "^7.20.0" | ||
| }, | ||
@@ -76,6 +78,5 @@ "peerDependencies": { | ||
| "eslint --fix", | ||
| "prettier --config ./.prettierrc --write", | ||
| "git add" | ||
| "prettier --config ./.prettierrc --write" | ||
| ] | ||
| } | ||
| } |
New alerts
License Policy Violation
LicenseThis 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
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Number of package files
- increased by2.56%
40
Worsened metrics
- Total package byte prevSize
- decreased by-1.91%
45077
- Dev dependency count
- increased by8.33%
26
- Lines of code
- decreased by-0.98%
907
No dependency changes