react-magic-card 0.1.2 → 0.1.3

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 +20 -16
  3. package/dist/MagicStraight/index.js +39 -22
  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,26 @@ 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
80
+ ? touch.clientX - touchStartX
81
+ : touch.clientY - touchStartY;
82
+ if (delta > 0) {
81
83
  shiftRight();
84
+ setTouchStartX(delta - 1);
85
+ }
86
+ if (delta < 0) {
87
+ shiftLeft();
88
+ setTouchStartY(delta + 1);
89
+ }
82
90
  }, [shiftLeft, shiftRight, touchStartY]);
83
91
  // Main functional, exit function if ref and hasDelayed does not exist.
84
92
  (0, react_1.useEffect)(() => {
@@ -108,7 +116,7 @@ const MagicCircle = ({ images, height, width, radius, controller, start, dynamic
108
116
  clearTimeout(timeId);
109
117
  };
110
118
  }, [handleTouchMove, handleWheel, hasDelayed, wheelDelay]);
111
- // Functions of the controller.
119
+ // Functions of the area controller.
112
120
  // entry ref area.
113
121
  const enterControll = (e) => {
114
122
  e.preventDefault();
@@ -144,7 +152,7 @@ const MagicCircle = ({ images, height, width, radius, controller, start, dynamic
144
152
  });
145
153
  };
146
154
  }, []);
147
- // angle between images.
155
+ // Angle between.
148
156
  const angle = parseFloat((2 * Math.PI).toFixed(15)) / images.length;
