react-magic-card 2.0.7 → 2.0.8

package/README.md

@@ -1,10 +1,8 @@
-# react-magic-card
-
 [![Release Status](https://img.shields.io/github/release/su-pull/react-magic-card.svg)](https://github.com/su-pull/react-magic-card/releases/latest)
 [![Minzip Size](https://img.shields.io/bundlephobia/minzip/react-magic-card)](https://bundlephobia.com/package/react-magic-card)
 [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
 
-This is the framer motion components, that support images gallery.
+This is the framer motion animation components, that support images gallery.
 
 ## Installation
 
@@ -15,25 +13,31 @@ npm install react-magic-card framer-motion
 ## Usage Guide
 
 ```tsx
-import { MagicCircle } from 'react-magic-card'
+import { StraightInfinity } from 'react-magic-card'
 
 function MyComponent() {
   const images = [
     {
-      src: '/src.jpeg',
+      src: '/cat.jpeg',
+      alt: 'alt'
+    },
+    {
+      src: '/dog.jpeg',
+      alt: 'alt'
+    },
+    {
+      src: '/bird.jpeg',
       alt: 'alt'
     }
   ]
 
   return (
-    <MagicCircle
+    <StraightInfinity
       images={images}
       width={100}
       height={100}
-      radius={100}
       controller={100}
-      start={1}
-      delay={100}
+      start={Math.ceil(images.length / 2 - 1)}
     />
   )
 }
@@ -48,12 +52,8 @@ function MyComponent() {
 | 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               |
-| 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                                     |
@@ -61,24 +61,24 @@ 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                                 |
-| pickProperty          | object in the pick property                                       |
+| detailTransition      | object in the transition property                                 |
+| detailProperty        | object in the detail property                                     |
+| 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               |
 
-## MagicCircle Properties
+## CircleRotation Properties
 
-| Property          | Meaning                                         |
-| ----------------- | ----------------------------------------------- |
-| radius (required) | radius of the circle                            |
-| dynamic           | dynamic or static for rotation the default true |
+| Property          | Meaning              |
+| ----------------- | -------------------- |
+| radius (required) | radius of the circle |
 
-## MagicStraight Properties
+## StraightInfinity Properties
 
-| Property      | Meaning                                 |
-| ------------- | --------------------------------------- |
-| vertical      | vertical or horizontal the default true |
-| margin        | spacing of the between images           |
-| selectOffsetX | X-axis position                         |
-| selectOffsetY | Y-axis position                         |
+| Property | Meaning                                 |
+| -------- | --------------------------------------- |
+| vertical | vertical or horizontal the default true |
+| margin   | spacing of the between images           |
 
 ## Animation Object
 
@@ -86,29 +86,31 @@ function MyComponent() {
 | ------------- | ------------------------------------- |
 | scale         | scaling of the images                 |
 | opacity       | opacity or transparency of the images |
+| rotate        | rotation of the images                |
 | rotateX       | X-axis rotation of the images         |
 | rotateY       | Y-axis rotation of the images         |
 | rotateZ       | Z-axis rotation of the images         |
 | selectScale   | scaling of the selected image         |
 | selectOpacity | opacity of the selected image         |
+| selectRotate  | rotation of the selected image        |
 | selectRotateX | X-axis rotation of the selected image |
 | selectRotateY | Y-axis rotation of the selected image |
 | selectRotateZ | Z-axis rotation of the selected image |
 
 ## Transition Object
 
-It is Inherits framer motion transition object other than intera.
+It is Inherits framer motion transition object ease and (type: 'spring').
 
-## PickProperty Object
+## detailProperty Object
 
-| Property  | Meaning                                                   |
-| --------- | --------------------------------------------------------- |
-| classPick | className of the pick image                               |
-| white     | white or black for background the default true            |
-| alpha     | background transparency of a number between 0 ~ 1         |
-| blur      | blur intensity of a number between 1 ~ 20 a preferred     |
-| scale     | scale of the pick image                                   |
-| offset    | offset of an appearance position from the center position |
+| Property    | Meaning                                               |
+| ----------- | ----------------------------------------------------- |
+| classDetail | className of the detail image                         |
+| white       | white or black for background the default true        |
+| alpha       | background transparency of a number between 0 ~ 1     |
+| blur        | blur intensity of a number between 1 ~ 20 a preferred |
+| scale       | scale of the detail image                             |
+| rotate      | rotation of the images                                |
 
 ## License
 

package/dist/CircleRotation/index.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -312,8 +322,8 @@ const CircleRotation = ({ images, start, height, width, radius, controller, offs
                             opacity: hasSelect
                                 ? hasDetail
                                     ? 0
-                                    : animate?.selectOpacity
-                                : animate?.opacity
+                                    : animate?.selectOpacity ?? 1
+                                : animate?.opacity ?? 1
                         }, initial: {
                             rotate: -count - (initial?.rotate ? initial?.rotate : 0),
                             scale: hasSelect ? initial?.selectScale : initial?.scale,
@@ -329,7 +339,9 @@ const CircleRotation = ({ images, start, height, width, radius, controller, offs
                             opacity: hasSelect
                                 ? initial?.selectOpacity
                                 : initial?.opacity
-                        }, transition: transition, onPointerDown: () => setSelect(index), onClick: () => hasSelect && detail && !hasMove && setHasDetail(true), style: {
+                        }, transition: hasSelect && detailTransition
+                            ? { ...transition, opacity: detailTransition }
+                            : transition, onPointerDown: () => setSelect(index), onClick: () => hasSelect && detail && !hasMove && setHasDetail(true), style: {
                             zIndex: hasSelect ? frontImage : zIndex,
                             width: width + 'px',
                             height: height + 'px',

package/dist/StraightInfinity/index.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -343,8 +353,8 @@ const StraightInfinity = ({ images, start, height, width, vertical = false, marg
                             : hasSelect
                                 ? hasDetail
                                     ? 0
-                                    : animate?.selectOpacity
-                                : animate?.opacity
+                                    : animate?.selectOpacity ?? 1
+                                : animate?.opacity ?? 1
                     }, initial: {
                         scale: hasSelect ? initial?.selectScale : initial?.scale,
                         rotate: hasSelect ? initial?.selectRotate : initial?.rotate,
@@ -358,7 +368,9 @@ const StraightInfinity = ({ images, start, height, width, vertical = false, marg
                             ? initial?.selectRotateZ
                             : initial?.rotateZ,
                         opacity: hasSelect ? initial?.selectOpacity : initial?.opacity
-                    }, transition: transition, onClick: () => {
+                    }, transition: hasSelect && detailTransition
+                        ? { ...transition, opacity: detailTransition }
+                        : transition, onClick: () => {
                         hasSelect && detail && !hasMove && setHasDetail(true);
                         if (!hasDelayed)
                             return;

package/dist/common/DetailImage/index.js

@@ -8,17 +8,16 @@ const react_1 = __importDefault(require("react"));
 const framer_motion_1 = require("framer-motion");
 const styles_module_css_1 = __importDefault(require("./styles.module.css"));
 const DetailImage = ({ onClick, classDetail, hasDetail, detailRef, detailKey, src, alt, width, height, zIndex, white = true, alpha = 0.3, blur = 3, scale = 2.5, rotate = 0, transition }) => {
-    const backdropFilter = hasDetail ? `blur(${blur}px)` : undefined;
-    const background = hasDetail
-        ? white
-            ? `rgba(255, 255, 255, ${alpha})`
-            : `rgba(0, 0, 0, ${alpha})`
-        : undefined;
+    const backdropFilter = `blur(${hasDetail ? blur : 0}px)`;
+    const color = white ? '255, 255, 255' : '0, 0, 0';
+    const backgroundColor = `rgba(${color}, ${hasDetail ? alpha : 0})`;
     return (react_1.default.createElement(framer_motion_1.m.div, { role: "button", onClick: onClick, ref: detailRef, className: styles_module_css_1.default.full_size, animate: {
             zIndex: zIndex,
-            opacity: hasDetail ? 1 : 0,
+            backdropFilter: backdropFilter,
+            WebkitBackdropFilter: backdropFilter,
+            backgroundColor: backgroundColor,
             pointerEvents: hasDetail ? 'auto' : 'none'
-        }, style: { backdropFilter: backdropFilter, background: background }, transition: transition },
+        }, initial: false, transition: transition },
         react_1.default.createElement(framer_motion_1.m.img, { key: detailKey, className: classDetail + ' ' + styles_module_css_1.default.no_select, src: src, alt: alt, width: width, height: height, draggable: false, animate: {
                 zIndex: zIndex + 1,
                 scale: scale,

package/package.json

@@ -1,14 +1,7 @@
 {
   "name": "react-magic-card",
-  "version": "2.0.7",
+  "version": "2.0.8",
   "description": "React Component library for images gallery using the framer motion animation.",
-  "main": "dist/index.js",
-  "typings": "dist/index.d.ts",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/su-pull/react-magic-card",
-    "directory": "react-magic-card/src"
-  },
   "keywords": [
     "react",
     "component",
@@ -19,12 +12,30 @@
     "infinity"
   ],
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/su-pull/react-magic-card",
+    "directory": "react-magic-card/src"
+  },
+  "main": "dist/index.js",
+  "typings": "dist/index.d.ts",
+  "files": [
+    "dist/"
+  ],
+  "scripts": {
+    "build": "npx tsc && npm run copy-css",
+    "copy-css": "npm run copy-css1 && npm run copy-css2 && npm run copy-css3",
+    "copy-css1": "cp src/CircleRotation/styles.module.css dist/CircleRotation/styles.module.css",
+    "copy-css2": "cp src/StraightInfinity/styles.module.css dist/StraightInfinity/styles.module.css",
+    "copy-css3": "cp src/common/DetailImage/styles.module.css dist/common/DetailImage/styles.module.css",
+    "test": "test"
+  },
   "peerDependencies": {
     "framer-motion": "^11.3.21"
   },
   "devDependencies": {
-    "typescript": "^5.1.3",
-    "@types/react": "^18.2.12",
-    "@types/css-modules": "^1.0.2"
+    "@types/css-modules": "^1.0.5",
+    "@types/react": "^18.3.31",
+    "typescript": "^6.0.3"
   }
 }