react-magic-card 2.0.6 → 2.0.8
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 +39 -37
- package/dist/CircleRotation/index.js +43 -31
- package/dist/StraightInfinity/index.js +48 -45
- package/dist/common/DetailImage/index.js +7 -8
- package/package.json +25 -12
package/README.md
CHANGED
|
@@ -1,10 +1,8 @@
|
|
|
1
|
-
# react-magic-card
|
|
2
|
-
|
|
3
1
|
[](https://github.com/su-pull/react-magic-card/releases/latest)
|
|
4
2
|
[](https://bundlephobia.com/package/react-magic-card)
|
|
5
3
|
[](https://opensource.org/licenses/MIT)
|
|
6
4
|
|
|
7
|
-
This is the framer motion components, that support images gallery.
|
|
5
|
+
This is the framer motion animation components, that support images gallery.
|
|
8
6
|
|
|
9
7
|
## Installation
|
|
10
8
|
|
|
@@ -15,25 +13,31 @@ npm install react-magic-card framer-motion
|
|
|
15
13
|
## Usage Guide
|
|
16
14
|
|
|
17
15
|
```tsx
|
|
18
|
-
import {
|
|
16
|
+
import { StraightInfinity } from 'react-magic-card'
|
|
19
17
|
|
|
20
18
|
function MyComponent() {
|
|
21
19
|
const images = [
|
|
22
20
|
{
|
|
23
|
-
src: '/
|
|
21
|
+
src: '/cat.jpeg',
|
|
22
|
+
alt: 'alt'
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
src: '/dog.jpeg',
|
|
26
|
+
alt: 'alt'
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
src: '/bird.jpeg',
|
|
24
30
|
alt: 'alt'
|
|
25
31
|
}
|
|
26
32
|
]
|
|
27
33
|
|
|
28
34
|
return (
|
|
29
|
-
<
|
|
35
|
+
<StraightInfinity
|
|
30
36
|
images={images}
|
|
31
37
|
width={100}
|
|
32
38
|
height={100}
|
|
33
|
-
radius={100}
|
|
34
39
|
controller={100}
|
|
35
|
-
start={1}
|
|
36
|
-
delay={100}
|
|
40
|
+
start={Math.ceil(images.length / 2 - 1)}
|
|
37
41
|
/>
|
|
38
42
|
)
|
|
39
43
|
}
|
|
@@ -48,12 +52,8 @@ function MyComponent() {
|
|
|
48
52
|
| width (required) | width of the single image |
|
|
49
53
|
| height (required) | height of the single image |
|
|
50
54
|
| controller (required) | controller size is add to the size of the component |
|
|
51
|
-
| delay | delay of the animation firing interval |
|
|
52
55
|
| offsetIndex | add an offset to the index of the components and images |
|
|
53
56
|
| reverseIndex | order the change the overlap of zindex default true |
|
|
54
|
-
| loading | loading attribute of img element in html |
|
|
55
|
-
| initialFadeRange | range of fade animation after page loaded |
|
|
56
|
-
| initialTransTime | transition time of fade animation after page loaded |
|
|
57
57
|
| className | className of the component |
|
|
58
58
|
| classImages | className of the images |
|
|
59
59
|
| classImageSelect | className of the select image |
|
|
@@ -61,24 +61,24 @@ function MyComponent() {
|
|
|
61
61
|
| animate | object in the animation property |
|
|
62
62
|
| initial | object in the animation property |
|
|
63
63
|
| transition | object in the transition property |
|
|
64
|
-
|
|
|
65
|
-
|
|
|
64
|
+
| detailTransition | object in the transition property |
|
|
65
|
+
| detailProperty | object in the detail property |
|
|
66
|
+
| loading | loading attribute of img element in html |
|
|
67
|
+
| initialFadeRange | range of fade animation after page loaded |
|
|
68
|
+
| initialTransTime | transition time of fade animation after page loaded |
|
|
66
69
|
|
|
67
|
-
##
|
|
70
|
+
## CircleRotation Properties
|
|
68
71
|
|
|
69
|
-
| Property | Meaning
|
|
70
|
-
| ----------------- |
|
|
71
|
-
| radius (required) | radius of the circle
|
|
72
|
-
| dynamic | dynamic or static for rotation the default true |
|
|
72
|
+
| Property | Meaning |
|
|
73
|
+
| ----------------- | -------------------- |
|
|
74
|
+
| radius (required) | radius of the circle |
|
|
73
75
|
|
|
74
|
-
##
|
|
76
|
+
## StraightInfinity Properties
|
|
75
77
|
|
|
76
|
-
| Property
|
|
77
|
-
|
|
|
78
|
-
| vertical
|
|
79
|
-
| margin
|
|
80
|
-
| selectOffsetX | X-axis position |
|
|
81
|
-
| selectOffsetY | Y-axis position |
|
|
78
|
+
| Property | Meaning |
|
|
79
|
+
| -------- | --------------------------------------- |
|
|
80
|
+
| vertical | vertical or horizontal the default true |
|
|
81
|
+
| margin | spacing of the between images |
|
|
82
82
|
|
|
83
83
|
## Animation Object
|
|
84
84
|
|
|
@@ -86,29 +86,31 @@ 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 |
|
|
97
99
|
|
|
98
100
|
## Transition Object
|
|
99
101
|
|
|
100
|
-
It is Inherits framer motion transition object
|
|
102
|
+
It is Inherits framer motion transition object ease and (type: 'spring').
|
|
101
103
|
|
|
102
|
-
##
|
|
104
|
+
## detailProperty Object
|
|
103
105
|
|
|
104
|
-
| Property
|
|
105
|
-
|
|
|
106
|
-
|
|
|
107
|
-
| white
|
|
108
|
-
| alpha
|
|
109
|
-
| blur
|
|
110
|
-
| scale
|
|
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
|
|
|
@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
|
|
|
15
15
|
}) : function(o, v) {
|
|
16
16
|
o["default"] = v;
|
|
17
17
|
});
|
|
18
|
-
var __importStar = (this && this.__importStar) || function (
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
};
|
|
18
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
19
|
+
var ownKeys = function(o) {
|
|
20
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
21
|
+
var ar = [];
|
|
22
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
23
|
+
return ar;
|
|
24
|
+
};
|
|
25
|
+
return ownKeys(o);
|
|
26
|
+
};
|
|
27
|
+
return function (mod) {
|
|
28
|
+
if (mod && mod.__esModule) return mod;
|
|
29
|
+
var result = {};
|
|
30
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
31
|
+
__setModuleDefault(result, mod);
|
|
32
|
+
return result;
|
|
33
|
+
};
|
|
34
|
+
})();
|
|
25
35
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
26
36
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
27
37
|
};
|
|
@@ -190,7 +200,7 @@ const CircleRotation = ({ images, start, height, width, radius, controller, offs
|
|
|
190
200
|
const detail = refDetail.current;
|
|
191
201
|
const timeId = setTimeout(() => {
|
|
192
202
|
setHasDelayed(true);
|
|
193
|
-
}, (
|
|
203
|
+
}, (transition?.duration / 2) * 1000);
|
|
194
204
|
// Add handle event when component mount and deps update.
|
|
195
205
|
document.addEventListener('mouseup', handleMouseUp);
|
|
196
206
|
if (!hasDelayed)
|
|
@@ -225,7 +235,7 @@ const CircleRotation = ({ images, start, height, width, radius, controller, offs
|
|
|
225
235
|
handleTouchMove,
|
|
226
236
|
handleScroll,
|
|
227
237
|
hasDelayed,
|
|
228
|
-
transition
|
|
238
|
+
transition?.duration
|
|
229
239
|
]);
|
|
230
240
|
// The controll start or end.
|
|
231
241
|
// Added event when component is mounted.
|
|
@@ -298,38 +308,40 @@ const CircleRotation = ({ images, start, height, width, radius, controller, offs
|
|
|
298
308
|
' ' +
|
|
299
309
|
classImageUnique +
|
|
300
310
|
zIndex, role: 'button', "aria-label": "click and scale image", src: image.src, alt: image.alt, draggable: false, loading: loading, animate: {
|
|
301
|
-
rotate: -count - (
|
|
302
|
-
scale: hasSelect ? animate
|
|
311
|
+
rotate: -count - (animate?.rotate ? animate?.rotate : 0),
|
|
312
|
+
scale: hasSelect ? animate?.selectScale : animate?.scale,
|
|
303
313
|
rotateY: hasSelect
|
|
304
|
-
? animate
|
|
305
|
-
: animate
|
|
314
|
+
? animate?.selectRotateY
|
|
315
|
+
: animate?.rotateY,
|
|
306
316
|
rotateX: hasSelect
|
|
307
|
-
? animate
|
|
308
|
-
: animate
|
|
317
|
+
? animate?.selectRotateX
|
|
318
|
+
: animate?.rotateX,
|
|
309
319
|
rotateZ: hasSelect
|
|
310
|
-
? animate
|
|
311
|
-
: animate
|
|
320
|
+
? animate?.selectRotateZ
|
|
321
|
+
: animate?.rotateZ,
|
|
312
322
|
opacity: hasSelect
|
|
313
323
|
? hasDetail
|
|
314
324
|
? 0
|
|
315
|
-
: animate
|
|
316
|
-
: animate
|
|
325
|
+
: animate?.selectOpacity ?? 1
|
|
326
|
+
: animate?.opacity ?? 1
|
|
317
327
|
}, initial: {
|
|
318
|
-
rotate: -count - (
|
|
319
|
-
scale: hasSelect ? initial
|
|
328
|
+
rotate: -count - (initial?.rotate ? initial?.rotate : 0),
|
|
329
|
+
scale: hasSelect ? initial?.selectScale : initial?.scale,
|
|
320
330
|
rotateY: hasSelect
|
|
321
|
-
? initial
|
|
322
|
-
: initial
|
|
331
|
+
? initial?.selectRotateY
|
|
332
|
+
: initial?.rotateY,
|
|
323
333
|
rotateX: hasSelect
|
|
324
|
-
? initial
|
|
325
|
-
: initial
|
|
334
|
+
? initial?.selectRotateX
|
|
335
|
+
: initial?.rotateX,
|
|
326
336
|
rotateZ: hasSelect
|
|
327
|
-
? initial
|
|
328
|
-
: initial
|
|
337
|
+
? initial?.selectRotateZ
|
|
338
|
+
: initial?.rotateZ,
|
|
329
339
|
opacity: hasSelect
|
|
330
|
-
? initial
|
|
331
|
-
: initial
|
|
332
|
-
}, transition:
|
|
340
|
+
? initial?.selectOpacity
|
|
341
|
+
: initial?.opacity
|
|
342
|
+
}, transition: hasSelect && detailTransition
|
|
343
|
+
? { ...transition, opacity: detailTransition }
|
|
344
|
+
: transition, onPointerDown: () => setSelect(index), onClick: () => hasSelect && detail && !hasMove && setHasDetail(true), style: {
|
|
333
345
|
zIndex: hasSelect ? frontImage : zIndex,
|
|
334
346
|
width: width + 'px',
|
|
335
347
|
height: height + 'px',
|
|
@@ -351,6 +363,6 @@ const CircleRotation = ({ images, start, height, width, radius, controller, offs
|
|
|
351
363
|
})))),
|
|
352
364
|
react_1.default.createElement(DetailImage_1.DetailImage, { detailRef: refDetail, detailKey: select, hasDetail: hasDetail, onClick: () => {
|
|
353
365
|
setHasDetail(false);
|
|
354
|
-
}, classDetail: detailProperty
|
|
366
|
+
}, classDetail: detailProperty?.classDetail, src: images[select].src, alt: images[select].alt, width: width, height: height, white: detailProperty?.white, alpha: detailProperty?.alpha, blur: detailProperty?.blur, scale: detailProperty?.scale, rotate: detailProperty?.rotate, transition: detailTransition, zIndex: frontImage })));
|
|
355
367
|
};
|
|
356
368
|
exports.CircleRotation = CircleRotation;
|
|
@@ -15,22 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
|
|
|
15
15
|
}) : function(o, v) {
|
|
16
16
|
o["default"] = v;
|
|
17
17
|
});
|
|
18
|
-
var __importStar = (this && this.__importStar) || function (
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
};
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
return
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
};
|
|
18
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
19
|
+
var ownKeys = function(o) {
|
|
20
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
21
|
+
var ar = [];
|
|
22
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
23
|
+
return ar;
|
|
24
|
+
};
|
|
25
|
+
return ownKeys(o);
|
|
26
|
+
};
|
|
27
|
+
return function (mod) {
|
|
28
|
+
if (mod && mod.__esModule) return mod;
|
|
29
|
+
var result = {};
|
|
30
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
31
|
+
__setModuleDefault(result, mod);
|
|
32
|
+
return result;
|
|
33
|
+
};
|
|
34
|
+
})();
|
|
34
35
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
35
36
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
36
37
|
};
|
|
@@ -63,25 +64,25 @@ const StraightInfinity = ({ images, start, height, width, vertical = false, marg
|
|
|
63
64
|
const moveDelay = 140; // Minimum delay between moves in milliseconds.
|
|
64
65
|
// Functions of the swipe and wheel a shifting.
|
|
65
66
|
// turn left
|
|
66
|
-
const shiftLeft = (0, react_1.useCallback)(() =>
|
|
67
|
+
const shiftLeft = (0, react_1.useCallback)(async () => {
|
|
67
68
|
edge !== 0 && setSelect(select === 0 ? images.length - 1 : select - 1);
|
|
68
69
|
setEdge(edge === 0 ? images.length : edge - 1);
|
|
69
70
|
setHasShift(false);
|
|
70
71
|
setHasDelayed(false);
|
|
71
72
|
setCount(edge === 0 ? 5 : count + width + margin * 2);
|
|
72
73
|
return;
|
|
73
|
-
}
|
|
74
|
+
}, [count, images.length, margin, select, edge, width]);
|
|
74
75
|
// turn right
|
|
75
|
-
const shiftRight = (0, react_1.useCallback)(() =>
|
|
76
|
+
const shiftRight = (0, react_1.useCallback)(async () => {
|
|
76
77
|
edge !== 5 && setSelect(select === images.length - 1 ? 0 : select + 1);
|
|
77
78
|
setEdge(edge === images.length ? 0 : edge + 1);
|
|
78
79
|
setHasShift(true);
|
|
79
80
|
setHasDelayed(false);
|
|
80
81
|
setCount(edge === 5 ? 0 : count - (width + margin * 2));
|
|
81
82
|
return;
|
|
82
|
-
}
|
|
83
|
+
}, [count, images.length, margin, select, edge, width]);
|
|
83
84
|
// Wheel function of the desktop.
|
|
84
|
-
const handleScroll = (0, react_1.useCallback)((e) =>
|
|
85
|
+
const handleScroll = (0, react_1.useCallback)(async (e) => {
|
|
85
86
|
const now = Date.now();
|
|
86
87
|
if (now - lastMoveTime < moveDelay)
|
|
87
88
|
return;
|
|
@@ -91,7 +92,7 @@ const StraightInfinity = ({ images, start, height, width, vertical = false, marg
|
|
|
91
92
|
shiftLeft();
|
|
92
93
|
if (delta > 0)
|
|
93
94
|
shiftRight();
|
|
94
|
-
}
|
|
95
|
+
}, [shiftLeft, shiftRight, lastMoveTime, moveDelay]);
|
|
95
96
|
// Get a start y and x position in touchStart Y and X.
|
|
96
97
|
const handleTouchStart = (e) => {
|
|
97
98
|
const touch = e.touches[0];
|
|
@@ -177,7 +178,7 @@ const StraightInfinity = ({ images, start, height, width, vertical = false, marg
|
|
|
177
178
|
const detail = refDetail.current;
|
|
178
179
|
const timeId = setTimeout(() => {
|
|
179
180
|
setHasDelayed(true);
|
|
180
|
-
},
|
|
181
|
+
}, transition?.duration * 1000);
|
|
181
182
|
// Add handle event when component mount and deps update.
|
|
182
183
|
document.addEventListener('mouseup', handleMouseUp);
|
|
183
184
|
if (!hasDelayed)
|
|
@@ -211,7 +212,7 @@ const StraightInfinity = ({ images, start, height, width, vertical = false, marg
|
|
|
211
212
|
handleTouchMove,
|
|
212
213
|
handleScroll,
|
|
213
214
|
hasDelayed,
|
|
214
|
-
transition
|
|
215
|
+
transition?.duration
|
|
215
216
|
]);
|
|
216
217
|
// The controll start or end.
|
|
217
218
|
// Added event when component is mounted.
|
|
@@ -336,38 +337,40 @@ const StraightInfinity = ({ images, start, height, width, vertical = false, marg
|
|
|
336
337
|
y: vertical && hasEdge()
|
|
337
338
|
? -(images.length * height + images.length * (margin * 2))
|
|
338
339
|
: 0,
|
|
339
|
-
scale: hasSelect ? animate
|
|
340
|
-
rotate: hasSelect ? animate
|
|
340
|
+
scale: hasSelect ? animate?.selectScale : animate?.scale,
|
|
341
|
+
rotate: hasSelect ? animate?.selectRotate : animate?.rotate,
|
|
341
342
|
rotateY: hasSelect
|
|
342
|
-
? animate
|
|
343
|
-
: animate
|
|
343
|
+
? animate?.selectRotateY
|
|
344
|
+
: animate?.rotateY,
|
|
344
345
|
rotateX: hasSelect
|
|
345
|
-
? animate
|
|
346
|
-
: animate
|
|
346
|
+
? animate?.selectRotateX
|
|
347
|
+
: animate?.rotateX,
|
|
347
348
|
rotateZ: hasSelect
|
|
348
|
-
? animate
|
|
349
|
-
: animate
|
|
349
|
+
? animate?.selectRotateZ
|
|
350
|
+
: animate?.rotateZ,
|
|
350
351
|
opacity: images[images[edge] === images[images.length] ? 0 : edge] === images[index] || images[edge - 1] === images[index]
|
|
351
352
|
? 0
|
|
352
353
|
: hasSelect
|
|
353
354
|
? hasDetail
|
|
354
355
|
? 0
|
|
355
|
-
: animate
|
|
356
|
-
: animate
|
|
356
|
+
: animate?.selectOpacity ?? 1
|
|
357
|
+
: animate?.opacity ?? 1
|
|
357
358
|
}, initial: {
|
|
358
|
-
scale: hasSelect ? initial
|
|
359
|
-
rotate: hasSelect ? initial
|
|
359
|
+
scale: hasSelect ? initial?.selectScale : initial?.scale,
|
|
360
|
+
rotate: hasSelect ? initial?.selectRotate : initial?.rotate,
|
|
360
361
|
rotateY: hasSelect
|
|
361
|
-
? initial
|
|
362
|
-
: initial
|
|
362
|
+
? initial?.selectRotateY
|
|
363
|
+
: initial?.rotateY,
|
|
363
364
|
rotateX: hasSelect
|
|
364
|
-
? initial
|
|
365
|
-
: initial
|
|
365
|
+
? initial?.selectRotateX
|
|
366
|
+
: initial?.rotateX,
|
|
366
367
|
rotateZ: hasSelect
|
|
367
|
-
? initial
|
|
368
|
-
: initial
|
|
369
|
-
opacity: hasSelect ? initial
|
|
370
|
-
}, transition:
|
|
368
|
+
? initial?.selectRotateZ
|
|
369
|
+
: initial?.rotateZ,
|
|
370
|
+
opacity: hasSelect ? initial?.selectOpacity : initial?.opacity
|
|
371
|
+
}, transition: hasSelect && detailTransition
|
|
372
|
+
? { ...transition, opacity: detailTransition }
|
|
373
|
+
: transition, onClick: () => {
|
|
371
374
|
hasSelect && detail && !hasMove && setHasDetail(true);
|
|
372
375
|
if (!hasDelayed)
|
|
373
376
|
return;
|
|
@@ -396,6 +399,6 @@ const StraightInfinity = ({ images, start, height, width, vertical = false, marg
|
|
|
396
399
|
}))),
|
|
397
400
|
react_1.default.createElement(DetailImage_1.DetailImage, { detailRef: refDetail, detailKey: select, hasDetail: hasDetail, onClick: () => {
|
|
398
401
|
setHasDetail(false);
|
|
399
|
-
}, classDetail: detailProperty
|
|
402
|
+
}, classDetail: detailProperty?.classDetail, src: images[select].src, alt: images[select].alt, width: width, height: height, white: detailProperty?.white, alpha: detailProperty?.alpha, blur: detailProperty?.blur, scale: detailProperty?.scale, rotate: detailProperty?.rotate, transition: detailTransition, zIndex: frontImage })));
|
|
400
403
|
};
|
|
401
404
|
exports.StraightInfinity = StraightInfinity;
|
|
@@ -8,17 +8,16 @@ 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
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
|
-
const backdropFilter =
|
|
12
|
-
const
|
|
13
|
-
|
|
14
|
-
? `rgba(255, 255, 255, ${alpha})`
|
|
15
|
-
: `rgba(0, 0, 0, ${alpha})`
|
|
16
|
-
: undefined;
|
|
11
|
+
const backdropFilter = `blur(${hasDetail ? blur : 0}px)`;
|
|
12
|
+
const color = white ? '255, 255, 255' : '0, 0, 0';
|
|
13
|
+
const backgroundColor = `rgba(${color}, ${hasDetail ? alpha : 0})`;
|
|
17
14
|
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: {
|
|
18
15
|
zIndex: zIndex,
|
|
19
|
-
|
|
16
|
+
backdropFilter: backdropFilter,
|
|
17
|
+
WebkitBackdropFilter: backdropFilter,
|
|
18
|
+
backgroundColor: backgroundColor,
|
|
20
19
|
pointerEvents: hasDetail ? 'auto' : 'none'
|
|
21
|
-
},
|
|
20
|
+
}, initial: false, transition: transition },
|
|
22
21
|
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: {
|
|
23
22
|
zIndex: zIndex + 1,
|
|
24
23
|
scale: scale,
|
package/package.json
CHANGED
|
@@ -1,28 +1,41 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-magic-card",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.8",
|
|
4
4
|
"description": "React Component library for images gallery using the framer motion animation.",
|
|
5
|
-
"main": "dist/index.js",
|
|
6
|
-
"typings": "dist/index.d.ts",
|
|
7
|
-
"repository": {
|
|
8
|
-
"type": "git",
|
|
9
|
-
"url": "https://github.com/su-pull/react-magic-card",
|
|
10
|
-
"directory": "react-magic-card/src"
|
|
11
|
-
},
|
|
12
5
|
"keywords": [
|
|
13
6
|
"react",
|
|
14
7
|
"component",
|
|
15
8
|
"animation",
|
|
16
9
|
"images",
|
|
17
|
-
"gallery"
|
|
10
|
+
"gallery",
|
|
11
|
+
"circle",
|
|
12
|
+
"infinity"
|
|
18
13
|
],
|
|
19
14
|
"license": "MIT",
|
|
15
|
+
"repository": {
|
|
16
|
+
"type": "git",
|
|
17
|
+
"url": "https://github.com/su-pull/react-magic-card",
|
|
18
|
+
"directory": "react-magic-card/src"
|
|
19
|
+
},
|
|
20
|
+
"main": "dist/index.js",
|
|
21
|
+
"typings": "dist/index.d.ts",
|
|
22
|
+
"files": [
|
|
23
|
+
"dist/"
|
|
24
|
+
],
|
|
25
|
+
"scripts": {
|
|
26
|
+
"build": "npx tsc && npm run copy-css",
|
|
27
|
+
"copy-css": "npm run copy-css1 && npm run copy-css2 && npm run copy-css3",
|
|
28
|
+
"copy-css1": "cp src/CircleRotation/styles.module.css dist/CircleRotation/styles.module.css",
|
|
29
|
+
"copy-css2": "cp src/StraightInfinity/styles.module.css dist/StraightInfinity/styles.module.css",
|
|
30
|
+
"copy-css3": "cp src/common/DetailImage/styles.module.css dist/common/DetailImage/styles.module.css",
|
|
31
|
+
"test": "test"
|
|
32
|
+
},
|
|
20
33
|
"peerDependencies": {
|
|
21
34
|
"framer-motion": "^11.3.21"
|
|
22
35
|
},
|
|
23
36
|
"devDependencies": {
|
|
24
|
-
"
|
|
25
|
-
"@types/react": "^18.
|
|
26
|
-
"
|
|
37
|
+
"@types/css-modules": "^1.0.5",
|
|
38
|
+
"@types/react": "^18.3.31",
|
|
39
|
+
"typescript": "^6.0.3"
|
|
27
40
|
}
|
|
28
41
|
}
|