react-magic-card 1.0.4 → 1.1.1

package/README.md

@@ -50,7 +50,10 @@ function MyComponent() {
 | controller (required) | controller size is add to the size of the component               |
 | delay                 | delay of the animation firing interval                            |
 | offsetIndex           | add an offset to the index of the components and images           |
-| reverseIndex          | reverse index order the default true                              |
+| reverseIndex          | order the change the overlap of zindex default true               |
+| 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, loading, 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, loading, 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);
@@ -267,13 +267,18 @@ const MagicCircle = ({ images, start, height, width, dynamic = true, scrollDirec
         e.key === 'Enter' && setHasPick(true);
         e.key === 'Escape' && setHasPick(false);
     };
+    // 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: {
                     zIndex: offsetIndex - 1,
                     width: radius * 2 + controller + 'px',
                     height: radius * 2 + controller + 'px'
-                }, animate: { rotate: count }, transition: { duration: transition === null || transition === void 0 ? void 0 : transition.duration } },
+                }, animate: { rotate: count }, transition: transition },
                 react_1.default.createElement("div", { className: styles_module_css_1.default.inner, style: { width: radius * 2 + 'px', height: radius * 2 + 'px' } }, images.map((image, index) => {
                     const hasSelect = images[select] == images[index];
                     const zIndex = reverseIndex
@@ -284,7 +289,7 @@ const MagicCircle = ({ images, start, height, width, dynamic = true, scrollDirec
                             (hasSelect && classImageSelect) +
                             ' ' +
                             classImageUnique +
-                            zIndex, src: image.src, alt: image.alt, role: "button", draggable: false, loading: loading, animate: {
+                            zIndex, role: 'button', src: image.src, alt: image.alt, draggable: false, loading: loading, 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
@@ -316,7 +321,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), 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',
@@ -327,7 +332,11 @@ const MagicCircle = ({ images, start, height, width, dynamic = true, scrollDirec
                             top: radius * Math.sin(index * angle) +
                                 radius -
                                 height / 2 +
-                                'px'
+                                'px',
+                            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, loading, 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, loading, 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)(() => {
@@ -211,6 +214,11 @@ const MagicStraight = ({ images, start, height, width, vertical = true, margin =
         e.key === 'Enter' && setHasPick(true);
         e.key === 'Escape' && setHasPick(false);
     };
+    // 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: {
@@ -232,7 +240,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: loading, animate: {
+                        index, src: image.src, alt: image.alt, role: 'button', draggable: false, loading: loading, animate: {
                         y: hasSelect
                             ? vertical
                                 ? (average - index) * height +
@@ -276,12 +284,16 @@ 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',
                         height: height + 'px',
-                        margin: vertical ? margin + 'px' + ' 0' : '0 ' + margin + 'px'
+                        margin: vertical
+                            ? margin + 'px' + ' 0'
+                            : '0 ' + margin + 'px',
+                        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,13 +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;
-    loading?: 'eager' | 'lazy';
+    initialFadeRange: number;
+    initialTransTime: number;
     className?: string;
     classImages?: string;
     classImageSelect?: string;

package/package.json

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