react-magic-card 1.0.4 → 1.1.0

package/README.md

@@ -50,7 +50,9 @@ 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               |
+| fadeRange             | range of fade animation after page loaded                         |
+| transTime             | 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, fadeRange, transTime, 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, fadeRange = 4, transTime = 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: 'lazy', 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, onMouseDown: () => setSelect(index), onPointerDown: () => setSelect(index), onClick: () => hasSelect && pickScale && !hasMove && setHasPick(true), style: {
                             zIndex: hasSelect ? frontImage : zIndex,
                             width: width + 'px',
                             height: height + 'px',
@@ -327,7 +332,9 @@ 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(${fadeRange}px)`,
+                            transition: `filter ${transTime}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, fadeRange, transTime, 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, fadeRange = 4, transTime = 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);
@@ -211,6 +211,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 +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: loading, animate: {
+                        index, src: image.src, alt: image.alt, role: 'button', draggable: false, loading: 'lazy', animate: {
                         y: hasSelect
                             ? vertical
                                 ? (average - index) * height +
@@ -281,7 +286,11 @@ const MagicStraight = ({ images, start, height, width, vertical = true, margin =
                         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(${fadeRange}px)`,
+                        transition: `filter ${transTime}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/types.d.ts

@@ -47,7 +47,8 @@ type CommonProperty = {
     delay: number;
     offsetIndex?: number;
     reverseIndex?: boolean;
-    loading?: 'eager' | 'lazy';
+    fadeRange: number;
+    transTime: 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.0",
   "description": "React Component library for images gallery using the framer motion animation.",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",