react-magic-card 0.1.23 → 0.2.0

package/README.md

@@ -81,7 +81,8 @@ function MyComponent() {
 | animate          | object in the animation property                                  |
 | initial          | object in the animation property                                  |
 | transition       | object in the transition property                                 |
-| pickTransition   | object in the transition property                                 |
+| pickScale        | whether to turn off pick after selection, default true            |
+| pickTransition   | object in the tansition property                                  |
 | pickProperty     | object in the pick property                                       |
 
 ## MagicCircle Properties

package/dist/MagicCircle/index.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import type { MagicCircleProps } from '../types';
-export declare const MagicCircle: ({ images, height, width, dynamic, clockwise, radius, start, delay, controller, offsetIndex, reverseIndex, loading, className, classImages, classImageSelect, classImageUnique, animate, initial, transition, pickProperty, pickTransition }: MagicCircleProps) => React.JSX.Element;
+export declare const MagicCircle: ({ images, height, width, dynamic, clockwise, radius, start, delay, controller, offsetIndex, reverseIndex, loading, className, classImages, classImageSelect, classImageUnique, animate, initial, transition, pickScale, pickProperty, pickTransition }: MagicCircleProps) => React.JSX.Element;

package/dist/MagicCircle/index.js

@@ -31,7 +31,7 @@ const react_1 = __importStar(require("react"));
 const framer_motion_1 = require("framer-motion");
 const styles_module_css_1 = __importDefault(require("./styles.module.css"));
 const PickImage_1 = __importDefault(require("../common/PickImage"));
-const MagicCircle = ({ images, height, width, dynamic = true, clockwise = true, radius, start, delay = 100, controller, offsetIndex = 0, reverseIndex = true, loading, className, classImages, classImageSelect, classImageUnique, animate, initial, transition, pickProperty, pickTransition }) => {
+const MagicCircle = ({ images, height, width, dynamic = true, clockwise = true, radius, start, delay = 100, controller, offsetIndex = 0, reverseIndex = true, loading, className, classImages, classImageSelect, classImageUnique, animate, initial, transition, pickScale = true, pickProperty, pickTransition }) => {
     const [count, setCount] = (0, react_1.useState)(0);
     const [touchStartY, setTouchStartY] = (0, react_1.useState)(0);
     const [touchStartX, setTouchStartX] = (0, react_1.useState)(0);
@@ -39,8 +39,8 @@ const MagicCircle = ({ images, height, width, dynamic = true, clockwise = true,
     const [hasDelayed, setHasDelayed] = (0, react_1.useState)(true);
     const [select, setSelect] = (0, react_1.useState)(start);
     const [hasPick, setHasPick] = (0, react_1.useState)(false);
-    const div1Ref = (0, react_1.useRef)(null);
-    const div2Ref = (0, react_1.useRef)(null);
+    const refOuter = (0, react_1.useRef)(null);
+    const refPicker = (0, react_1.useRef)(null);
     const centralAngle = ((2 * Math.PI) / images.length) * (180 / Math.PI);
     // Functions of the rotation and select and delay.
     // turn left
@@ -85,66 +85,61 @@ const MagicCircle = ({ images, height, width, dynamic = true, clockwise = true,
     }, [clockwise, hasPick, shiftLeft, shiftRight, touchStartX, touchStartY]);
     // Main functional, exit function if ref and hasDelayed does not exist.
     (0, react_1.useEffect)(() => {
-        const elm1Div = div1Ref.current;
-        const elm2Div = div2Ref.current;
-        const elms = [elm1Div, elm2Div];
+        const outer = refOuter.current;
+        const picker = refPicker.current;
+        ``;
         const timeId = setTimeout(() => {
             setHasDelayed(true);
         }, delay);
         // Add handle event when component mount and deps update.
-        elms.forEach(elm => {
-            if (!elm || !hasDelayed)
-                return;
-            elm.addEventListener('wheel', handleWheel, { passive: true });
-            elm.addEventListener('touchstart', handleTouchStart, { passive: true });
-            elm.addEventListener('touchmove', handleTouchMove, { passive: true });
-        });
+        outer.addEventListener('wheel', handleWheel, { passive: true });
+        outer.addEventListener('touchstart', handleTouchStart, { passive: true });
+        outer.addEventListener('touchmove', handleTouchMove, { passive: true });
+        picker.addEventListener('wheel', handleWheel, { passive: true });
+        picker.addEventListener('touchstart', handleTouchStart, { passive: true });
+        picker.addEventListener('touchmove', handleTouchMove, { passive: true });
         // Clean up event and timeId when component is unmount.
         return () => {
-            elms.forEach(elm => {
-                if (!elm)
-                    return;
-                elm.removeEventListener('wheel', handleWheel);
-                elm.removeEventListener('touchstart', handleTouchStart);
-                elm.removeEventListener('touchmove', handleTouchMove);
-            });
+            outer.removeEventListener('wheel', handleWheel);
+            outer.removeEventListener('touchstart', handleTouchStart);
+            outer.removeEventListener('touchmove', handleTouchMove);
+            picker.removeEventListener('wheel', handleWheel);
+            picker.removeEventListener('touchstart', handleTouchStart);
+            picker.removeEventListener('touchmove', handleTouchMove);
             clearTimeout(timeId);
         };
     }, [handleTouchMove, handleWheel, hasDelayed, delay]);
-    // Functions of the area controller.
-    // entry ref area.
-    const enterControll = (e) => {
-        e.preventDefault();
-        document.body.style.overflow = 'hidden';
-    };
-    // leave ref area.
-    const leaveControll = () => {
-        document.body.style.overflow = 'auto';
-    };
+    // The controll start or end.
     // Added event when component is mounted.
     (0, react_1.useEffect)(() => {
-        const elm1Div = div1Ref.current;
-        const elm2Div = div2Ref.current;
-        const elms = [elm1Div, elm2Div];
+        const enterControll = (e) => {
+            e.preventDefault();
+            document.body.style.overflow = 'hidden';
+        };
+        const leaveControll = () => {
+            document.body.style.overflow = 'auto';
+        };
+        const outer = refOuter.current;
+        const picker = refPicker.current;
         // Add event.
-        elms.forEach(elm => {
-            if (!elm)
-                return;
-            elm.addEventListener('mouseover', enterControll, { passive: false });
-            elm.addEventListener('mouseout', leaveControll);
-            elm.addEventListener('touchmove', enterControll, { passive: false });
-            elm.addEventListener('touchend', leaveControll);
-        });
+        outer.addEventListener('mouseover', enterControll, { passive: false });
+        outer.addEventListener('mouseout', leaveControll);
+        outer.addEventListener('touchmove', enterControll, { passive: false });
+        outer.addEventListener('touchend', leaveControll);
+        picker.addEventListener('mouseover', enterControll, { passive: false });
+        picker.addEventListener('mouseout', leaveControll);
+        picker.addEventListener('touchmove', enterControll, { passive: false });
+        picker.addEventListener('touchend', leaveControll);
         // Clean up event when component is unmount.
         return () => {
-            elms.forEach(elm => {
-                if (!elm)
-                    return;
-                elm.removeEventListener('mouseover', enterControll);
-                elm.removeEventListener('mouseout', leaveControll);
-                elm.removeEventListener('touchmove', enterControll);
-                elm.removeEventListener('touchend', leaveControll);
-            });
+            outer.removeEventListener('mouseover', enterControll);
+            outer.removeEventListener('mouseout', leaveControll);
+            outer.removeEventListener('touchmove', enterControll);
+            outer.removeEventListener('touchend', leaveControll);
+            picker.removeEventListener('mouseover', enterControll);
+            picker.removeEventListener('mouseout', leaveControll);
+            picker.removeEventListener('touchmove', enterControll);
+            picker.removeEventListener('touchend', leaveControll);
         };
     }, []);
     // angle between.
@@ -162,7 +157,7 @@ const MagicCircle = ({ images, height, width, dynamic = true, clockwise = true,
     };
     return (react_1.default.createElement(framer_motion_1.LazyMotion, { features: framer_motion_1.domAnimation },
         react_1.default.createElement("div", { className: className },
-            react_1.default.createElement(framer_motion_1.m.div, { ref: div1Ref, tabIndex: offsetIndex <= 0 ? 0 : offsetIndex - 1, onKeyDown: handleKeyPress, className: styles_module_css_1.default.outer, style: {
+            react_1.default.createElement(framer_motion_1.m.div, { className: styles_module_css_1.default.outer, ref: refOuter, tabIndex: offsetIndex <= 0 ? 0 : offsetIndex - 1, onKeyDown: handleKeyPress, style: {
                     zIndex: offsetIndex - 1,
                     width: radius * 2 + controller + 'px',
                     height: radius * 2 + controller + 'px'
@@ -206,7 +201,7 @@ const MagicCircle = ({ images, height, width, dynamic = true, clockwise = true,
                                 : initial === null || initial === void 0 ? void 0 : initial.opacity
                         }, transition: transition, onClick: () => {
                             setSelect(index);
-                            hasSelect && setHasPick(true);
+                            hasSelect && pickScale && setHasPick(true);
                         }, className: classImages +
                             ' ' +
                             (hasSelect && classImageSelect) +
@@ -227,8 +222,7 @@ const MagicCircle = ({ images, height, width, dynamic = true, clockwise = true,
                         } }));
                 }))),
             react_1.default.createElement(PickImage_1.default, { onClick: () => {
-                    leaveControll();
                     setHasPick(false);
-                }, hasPick: hasPick, classPick: pickProperty === null || pickProperty === void 0 ? void 0 : pickProperty.classPick, white: pickProperty === null || pickProperty === void 0 ? void 0 : pickProperty.white, alpha: pickProperty === null || pickProperty === void 0 ? void 0 : pickProperty.alpha, blur: pickProperty === null || pickProperty === void 0 ? void 0 : pickProperty.blur, scale: pickProperty === null || pickProperty === void 0 ? void 0 : pickProperty.scale, offset: pickProperty === null || pickProperty === void 0 ? void 0 : pickProperty.offset, hasShift: hasShift, argRef: div2Ref, argKey: select, src: images[select].src, alt: images[select].alt, width: width, height: height, transition: pickTransition, zIndex: frontImage }))));
+                }, hasPick: hasPick, classPick: pickProperty === null || pickProperty === void 0 ? void 0 : pickProperty.classPick, white: pickProperty === null || pickProperty === void 0 ? void 0 : pickProperty.white, alpha: pickProperty === null || pickProperty === void 0 ? void 0 : pickProperty.alpha, blur: pickProperty === null || pickProperty === void 0 ? void 0 : pickProperty.blur, scale: pickProperty === null || pickProperty === void 0 ? void 0 : pickProperty.scale, offset: pickProperty === null || pickProperty === void 0 ? void 0 : pickProperty.offset, hasShift: hasShift, argRef: refPicker, argKey: select, src: images[select].src, alt: images[select].alt, width: width, height: height, transition: pickTransition, zIndex: frontImage }))));
 };
 exports.MagicCircle = MagicCircle;

