diff --git a/package-lock.json b/package-lock.json index ed6a457..d0e7504 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "react-slideshow-image", - "version": "4.2.0", + "version": "4.2.1", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "react-slideshow-image", - "version": "4.2.0", + "version": "4.2.1", "license": "MIT", "dependencies": { "@tweenjs/tween.js": "^18.6.4", diff --git a/package.json b/package.json index 9f0e9cd..6b8c17f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-slideshow-image", - "version": "4.2.0", + "version": "4.2.1", "description": "An image slideshow with react", "license": "MIT", "main": "dist/index.js", diff --git a/src/fadezoom.tsx b/src/fadezoom.tsx index 8079102..bf8671c 100644 --- a/src/fadezoom.tsx +++ b/src/fadezoom.tsx @@ -7,7 +7,7 @@ import React, { useCallback, } from 'react'; import ResizeObserver from 'resize-observer-polyfill'; -import TWEEN from '@tweenjs/tween.js'; +import { Group, Tween } from '@tweenjs/tween.js'; import { getEasing, getStartingIndex, @@ -24,7 +24,7 @@ export const FadeZoom = React.forwardRef((props, ref) = ); const wrapperRef = useRef(null); const innerWrapperRef = useRef(null); - const tweenGroup = useRef(new TWEEN.Group()); + const tweenGroup = useRef(new Group()); const timeout = useRef(); const resizeObserver = useRef(); const childrenCount = useMemo(() => React.Children.count(props.children), [props.children]); @@ -161,7 +161,7 @@ export const FadeZoom = React.forwardRef((props, ref) = animate(); - const tween = new TWEEN.Tween(value, tweenGroup.current) + const tween = new Tween(value, tweenGroup.current) .to({ opacity: 1, scale: props.scale }, props.transitionDuration) .onUpdate((value) => { if (!innerWrapperRef.current) { diff --git a/src/helpers.tsx b/src/helpers.tsx index 2eea8ae..8e1865d 100644 --- a/src/helpers.tsx +++ b/src/helpers.tsx @@ -8,7 +8,7 @@ import { TweenEasingFn, ZoomProps, } from './types'; -import TWEEN from '@tweenjs/tween.js'; +import { Easing } from '@tweenjs/tween.js'; export const getStartingIndex = (children: ReactNode, defaultIndex?: number): number => { if (defaultIndex && defaultIndex < React.Children.count(children)) { @@ -28,13 +28,13 @@ export const getResponsiveSettings = ( }; const EASING_METHODS: { [key: string]: TweenEasingFn } = { - linear: TWEEN.Easing.Linear.None, - ease: TWEEN.Easing.Quadratic.InOut, - 'ease-in': TWEEN.Easing.Quadratic.In, - 'ease-out': TWEEN.Easing.Quadratic.Out, - cubic: TWEEN.Easing.Cubic.InOut, - 'cubic-in': TWEEN.Easing.Cubic.In, - 'cubic-out': TWEEN.Easing.Cubic.Out, + linear: Easing.Linear.None, + ease: Easing.Quadratic.InOut, + 'ease-in': Easing.Quadratic.In, + 'ease-out': Easing.Quadratic.Out, + cubic: Easing.Cubic.InOut, + 'cubic-in': Easing.Cubic.In, + 'cubic-out': Easing.Cubic.Out, }; export const getEasing = (easeMethod?: string): TweenEasingFn => { diff --git a/src/slide.tsx b/src/slide.tsx index 02571f8..94b1d5a 100644 --- a/src/slide.tsx +++ b/src/slide.tsx @@ -7,7 +7,7 @@ import React, { useCallback, } from 'react'; import ResizeObserver from 'resize-observer-polyfill'; -import TWEEN from '@tweenjs/tween.js'; +import { Group, Tween } from '@tweenjs/tween.js'; import { getEasing, getResponsiveSettings, @@ -24,7 +24,7 @@ export const Slide = React.forwardRef((props, ref) => const [wrapperWidth, setWrapperWidth] = useState(0); const wrapperRef = useRef(null); const innerWrapperRef = useRef(null); - const tweenGroup = useRef(new TWEEN.Group()); + const tweenGroup = useRef(new Group()); const responsiveSettings = useMemo( () => getResponsiveSettings(wrapperWidth, props.responsive), [wrapperWidth, props.responsive] @@ -298,7 +298,7 @@ export const Slide = React.forwardRef((props, ref) => const value = { margin: -childWidth * (currentIndex + getOffset()) + distanceSwiped, }; - const tween = new TWEEN.Tween(value, tweenGroup.current) + const tween = new Tween(value, tweenGroup.current) .to({ margin: -childWidth * (toIndex + getOffset()) }, transitionDuration) .onUpdate((value) => { if (innerWrapperRef.current) {