react-magic-card 0.1.24 → 0.2.0

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/README.md +1 -1
  2. package/dist/MagicCircle/index.js +45 -51
  3. package/dist/MagicStraight/index.js +47 -53
  4. package/package.json +1 -1
package/README.md CHANGED
@@ -81,7 +81,7 @@ function MyComponent() {
81
81
  | animate | object in the animation property |
82
82
  | initial | object in the animation property |
83
83
  | transition | object in the transition property |
84
- | pickScale | whether to turn off pickå after selection, default true |
84
+ | pickScale | whether to turn off pick after selection, default true |
85
85
  | pickTransition | object in the tansition property |
86
86
  | pickProperty | object in the pick property |
87
87
 
package/dist/MagicCircle/index.js CHANGED
@@ -39,8 +39,8 @@ const MagicCircle = ({ images, height, width, dynamic = true, clockwise = true,
39
39
  const [hasDelayed, setHasDelayed] = (0, react_1.useState)(true);
40
40
  const [select, setSelect] = (0, react_1.useState)(start);
41
41
  const [hasPick, setHasPick] = (0, react_1.useState)(false);
42
- const div1Ref = (0, react_1.useRef)(null);
43
- const div2Ref = (0, react_1.useRef)(null);
42
+ const refOuter = (0, react_1.useRef)(null);
43
+ const refPicker = (0, react_1.useRef)(null);
44
44
  const centralAngle = ((2 * Math.PI) / images.length) * (180 / Math.PI);
45
45
  // Functions of the rotation and select and delay.
46
46
  // turn left
@@ -85,66 +85,61 @@ const MagicCircle = ({ images, height, width, dynamic = true, clockwise = true,
85
85
  }, [clockwise, hasPick, shiftLeft, shiftRight, touchStartX, touchStartY]);
86
86
  // Main functional, exit function if ref and hasDelayed does not exist.
87
87
  (0, react_1.useEffect)(() => {
88
- const elm1Div = div1Ref.current;
89
- const elm2Div = div2Ref.current;
90
- const elms = [elm1Div, elm2Div];
88
+ const outer = refOuter.current;
89
+ const picker = refPicker.current;
90
+ ``;
91
91
  const timeId = setTimeout(() => {
92
92
  setHasDelayed(true);
93
93
  }, delay);
94
94
  // Add handle event when component mount and deps update.
95
- elms.forEach(elm => {
96
- if (!elm || !hasDelayed)
97
- return;
98
- elm.addEventListener('wheel', handleWheel, { passive: true });
99
- elm.addEventListener('touchstart', handleTouchStart, { passive: true });
100
- elm.addEventListener('touchmove', handleTouchMove, { passive: true });
101
- });
95
+ outer.addEventListener('wheel', handleWheel, { passive: true });
96
+ outer.addEventListener('touchstart', handleTouchStart, { passive: true });
97
+ outer.addEventListener('touchmove', handleTouchMove, { passive: true });
98
+ picker.addEventListener('wheel', handleWheel, { passive: true });
99
+ picker.addEventListener('touchstart', handleTouchStart, { passive: true });
100
+ picker.addEventListener('touchmove', handleTouchMove, { passive: true });
102
101
  // Clean up event and timeId when component is unmount.
103
102
  return () => {
104
- elms.forEach(elm => {
105
- if (!elm)
106
- return;
107
- elm.removeEventListener('wheel', handleWheel);
108
- elm.removeEventListener('touchstart', handleTouchStart);
109
- elm.removeEventListener('touchmove', handleTouchMove);
110
- });
103
+ outer.removeEventListener('wheel', handleWheel);
104
+ outer.removeEventListener('touchstart', handleTouchStart);
105
+ outer.removeEventListener('touchmove', handleTouchMove);
106
+ picker.removeEventListener('wheel', handleWheel);
107
+ picker.removeEventListener('touchstart', handleTouchStart);
108
+ picker.removeEventListener('touchmove', handleTouchMove);
111
109
  clearTimeout(timeId);
112
110
  };
113
111
  }, [handleTouchMove, handleWheel, hasDelayed, delay]);
114
- // Functions of the area controller.
115
- // entry ref area.
116
- const enterControll = (e) => {
117
- e.preventDefault();
118
- document.body.style.overflow = 'hidden';
119
- };
120
- // leave ref area.
121
- const leaveControll = () => {
122
- document.body.style.overflow = 'auto';
123
- };
112
+ // The controll start or end.
124
113
  // Added event when component is mounted.
125
114
  (0, react_1.useEffect)(() => {
126
- const elm1Div = div1Ref.current;
127
- const elm2Div = div2Ref.current;
128
- const elms = [elm1Div, elm2Div];
115
+ const enterControll = (e) => {
116
+ e.preventDefault();
117
+ document.body.style.overflow = 'hidden';
118
+ };
119
+ const leaveControll = () => {
120
+ document.body.style.overflow = 'auto';
121
+ };
122
+ const outer = refOuter.current;
123
+ const picker = refPicker.current;
129
124
  // Add event.
130
- elms.forEach(elm => {
131
- if (!elm)
132
- return;
133
- elm.addEventListener('mouseover', enterControll, { passive: false });
134
- elm.addEventListener('mouseout', leaveControll);
135
- elm.addEventListener('touchmove', enterControll, { passive: false });
136
- elm.addEventListener('touchend', leaveControll);
137
- });
125
+ outer.addEventListener('mouseover', enterControll, { passive: false });
126
+ outer.addEventListener('mouseout', leaveControll);
127
+ outer.addEventListener('touchmove', enterControll, { passive: false });
128
+ outer.addEventListener('touchend', leaveControll);
129
+ picker.addEventListener('mouseover', enterControll, { passive: false });
130
+ picker.addEventListener('mouseout', leaveControll);
131
+ picker.addEventListener('touchmove', enterControll, { passive: false });
132
+ picker.addEventListener('touchend', leaveControll);
138
133
  // Clean up event when component is unmount.
139
134
  return () => {
140
- elms.forEach(elm => {
141
- if (!elm)
142
- return;
143
- elm.removeEventListener('mouseover', enterControll);
144
- elm.removeEventListener('mouseout', leaveControll);
145
- elm.removeEventListener('touchmove', enterControll);
146
- elm.removeEventListener('touchend', leaveControll);
147
- });
135
+ outer.removeEventListener('mouseover', enterControll);
136
+ outer.removeEventListener('mouseout', leaveControll);
137
+ outer.removeEventListener('touchmove', enterControll);
138
+ outer.removeEventListener('touchend', leaveControll);
139
+ picker.removeEventListener('mouseover', enterControll);
140
+ picker.removeEventListener('mouseout', leaveControll);
141
+ picker.removeEventListener('touchmove', enterControll);
142
+ picker.removeEventListener('touchend', leaveControll);
148
143
  };
149
144
  }, []);
150
145
  // angle between.
@@ -162,7 +157,7 @@ const MagicCircle = ({ images, height, width, dynamic = true, clockwise = true,
162
157
  };
163
158
  return (react_1.default.createElement(framer_motion_1.LazyMotion, { features: framer_motion_1.domAnimation },
164
159
  react_1.default.createElement("div", { className: className },
165
- react_1.default.createElement(framer_motion_1.m.div, { ref: div1Ref, tabIndex: offsetIndex <= 0 ? 0 : offsetIndex - 1, onKeyDown: handleKeyPress, className: styles_module_css_1.default.outer, style: {
160
+ react_1.default.createElement(framer_motion_1.m.div, { className: styles_module_css_1.default.outer, ref: refOuter, tabIndex: offsetIndex <= 0 ? 0 : offsetIndex - 1, onKeyDown: handleKeyPress, style: {
166
161
  zIndex: offsetIndex - 1,
167
162
  width: radius * 2 + controller + 'px',
168
163
  height: radius * 2 + controller + 'px'
@@ -227,8 +222,7 @@ const MagicCircle = ({ images, height, width, dynamic = true, clockwise = true,
227
222
  } }));
228
223
  }))),
229
224
  react_1.default.createElement(PickImage_1.default, { onClick: () => {
230
- leaveControll();
231
225
  setHasPick(false);
232
- }, 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: frontImage }))));
226
+ }, 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: refPicker, argKey: select, src: images[select].src, alt: images[select].alt, width: width, height: height, transition: pickTransition, zIndex: frontImage }))));
233
227
  };
