react-magic-card 2.0.3 → 2.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -86,11 +86,13 @@ function MyComponent() {
|
|
|
86
86
|
| ------------- | ------------------------------------- |
|
|
87
87
|
| scale | scaling of the images |
|
|
88
88
|
| opacity | opacity or transparency of the images |
|
|
89
|
+
| rotate | rotation of the images |
|
|
89
90
|
| rotateX | X-axis rotation of the images |
|
|
90
91
|
| rotateY | Y-axis rotation of the images |
|
|
91
92
|
| rotateZ | Z-axis rotation of the images |
|
|
92
93
|
| selectScale | scaling of the selected image |
|
|
93
94
|
| selectOpacity | opacity of the selected image |
|
|
95
|
+
| selectRotate | rotation of the selected image |
|
|
94
96
|
| selectRotateX | X-axis rotation of the selected image |
|
|
95
97
|
| selectRotateY | Y-axis rotation of the selected image |
|
|
96
98
|
| selectRotateZ | Z-axis rotation of the selected image |
|
|
@@ -101,14 +103,14 @@ It is Inherits framer motion transition object ease and (type: 'spring').
|
|
|
101
103
|
|
|
102
104
|
## detailProperty Object
|
|
103
105
|
|
|
104
|
-
| Property | Meaning
|
|
105
|
-
| ----------- |
|
|
106
|
-
| classDetail | className of the detail image
|
|
107
|
-
| white | white or black for background the default true
|
|
108
|
-
| alpha | background transparency of a number between 0 ~ 1
|
|
109
|
-
| blur | blur intensity of a number between 1 ~ 20 a preferred
|
|
110
|
-
| scale | scale of the detail image
|
|
111
|
-
|
|
|
106
|
+
| Property | Meaning |
|
|
107
|
+
| ----------- | ----------------------------------------------------- |
|
|
108
|
+
| classDetail | className of the detail image |
|
|
109
|
+
| white | white or black for background the default true |
|
|
110
|
+
| alpha | background transparency of a number between 0 ~ 1 |
|
|
111
|
+
| blur | blur intensity of a number between 1 ~ 20 a preferred |
|
|
112
|
+
| scale | scale of the detail image |
|
|
113
|
+
| rotate | rotation of the images |
|
|
112
114
|
|
|
113
115
|
## License
|
|
114
116
|
|
|
@@ -335,9 +335,9 @@ const CircleRotation = ({ images, start, height, width, radius, controller, offs
|
|
|
335
335
|
? `filter ${initialFadeTime}s ease-in-out`
|
|
336
336
|
: ''
|
|
337
337
|
} }));
|
|
338
|
-
}))),
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
338
|
+
})))),
|
|
339
|
+
react_1.default.createElement(DetailImage_1.DetailImage, { detailRef: refDetail, detailKey: select, hasDetail: hasDetail, onClick: () => {
|
|
340
|
+
setHasDetail(false);
|
|
341
|
+
}, classDetail: detailProperty === null || detailProperty === void 0 ? void 0 : detailProperty.classDetail, src: images[select].src, alt: images[select].alt, width: width, height: height, white: detailProperty === null || detailProperty === void 0 ? void 0 : detailProperty.white, alpha: detailProperty === null || detailProperty === void 0 ? void 0 : detailProperty.alpha, blur: detailProperty === null || detailProperty === void 0 ? void 0 : detailProperty.blur, scale: detailProperty === null || detailProperty === void 0 ? void 0 : detailProperty.scale, rotate: detailProperty === null || detailProperty === void 0 ? void 0 : detailProperty.rotate, transition: detailTransition, zIndex: frontImage })));
|
|
342
342
|
};
|
|
343
343
|
exports.CircleRotation = CircleRotation;
|
|
@@ -279,7 +279,7 @@ const StraightInfinity = ({ images, start, height, width, vertical = false, marg
|
|
|
279
279
|
x: !vertical ? count + offsetWide : 0,
|
|
280
280
|
y: vertical ? count + offsetHeight : 0
|
|
281
281
|
}, transition: transition }, images.map((image, index) => {
|
|
282
|
-
const hasSelect = images[select]
|
|
282
|
+
const hasSelect = images[select] === images[index];
|
|
283
283
|
const hasEdge = () => {
|
|
284
284
|
for (let i = edge; i <= images.length - 1; i++) {
|
|
285
285
|
if (images[i] === images[index]) {
|
|
@@ -323,7 +323,7 @@ const StraightInfinity = ({ images, start, height, width, vertical = false, marg
|
|
|
323
323
|
: animate === null || animate === void 0 ? void 0 : animate.opacity
|
|
324
324
|
}, initial: {
|
|
325
325
|
scale: hasSelect ? initial === null || initial === void 0 ? void 0 : initial.selectScale : initial === null || initial === void 0 ? void 0 : initial.scale,
|
|
326
|
-
rotate: hasSelect ?
|
|
326
|
+
rotate: hasSelect ? initial === null || initial === void 0 ? void 0 : initial.selectRotate : initial === null || initial === void 0 ? void 0 : initial.rotate,
|
|
327
327
|
rotateY: hasSelect
|
|
328
328
|
? initial === null || initial === void 0 ? void 0 : initial.selectRotateY
|
|
329
329
|
: initial === null || initial === void 0 ? void 0 : initial.rotateY,
|
|
@@ -360,9 +360,9 @@ const StraightInfinity = ({ images, start, height, width, vertical = false, marg
|
|
|
360
360
|
? `filter ${initialFadeTime}s ease-in-out`
|
|
361
361
|
: ''
|
|
362
362
|
} }));
|
|
363
|
-
})),
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
363
|
+
}))),
|
|
364
|
+
react_1.default.createElement(DetailImage_1.DetailImage, { detailRef: refDetail, detailKey: select, hasDetail: hasDetail, onClick: () => {
|
|
365
|
+
setHasDetail(false);
|
|
366
|
+
}, classDetail: detailProperty === null || detailProperty === void 0 ? void 0 : detailProperty.classDetail, src: images[select].src, alt: images[select].alt, width: width, height: height, white: detailProperty === null || detailProperty === void 0 ? void 0 : detailProperty.white, alpha: detailProperty === null || detailProperty === void 0 ? void 0 : detailProperty.alpha, blur: detailProperty === null || detailProperty === void 0 ? void 0 : detailProperty.blur, scale: detailProperty === null || detailProperty === void 0 ? void 0 : detailProperty.scale, rotate: detailProperty === null || detailProperty === void 0 ? void 0 : detailProperty.rotate, transition: detailTransition, zIndex: frontImage })));
|
|
367
367
|
};
|
|
368
368
|
exports.StraightInfinity = StraightInfinity;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { DetailImageProps } from '../../types';
|
|
3
|
-
export declare const DetailImage: ({ onClick, classDetail, hasDetail, detailRef, detailKey, src, alt, width, height, zIndex, white, alpha, blur, scale, transition }: DetailImageProps) => React.JSX.Element;
|
|
3
|
+
export declare const DetailImage: ({ onClick, classDetail, hasDetail, detailRef, detailKey, src, alt, width, height, zIndex, white, alpha, blur, scale, rotate, transition }: DetailImageProps) => React.JSX.Element;
|
|
@@ -7,7 +7,7 @@ exports.DetailImage = void 0;
|
|
|
7
7
|
const react_1 = __importDefault(require("react"));
|
|
8
8
|
const framer_motion_1 = require("framer-motion");
|
|
9
9
|
const styles_module_css_1 = __importDefault(require("./styles.module.css"));
|
|
10
|
-
const DetailImage = ({ onClick, classDetail, hasDetail, detailRef, detailKey, src, alt, width, height, zIndex, white = true, alpha = 0.3, blur = 3, scale = 2.5, transition }) => {
|
|
10
|
+
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 }) => {
|
|
11
11
|
const backdropFilter = hasDetail ? `blur(${blur}px)` : undefined;
|
|
12
12
|
const background = hasDetail
|
|
13
13
|
? white
|
|
@@ -23,7 +23,7 @@ const DetailImage = ({ onClick, classDetail, hasDetail, detailRef, detailKey, sr
|
|
|
23
23
|
zIndex: zIndex + 1,
|
|
24
24
|
scale: scale,
|
|
25
25
|
opacity: hasDetail ? 1 : 0,
|
|
26
|
-
|
|
26
|
+
rotate: rotate
|
|
27
27
|
}, initial: { scale: 1, opacity: 0 }, transition: transition })));
|
|
28
28
|
};
|
|
29
29
|
exports.DetailImage = DetailImage;
|
package/dist/types.d.ts
CHANGED
|
@@ -35,7 +35,7 @@ type DetailProperty = {
|
|
|
35
35
|
alpha?: number;
|
|
36
36
|
blur?: number;
|
|
37
37
|
scale?: number;
|
|
38
|
-
|
|
38
|
+
rotate?: number;
|
|
39
39
|
};
|
|
40
40
|
type CommonProperty = {
|
|
41
41
|
images: ImageProperty[];
|
|
@@ -91,6 +91,7 @@ export type DetailImageProps = {
|
|
|
91
91
|
alpha?: number;
|
|
92
92
|
blur?: number;
|
|
93
93
|
scale?: number;
|
|
94
|
+
rotate?: number;
|
|
94
95
|
transition?: TransitionProperty;
|
|
95
96
|
};
|
|
96
97
|
export {};
|