react-magic-card 1.0.3 → 1.1.0

package/README.md

@@ -41,25 +41,27 @@ function MyComponent() {
 
 ## Common Properties
 
-| Property              | Meaning                                                                                                                       |
-| --------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
-| images (required)     | array of images and objects containing the src and alt properties                                                             |
-| width (required)      | width of the single image                                                                                                     |
-| height (required)     | height of the single image                                                                                                    |
-| start (required)      | index number of the array of starting scale position,An error is issued if a number outside the range of the array is entered |
-| 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                                                                                          |
-| className             | className of the component                                                                                                    |
-| classImages           | className of the images                                                                                                       |
-| classImageSelect      | className of the select image                                                                                                 |
-| classImageUnique      | className of the index number is assigned to the end                                                                          |
-| animate               | object in the animation property                                                                                              |
-| initial               | object in the animation property                                                                                              |
-| transition            | object in the transition property                                                                                             |
-| pickTransition        | object in the transition property                                                                                             |
-| pickProperty          | object in the pick property                                                                                                   |
+| Property              | Meaning                                                           |
+| --------------------- | ----------------------------------------------------------------- |
+| images (required)     | array of images and objects containing the src and alt properties |
+| start (required)      | index number of the array of start scale position                 |
+| width (required)      | width of the single image                                         |
+| height (required)     | height of the single image                                        |
+| 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          | 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                                     |
+| classImageUnique      | className of the index number is assigned to the end              |
+| animate               | object in the animation property                                  |
+| initial               | object in the animation property                                  |
+| transition            | object in the transition property                                 |
+| pickTransition        | object in the transition 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, scrollDirection, radius, start, 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,13 +31,17 @@ 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, scrollDirection = true, radius, start, 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);
     const [count, setCount] = (0, react_1.useState)(0);
     const [touchStartY, setTouchStartY] = (0, react_1.useState)(0);
     const [touchStartX, setTouchStartX] = (0, react_1.useState)(0);
     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);
@@ -119,10 +123,12 @@ const MagicCircle = ({ images, height, width, dynamic = true, scrollDirection =
         setTouchStartY(deltaY);
     }, [shiftLeft, shiftRight, touchStartX, touchStartY]);
     const handleMouseDown = (0, react_1.useCallback)((e) => {
+        if (hasPick)
+            return;
         setIsDragging(true);
         setInitialX(e.clientX);
         setInitialY(e.clientY);
-    }, []);
+    }, [hasPick]);
     const handleMouseMove = (0, react_1.useCallback)((e) => {
         if (isDragging) {
             const outer = refOuter.current;
@@ -163,10 +169,12 @@ const MagicCircle = ({ images, height, width, dynamic = true, scrollDirection =
             }
             setInitialX(e.clientX);
             setInitialY(e.clientY);
+            setHasMove(true);
         }
     }, [initialX, initialY, isDragging, shiftLeft, shiftRight]);
     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)(() => {
@@ -259,13 +267,18 @@ const MagicCircle = ({ images, height, width, dynamic = true, scrollDirection =
         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
@@ -276,7 +289,7 @@ const MagicCircle = ({ images, height, width, dynamic = true, scrollDirection =
                             (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
@@ -308,10 +321,7 @@ const MagicCircle = ({ images, height, width, dynamic = true, scrollDirection =
                             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);
-                            hasSelect && pickScale && !isDragging && 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',
@@ -322,7 +332,9 @@ const MagicCircle = ({ images, height, width, dynamic = true, scrollDirection =
                             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, 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;
+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,10 @@ 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, 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);
     const [touchStartY, setTouchStartY] = (0, react_1.useState)(0);
     const [touchStartX, setTouchStartX] = (0, react_1.useState)(0);
     const [initialX, setInitialX] = (0, react_1.useState)(0);
@@ -208,6 +211,11 @@ const MagicStraight = ({ images, height, width, vertical = true, margin = 0, sel
         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: {
@@ -229,7 +237,7 @@ const MagicStraight = ({ images, height, width, vertical = true, margin = 0, sel
                         (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 +
@@ -278,7 +286,11 @@ const MagicStraight = ({ images, height, width, vertical = true, margin = 0, sel
                         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

@@ -40,14 +40,15 @@ type PickProperty = {
 };
 type CommonProperty = {
     images: ImageProperty[];
+    start: number;
     height: number;
     width: number;
-    start: number;
     controller: number;
     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.3",
+  "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",