package/dist/MagicStraight/index.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import type { MagicStraightProps } from '../types';
-export declare const MagicStraight: ({ images, height, width, vertical, margin, selectOffsetX, selectOffsetY, start, controller, delay, offsetIndex, reverseIndex, loading, className, classImages, classImageSelect, classImageUnique, animate, initial, transition, pickProperty, pickTransition }: MagicStraightProps) => React.JSX.Element;
+export declare const MagicStraight: ({ images, height, width, vertical, margin, selectOffsetX, selectOffsetY, start, controller, delay, offsetIndex, reverseIndex, loading, className, classImages, classImageSelect, classImageUnique, animate, initial, transition, pickScale, pickProperty, pickTransition }: MagicStraightProps) => React.JSX.Element;

package/dist/MagicStraight/index.js

@@ -31,15 +31,15 @@ const react_1 = __importStar(require("react"));
 const framer_motion_1 = require("framer-motion");
 const styles_module_css_1 = __importDefault(require("./styles.module.css"));
 const PickImage_1 = __importDefault(require("../common/PickImage"));
-const MagicStraight = ({ images, height, width, vertical = true, margin = 0, selectOffsetX = 0, selectOffsetY = 0, start, controller, delay = 20, offsetIndex = 0, reverseIndex = true, loading, className, classImages, classImageSelect, classImageUnique, animate, initial, transition, pickProperty, pickTransition }) => {
+const MagicStraight = ({ images, height, width, vertical = true, margin = 0, selectOffsetX = 0, selectOffsetY = 0, start, controller, delay = 20, offsetIndex = 0, reverseIndex = true, loading, className, classImages, classImageSelect, classImageUnique, animate, initial, transition, pickScale = true, pickProperty, pickTransition }) => {
     const [touchStartY, setTouchStartY] = (0, react_1.useState)(0);
     const [touchStartX, setTouchStartX] = (0, react_1.useState)(0);
     const [hasShift, setHasShift] = (0, react_1.useState)(false);
     const [hasDelayed, setHasDelayed] = (0, react_1.useState)(true);
     const [select, setSelect] = (0, react_1.useState)(start);
     const [hasPick, setHasPick] = (0, react_1.useState)(false);
-    const div1Ref = (0, react_1.useRef)(null);
-    const div2Ref = (0, react_1.useRef)(null);
+    const refOuter = (0, react_1.useRef)(null);
+    const refPicker = (0, react_1.useRef)(null);
     // Functions of the swipe and wheel a shifting.
     // turn left
     const shiftLeft = (0, react_1.useCallback)(() => {
@@ -95,66 +95,61 @@ const MagicStraight = ({ images, height, width, vertical = true, margin = 0, sel
     }, [hasPick, shiftLeft, shiftRight, touchStartX, touchStartY, vertical]);
     // Main functional, exit function if ref and hasDelayed does not exist.
     (0, react_1.useEffect)(() => {
-        const elm1Div = div1Ref.current;
-        const elm2Div = div2Ref.current;
-        const elms = [elm1Div, elm2Div];
+        const outer = refOuter.current;
+        const picker = refPicker.current;
         const timeId = setTimeout(() => {
             setHasDelayed(true);
         }, delay);
         // Add handle event when component mount and deps update.
-        elms.forEach(elm => {
-            if (!elm || !hasDelayed)
-                return;
-            elm.addEventListener('wheel', handleWheel, { passive: true });
-            elm.addEventListener('touchstart', handleTouchStart, { passive: true });
-            elm.addEventListener('touchmove', handleTouchMove, { passive: true });
-        });
+        outer.addEventListener('wheel', handleWheel, { passive: true });
+        outer.addEventListener('touchstart', handleTouchStart, { passive: true });
+        outer.addEventListener('touchmove', handleTouchMove, { passive: true });
+        picker.addEventListener('wheel', handleWheel, { passive: true });
+        picker.addEventListener('touchstart', handleTouchStart, { passive: true });
+        picker.addEventListener('touchmove', handleTouchMove, { passive: true });
         // Clean up event and timeId when component is unmount.
         return () => {
-            elms.forEach(elm => {
-                if (!elm)
-                    return;
-                elm.removeEventListener('wheel', handleWheel);
-                elm.removeEventListener('touchstart', handleTouchStart);
-                elm.removeEventListener('touchmove', handleTouchMove);
-            });
+            outer.removeEventListener('wheel', handleWheel);
+            outer.removeEventListener('touchstart', handleTouchStart);
+            outer.removeEventListener('touchmove', handleTouchMove);
+            picker.removeEventListener('wheel', handleWheel);
+            picker.removeEventListener('touchstart', handleTouchStart);
+            picker.removeEventListener('touchmove', handleTouchMove);
             clearTimeout(timeId);
         };
     }, [handleTouchMove, handleWheel, hasDelayed, delay]);
-    // Functions of the area controller.
-    // entry ref area.
-    const enterControll = (e) => {
-        e.preventDefault();
-        document.body.style.overflow = 'hidden';
-    };
-    // leave ref area.
-    const leaveControll = () => {
-        document.body.style.overflow = 'auto';
-    };
+    // The controll start or end.
     // Added event when component is mounted.
     (0, react_1.useEffect)(() => {
-        const elm1Div = div1Ref.current;
-        const elm2Div = div2Ref.current;
-        const elms = [elm1Div, elm2Div];
-        // Add event.
-        elms.forEach(elm => {
-            if (!elm)
-                return;
-            elm.addEventListener('mouseover', enterControll, { passive: false });
-            elm.addEventListener('mouseout', leaveControll);
-            elm.addEventListener('touchmove', enterControll, { passive: false });
-            elm.addEventListener('touchend', leaveControll);
-        });
+        const enterControll = (e) => {
+            e.preventDefault();
+            document.body.style.overflow = 'hidden';
+        };
+        // leave ref area.
+        const leaveControll = () => {
+            document.body.style.overflow = 'auto';
+        };
+        const outer = refOuter.current;
+        const picker = refPicker.current;
+        // add evenet.
+        outer.addEventListener('mouseover', enterControll, { passive: false });
+        outer.addEventListener('mouseout', leaveControll);
+        outer.addEventListener('touchmove', enterControll, { passive: false });
+        outer.addEventListener('touchend', leaveControll);
+        picker.addEventListener('mouseover', enterControll, { passive: false });
+        picker.addEventListener('mouseout', leaveControll);
+        picker.addEventListener('touchmove', enterControll, { passive: false });
+        picker.addEventListener('touchend', leaveControll);
         // Clean up event when component is unmount.
         return () => {
-            elms.forEach(elm => {
-                if (!elm)
-                    return;
-                elm.removeEventListener('mouseover', enterControll);
-                elm.removeEventListener('mouseout', leaveControll);
-                elm.removeEventListener('touchmove', enterControll);
-                elm.removeEventListener('touchend', leaveControll);
-            });
+            outer.removeEventListener('mouseover', enterControll);
+            outer.removeEventListener('mouseout', leaveControll);
+            outer.removeEventListener('touchmove', enterControll);
+            outer.removeEventListener('touchend', leaveControll);
+            picker.removeEventListener('mouseover', enterControll);
+            picker.removeEventListener('mopickerseout', leaveControll);
+            picker.removeEventListener('touchmove', enterControll);
+            picker.removeEventListener('touchend', leaveControll);
         };
     }, []);
     // average calculation.
@@ -175,7 +170,7 @@ const MagicStraight = ({ images, height, width, vertical = true, margin = 0, sel
     };
     return (react_1.default.createElement(framer_motion_1.LazyMotion, { features: framer_motion_1.domAnimation },
         react_1.default.createElement("div", { className: className },
-            react_1.default.createElement("div", { ref: div1Ref, tabIndex: offsetIndex <= 0 ? 0 : offsetIndex - 1, onKeyDown: handleKeyPress, className: styles_module_css_1.default.outer, style: {
+            react_1.default.createElement("div", { className: styles_module_css_1.default.outer, ref: refOuter, tabIndex: offsetIndex <= 0 ? 0 : offsetIndex - 1, onKeyDown: handleKeyPress, style: {
                     zIndex: offsetIndex - 1,
                     width: !vertical
                         ? images.length * (width + margin * 2) + controller + 'px'
@@ -233,7 +228,7 @@ const MagicStraight = ({ images, height, width, vertical = true, margin = 0, sel
                         opacity: hasSelect ? initial === null || initial === void 0 ? void 0 : initial.selectOpacity : initial === null || initial === void 0 ? void 0 : initial.opacity
                     }, transition: transition, onClick: () => {
                         setSelect(index);
-                        hasSelect && setHasPick(true);
+                        hasSelect && pickScale && setHasPick(true);
                     }, className: classImages +
                         ' ' +
                         (hasSelect && classImageSelect) +
@@ -246,9 +241,8 @@ const MagicStraight = ({ images, height, width, vertical = true, margin = 0, sel
                         margin: vertical ? margin + 'px' + ' 0' : '0 ' + margin + 'px'
                     } }));
             })),
-            react_1.default.createElement(PickImage_1.default, { onClick: () => {
-                    leaveControll();
+            react_1.default.createElement(PickImage_1.default, { classPick: pickProperty === null || pickProperty === void 0 ? void 0 : pickProperty.classPick, argRef: refPicker, onClick: () => {
                     setHasPick(false);
-                }, hasPick: hasPick, classPick: pickProperty === null || pickProperty === void 0 ? void 0 : pickProperty.classPick, white: pickProperty === null || pickProperty === void 0 ? void 0 : pickProperty.white, alpha: pickProperty === null || pickProperty === void 0 ? void 0 : pickProperty.alpha, blur: pickProperty === null || pickProperty === void 0 ? void 0 : pickProperty.blur, scale: pickProperty === null || pickProperty === void 0 ? void 0 : pickProperty.scale, offset: pickProperty === null || pickProperty === void 0 ? void 0 : pickProperty.offset, hasShift: hasShift, argRef: div2Ref, argKey: select, src: images[select].src, alt: images[select].alt, width: width, height: height, transition: pickTransition, zIndex: frontImage }))));
+                }, hasPick: hasPick, white: pickProperty === null || pickProperty === void 0 ? void 0 : pickProperty.white, alpha: pickProperty === null || pickProperty === void 0 ? void 0 : pickProperty.alpha, blur: pickProperty === null || pickProperty === void 0 ? void 0 : pickProperty.blur, scale: pickProperty === null || pickProperty === void 0 ? void 0 : pickProperty.scale, offset: pickProperty === null || pickProperty === void 0 ? void 0 : pickProperty.offset, hasShift: hasShift, argKey: select, src: images[select].src, alt: images[select].alt, width: width, height: height, transition: pickTransition, zIndex: frontImage }))));
 };
 exports.MagicStraight = MagicStraight;

package/dist/types.d.ts

@@ -38,7 +38,7 @@ type PickProperty = {
     scale?: number;
     offset?: number;
 };
-type MagicProperty = {
+type CommonProperty = {
     images: ImageProperty[];
     height: number;
     width: number;
@@ -55,9 +55,18 @@ type MagicProperty = {
     animate?: AnimationProperty;
     initial?: AnimationProperty;
     transition?: TransitionProperty;
-    pickProperty?: PickProperty;
-    pickTransition?: TransitionProperty;
 };
+type OffPick = {
+    pickScale?: true;
+    pickProperty: PickProperty;
+    pickTransition: TransitionProperty;
+};
+type OnPick = {
+    pickScale?: false;
+    pickProperty?: undefined;
+    pickTransition?: undefined;
+};
+type MagicProperty = CommonProperty & (OffPick | OnPick);
 export type MagicCircleProps = MagicProperty & {
     radius: number;
     dynamic?: boolean;

package/package.json

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