react-magic-card 0.1.2 → 0.1.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.
Files changed (5) hide show
  1. package/README.md +1 -1
  2. package/dist/MagicCircle/index.js +16 -16
  3. package/dist/MagicStraight/index.js +36 -27
  4. package/dist/common/PickImage/index.js +6 -4
  5. package/package.json +1 -1
package/README.md CHANGED
@@ -113,7 +113,7 @@ It Inherits framer motion transition properties other than intera.
113
113
  | classPick | class name of the pick image |
114
114
  | white | white or black boolean flag for background |
115
115
  | alpha | background transparency a number between 0 ~ 1 |
116
- | blur | blur intensity a number between 1 and 10 a preferred |
116
+ | blur | blur intensity a number between 1 ~ 20 a preferred |
117
117
  | scale | scale of the pick image |
118
118
  | offset | offset of the appearance position from the center position |
119
119
 
package/dist/MagicCircle/index.js CHANGED
@@ -34,6 +34,7 @@ const PickImage_1 = __importDefault(require("../common/PickImage"));
34
34
  const MagicCircle = ({ images, height, width, radius, controller, start, dynamic = true, wheelDelay, animate, initial, transition, className, classImage, classImageUnique, selectCursor = 'pointer', pickProperty, pickTransition }) => {
35
35
  const [count, setCount] = (0, react_1.useState)(0);
36
36
  const [touchStartY, setTouchStartY] = (0, react_1.useState)(0);
37
+ const [touchStartX, setTouchStartX] = (0, react_1.useState)(0);
37
38
  const [hasShift, setHasShift] = (0, react_1.useState)(false);
38
39
  const [hasDelayed, setHasDelayed] = (0, react_1.useState)(true);
39
40
  const [select, setSelect] = (0, react_1.useState)(start);
@@ -45,19 +46,19 @@ const MagicCircle = ({ images, height, width, radius, controller, start, dynamic
45
46
  // turn left
46
47
  const shiftLeft = (0, react_1.useCallback)(() => {
47
48
  setSelect(select == images.length - 1 ? 0 : select + 1);
48
- setHasShift(true);
49
+ setHasShift(false);
49
50
  setHasDelayed(false);
50
51
  if (dynamic)
51
52
  return setCount(count - centralAngle);
52
- }, [centralAngle, count, dynamic, images.length, select]);
53
+ }, [centralAngle, count, dynamic, images.length, select, hasShift]);
53
54
  // turn right
54
55
  const shiftRight = (0, react_1.useCallback)(() => {
55
56
  setSelect(select == 0 ? images.length - 1 : select - 1);
56
- setHasShift(false);
57
+ setHasShift(true);
57
58
  setHasDelayed(false);
58
59
  if (dynamic)
59
60
  return setCount(count + centralAngle);
60
- }, [centralAngle, count, dynamic, images.length, select]);
61
+ }, [centralAngle, count, dynamic, images.length, select, hasShift]);
61
62
  // Function of the desktop.
