react-magic-card 2.0.5 → 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.
Files changed (3) hide show
  1. package/dist/CircleRotation/index.js +40 -27
  2. package/dist/StraightInfinity/index.js +63 -39
  3. package/package.json +4 -2
package/dist/CircleRotation/index.js CHANGED
@@ -45,6 +45,8 @@ const CircleRotation = ({ images, start, height, width, radius, controller, offs
45
45
  const [hasDelayed, setHasDelayed] = (0, react_1.useState)(true);
46
46
  const [select, setSelect] = (0, react_1.useState)(start);
47
47
  const [hasDetail, setHasDetail] = (0, react_1.useState)(false);
48
+ const [lastMoveTime, setLastMoveTime] = (0, react_1.useState)(Date.now());
49
+ const moveDelay = 140;
48
50
  const refOuter = (0, react_1.useRef)(null);
49
51
  const refDetail = (0, react_1.useRef)(null);
50
52
  const centralAngle = ((2 * Math.PI) / images.length) * (180 / Math.PI);
@@ -54,21 +56,26 @@ const CircleRotation = ({ images, start, height, width, radius, controller, offs
54
56
  setSelect(select == 0 ? images.length - 1 : select - 1);
55
57
  setHasDelayed(false);
56
58
  setCount(count + centralAngle);
59
+ setLastMoveTime(Date.now());
57
60
  }, [centralAngle, count, images.length, select]);
58
61
  // turn right
59
62
  const shiftRight = (0, react_1.useCallback)(() => {
60
63
  setSelect(select == images.length - 1 ? 0 : select + 1);
61
64
  setHasDelayed(false);
62
65
  setCount(count - centralAngle);
66
+ setLastMoveTime(Date.now());
63
67
  }, [centralAngle, count, images.length, select]);
64
68
  // Function of the desktop.
65
69
  const handleScroll = (0, react_1.useCallback)((e) => {
70
+ const currentTime = Date.now();
71
+ if (currentTime - lastMoveTime < moveDelay)
72
+ return;
66
73
  const delta = e.deltaY;
67
74
  if (delta < 0)
68
75
  shiftLeft();
69
76
  if (delta > 0)
70
77
  shiftRight();
71
- }, [shiftLeft, shiftRight]);
78
+ }, [lastMoveTime, shiftLeft, shiftRight]);
72
79
  // Get a start y and x position in touchStart Y and X.
