react-magic-card 0.1.4 → 0.1.6

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 (4) hide show
  1. package/dist/MagicCircle/index.js +8 -6
  2. package/dist/MagicStraight/index.js +8 -2
  3. package/dist/common/PickImage/index.js +0 -1
  4. package/package.json +1 -1
package/dist/MagicCircle/index.js CHANGED
@@ -50,7 +50,7 @@ const MagicCircle = ({ images, height, width, radius, controller, start, dynamic
50
50
  setHasDelayed(false);
51
51
  if (dynamic)
52
52
  return setCount(count - centralAngle);
53
- }, [centralAngle, count, dynamic, images.length, select, hasShift]);
53
+ }, [centralAngle, count, dynamic, images.length, select]);
54
54
  // turn right
55
55
  const shiftRight = (0, react_1.useCallback)(() => {
56
56
  setSelect(select == 0 ? images.length - 1 : select - 1);
@@ -58,7 +58,7 @@ const MagicCircle = ({ images, height, width, radius, controller, start, dynamic
58
58
  setHasDelayed(false);
59
59
  if (dynamic)
60
60
  return setCount(count + centralAngle);
61
- }, [centralAngle, count, dynamic, images.length, select, hasShift]);
61
+ }, [centralAngle, count, dynamic, images.length, select]);
62
62
  // Function of the desktop.
63
63
  const handleWheel = (0, react_1.useCallback)((e) => {
64
64
  const delta = e.deltaY;
@@ -68,8 +68,8 @@ const MagicCircle = ({ images, height, width, radius, controller, start, dynamic
68
68
  shiftRight();
69
69
  }, [shiftLeft, shiftRight]);
70
70
  // Get a start y and x position in touchStart Y and X.
71
- const handleTouchStart = (event) => {
72
- const touch = event.touches[0];
71
+ const handleTouchStart = (e) => {
72
+ const touch = e.touches[0];
73
73
  setTouchStartY(touch.clientY);
74
74
  setTouchStartX(touch.clientX);
75
75
  };
@@ -83,7 +83,7 @@ const MagicCircle = ({ images, height, width, radius, controller, start, dynamic
83
83
  shiftLeft();
84
84
  setTouchStartX(delta);
85
85
  setTouchStartY(delta);
86
- }, [shiftLeft, shiftRight, touchStartY]);
86
+ }, [hasPick, shiftLeft, shiftRight, touchStartX, touchStartY]);
87
87
  // Main functional, exit function if ref and hasDelayed does not exist.
88
88
  (0, react_1.useEffect)(() => {
89
89
  const elm1Div = div1Ref.current;
@@ -134,6 +134,7 @@ const MagicCircle = ({ images, height, width, radius, controller, start, dynamic
134
134
  elm.addEventListener('mouseover', enterControll);
135
135
  elm.addEventListener('mouseout', leaveControll);
136
136
  elm.addEventListener('touchmove', enterControll);
137
+ elm.addEventListener('touchcancel', leaveControll);
137
138
  elm.addEventListener('touchend', leaveControll);
138
139
  });
139
140
  // Clean up event when component is unmount.
@@ -144,7 +145,8 @@ const MagicCircle = ({ images, height, width, radius, controller, start, dynamic
144
145
  elm.removeEventListener('mouseover', enterControll);
145
146
  elm.removeEventListener('mouseout', leaveControll);
146
147
  elm.removeEventListener('touchmove', enterControll);
147
- elm.addEventListener('touchend', leaveControll);
148
+ elm.removeEventListener('touchcancel', leaveControll);
149
+ elm.removeEventListener('touchend', leaveControll);
148
150
  });
149
151
  };
150
152
  }, []);
package/dist/MagicStraight/index.js CHANGED
@@ -70,7 +70,11 @@ const MagicStraight = ({ images, height, width, start, controller, wheelDelay, v
70
70
  // Swipe Function of the mobile.
71
71
  const handleTouchMove = (0, react_1.useCallback)((e) => {
72
72
  const touch = e.touches[0];
73
- const delta = !vertical ? touch.clientX : touch.clientY;
73
+ const delta = hasPick
74
+ ? touch.clientX
75
+ : !vertical
76
+ ? touch.clientX
77
+ : touch.clientY;
74
78
  if (delta > (touchStartX || touchStartY))
75
79
  shiftRight();
76
80
  if (delta < (touchStartX || touchStartY))
@@ -128,6 +132,7 @@ const MagicStraight = ({ images, height, width, start, controller, wheelDelay, v
128
132
  elm.addEventListener('mouseover', enterControll);
129
133
  elm.addEventListener('mouseout', leaveControll);
130
134
  elm.addEventListener('touchmove', enterControll);
135
+ elm.addEventListener('touchcancel', leaveControll);
131
136
  elm.addEventListener('touchend', leaveControll);
132
137
  });
133
138
  // Clean up event when component is unmount.
@@ -138,7 +143,8 @@ const MagicStraight = ({ images, height, width, start, controller, wheelDelay, v
138
143
  elm.removeEventListener('mouseover', enterControll);
139
144
  elm.removeEventListener('mouseout', leaveControll);
140
145
  elm.removeEventListener('touchmove', enterControll);
141
- elm.addEventListener('touchend', leaveControll);
146
+ elm.removeEventListener('touchcancel', leaveControll);
147
+ elm.removeEventListener('touchend', leaveControll);
142
148
  });
143
149
  };
144
150
  }, []);
package/dist/common/PickImage/index.js CHANGED
@@ -11,7 +11,6 @@ const PickImage = ({ onClick, classPick, hasPick, hasShift, argRef, argKey, src,
11
11
  zIndex: zIndex,
12
12
  opacity: hasPick ? 1 : 0,
13
13
  pointerEvents: hasPick ? 'auto' : 'none',
14
- touchAction: hasPick ? 'auto' : 'none',
15
14
  visibility: hasPick ? 'visible' : 'hidden',
16
15
  backdropFilter: `blur(${blur}px)`,
17
16
  background: white
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-magic-card",
3
- "version": "0.1.4",
3
+ "version": "0.1.6",
4
4
  "description": "image gallery component with framer motion",
5
5
  "main": "dist/index.js",
6
6
  "typings": "dist/index.d.ts",