react-magic-card 1.1.0 → 1.1.2

package/README.md

@@ -51,8 +51,9 @@ function MyComponent() {
 | delay                 | delay of the animation firing interval                            |
 | offsetIndex           | add an offset to the index of the components and images           |
 | reverseIndex          | order the change the overlap of zindex default true               |
-| fadeRange             | range of fade animation after page loaded                         |
-| transTime             | transition time of fade animation after page loaded               |
+| loading               | loading attribute of img element in html                          |
+| initialFadeRange      | range of fade animation after page loaded                         |
+| initialTransTime      | transition time of fade animation after page loaded               |
 | className             | className of the component                                        |
 | classImages           | className of the images                                           |
 | classImageSelect      | className of the select image                                     |

package/dist/MagicCircle/index.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import type { MagicCircleProps } from '../types';
-export declare const MagicCircle: ({ images, start, height, width, dynamic, scrollDirection, radius, delay, controller, offsetIndex, reverseIndex, fadeRange, transTime, className, classImages, classImageSelect, classImageUnique, animate, initial, transition, pickScale, pickProperty, pickTransition }: MagicCircleProps) => React.JSX.Element;
+export declare const MagicCircle: ({ images, start, height, width, dynamic, scrollDirection, radius, delay, controller, offsetIndex, reverseIndex, loading, initialFadeRange, initialTransTime, 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, start, height, width, dynamic = true, scrollDirection = true, radius, delay = 100, controller, offsetIndex = 0, reverseIndex = true, fadeRange = 4, transTime = 0.2, className, classImages, classImageSelect, classImageUnique, animate, initial, transition, pickScale = true, pickProperty, pickTransition }) => {
+const MagicCircle = ({ images, start, height, width, dynamic = true, scrollDirection = true, radius, delay = 100, controller, offsetIndex = 0, reverseIndex = true, loading, initialFadeRange = 4, initialTransTime = 0.2, className, classImages, classImageSelect, classImageUnique, animate, initial, transition, pickScale = true, pickProperty, pickTransition }) => {
     // array out of range adjusting.
     start = Math.max(0, start);
     start = Math.min(start, images.length - 1);
@@ -269,9 +269,6 @@ const MagicCircle = ({ images, start, height, width, dynamic = true, scrollDirec
     };
     // has after Lazy loading fade transition.
     const [isLoaded, setIsLoaded] = (0, react_1.useState)(false);
-    (0, react_1.useEffect)(() => {
-        setIsLoaded(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, { className: styles_module_css_1.default.outer, ref: refOuter, tabIndex: offsetIndex <= 0 ? 0 : offsetIndex - 1, onKeyDown: handleKeyPress, style: {
@@ -289,7 +286,7 @@ const MagicCircle = ({ images, start, height, width, dynamic = true, scrollDirec
                             (hasSelect && classImageSelect) +
                             ' ' +
                             classImageUnique +
-                            zIndex, role: 'button', src: image.src, alt: image.alt, draggable: false, loading: 'lazy', animate: {
+                            zIndex, role: 'button', src: image.src, alt: image.alt, draggable: false, loading: loading, onLoad: () => setIsLoaded(true), animate: {
                             rotate: -count,
                             scale: hasSelect ? animate === null || animate === void 0 ? void 0 : animate.selectScale : animate === null || animate === void 0 ? void 0 : animate.scale,
                             rotateY: hasSelect
@@ -321,7 +318,7 @@ const MagicCircle = ({ images, start, height, width, dynamic = true, scrollDirec
                             opacity: hasSelect
                                 ? initial === null || initial === void 0 ? void 0 : initial.selectOpacity
                                 : initial === null || initial === void 0 ? void 0 : initial.opacity
-                        }, transition: transition, onMouseDown: () => setSelect(index), onPointerDown: () => setSelect(index), onClick: () => hasSelect && pickScale && !hasMove && setHasPick(true), style: {
+                        }, transition: transition, onPointerDown: () => setSelect(index), onClick: () => hasSelect && pickScale && !hasMove && setHasPick(true), style: {
                             zIndex: hasSelect ? frontImage : zIndex,
                             width: width + 'px',
                             height: height + 'px',
@@ -333,8 +330,10 @@ const MagicCircle = ({ images, start, height, width, dynamic = true, scrollDirec
                                 radius -
                                 height / 2 +
                                 'px',
-                            filter: isLoaded ? 'blur(0)' : `blur(${fadeRange}px)`,
-                            transition: `filter ${transTime}s ease-in-out`
+                            filter: isLoaded
+                                ? 'blur(0)'
+                                : `blur(${initialFadeRange}px)`,
+                            transition: `filter ${initialTransTime}s ease-in-out`
                         } }));
                 }))),
             react_1.default.createElement(PickImage_1.default, { onClick: () => {

package/dist/MagicStraight/index.d.ts

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

package/dist/MagicStraight/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 MagicStraight = ({ images, start, height, width, vertical = true, margin = 0, selectOffsetX = 0, selectOffsetY = 0, controller, delay = 20, offsetIndex = 0, reverseIndex = true, fadeRange = 4, transTime = 0.2, className, classImages, classImageSelect, classImageUnique, animate, initial, transition, pickScale = true, pickProperty, pickTransition }) => {
+const MagicStraight = ({ images, start, height, width, vertical = true, margin = 0, selectOffsetX = 0, selectOffsetY = 0, controller, delay = 20, offsetIndex = 0, reverseIndex = true, loading, initialFadeRange = 4, initialTransTime = 0.2, className, classImages, classImageSelect, classImageUnique, animate, initial, transition, pickScale = true, pickProperty, pickTransition }) => {
     // array out of range adjusting.
     start = Math.max(0, start);
     start = Math.min(start, images.length - 1);
@@ -40,6 +40,7 @@ const MagicStraight = ({ images, start, height, width, vertical = true, margin =
     const [initialX, setInitialX] = (0, react_1.useState)(0);
     const [initialY, setInitialY] = (0, react_1.useState)(0);
     const [isDragging, setIsDragging] = (0, react_1.useState)(false);
+    const [hasMove, setHasMove] = (0, react_1.useState)(false);
     const [hasShift, setHasShift] = (0, react_1.useState)(false);
     const [hasDelayed, setHasDelayed] = (0, react_1.useState)(true);
     const [select, setSelect] = (0, react_1.useState)(start);
@@ -113,10 +114,12 @@ const MagicStraight = ({ images, start, height, width, vertical = true, margin =
             if (!vertical ? deltaX > 0 : deltaY > 0)
                 shiftRight();
             !vertical ? setInitialX(e.clientX) : setInitialY(e.clientY);
+            setHasMove(true);
         }
     }, [initialX, initialY, isDragging, shiftLeft, shiftRight, vertical]);
     const handleMouseUp = (0, react_1.useCallback)(() => {
         setIsDragging(false);
+        setHasMove(false);
     }, []);
     // Main functional, exit function if ref and hasDelayed does not exist.
     (0, react_1.useEffect)(() => {
@@ -213,9 +216,6 @@ const MagicStraight = ({ images, start, height, width, vertical = true, margin =
     };
     // has after Lazy loading fade transition.
     const [isLoaded, setIsLoaded] = (0, react_1.useState)(false);
-    (0, react_1.useEffect)(() => {
-        setIsLoaded(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("div", { className: styles_module_css_1.default.outer, ref: refOuter, tabIndex: offsetIndex <= 0 ? 0 : offsetIndex - 1, onKeyDown: handleKeyPress, style: {
@@ -237,7 +237,7 @@ const MagicStraight = ({ images, start, height, width, vertical = true, margin =
                         (hasSelect && classImageSelect) +
                         ' ' +
                         classImageUnique +
-                        index, src: image.src, alt: image.alt, role: 'button', draggable: false, loading: 'lazy', animate: {
+                        index, src: image.src, alt: image.alt, role: 'button', draggable: false, loading: loading, onLoad: () => setIsLoaded(true), animate: {
                         y: hasSelect
                             ? vertical
                                 ? (average - index) * height +
@@ -281,7 +281,7 @@ const MagicStraight = ({ images, start, height, width, vertical = true, margin =
                         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 && pickScale && !isDragging && setHasPick(true);
+                        hasSelect && pickScale && !hasMove && setHasPick(true);
                     }, style: {
                         zIndex: hasSelect ? frontImage : zIndex,
                         width: width + 'px',
@@ -289,8 +289,8 @@ const MagicStraight = ({ images, start, height, width, vertical = true, margin =
                         margin: vertical
                             ? margin + 'px' + ' 0'
                             : '0 ' + margin + 'px',
-                        filter: isLoaded ? 'blur(0)' : `blur(${fadeRange}px)`,
-                        transition: `filter ${transTime}s ease-in-out`
+                        filter: isLoaded ? 'blur(0)' : `blur(${initialFadeRange}px)`,
+                        transition: `filter ${initialTransTime}s ease-in-out`
                     } }));
             })),
             react_1.default.createElement(PickImage_1.default, { classPick: pickProperty === null || pickProperty === void 0 ? void 0 : pickProperty.classPick, argRef: refPicker, onClick: () => {

package/dist/common/PickImage/index.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const framer_motion_1 = require("framer-motion");
 const styles_module_css_1 = __importDefault(require("./styles.module.css"));
-const PickImage = ({ onClick, classPick, hasPick, hasShift, argRef, argKey, src, alt, width, height, zIndex, white = true, alpha = 0.4, blur = 4, scale = 2, offset = 200, transition }) => {
+const PickImage = ({ onClick, classPick, hasPick, hasShift, argRef, argKey, src, alt, width, height, zIndex, white = true, alpha = 0.4, blur = 4, scale = 2, offset = 0, transition }) => {
     const backdropFilter = hasPick ? `blur(${blur}px)` : undefined;
     const background = hasPick
         ? white

package/dist/types.d.ts

@@ -41,14 +41,15 @@ type PickProperty = {
 type CommonProperty = {
     images: ImageProperty[];
     start: number;
+    loading?: 'eager' | 'lazy';
     height: number;
     width: number;
     controller: number;
     delay: number;
     offsetIndex?: number;
     reverseIndex?: boolean;
-    fadeRange: number;
-    transTime: number;
+    initialFadeRange: number;
+    initialTransTime: number;
     className?: string;
     classImages?: string;
     classImageSelect?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-magic-card",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "React Component library for images gallery using the framer motion animation.",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",