use named export for tween variables

femioladeji · Feb 18, 2023 · c8857ac · c8857ac
1 parent 6542ff5
commit c8857ac
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 17 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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<SlideshowRef, ZoomProps>((props, ref) =
     );
     const wrapperRef = useRef<HTMLDivElement>(null);
     const innerWrapperRef = useRef<any>(null);
-    const tweenGroup = useRef(new TWEEN.Group());
+    const tweenGroup = useRef(new Group());
     const timeout = useRef<NodeJS.Timeout>();
     const resizeObserver = useRef<any>();
     const childrenCount = useMemo(() => React.Children.count(props.children), [props.children]);
@@ -161,7 +161,7 @@ export const FadeZoom = React.forwardRef<SlideshowRef, ZoomProps>((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
@@ -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
@@ -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<SlideshowRef, SlideProps>((props, ref) =>
     const [wrapperWidth, setWrapperWidth] = useState<number>(0);
     const wrapperRef = useRef<HTMLDivElement>(null);
     const innerWrapperRef = useRef<any>(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<SlideshowRef, SlideProps>((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) {