react-magic-card 2.0.6 → 2.0.7
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/dist/CircleRotation/index.js +23 -23
- package/dist/StraightInfinity/index.js +28 -37
- package/package.json +4 -2
|
@@ -190,7 +190,7 @@ const CircleRotation = ({ images, start, height, width, radius, controller, offs
|
|
|
190
190
|
const detail = refDetail.current;
|
|
191
191
|
const timeId = setTimeout(() => {
|
|
192
192
|
setHasDelayed(true);
|
|
193
|
-
}, (
|
|
193
|
+
}, (transition?.duration / 2) * 1000);
|
|
194
194
|
// Add handle event when component mount and deps update.
|
|
195
195
|
document.addEventListener('mouseup', handleMouseUp);
|
|
196
196
|
if (!hasDelayed)
|
|
@@ -225,7 +225,7 @@ const CircleRotation = ({ images, start, height, width, radius, controller, offs
|
|
|
225
225
|
handleTouchMove,
|
|
226
226
|
handleScroll,
|
|
227
227
|
hasDelayed,
|
|
228
|
-
transition
|
|
228
|
+
transition?.duration
|
|
229
229
|
]);
|
|
230
230
|
// The controll start or end.
|
|
231
231
|
// Added event when component is mounted.
|
|
@@ -298,37 +298,37 @@ const CircleRotation = ({ images, start, height, width, radius, controller, offs
|
|
|
298
298
|
' ' +
|
|
299
299
|
classImageUnique +
|
|
300
300
|
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
|
|
301
|
+
rotate: -count - (animate?.rotate ? animate?.rotate : 0),
|
|
302
|
+
scale: hasSelect ? animate?.selectScale : animate?.scale,
|
|
303
303
|
rotateY: hasSelect
|
|
304
|
-
? animate
|
|
305
|
-
: animate
|
|
304
|
+
? animate?.selectRotateY
|
|
305
|
+
: animate?.rotateY,
|
|
306
306
|
rotateX: hasSelect
|
|
307
|
-
? animate
|
|
308
|
-
: animate
|
|
307
|
+
? animate?.selectRotateX
|
|
308
|
+
: animate?.rotateX,
|
|
309
309
|
rotateZ: hasSelect
|
|
310
|
-
? animate
|
|
311
|
-
: animate
|
|
310
|
+
? animate?.selectRotateZ
|
|
311
|
+
: animate?.rotateZ,
|
|
312
312
|
opacity: hasSelect
|
|
313
313
|
? hasDetail
|
|
314
314
|
? 0
|
|
315
|
-
: animate
|
|
316
|
-
: animate
|
|
315
|
+
: animate?.selectOpacity
|
|
316
|
+
: animate?.opacity
|
|
317
317
|
}, initial: {
|
|
318
|
-
rotate: -count - (
|
|
319
|
-
scale: hasSelect ? initial
|
|
318
|
+
rotate: -count - (initial?.rotate ? initial?.rotate : 0),
|
|
319
|
+
scale: hasSelect ? initial?.selectScale : initial?.scale,
|
|
320
320
|
rotateY: hasSelect
|
|
321
|
-
? initial
|
|
322
|
-
: initial
|
|
321
|
+
? initial?.selectRotateY
|
|
322
|
+
: initial?.rotateY,
|
|
323
323
|
rotateX: hasSelect
|
|
324
|
-
? initial
|
|
325
|
-
: initial
|
|
324
|
+
? initial?.selectRotateX
|
|
325
|
+
: initial?.rotateX,
|
|
326
326
|
rotateZ: hasSelect
|
|
327
|
-
? initial
|
|
328
|
-
: initial
|
|
327
|
+
? initial?.selectRotateZ
|
|
328
|
+
: initial?.rotateZ,
|
|
329
329
|
opacity: hasSelect
|
|
330
|
-
? initial
|
|
331
|
-
: initial
|
|
330
|
+
? initial?.selectOpacity
|
|
331
|
+
: initial?.opacity
|
|
332
332
|
}, transition: transition, onPointerDown: () => setSelect(index), onClick: () => hasSelect && detail && !hasMove && setHasDetail(true), style: {
|
|
333
333
|
zIndex: hasSelect ? frontImage : zIndex,
|
|
334
334
|
width: width + 'px',
|
|
@@ -351,6 +351,6 @@ const CircleRotation = ({ images, start, height, width, radius, controller, offs
|
|
|
351
351
|
})))),
|
|
352
352
|
react_1.default.createElement(DetailImage_1.DetailImage, { detailRef: refDetail, detailKey: select, hasDetail: hasDetail, onClick: () => {
|
|
353
353
|
setHasDetail(false);
|
|
354
|
-
}, classDetail: detailProperty
|
|
354
|
+
}, 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
355
|
};
|
|
356
356
|
exports.CircleRotation = CircleRotation;
|
|
@@ -22,15 +22,6 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
22
22
|
__setModuleDefault(result, mod);
|
|
23
23
|
return result;
|
|
24
24
|
};
|
|
25
|
-
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
26
|
-
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
27
|
-
return new (P || (P = Promise))(function (resolve, reject) {
|
|
28
|
-
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
29
|
-
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
30
|
-
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
31
|
-
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
32
|
-
});
|
|
33
|
-
};
|
|
34
25
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
35
26
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
36
27
|
};
|
|
@@ -63,25 +54,25 @@ const StraightInfinity = ({ images, start, height, width, vertical = false, marg
|
|
|
63
54
|
const moveDelay = 140; // Minimum delay between moves in milliseconds.
|
|
64
55
|
// Functions of the swipe and wheel a shifting.
|
|
65
56
|
// turn left
|
|
66
|
-
const shiftLeft = (0, react_1.useCallback)(() =>
|
|
57
|
+
const shiftLeft = (0, react_1.useCallback)(async () => {
|
|
67
58
|
edge !== 0 && setSelect(select === 0 ? images.length - 1 : select - 1);
|
|
68
59
|
setEdge(edge === 0 ? images.length : edge - 1);
|
|
69
60
|
setHasShift(false);
|
|
70
61
|
setHasDelayed(false);
|
|
71
62
|
setCount(edge === 0 ? 5 : count + width + margin * 2);
|
|
72
63
|
return;
|
|
73
|
-
}
|
|
64
|
+
}, [count, images.length, margin, select, edge, width]);
|
|
74
65
|
// turn right
|
|
75
|
-
const shiftRight = (0, react_1.useCallback)(() =>
|
|
66
|
+
const shiftRight = (0, react_1.useCallback)(async () => {
|
|
76
67
|
edge !== 5 && setSelect(select === images.length - 1 ? 0 : select + 1);
|
|
77
68
|
setEdge(edge === images.length ? 0 : edge + 1);
|
|
78
69
|
setHasShift(true);
|
|
79
70
|
setHasDelayed(false);
|
|
80
71
|
setCount(edge === 5 ? 0 : count - (width + margin * 2));
|
|
81
72
|
return;
|
|
82
|
-
}
|
|
73
|
+
}, [count, images.length, margin, select, edge, width]);
|
|
83
74
|
// Wheel function of the desktop.
|
|
84
|
-
const handleScroll = (0, react_1.useCallback)((e) =>
|
|
75
|
+
const handleScroll = (0, react_1.useCallback)(async (e) => {
|
|
85
76
|
const now = Date.now();
|
|
86
77
|
if (now - lastMoveTime < moveDelay)
|
|
87
78
|
return;
|
|
@@ -91,7 +82,7 @@ const StraightInfinity = ({ images, start, height, width, vertical = false, marg
|
|
|
91
82
|
shiftLeft();
|
|
92
83
|
if (delta > 0)
|
|
93
84
|
shiftRight();
|
|
94
|
-
}
|
|
85
|
+
}, [shiftLeft, shiftRight, lastMoveTime, moveDelay]);
|
|
95
86
|
// Get a start y and x position in touchStart Y and X.
|
|
96
87
|
const handleTouchStart = (e) => {
|
|
97
88
|
const touch = e.touches[0];
|
|
@@ -177,7 +168,7 @@ const StraightInfinity = ({ images, start, height, width, vertical = false, marg
|
|
|
177
168
|
const detail = refDetail.current;
|
|
178
169
|
const timeId = setTimeout(() => {
|
|
179
170
|
setHasDelayed(true);
|
|
180
|
-
},
|
|
171
|
+
}, transition?.duration * 1000);
|
|
181
172
|
// Add handle event when component mount and deps update.
|
|
182
173
|
document.addEventListener('mouseup', handleMouseUp);
|
|
183
174
|
if (!hasDelayed)
|
|
@@ -211,7 +202,7 @@ const StraightInfinity = ({ images, start, height, width, vertical = false, marg
|
|
|
211
202
|
handleTouchMove,
|
|
212
203
|
handleScroll,
|
|
213
204
|
hasDelayed,
|
|
214
|
-
transition
|
|
205
|
+
transition?.duration
|
|
215
206
|
]);
|
|
216
207
|
// The controll start or end.
|
|
217
208
|
// Added event when component is mounted.
|
|
@@ -336,37 +327,37 @@ const StraightInfinity = ({ images, start, height, width, vertical = false, marg
|
|
|
336
327
|
y: vertical && hasEdge()
|
|
337
328
|
? -(images.length * height + images.length * (margin * 2))
|
|
338
329
|
: 0,
|
|
339
|
-
scale: hasSelect ? animate
|
|
340
|
-
rotate: hasSelect ? animate
|
|
330
|
+
scale: hasSelect ? animate?.selectScale : animate?.scale,
|
|
331
|
+
rotate: hasSelect ? animate?.selectRotate : animate?.rotate,
|
|
341
332
|
rotateY: hasSelect
|
|
342
|
-
? animate
|
|
343
|
-
: animate
|
|
333
|
+
? animate?.selectRotateY
|
|
334
|
+
: animate?.rotateY,
|
|
344
335
|
rotateX: hasSelect
|
|
345
|
-
? animate
|
|
346
|
-
: animate
|
|
336
|
+
? animate?.selectRotateX
|
|
337
|
+
: animate?.rotateX,
|
|
347
338
|
rotateZ: hasSelect
|
|
348
|
-
? animate
|
|
349
|
-
: animate
|
|
339
|
+
? animate?.selectRotateZ
|
|
340
|
+
: animate?.rotateZ,
|
|
350
341
|
opacity: images[images[edge] === images[images.length] ? 0 : edge] === images[index] || images[edge - 1] === images[index]
|
|
351
342
|
? 0
|
|
352
343
|
: hasSelect
|
|
353
344
|
? hasDetail
|
|
354
345
|
? 0
|
|
355
|
-
: animate
|
|
356
|
-
: animate
|
|
346
|
+
: animate?.selectOpacity
|
|
347
|
+
: animate?.opacity
|
|
357
348
|
}, initial: {
|
|
358
|
-
scale: hasSelect ? initial
|
|
359
|
-
rotate: hasSelect ? initial
|
|
349
|
+
scale: hasSelect ? initial?.selectScale : initial?.scale,
|
|
350
|
+
rotate: hasSelect ? initial?.selectRotate : initial?.rotate,
|
|
360
351
|
rotateY: hasSelect
|
|
361
|
-
? initial
|
|
362
|
-
: initial
|
|
352
|
+
? initial?.selectRotateY
|
|
353
|
+
: initial?.rotateY,
|
|
363
354
|
rotateX: hasSelect
|
|
364
|
-
? initial
|
|
365
|
-
: initial
|
|
355
|
+
? initial?.selectRotateX
|
|
356
|
+
: initial?.rotateX,
|
|
366
357
|
rotateZ: hasSelect
|
|
367
|
-
? initial
|
|
368
|
-
: initial
|
|
369
|
-
opacity: hasSelect ? initial
|
|
358
|
+
? initial?.selectRotateZ
|
|
359
|
+
: initial?.rotateZ,
|
|
360
|
+
opacity: hasSelect ? initial?.selectOpacity : initial?.opacity
|
|
370
361
|
}, transition: transition, onClick: () => {
|
|
371
362
|
hasSelect && detail && !hasMove && setHasDetail(true);
|
|
372
363
|
if (!hasDelayed)
|
|
@@ -396,6 +387,6 @@ const StraightInfinity = ({ images, start, height, width, vertical = false, marg
|
|
|
396
387
|
}))),
|
|
397
388
|
react_1.default.createElement(DetailImage_1.DetailImage, { detailRef: refDetail, detailKey: select, hasDetail: hasDetail, onClick: () => {
|
|
398
389
|
setHasDetail(false);
|
|
399
|
-
}, classDetail: detailProperty
|
|
390
|
+
}, 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
391
|
};
|
|
401
392
|
exports.StraightInfinity = StraightInfinity;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-magic-card",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.7",
|
|
4
4
|
"description": "React Component library for images gallery using the framer motion animation.",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"typings": "dist/index.d.ts",
|
|
@@ -14,7 +14,9 @@
|
|
|
14
14
|
"component",
|
|
15
15
|
"animation",
|
|
16
16
|
"images",
|
|
17
|
-
"gallery"
|
|
17
|
+
"gallery",
|
|
18
|
+
"circle",
|
|
19
|
+
"infinity"
|
|
18
20
|
],
|
|
19
21
|
"license": "MIT",
|
|
20
22
|
"peerDependencies": {
|