73
80
  const handleTouchStart = (e) => {
74
81
  const touch = e.touches[0];
@@ -77,6 +84,9 @@ const CircleRotation = ({ images, start, height, width, radius, controller, offs
77
84
  };
78
85
  // Function of the mobile.
79
86
  const handleTouchMove = (0, react_1.useCallback)((event) => {
87
+ const currentTime = Date.now();
88
+ if (currentTime - lastMoveTime < moveDelay)
89
+ return;
80
90
  const touch = event.touches[0];
81
91
  const outer = refOuter.current;
82
92
  const outerHalfWidth = outer.clientWidth / 2;
@@ -116,7 +126,8 @@ const CircleRotation = ({ images, start, height, width, radius, controller, offs
116
126
  }
117
127
  setTouchStartX(deltaX);
118
128
  setTouchStartY(deltaY);
119
- }, [shiftLeft, shiftRight, touchStartX, touchStartY]);
129
+ setLastMoveTime(Date.now());
130
+ }, [shiftLeft, shiftRight, touchStartX, touchStartY, lastMoveTime]);
120
131
  const handleMouseDown = (0, react_1.useCallback)((e) => {
121
132
  if (hasDetail)
122
133
  return;
@@ -125,7 +136,8 @@ const CircleRotation = ({ images, start, height, width, radius, controller, offs
125
136
  setInitialY(e.clientY);
126
137
  }, [hasDetail]);
127
138
  const handleMouseMove = (0, react_1.useCallback)((e) => {
128
- if (isDragging) {
139
+ const currentTime = Date.now();
140
+ if (isDragging && currentTime - lastMoveTime >= moveDelay) {
129
141
  const outer = refOuter.current;
130
142
  const outerHalfWidth = outer.clientWidth / 2;
131
143
  const outerHalfHeight = outer.clientHeight / 2;
@@ -165,8 +177,9 @@ const CircleRotation = ({ images, start, height, width, radius, controller, offs
165
177
  setInitialX(e.clientX);
166
178
  setInitialY(e.clientY);
167
179
  setHasMove(true);
180
+ setLastMoveTime(Date.now());
168
181
  }
169
- }, [initialX, initialY, isDragging, shiftLeft, shiftRight]);
182
+ }, [initialX, initialY, isDragging, shiftLeft, shiftRight, lastMoveTime]);
170
183
  const handleMouseUp = (0, react_1.useCallback)(() => {
171
184
  setIsDragging(false);
172
185
  setHasMove(false);
@@ -177,7 +190,7 @@ const CircleRotation = ({ images, start, height, width, radius, controller, offs
177
190
  const detail = refDetail.current;
178
191
  const timeId = setTimeout(() => {
179
192
  setHasDelayed(true);
180
- }, ((transition === null || transition === void 0 ? void 0 : transition.duration) / 2) * 1000);
193
+ }, (transition?.duration / 2) * 1000);
181
194
  // Add handle event when component mount and deps update.
182
195
  document.addEventListener('mouseup', handleMouseUp);
183
196
  if (!hasDelayed)
@@ -212,7 +225,7 @@ const CircleRotation = ({ images, start, height, width, radius, controller, offs
212
225
  handleTouchMove,
213
226
  handleScroll,
214
227
  hasDelayed,
215
- transition === null || transition === void 0 ? void 0 : transition.duration
228
+ transition?.duration
216
229
  ]);
217
230
  // The controll start or end.
218
231
  // Added event when component is mounted.
@@ -285,37 +298,37 @@ const CircleRotation = ({ images, start, height, width, radius, controller, offs
285
298
  ' ' +
286
299
  classImageUnique +
287
300
  zIndex, role: 'button', "aria-label": "click and scale image", src: image.src, alt: image.alt, draggable: false, loading: loading, animate: {
288
- rotate: -count - ((animate === null || animate === void 0 ? void 0 : animate.rotate) ? animate === null || animate === void 0 ? void 0 : animate.rotate : 0),
289
- scale: hasSelect ? animate === null || animate === void 0 ? void 0 : animate.selectScale : animate === null || animate === void 0 ? void 0 : animate.scale,
301
+ rotate: -count - (animate?.rotate ? animate?.rotate : 0),
302
+ scale: hasSelect ? animate?.selectScale : animate?.scale,
290
303
  rotateY: hasSelect
291
- ? animate === null || animate === void 0 ? void 0 : animate.selectRotateY
292
- : animate === null || animate === void 0 ? void 0 : animate.rotateY,
304
+ ? animate?.selectRotateY
305
+ : animate?.rotateY,
293
306
  rotateX: hasSelect
294
- ? animate === null || animate === void 0 ? void 0 : animate.selectRotateX
295
- : animate === null || animate === void 0 ? void 0 : animate.rotateX,
307
+ ? animate?.selectRotateX
308
+ : animate?.rotateX,
296
309
  rotateZ: hasSelect
297
- ? animate === null || animate === void 0 ? void 0 : animate.selectRotateZ
298
- : animate === null || animate === void 0 ? void 0 : animate.rotateZ,
310
+ ? animate?.selectRotateZ
311
+ : animate?.rotateZ,
299
312
  opacity: hasSelect
300
313
  ? hasDetail
301
314
  ? 0
302
- : animate === null || animate === void 0 ? void 0 : animate.selectOpacity
303
- : animate === null || animate === void 0 ? void 0 : animate.opacity
315
+ : animate?.selectOpacity
316
+ : animate?.opacity
304
317
  }, initial: {
305
- rotate: -count - ((initial === null || initial === void 0 ? void 0 : initial.rotate) ? initial === null || initial === void 0 ? void 0 : initial.rotate : 0),
306
- scale: hasSelect ? initial === null || initial === void 0 ? void 0 : initial.selectScale : initial === null || initial === void 0 ? void 0 : initial.scale,
318
+ rotate: -count - (initial?.rotate ? initial?.rotate : 0),
319
+ scale: hasSelect ? initial?.selectScale : initial?.scale,
307
320
  rotateY: hasSelect
308
- ? initial === null || initial === void 0 ? void 0 : initial.selectRotateY
309
- : initial === null || initial === void 0 ? void 0 : initial.rotateY,
321
+ ? initial?.selectRotateY
322
+ : initial?.rotateY,
310
323
  rotateX: hasSelect
311
- ? initial === null || initial === void 0 ? void 0 : initial.selectRotateX
312
- : initial === null || initial === void 0 ? void 0 : initial.rotateX,
324
+ ? initial?.selectRotateX
325
+ : initial?.rotateX,
313
326
  rotateZ: hasSelect
314
- ? initial === null || initial === void 0 ? void 0 : initial.selectRotateZ
315
- : initial === null || initial === void 0 ? void 0 : initial.rotateZ,
327
+ ? initial?.selectRotateZ
328
+ : initial?.rotateZ,
316
329
  opacity: hasSelect
317
- ? initial === null || initial === void 0 ? void 0 : initial.selectOpacity
318
- : initial === null || initial === void 0 ? void 0 : initial.opacity
330
+ ? initial?.selectOpacity
331
+ : initial?.opacity
319
332
  }, transition: transition, onPointerDown: () => setSelect(index), onClick: () => hasSelect && detail && !hasMove && setHasDetail(true), style: {
320
333
  zIndex: hasSelect ? frontImage : zIndex,
321
334
  width: width + 'px',
@@ -338,6 +351,6 @@ const CircleRotation = ({ images, start, height, width, radius, controller, offs
338
351
  })))),
339
352
  react_1.default.createElement(DetailImage_1.DetailImage, { detailRef: refDetail, detailKey: select, hasDetail: hasDetail, onClick: () => {
340
353
  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 })));
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 })));
342
355
  };
