react-magic-card 0.0.4 → 0.0.5

package/dist/MagicCircle/index.d.ts

@@ -32,7 +32,7 @@ type TransitionProperty = {
     restDelta?: number;
 };
 type MagicCircleProps = {
-    data: ImageProperty[];
+    images: ImageProperty[];
     width: number;
     height: number;
     radius: number;
@@ -47,5 +47,5 @@ type MagicCircleProps = {
     classImage?: string;
     classImageUnique?: string;
 };
-export declare const MagicCircle: ({ data, width, height, radius, controller, start, dynamic, wheelDelay, animate, initial, transition, className, classImage, classImageUnique }: MagicCircleProps) => React.JSX.Element;
+export declare const MagicCircle: ({ images, width, height, radius, controller, start, dynamic, wheelDelay, animate, initial, transition, className, classImage, classImageUnique }: MagicCircleProps) => React.JSX.Element;
 export {};

package/dist/MagicCircle/index.js

@@ -27,80 +27,100 @@ exports.MagicCircle = void 0;
 const react_1 = __importStar(require("react"));
 const framer_motion_1 = require("framer-motion");
 require("./main.css");
-const MagicCircle = ({ data, width, height, radius, controller, start, dynamic, wheelDelay, animate, initial, transition, className, classImage, classImageUnique }) => {
+const MagicCircle = ({ images, width, height, radius, controller, start, dynamic, wheelDelay, animate, initial, transition, className, classImage, classImageUnique }) => {
     const [count, setCount] = (0, react_1.useState)(0);
+    const [touchStartY, setTouchStartY] = (0, react_1.useState)(0);
     const [hasDelayed, setHasDelayed] = (0, react_1.useState)(true);
-    const [images, setImages] = (0, react_1.useState)(data);
     const [select, setSelect] = (0, react_1.useState)(start);
     const ref = (0, react_1.useRef)(null);
-    const shiftRight = (0, react_1.useCallback)(() => {
-        setImages(arr => {
-            const lastElement = arr.pop();
-            arr.unshift(lastElement);
-            setSelect(select == images.length - 1 ? 0 : select + 1);
-            return arr;
-        });
-    }, [images.length, select]);
-    const shiftLeft = (0, react_1.useCallback)(() => {
-        setImages(arr => {
-            const firstElement = arr.shift();
-            arr.push(firstElement);
-            setSelect(select == 0 ? images.length - 1 : select - 1);
-            return arr;
-        });
-    }, [images.length, select]);
     const centralAngle = ((2 * Math.PI) / images.length) * (180 / Math.PI);
-    const controlRotation = (0, react_1.useCallback)((e) => {
+    // Functions of the rotation and select and delay.
+    // turn left
+    const shiftLeft = (0, react_1.useCallback)(() => {
+        setHasDelayed(false);
+        setSelect(select == images.length - 1 ? 0 : select + 1);
+        if (dynamic)
+            return setCount(count - centralAngle);
+    }, [centralAngle, count, dynamic, images.length, select]);
+    // turn right
+    const shiftRight = (0, react_1.useCallback)(() => {
+        setHasDelayed(false);
+        setSelect(select == 0 ? images.length - 1 : select - 1);
+        if (dynamic)
+            return setCount(count + centralAngle);
+    }, [centralAngle, count, dynamic, images.length, select]);
+    // Function of the desktop.
+    const handleWheel = (0, react_1.useCallback)((e) => {
         const delta = e.deltaY;
-        if (delta > 0) {
-            setHasDelayed(false);
-            for (let i = 0; i < images.length; i++)
-                shiftRight();
-            if (dynamic)
-                return setCount(count - centralAngle);
-        }
-        if (delta < 0) {
-            setHasDelayed(false);
-            for (let i = 0; i < images.length; i++)
-                shiftLeft();
-            if (dynamic)
-                return setCount(count + centralAngle);
-        }
-    }, [dynamic, count, centralAngle, images.length, shiftRight, shiftLeft]);
+        if (delta > 0)
+            shiftLeft();
+        if (delta < 0)
+            shiftRight();
+    }, [shiftLeft, shiftRight]);
+    // Get a start y position in touchStartY.
+    const handleTouchStart = (event) => {
+        const touch = event.touches[0];
+        setTouchStartY(touch.clientY);
+    };
+    // Function of the mobile.
+    const handleTouchMove = (0, react_1.useCallback)((event) => {
+        const touch = event.touches[0];
+        const deltaY = touch.clientY - touchStartY;
+        if (deltaY > 0)
+            shiftLeft();
+        if (deltaY < 0)
+            shiftRight();
+    }, [shiftLeft, shiftRight, touchStartY]);
+    // Main functional, exit function if ref and hasDelayed does not exist.
     (0, react_1.useEffect)(() => {
         const range = ref.current;
+        if (!range || !hasDelayed)
+            return;
         const timeId = setTimeout(() => {
             setHasDelayed(true);
         }, wheelDelay);
-        if (!range || !hasDelayed)
-            return;
-        range.addEventListener('wheel', controlRotation, { passive: false });
+        // Add handle event when component mount and deps update.
+        range.addEventListener('wheel', handleWheel);
+        range.addEventListener('touchstart', handleTouchStart);
+        range.addEventListener('touchmove', handleTouchMove);
+        // Clean up event and timeId when component is unmount.
         return () => {
-            range.removeEventListener('wheel', controlRotation);
+            range.removeEventListener('wheel', handleWheel);
+            range.removeEventListener('touchstart', handleTouchStart);
+            range.removeEventListener('touchmove', handleTouchMove);
             clearTimeout(timeId);
         };
-    }, [count, hasDelayed, controlRotation, wheelDelay]);
-    const enterControll = () => {
+    }, [handleTouchMove, handleWheel, hasDelayed, wheelDelay]);
+    // Functions of the controller.
+    // entry ref area.
+    const enterControll = (e) => {
+        e.preventDefault();
         document.body.style.overflow = 'hidden';
     };
+    // leave ref area.
     const leaveControll = () => {
         document.body.style.overflow = 'auto';
     };
+    // Added event when component is mounted.
     (0, react_1.useEffect)(() => {
         const range = ref.current;
         if (!range)
             return;
-        range.addEventListener('mouseover', enterControll);
+        // Add event.
+        range.addEventListener('mouseover', enterControll, { passive: false });
         range.addEventListener('mouseout', leaveControll);
-        range.addEventListener('touchmove', leaveControll, { passive: false });
+        range.addEventListener('touchstart', enterControll, { passive: false });
+        range.addEventListener('touchout', leaveControll);
+        // Clean up event when component is unmount.
         return () => {
             range.removeEventListener('mouseover', enterControll);
             range.removeEventListener('mouseout', leaveControll);
-            range.removeEventListener('touchmove', leaveControll);
+            range.removeEventListener('touchstart', enterControll);
+            range.removeEventListener('touchout', leaveControll);
         };
     }, []);
     // angle between images.
-    const angle = parseFloat((2 * Math.PI).toFixed(15)) / data.length;
+    const angle = parseFloat((2 * Math.PI).toFixed(15)) / images.length;
     return (react_1.default.createElement(framer_motion_1.LazyMotion, { features: framer_motion_1.domAnimation },
         react_1.default.createElement(framer_motion_1.m.div, { ref: ref, className: className + ' ' + 'outer', style: {
                 width: radius * 2 + controller + 'px',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-magic-card",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "image gallery component with framer motion",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/readme.md

@@ -15,23 +15,23 @@ npm install react-magic-card framer-motion
 ## Usage
 
 ```tsx
-import { MagicCircle } from 'react-magic-card'
+import { MagicCircle } from "react-magic-card";
 
 function MyComponent() {
   const images = [
     {
-      src: '/1.jpeg',
-      alt: '1image'
+      src: "/1.jpeg",
+      alt: "1image",
     },
     {
-      src: '/2.jpeg',
-      alt: '2image'
+      src: "/2.jpeg",
+      alt: "2image",
     },
     {
-      src: '/3.jpeg',
-      alt: '3image'
-    }
-  ]
+      src: "/3.jpeg",
+      alt: "3image",
+    },
+  ];
 
   return (
     <MagicCircle
@@ -51,29 +51,29 @@ function MyComponent() {
         selectScale: 1.6,
         selectRotateX: 40,
         selectRotateY: 40,
-        selectRotateZ: -10
+        selectRotateZ: -10,
       }}
       transition={{ duration: 0.2 }}
     />
-  )
+  );
 }
 ```
 
-## Properties
-
-- data: An array a images property objects for src and alt.
-- width: The width of single image.
-- height: The height a single image.
-- dynamic: A flag indicating whether dynamic rotation is allow.
-- start: The Index number, start scale position
-- radius: The radius of the circle.
-- controller: The diameter plus the value of the controller is the size of the controller.
-- className: The class name of the component.
-- classImage: The class name of the images.
-- classImageUnique: An index number is assigned to the end of the class name set for this.
-- animate: An object in the animation property.
-- initial: An object in the animation property.
-- transition: An object in the transition property.
+| Property         | Explanation                                                              |
+| ---------------- | ------------------------------------------------------------------------ |
+| images           | array of images and objects containing the src and alt properties.       |
+| width            | width of a single image.                                                 |
+| height           | height of a single image.                                                |
+| dynamic          | indicating whether dynamic rotation is allowed.                          |
+| start            | index number of the starting scale position.                             |
+| radius           | radius of the circle.                                                    |
+| controller       | diameter plus the value of the controller is the size of the controller. |
+| className        | class name of the component.                                             |
+| classImage       | class name of the images.                                                |
+| classImageUnique | index number is assigned to the end of the class name set for this.      |
+| animate          | object in the animation property.                                        |
+| initial          | object in the animation property.                                        |
+| transition       | object in the transition property.                                       |
 
 ## Animation property