149
157
  return (react_1.default.createElement(framer_motion_1.LazyMotion, { features: framer_motion_1.domAnimation },
150
158
  react_1.default.createElement(framer_motion_1.m.div, { ref: div1Ref, className: className + ' ' + styles_module_css_1.default.outer, style: {
@@ -155,11 +163,7 @@ const MagicCircle = ({ images, height, width, radius, controller, start, dynamic
155
163
  const hasSelect = images[select] == images[index];
156
164
  return (react_1.default.createElement(framer_motion_1.m.img, { key: index, animate: {
157
165
  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,
166
+ scale: hasSelect ? animate === null || animate === void 0 ? void 0 : animate.selectScale : animate === null || animate === void 0 ? void 0 : animate.scale,
163
167
  rotateY: hasSelect
164
168
  ? animate === null || animate === void 0 ? void 0 : animate.selectRotateY
165
169
  : 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,32 @@ const MagicStraight = ({ images, height, width, start, controller, wheelDelay, v
57
61
  if (delta < 0)
58
62
  shiftLeft();
59
63
  }, [shiftLeft, shiftRight]);
64
+ // Get a start y and x position in touchStart Y and X.
60
65
  const handleTouchStart = (event) => {
61
66
  const touch = event.touches[0];
62
67
  setTouchStartY(touch.clientY);
63
68
  setTouchStartX(touch.clientX);
64
69
  };
70
+ // Swipe Function of the mobile.
65
71
  const handleTouchMove = (0, react_1.useCallback)((event) => {
66
72
  const touch = event.touches[0];
67
- const delta = hasPick
73
+ const delta = !vertical
68
74
  ? touch.clientX - touchStartX
69
- : vertical
70
- ? touch.clientY - touchStartY
71
- : touch.clientX - touchStartX;
72
- if (delta > 0)
75
+ : touch.clientY - touchStartY;
76
+ if (delta > 0) {
73
77
  shiftRight();
74
- if (delta < 0)
78
+ !vertical && setTouchStartX(delta - 1);
79
+ vertical &&
80
+ (hasPick ? setTouchStartX(delta - 1) : setTouchStartY(delta - 1));
81
+ }
82
+ if (delta < 0) {
75
83
  shiftLeft();
84
+ !vertical && setTouchStartX(delta + 1);
85
+ vertical &&
86
+ (hasPick ? setTouchStartX(delta + 1) : setTouchStartY(delta + 1));
87
+ }
76
88
  }, [hasPick, shiftLeft, shiftRight, touchStartX, touchStartY, vertical]);
89
+ // Main functional, exit function if ref and hasDelayed does not exist.
77
90
  (0, react_1.useEffect)(() => {
78
91
  const elm1Div = div1Ref.current;
79
92
  const elm2Div = div2Ref.current;
@@ -81,6 +94,7 @@ const MagicStraight = ({ images, height, width, start, controller, wheelDelay, v
81
94
  const timeId = setTimeout(() => {
82
95
  setHasDelayed(true);
83
96
  }, wheelDelay);
97
+ // Add handle event when component mount and deps update.
84
98
  elms.forEach(elm => {
85
99
  if (!elm || !hasDelayed)
86
100
  return;
@@ -88,6 +102,7 @@ const MagicStraight = ({ images, height, width, start, controller, wheelDelay, v
88
102
  elm.addEventListener('touchstart', handleTouchStart, { passive: true });
89
103
  elm.addEventListener('touchmove', handleTouchMove, { passive: true });
90
104
  });
105
+ // Clean up event and timeId when component is unmount.
91
106
  return () => {
92
107
  elms.forEach(elm => {
93
108
  if (!elm)
@@ -99,17 +114,22 @@ const MagicStraight = ({ images, height, width, start, controller, wheelDelay, v
99
114
  clearTimeout(timeId);
100
115
  };
101
116
  }, [handleTouchMove, handleWheel, hasDelayed, wheelDelay]);
117
+ // Functions of the area controller.
118
+ // entry ref area.
102
119
  const enterControll = (e) => {
103
120
  e.preventDefault();
104
121
  document.body.style.overflow = 'hidden';
105
122
  };
123
+ // leave ref area.
106
124
  const leaveControll = () => {
107
125
  document.body.style.overflow = 'auto';
108
126
  };
127
+ // Added event when component is mounted.
109
128
  (0, react_1.useEffect)(() => {
110
129
  const elm1Div = div1Ref.current;
111
130
  const elm2Div = div2Ref.current;
112
131
  const elms = [elm1Div, elm2Div];
132
+ // Add event.
113
133
  elms.forEach(elm => {
114
134
  if (!elm)
115
135
  return;
@@ -118,6 +138,7 @@ const MagicStraight = ({ images, height, width, start, controller, wheelDelay, v
118
138
  elm.addEventListener('touchmove', enterControll);
119
139
  elm.addEventListener('touchend', leaveControll);
120
140
  });
141
+ // Clean up event when component is unmount.
121
142
  return () => {
122
143
  elms.forEach(elm => {
123
144
  if (!elm)
@@ -129,10 +150,11 @@ const MagicStraight = ({ images, height, width, start, controller, wheelDelay, v
129
150
  });
130
151
  };
131
152
  }, []);
153
+ // Average calculation.
132
154
  let total = 0;
133
155
  for (let i = 1; i < images.length; i++)
134
156
  total += i;
135
- const Total = total / images.length;
157
+ const average = total / images.length;
136
158
  const clasess = className + ' ' + styles_module_css_1.default.outer;
137
159
  return (react_1.default.createElement(framer_motion_1.LazyMotion, { features: framer_motion_1.domAnimation },
138
160
  react_1.default.createElement("div", { ref: div1Ref, className: clasess, style: {
@@ -148,23 +170,19 @@ const MagicStraight = ({ images, height, width, start, controller, wheelDelay, v
148
170
  return (react_1.default.createElement(framer_motion_1.m.img, { key: index, animate: {
149
171
  y: hasSelect
150
172
  ? vertical
151
- ? (Total - index) * height +
152
- (Total - index) * (margin * 2) +
173
+ ? (average - index) * height +
174
+ (average - index) * (margin * 2) +
153
175
  selectOffsetY
154
176
  : selectOffsetY
155
177
  : 0,
156
178
  x: hasSelect
157
179
  ? !vertical
158
- ? (Total - index) * width +
159
- (Total - index) * (margin * 2) +
180
+ ? (average - index) * width +
181
+ (average - index) * (margin * 2) +
160
182
  selectOffsetX
161
183
  : selectOffsetX
162
184
  : 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,
185
+ scale: hasSelect ? animate === null || animate === void 0 ? void 0 : animate.selectScale : animate === null || animate === void 0 ? void 0 : animate.scale,
168
186
  rotateY: hasSelect ? animate === null || animate === void 0 ? void 0 : animate.selectRotateY : animate === null || animate === void 0 ? void 0 : animate.rotateY,
169
187
  rotateX: hasSelect ? animate === null || animate === void 0 ? void 0 : animate.selectRotateX : animate === null || animate === void 0 ? void 0 : animate.rotateX,
170
188
  rotateZ: hasSelect ? animate === null || animate === void 0 ? void 0 : animate.selectRotateZ : animate === null || animate === void 0 ? void 0 : animate.rotateZ,
@@ -194,7 +212,6 @@ const MagicStraight = ({ images, height, width, start, controller, wheelDelay, v
194
212
  margin: vertical ? margin + 'px' + ' 0' : '0 ' + margin + 'px'
195
213
  } }));
196
214
  })),
197
- react_1.default.createElement("button", { onClick: () => shiftRight() }, hasPick ? 'true' : 'false'),
198
215
  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
216
  };
200
217
  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.3",
4
4
  "description": "image gallery component with framer motion",
5
5
  "main": "dist/index.js",
6
6
  "typings": "dist/index.d.ts",