react-magic-card 0.1.24 → 0.2.1

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 +47 -51
  3. package/dist/MagicStraight/index.js +49 -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,63 @@ 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
+ if (!hasDelayed)
96
+ return;
97
+ outer.addEventListener('wheel', handleWheel, { passive: true });
98
+ outer.addEventListener('touchstart', handleTouchStart, { passive: true });
99
+ outer.addEventListener('touchmove', handleTouchMove, { passive: true });
100
+ picker.addEventListener('wheel', handleWheel, { passive: true });
101
+ picker.addEventListener('touchstart', handleTouchStart, { passive: true });
102
+ picker.addEventListener('touchmove', handleTouchMove, { passive: true });
102
103
  // Clean up event and timeId when component is unmount.
103
104
  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
- });
105
+ outer.removeEventListener('wheel', handleWheel);
106
+ outer.removeEventListener('touchstart', handleTouchStart);
107
+ outer.removeEventListener('touchmove', handleTouchMove);
108
+ picker.removeEventListener('wheel', handleWheel);
109
+ picker.removeEventListener('touchstart', handleTouchStart);
110
+ picker.removeEventListener('touchmove', handleTouchMove);
111
111
  clearTimeout(timeId);
112
112
  };
113
113
  }, [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
- };
114
+ // The controll start or end.
124
115
  // Added event when component is mounted.
125
116
  (0, react_1.useEffect)(() => {
126
- const elm1Div = div1Ref.current;
127
- const elm2Div = div2Ref.current;
128
- const elms = [elm1Div, elm2Div];
117
+ const enterControll = (e) => {
118
+ e.preventDefault();
119
+ document.body.style.overflow = 'hidden';
120
+ };
121
+ const leaveControll = () => {
122
+ document.body.style.overflow = 'auto';
123
+ };
124
+ const outer = refOuter.current;
125
+ const picker = refPicker.current;
129
126
  // 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
- });
127
+ outer.addEventListener('mouseover', enterControll, { passive: false });
128
+ outer.addEventListener('mouseout', leaveControll);
129
+ outer.addEventListener('touchmove', enterControll, { passive: false });
130
+ outer.addEventListener('touchend', leaveControll);
131
+ picker.addEventListener('mouseover', enterControll, { passive: false });
132
+ picker.addEventListener('mouseout', leaveControll);
133
+ picker.addEventListener('touchmove', enterControll, { passive: false });
134
+ picker.addEventListener('touchend', leaveControll);
138
135
  // Clean up event when component is unmount.
139
136
  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
- });
137
+ outer.removeEventListener('mouseover', enterControll);
138
+ outer.removeEventListener('mouseout', leaveControll);
139
+ outer.removeEventListener('touchmove', enterControll);
140
+ outer.removeEventListener('touchend', leaveControll);
141
+ picker.removeEventListener('mouseover', enterControll);
142
+ picker.removeEventListener('mouseout', leaveControll);
143
+ picker.removeEventListener('touchmove', enterControll);
144
+ picker.removeEventListener('touchend', leaveControll);
148
145
  };
149
146
  }, []);
150
147
  // angle between.
@@ -162,7 +159,7 @@ const MagicCircle = ({ images, height, width, dynamic = true, clockwise = true,
162
159
  };
163
160
  return (react_1.default.createElement(framer_motion_1.LazyMotion, { features: framer_motion_1.domAnimation },
164
161
  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: {
162
+ 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
163
  zIndex: offsetIndex - 1,
167
164
  width: radius * 2 + controller + 'px',
168
165
  height: radius * 2 + controller + 'px'
@@ -227,8 +224,7 @@ const MagicCircle = ({ images, height, width, dynamic = true, clockwise = true,
227
224
  } }));
228
225
  }))),
229
226
  react_1.default.createElement(PickImage_1.default, { onClick: () => {
230
- leaveControll();
231
227
  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 }))));
228
+ }, 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
229
  };
234
230
  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,63 @@ 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