343
356
  exports.CircleRotation = CircleRotation;
package/dist/StraightInfinity/index.js CHANGED
@@ -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
  };
@@ -58,33 +49,40 @@ const StraightInfinity = ({ images, start, height, width, vertical = false, marg
58
49
  const refOuter = (0, react_1.useRef)(null);
59
50
  const refDetail = (0, react_1.useRef)(null);
60
51
  const [count, setCount] = (0, react_1.useState)(0);
52
+ // Adding variables for speed limiting
53
+ const [lastMoveTime, setLastMoveTime] = (0, react_1.useState)(Date.now());
54
+ const moveDelay = 140; // Minimum delay between moves in milliseconds.
61
55
  // Functions of the swipe and wheel a shifting.
62
56
  // turn left
63
- const shiftLeft = (0, react_1.useCallback)(() => __awaiter(void 0, void 0, void 0, function* () {
57
+ const shiftLeft = (0, react_1.useCallback)(async () => {
64
58
  edge !== 0 && setSelect(select === 0 ? images.length - 1 : select - 1);
65
59
  setEdge(edge === 0 ? images.length : edge - 1);
66
60
  setHasShift(false);
67
61
  setHasDelayed(false);
68
62
  setCount(edge === 0 ? 5 : count + width + margin * 2);
69
63
  return;
70
- }), [count, images.length, margin, select, edge, width]);
64
+ }, [count, images.length, margin, select, edge, width]);
71
65
  // turn right
72
- const shiftRight = (0, react_1.useCallback)(() => __awaiter(void 0, void 0, void 0, function* () {
66
+ const shiftRight = (0, react_1.useCallback)(async () => {
73
67
  edge !== 5 && setSelect(select === images.length - 1 ? 0 : select + 1);
74
68
  setEdge(edge === images.length ? 0 : edge + 1);
75
69
  setHasShift(true);
76
70
  setHasDelayed(false);
77
71
  setCount(edge === 5 ? 0 : count - (width + margin * 2));
78
72
  return;
79
- }), [count, images.length, margin, select, edge, width]);
73
+ }, [count, images.length, margin, select, edge, width]);
80
74
  // Wheel function of the desktop.
81
- const handleScroll = (0, react_1.useCallback)((e) => __awaiter(void 0, void 0, void 0, function* () {
75
+ const handleScroll = (0, react_1.useCallback)(async (e) => {
76
+ const now = Date.now();
77
+ if (now - lastMoveTime < moveDelay)
78
+ return;
79
+ setLastMoveTime(now);
82
80
  const delta = e.deltaY;
83
81
  if (delta < 0)
84
82
  shiftLeft();
85
83
  if (delta > 0)
86
84
  shiftRight();
87
- }), [shiftLeft, shiftRight]);
85
+ }, [shiftLeft, shiftRight, lastMoveTime, moveDelay]);
88
86
  // Get a start y and x position in touchStart Y and X.
89
87
  const handleTouchStart = (e) => {
90
88
  const touch = e.touches[0];
@@ -93,6 +91,10 @@ const StraightInfinity = ({ images, start, height, width, vertical = false, marg
93
91
  };
94
92
  // Swipe Function of the mobile.
95
93
  const handleTouchMove = (0, react_1.useCallback)((e) => {
94
+ const now = Date.now();
95
+ if (now - lastMoveTime < moveDelay)
96
+ return;
97
+ setLastMoveTime(now);
96
98
  const touch = e.touches[0];
97
99
  const delta = hasDetail
98
100
  ? touch.clientX
@@ -116,7 +118,16 @@ const StraightInfinity = ({ images, start, height, width, vertical = false, marg
116
118
  : !vertical
117
119
  ? setTouchStartX(delta)
118
120
  : setTouchStartY(delta);
119
- }, [hasDetail, shiftLeft, shiftRight, touchStartX, touchStartY, vertical]);
121
+ }, [
122
+ hasDetail,
123
+ shiftLeft,
124
+ shiftRight,
125
+ touchStartX,
126
+ touchStartY,
127
+ vertical,
128
+ lastMoveTime,
129
+ moveDelay
130
+ ]);
120
131
  const handleMouseDown = (0, react_1.useCallback)((e) => {
121
132
  setIsDragging(true);
122
133
  setInitialX(e.clientX);
@@ -124,6 +135,10 @@ const StraightInfinity = ({ images, start, height, width, vertical = false, marg
124
135
  }, []);
125
136
  const handleMouseMove = (0, react_1.useCallback)((e) => {
126
137
  if (isDragging) {
138
+ const now = Date.now();
139
+ if (now - lastMoveTime < moveDelay)
140
+ return;
141
+ setLastMoveTime(now);
127
142
  const deltaX = e.clientX - initialX;
128
143
  const deltaY = e.clientY - initialY;
129
144
  if (!vertical ? deltaX < 0 : deltaY < 0)
@@ -133,7 +148,16 @@ const StraightInfinity = ({ images, start, height, width, vertical = false, marg
133
148
  !vertical ? setInitialX(e.clientX) : setInitialY(e.clientY);
134
149
  setHasMove(true);
135
150
  }
136
- }, [initialX, initialY, isDragging, shiftLeft, shiftRight, vertical]);
151
+ }, [
152
+ initialX,
153
+ initialY,
154
+ isDragging,
155
+ shiftLeft,
156
+ shiftRight,
157
+ vertical,
158
+ lastMoveTime,
159
+ moveDelay
160
+ ]);
137
161
  const handleMouseUp = (0, react_1.useCallback)(() => {
138
162
  setIsDragging(false);
139
163
  setHasMove(false);
@@ -144,7 +168,7 @@ const StraightInfinity = ({ images, start, height, width, vertical = false, marg
144
168
  const detail = refDetail.current;
145
169
  const timeId = setTimeout(() => {
146
170
  setHasDelayed(true);
147
- }, ((transition === null || transition === void 0 ? void 0 : transition.duration) / 2) * 1000);
171
+ }, transition?.duration * 1000);
148
172
  // Add handle event when component mount and deps update.
149
173
  document.addEventListener('mouseup', handleMouseUp);
150
174
  if (!hasDelayed)
@@ -178,7 +202,7 @@ const StraightInfinity = ({ images, start, height, width, vertical = false, marg
178
202
  handleTouchMove,
179
203
  handleScroll,
180
204
  hasDelayed,
181
- transition === null || transition === void 0 ? void 0 : transition.duration
205
+ transition?.duration
182
206
  ]);
183
207
  // The controll start or end.
184
208
  // Added event when component is mounted.
@@ -303,37 +327,37 @@ const StraightInfinity = ({ images, start, height, width, vertical = false, marg
303
327
  y: vertical && hasEdge()
304
328
  ? -(images.length * height + images.length * (margin * 2))
305
329
  : 0,
306
- scale: hasSelect ? animate === null || animate === void 0 ? void 0 : animate.selectScale : animate === null || animate === void 0 ? void 0 : animate.scale,
307
- rotate: hasSelect ? animate === null || animate === void 0 ? void 0 : animate.selectRotate : animate === null || animate === void 0 ? void 0 : animate.rotate,
330
+ scale: hasSelect ? animate?.selectScale : animate?.scale,
331
+ rotate: hasSelect ? animate?.selectRotate : animate?.rotate,
308
332
  rotateY: hasSelect
309
- ? animate === null || animate === void 0 ? void 0 : animate.selectRotateY
310
- : animate === null || animate === void 0 ? void 0 : animate.rotateY,
333
+ ? animate?.selectRotateY
334
+ : animate?.rotateY,
311
335
  rotateX: hasSelect
312
- ? animate === null || animate === void 0 ? void 0 : animate.selectRotateX
313
- : animate === null || animate === void 0 ? void 0 : animate.rotateX,
336
+ ? animate?.selectRotateX
337
+ : animate?.rotateX,
314
338
  rotateZ: hasSelect
315
- ? animate === null || animate === void 0 ? void 0 : animate.selectRotateZ
316
- : animate === null || animate === void 0 ? void 0 : animate.rotateZ,
339
+ ? animate?.selectRotateZ
340
+ : animate?.rotateZ,
317
341
  opacity: images[images[edge] === images[images.length] ? 0 : edge] === images[index] || images[edge - 1] === images[index]
318
342
  ? 0
319
343
  : hasSelect
320
344
  ? hasDetail
321
345
  ? 0
322
- : animate === null || animate === void 0 ? void 0 : animate.selectOpacity
323
- : animate === null || animate === void 0 ? void 0 : animate.opacity
346
+ : animate?.selectOpacity
347
+ : animate?.opacity
324
348
  }, initial: {
325
- scale: hasSelect ? initial === null || initial === void 0 ? void 0 : initial.selectScale : initial === null || initial === void 0 ? void 0 : initial.scale,
326
- rotate: hasSelect ? initial === null || initial === void 0 ? void 0 : initial.selectRotate : initial === null || initial === void 0 ? void 0 : initial.rotate,
349
+ scale: hasSelect ? initial?.selectScale : initial?.scale,
350
+ rotate: hasSelect ? initial?.selectRotate : initial?.rotate,
327
351
  rotateY: hasSelect
328
- ? initial === null || initial === void 0 ? void 0 : initial.selectRotateY
329
- : initial === null || initial === void 0 ? void 0 : initial.rotateY,
352
+ ? initial?.selectRotateY
353
+ : initial?.rotateY,
330
354
  rotateX: hasSelect
331
- ? initial === null || initial === void 0 ? void 0 : initial.selectRotateX
332
- : initial === null || initial === void 0 ? void 0 : initial.rotateX,
355
+ ? initial?.selectRotateX
356
+ : initial?.rotateX,
333
357
  rotateZ: hasSelect
334
- ? initial === null || initial === void 0 ? void 0 : initial.selectRotateZ
335
- : initial === null || initial === void 0 ? void 0 : initial.rotateZ,
336
- opacity: hasSelect ? initial === null || initial === void 0 ? void 0 : initial.selectOpacity : initial === null || initial === void 0 ? void 0 : initial.opacity
358
+ ? initial?.selectRotateZ
359
+ : initial?.rotateZ,
360
+ opacity: hasSelect ? initial?.selectOpacity : initial?.opacity
337
361
  }, transition: transition, onClick: () => {
338
362
  hasSelect && detail && !hasMove && setHasDetail(true);
339
363
  if (!hasDelayed)
@@ -363,6 +387,6 @@ const StraightInfinity = ({ images, start, height, width, vertical = false, marg
363
387
  }))),
364
388
  react_1.default.createElement(DetailImage_1.DetailImage, { detailRef: refDetail, detailKey: select, hasDetail: hasDetail, onClick: () => {
365
389
  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 })));
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 })));
367
391
  };
368
392
  exports.StraightInfinity = StraightInfinity;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-magic-card",
3
- "version": "2.0.5",
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": {