62
63
  const handleWheel = (0, react_1.useCallback)((e) => {
63
64
  const delta = e.deltaY;
@@ -66,19 +67,22 @@ const MagicCircle = ({ images, height, width, radius, controller, start, dynamic
66
67
  if (delta < 0)
67
68
  shiftRight();
68
69
  }, [shiftLeft, shiftRight]);
69
- // Get a start y position in touchStartY.
70
+ // Get a start y and x position in touchStart Y and X.
70
71
  const handleTouchStart = (event) => {
71
72
  const touch = event.touches[0];
72
73
  setTouchStartY(touch.clientY);
74
+ setTouchStartX(touch.clientX);
73
75
  };
74
76
  // Function of the mobile.
75
77
  const handleTouchMove = (0, react_1.useCallback)((event) => {
76
78
  const touch = event.touches[0];
77
- const deltaY = touch.clientY - touchStartY;
78
- if (deltaY > 0)
79
- shiftLeft();
80
- if (deltaY < 0)
79
+ const delta = hasPick ? touch.clientX : touch.clientY;
80
+ if (delta > (touchStartY || touchStartX))
81
81
  shiftRight();
82
+ if (delta < (touchStartY || touchStartX))
83
+ shiftLeft();
84
+ setTouchStartX(delta);
85
+ setTouchStartY(delta);
82
86
  }, [shiftLeft, shiftRight, touchStartY]);
83
87
  // Main functional, exit function if ref and hasDelayed does not exist.
84
88
  (0, react_1.useEffect)(() => {
@@ -108,7 +112,7 @@ const MagicCircle = ({ images, height, width, radius, controller, start, dynamic
108
112
  clearTimeout(timeId);
109
113
  };
110
114
  }, [handleTouchMove, handleWheel, hasDelayed, wheelDelay]);
111
- // Functions of the controller.
115
+ // Functions of the area controller.
112
116
  // entry ref area.
113
117
  const enterControll = (e) => {
114
118
  e.preventDefault();
@@ -144,7 +148,7 @@ const MagicCircle = ({ images, height, width, radius, controller, start, dynamic
144
148
  });
145
149
  };
146
150
  }, []);
147
- // angle between images.
151
+ // Angle between.
148
152
  const angle = parseFloat((2 * Math.PI).toFixed(15)) / images.length;
149
153
  return (react_1.default.createElement(framer_motion_1.LazyMotion, { features: framer_motion_1.domAnimation },
150
154
  react_1.default.createElement(framer_motion_1.m.div, { ref: div1Ref, className: className + ' ' + styles_module_css_1.default.outer, style: {
@@ -155,11 +159,7 @@ const MagicCircle = ({ images, height, width, radius, controller, start, dynamic
155
159
  const hasSelect = images[select] == images[index];
156
160
  return (react_1.default.createElement(framer_motion_1.m.img, { key: index, animate: {
157
161
  rotate: -count,
158
- scale: hasSelect
159
- ? hasPick
160
- ? 0
161
- : animate === null || animate === void 0 ? void 0 : animate.selectScale
162
- : animate === null || animate === void 0 ? void 0 : animate.scale,
162
+ scale: hasSelect ? animate === null || animate === void 0 ? void 0 : animate.selectScale : animate === null || animate === void 0 ? void 0 : animate.scale,
163
163
  rotateY: hasSelect
164
164
  ? animate === null || animate === void 0 ? void 0 : animate.selectRotateY
165
165
  : animate === null || animate === void 0 ? void 0 : animate.rotateY,
package/dist/MagicStraight/index.js CHANGED
@@ -40,16 +40,20 @@ const MagicStraight = ({ images, height, width, start, controller, wheelDelay, v
40
40
  const [hasPick, setHasPick] = (0, react_1.useState)(false);
41
41
  const div1Ref = (0, react_1.useRef)(null);
42
42
  const div2Ref = (0, react_1.useRef)(null);
43
- const shiftRight = (0, react_1.useCallback)(() => {
44
- setSelect(select == images.length - 1 ? 0 : select + 1);
45
- setHasShift(true);
46
- setHasDelayed(false);
47
- }, [images.length, select]);
43
+ // Functions of the swipe and wheel a shifting.
44
+ // turn left
48
45
  const shiftLeft = (0, react_1.useCallback)(() => {
49
46
  setSelect(select == 0 ? images.length - 1 : select - 1);
50
47
  setHasShift(false);
51
48
  setHasDelayed(false);
52
49
  }, [images.length, select]);
50
+ // turn right
51
+ const shiftRight = (0, react_1.useCallback)(() => {
52
+ setSelect(select == images.length - 1 ? 0 : select + 1);
53
+ setHasShift(true);
54
+ setHasDelayed(false);
55
+ }, [images.length, select]);
56
+ // Wheel function of the desktop.
53
57
  const handleWheel = (0, react_1.useCallback)((e) => {
54
58
  const delta = e.deltaY;
55
59
  if (delta > 0)
@@ -57,23 +61,24 @@ const MagicStraight = ({ images, height, width, start, controller, wheelDelay, v
57
61
  if (delta < 0)
58
62
  shiftLeft();
59
63
  }, [shiftLeft, shiftRight]);
60
- const handleTouchStart = (event) => {
61
- const touch = event.touches[0];
64
+ // Get a start y and x position in touchStart Y and X.
65
+ const handleTouchStart = (e) => {
66
+ const touch = e.touches[0];
62
67
  setTouchStartY(touch.clientY);
63
68
  setTouchStartX(touch.clientX);
64
69
  };
65
- const handleTouchMove = (0, react_1.useCallback)((event) => {
66
- const touch = event.touches[0];
67
- const delta = hasPick
68
- ? touch.clientX - touchStartX
69
- : vertical
70
- ? touch.clientY - touchStartY
71
- : touch.clientX - touchStartX;
72
- if (delta > 0)
70
+ // Swipe Function of the mobile.
71
+ const handleTouchMove = (0, react_1.useCallback)((e) => {
72
+ const touch = e.touches[0];
73
+ const delta = !vertical ? touch.clientX : touch.clientY;
74
+ if (delta > (touchStartX || touchStartY))
73
75
  shiftRight();
74
- if (delta < 0)
76
+ if (delta < (touchStartX || touchStartY))
75
77
  shiftLeft();
78
+ setTouchStartX(delta);
79
+ setTouchStartY(delta);
76
80
  }, [hasPick, shiftLeft, shiftRight, touchStartX, touchStartY, vertical]);
81
+ // Main functional, exit function if ref and hasDelayed does not exist.
77
82
  (0, react_1.useEffect)(() => {
78
83
  const elm1Div = div1Ref.current;
79
84
  const elm2Div = div2Ref.current;
@@ -81,6 +86,7 @@ const MagicStraight = ({ images, height, width, start, controller, wheelDelay, v
81
86
  const timeId = setTimeout(() => {
82
87
  setHasDelayed(true);
83
88
  }, wheelDelay);
89
+ // Add handle event when component mount and deps update.
84
90
  elms.forEach(elm => {
85
91
  if (!elm || !hasDelayed)
86
92
  return;
@@ -88,6 +94,7 @@ const MagicStraight = ({ images, height, width, start, controller, wheelDelay, v
88
94
  elm.addEventListener('touchstart', handleTouchStart, { passive: true });
89
95
  elm.addEventListener('touchmove', handleTouchMove, { passive: true });
90
96
  });
97
+ // Clean up event and timeId when component is unmount.
91
98
  return () => {
92
99
  elms.forEach(elm => {
93
100
  if (!elm)
@@ -99,17 +106,22 @@ const MagicStraight = ({ images, height, width, start, controller, wheelDelay, v
99
106
  clearTimeout(timeId);
100
107
  };
101
108
  }, [handleTouchMove, handleWheel, hasDelayed, wheelDelay]);
109
+ // Functions of the area controller.
110
+ // entry ref area.
102
111
  const enterControll = (e) => {
103
112
  e.preventDefault();
104
113
  document.body.style.overflow = 'hidden';
105
114
  };
115
+ // leave ref area.
106
116
  const leaveControll = () => {
107
117
  document.body.style.overflow = 'auto';
108
118
  };
119
+ // Added event when component is mounted.
109
120
  (0, react_1.useEffect)(() => {
110
121
  const elm1Div = div1Ref.current;
111
122
  const elm2Div = div2Ref.current;
112
123
  const elms = [elm1Div, elm2Div];
124
+ // Add event.
113
125
  elms.forEach(elm => {
114
126
  if (!elm)
115
127
  return;
@@ -118,6 +130,7 @@ const MagicStraight = ({ images, height, width, start, controller, wheelDelay, v
118
130
  elm.addEventListener('touchmove', enterControll);
119
131
  elm.addEventListener('touchend', leaveControll);
120
132
  });
133
+ // Clean up event when component is unmount.
121
134
  return () => {
122
135
  elms.forEach(elm => {
123
136
  if (!elm)
@@ -129,10 +142,11 @@ const MagicStraight = ({ images, height, width, start, controller, wheelDelay, v
129
142
  });
130
143
  };
131
144
  }, []);
145
+ // Average calculation.
132
146
  let total = 0;
133
147
  for (let i = 1; i < images.length; i++)
134
148
  total += i;
135
- const Total = total / images.length;
149
+ const average = total / images.length;
136
150
  const clasess = className + ' ' + styles_module_css_1.default.outer;
137
151
  return (react_1.default.createElement(framer_motion_1.LazyMotion, { features: framer_motion_1.domAnimation },
138
152
  react_1.default.createElement("div", { ref: div1Ref, className: clasess, style: {
@@ -148,23 +162,19 @@ const MagicStraight = ({ images, height, width, start, controller, wheelDelay, v
148
162
  return (react_1.default.createElement(framer_motion_1.m.img, { key: index, animate: {
149
163
  y: hasSelect
150
164
  ? vertical
151
- ? (Total - index) * height +
152
- (Total - index) * (margin * 2) +
165
+ ? (average - index) * height +
166
+ (average - index) * (margin * 2) +
153
167
  selectOffsetY
154
168
  : selectOffsetY
155
169
  : 0,
156
170
  x: hasSelect
157
171
  ? !vertical
158
- ? (Total - index) * width +
159
- (Total - index) * (margin * 2) +
172
+ ? (average - index) * width +
173
+ (average - index) * (margin * 2) +
160
174
  selectOffsetX
161
175
  : selectOffsetX
162
176
  : 0,
163
- scale: hasSelect
164
- ? hasPick
165
- ? 0
166
- : animate === null || animate === void 0 ? void 0 : animate.selectScale
167
- : animate === null || animate === void 0 ? void 0 : animate.scale,
177
+ scale: hasSelect ? animate === null || animate === void 0 ? void 0 : animate.selectScale : animate === null || animate === void 0 ? void 0 : animate.scale,
168
178
  rotateY: hasSelect ? animate === null || animate === void 0 ? void 0 : animate.selectRotateY : animate === null || animate === void 0 ? void 0 : animate.rotateY,
169
179
  rotateX: hasSelect ? animate === null || animate === void 0 ? void 0 : animate.selectRotateX : animate === null || animate === void 0 ? void 0 : animate.rotateX,
170
180
  rotateZ: hasSelect ? animate === null || animate === void 0 ? void 0 : animate.selectRotateZ : animate === null || animate === void 0 ? void 0 : animate.rotateZ,
@@ -194,7 +204,6 @@ const MagicStraight = ({ images, height, width, start, controller, wheelDelay, v
194
204
  margin: vertical ? margin + 'px' + ' 0' : '0 ' + margin + 'px'
195
205
  } }));
196
206
  })),
197
- react_1.default.createElement("button", { onClick: () => shiftRight() }, hasPick ? 'true' : 'false'),
198
207
  react_1.default.createElement(PickImage_1.default, { onClick: () => setHasPick(false), hasPick: hasPick, classPick: pickProperty === null || pickProperty === void 0 ? void 0 : pickProperty.classPick, white: pickProperty === null || pickProperty === void 0 ? void 0 : pickProperty.white, alpha: pickProperty === null || pickProperty === void 0 ? void 0 : pickProperty.alpha, blur: pickProperty === null || pickProperty === void 0 ? void 0 : pickProperty.blur, scale: pickProperty === null || pickProperty === void 0 ? void 0 : pickProperty.scale, offset: pickProperty === null || pickProperty === void 0 ? void 0 : pickProperty.offset, hasShift: hasShift, argRef: div2Ref, argKey: select, src: images[select].src, alt: images[select].alt, width: width, height: height, transition: pickTransition, zIndex: images.length + 1 })));
199
208
  };
200
209
  exports.MagicStraight = MagicStraight;
package/dist/common/PickImage/index.js CHANGED
@@ -9,12 +9,14 @@ const styles_module_css_1 = __importDefault(require("./styles.module.css"));
9
9
  const PickImage = ({ onClick, classPick, hasPick, hasShift, argRef, argKey, src, alt, width, height, zIndex, white = true, alpha = 0.4, blur = 4, scale = 2, offset = 200, transition }) => {
10
10
  return (react_1.default.createElement(framer_motion_1.m.div, { role: "button", onClick: onClick, ref: argRef, className: styles_module_css_1.default.full_size, animate: {
11
11
  zIndex: zIndex,
12
+ opacity: hasPick ? 1 : 0,
13
+ pointerEvents: hasPick ? 'auto' : 'none',
14
+ touchAction: hasPick ? 'auto' : 'none',
15
+ visibility: hasPick ? 'visible' : 'hidden',
16
+ backdropFilter: `blur(${blur}px)`,
12
17
  background: white
13
18
  ? `rgba(255, 255, 255, ${alpha})`
14
- : `rgba(0, 0, 0, ${alpha})`,
15
- backdropFilter: `blur(${blur}px)`,
16
- opacity: hasPick ? 1 : 0,
17
- pointerEvents: hasPick ? 'auto' : 'none'
19
+ : `rgba(0, 0, 0, ${alpha})`
18
20
  }, initial: { background: 'none' }, transition: transition },
19
21
  react_1.default.createElement(framer_motion_1.m.img, { className: classPick, onClick: e => e.stopPropagation(), key: argKey, src: src, alt: alt, width: width, height: height, animate: {
20
22
  zIndex: zIndex + 1,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-magic-card",
3
- "version": "0.1.2",
3
+ "version": "0.1.4",
4
4
  "description": "image gallery component with framer motion",
5
5
  "main": "dist/index.js",
6
6
  "typings": "dist/index.d.ts",