+ if (!hasDelayed)
105
+ return;
106
+ outer.addEventListener('wheel', handleWheel, { passive: true });
107
+ outer.addEventListener('touchstart', handleTouchStart, { passive: true });
108
+ outer.addEventListener('touchmove', handleTouchMove, { passive: true });
109
+ picker.addEventListener('wheel', handleWheel, { passive: true });
110
+ picker.addEventListener('touchstart', handleTouchStart, { passive: true });
111
+ picker.addEventListener('touchmove', handleTouchMove, { passive: true });
112
112
  // Clean up event and timeId when component is unmount.
113
113
  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
- });
114
+ outer.removeEventListener('wheel', handleWheel);
115
+ outer.removeEventListener('touchstart', handleTouchStart);
116
+ outer.removeEventListener('touchmove', handleTouchMove);
117
+ picker.removeEventListener('wheel', handleWheel);
118
+ picker.removeEventListener('touchstart', handleTouchStart);
119
+ picker.removeEventListener('touchmove', handleTouchMove);
121
120
  clearTimeout(timeId);
122
121
  };
123
122
  }, [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
- };
123
+ // The controll start or end.
134
124
  // Added event when component is mounted.
135
125
  (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
- });
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
+ };
134
+ const outer = refOuter.current;
135
+ const picker = refPicker.current;
136
+ // add evenet.
137
+ outer.addEventListener('mouseover', enterControll, { passive: false });
138
+ outer.addEventListener('mouseout', leaveControll);
139
+ outer.addEventListener('touchmove', enterControll, { passive: false });
140
+ outer.addEventListener('touchend', leaveControll);
141
+ picker.addEventListener('mouseover', enterControll, { passive: false });
142
+ picker.addEventListener('mouseout', leaveControll);
143
+ picker.addEventListener('touchmove', enterControll, { passive: false });
144
+ picker.addEventListener('touchend', leaveControll);
148
145
  // Clean up event when component is unmount.
149
146
  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
- });
147
+ outer.removeEventListener('mouseover', enterControll);
148
+ outer.removeEventListener('mouseout', leaveControll);
149
+ outer.removeEventListener('touchmove', enterControll);
150
+ outer.removeEventListener('touchend', leaveControll);
151
+ picker.removeEventListener('mouseover', enterControll);
152
+ picker.removeEventListener('mopickerseout', leaveControll);
153
+ picker.removeEventListener('touchmove', enterControll);
154
+ picker.removeEventListener('touchend', leaveControll);
158
155
  };
159
156
  }, []);
160
157
  // average calculation.
@@ -175,7 +172,7 @@ const MagicStraight = ({ images, height, width, vertical = true, margin = 0, sel
175
172
  };
176
173
  return (react_1.default.createElement(framer_motion_1.LazyMotion, { features: framer_motion_1.domAnimation },
177
174
  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: {
175
+ react_1.default.createElement("div", { className: styles_module_css_1.default.outer, ref: refOuter, tabIndex: offsetIndex <= 0 ? 0 : offsetIndex - 1, onKeyDown: handleKeyPress, style: {
179
176
  zIndex: offsetIndex - 1,
180
177
  width: !vertical
181
178
  ? images.length * (width + margin * 2) + controller + 'px'
@@ -246,9 +243,8 @@ const MagicStraight = ({ images, height, width, vertical = true, margin = 0, sel
246
243
  margin: vertical ? margin + 'px' + ' 0' : '0 ' + margin + 'px'
247
244
  } }));
248
245
  })),
249
- react_1.default.createElement(PickImage_1.default, { onClick: () => {
250
- leaveControll();
246
+ react_1.default.createElement(PickImage_1.default, { classPick: pickProperty === null || pickProperty === void 0 ? void 0 : pickProperty.classPick, argRef: refPicker, onClick: () => {
251
247
  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 }))));
248
+ }, 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
249
  };
254
250
  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.1",
4
4
  "description": "image gallery components with framer motion",
5
5
  "main": "dist/index.js",
6
6
  "typings": "dist/index.d.ts",