234
228
  exports.MagicCircle = MagicCircle;
package/dist/MagicStraight/index.js CHANGED
@@ -38,8 +38,8 @@ const MagicStraight = ({ images, height, width, vertical = true, margin = 0, sel
38
38
  const [hasDelayed, setHasDelayed] = (0, react_1.useState)(true);
39
39
  const [select, setSelect] = (0, react_1.useState)(start);
40
40
  const [hasPick, setHasPick] = (0, react_1.useState)(false);
41
- const div1Ref = (0, react_1.useRef)(null);
42
- const div2Ref = (0, react_1.useRef)(null);
41
+ const refOuter = (0, react_1.useRef)(null);
42
+ const refPicker = (0, react_1.useRef)(null);
43
43
  // Functions of the swipe and wheel a shifting.
44
44
  // turn left
45
45
  const shiftLeft = (0, react_1.useCallback)(() => {
@@ -95,66 +95,61 @@ const MagicStraight = ({ images, height, width, vertical = true, margin = 0, sel
95
95
  }, [hasPick, shiftLeft, shiftRight, touchStartX, touchStartY, vertical]);
96
96
  // Main functional, exit function if ref and hasDelayed does not exist.
97
97
  (0, react_1.useEffect)(() => {
98
- const elm1Div = div1Ref.current;
99
- const elm2Div = div2Ref.current;
100
- const elms = [elm1Div, elm2Div];
98
+ const outer = refOuter.current;
99
+ const picker = refPicker.current;
101
100
  const timeId = setTimeout(() => {
102
101
  setHasDelayed(true);
103
102
  }, delay);
104
103
  // Add handle event when component mount and deps update.
105
- elms.forEach(elm => {
106
- if (!elm || !hasDelayed)
107
- return;
108
- elm.addEventListener('wheel', handleWheel, { passive: true });
109
- elm.addEventListener('touchstart', handleTouchStart, { passive: true });
110
- elm.addEventListener('touchmove', handleTouchMove, { passive: true });
111
- });
104
+ outer.addEventListener('wheel', handleWheel, { passive: true });
105
+ outer.addEventListener('touchstart', handleTouchStart, { passive: true });
106
+ outer.addEventListener('touchmove', handleTouchMove, { passive: true });
107
+ picker.addEventListener('wheel', handleWheel, { passive: true });
108
+ picker.addEventListener('touchstart', handleTouchStart, { passive: true });
109
+ picker.addEventListener('touchmove', handleTouchMove, { passive: true });
112
110
  // Clean up event and timeId when component is unmount.
113
111
  return () => {
114
- elms.forEach(elm => {
115
- if (!elm)
116
- return;
117
- elm.removeEventListener('wheel', handleWheel);
118
- elm.removeEventListener('touchstart', handleTouchStart);
119
- elm.removeEventListener('touchmove', handleTouchMove);
120
- });
112
+ outer.removeEventListener('wheel', handleWheel);
113
+ outer.removeEventListener('touchstart', handleTouchStart);
114
+ outer.removeEventListener('touchmove', handleTouchMove);
115
+ picker.removeEventListener('wheel', handleWheel);
116
+ picker.removeEventListener('touchstart', handleTouchStart);
117
+ picker.removeEventListener('touchmove', handleTouchMove);
121
118
  clearTimeout(timeId);
122
119
  };
123
120
  }, [handleTouchMove, handleWheel, hasDelayed, delay]);
124
- // Functions of the area controller.
125
- // entry ref area.
126
- const enterControll = (e) => {
127
- e.preventDefault();
128
- document.body.style.overflow = 'hidden';
129
- };
130
- // leave ref area.
131
- const leaveControll = () => {
132
- document.body.style.overflow = 'auto';
133
- };
121
+ // The controll start or end.
134
122
  // Added event when component is mounted.
135
123
  (0, react_1.useEffect)(() => {
136
- const elm1Div = div1Ref.current;
137
- const elm2Div = div2Ref.current;
138
- const elms = [elm1Div, elm2Div];
139
- // Add event.
140
- elms.forEach(elm => {
141
- if (!elm)
142
- return;
143
- elm.addEventListener('mouseover', enterControll, { passive: false });
144
- elm.addEventListener('mouseout', leaveControll);
145
- elm.addEventListener('touchmove', enterControll, { passive: false });
146
- elm.addEventListener('touchend', leaveControll);
147
- });
124
+ const enterControll = (e) => {
125
+ e.preventDefault();
126
+ document.body.style.overflow = 'hidden';
127
+ };
128
+ // leave ref area.
129
+ const leaveControll = () => {
130
+ document.body.style.overflow = 'auto';
131
+ };
132
+ const outer = refOuter.current;
133
+ const picker = refPicker.current;
134
+ // add evenet.
135
+ outer.addEventListener('mouseover', enterControll, { passive: false });
136
+ outer.addEventListener('mouseout', leaveControll);
137
+ outer.addEventListener('touchmove', enterControll, { passive: false });
138
+ outer.addEventListener('touchend', leaveControll);
139
+ picker.addEventListener('mouseover', enterControll, { passive: false });
140
+ picker.addEventListener('mouseout', leaveControll);
141
+ picker.addEventListener('touchmove', enterControll, { passive: false });
142
+ picker.addEventListener('touchend', leaveControll);
148
143
  // Clean up event when component is unmount.
149
144
  return () => {
150
- elms.forEach(elm => {
151
- if (!elm)
152
- return;
153
- elm.removeEventListener('mouseover', enterControll);
154
- elm.removeEventListener('mouseout', leaveControll);
155
- elm.removeEventListener('touchmove', enterControll);
156
- elm.removeEventListener('touchend', leaveControll);
157
- });
145
+ outer.removeEventListener('mouseover', enterControll);
146
+ outer.removeEventListener('mouseout', leaveControll);
147
+ outer.removeEventListener('touchmove', enterControll);
148
+ outer.removeEventListener('touchend', leaveControll);
149
+ picker.removeEventListener('mouseover', enterControll);
150
+ picker.removeEventListener('mopickerseout', leaveControll);
151
+ picker.removeEventListener('touchmove', enterControll);
152
+ picker.removeEventListener('touchend', leaveControll);
158
153
  };
159
154
  }, []);
160
155
  // average calculation.
@@ -175,7 +170,7 @@ const MagicStraight = ({ images, height, width, vertical = true, margin = 0, sel
175
170
  };
176
171
  return (react_1.default.createElement(framer_motion_1.LazyMotion, { features: framer_motion_1.domAnimation },
177
172
  react_1.default.createElement("div", { className: className },
178
- react_1.default.createElement("div", { ref: div1Ref, tabIndex: offsetIndex <= 0 ? 0 : offsetIndex - 1, onKeyDown: handleKeyPress, className: styles_module_css_1.default.outer, style: {
173
+ react_1.default.createElement("div", { className: styles_module_css_1.default.outer, ref: refOuter, tabIndex: offsetIndex <= 0 ? 0 : offsetIndex - 1, onKeyDown: handleKeyPress, style: {
179
174
  zIndex: offsetIndex - 1,
180
175
  width: !vertical
181
176
  ? images.length * (width + margin * 2) + controller + 'px'
@@ -246,9 +241,8 @@ const MagicStraight = ({ images, height, width, vertical = true, margin = 0, sel
246
241
  margin: vertical ? margin + 'px' + ' 0' : '0 ' + margin + 'px'
247
242
  } }));
248
243
  })),
249
- react_1.default.createElement(PickImage_1.default, { onClick: () => {
250
- leaveControll();
244
+ react_1.default.createElement(PickImage_1.default, { classPick: pickProperty === null || pickProperty === void 0 ? void 0 : pickProperty.classPick, argRef: refPicker, onClick: () => {
251
245
  setHasPick(false);
252
- }, 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: frontImage }))));
246
+ }, hasPick: hasPick, 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, argKey: select, src: images[select].src, alt: images[select].alt, width: width, height: height, transition: pickTransition, zIndex: frontImage }))));
253
247
  };
254
248
  exports.MagicStraight = MagicStraight;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-magic-card",
3
- "version": "0.1.24",
3
+ "version": "0.2.0",
4
4
  "description": "image gallery components with framer motion",
5
5
  "main": "dist/index.js",
6
6
  "typings": "dist/index.d.ts",