react-magic-card 0.2.1 → 1.0.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 (9) hide show
  1. package/README.md +8 -25
  2. package/dist/MagicCircle/index.d.ts +1 -1
  3. package/dist/MagicCircle/index.js +150 -48
  4. package/dist/MagicCircle/styles.module.css +1 -0
  5. package/dist/MagicStraight/index.js +76 -38
  6. package/dist/MagicStraight/styles.module.css +1 -0
  7. package/dist/common/PickImage/index.js +1 -1
  8. package/dist/types.d.ts +1 -1
  9. package/package.json +6 -7
package/README.md CHANGED
@@ -4,7 +4,7 @@
4
4
  [![Minzip Size](https://img.shields.io/bundlephobia/minzip/react-magic-card)](https://bundlephobia.com/package/react-magic-card)
5
5
  [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
6
6
 
7
- This is the framer motion components, that support art and photograph gallery.
7
+ This is the framer motion components, that support images gallery.
8
8
 
9
9
  ## Installation
10
10
 
@@ -41,21 +41,7 @@ function MyComponent() {
41
41
  radius={100}
42
42
  controller={200}
43
43
  start={1}
44
- dynamic={true}
45
- wheelDelay={100}
46
- animate={{
47
- scale: 0.8,
48
- rotateX: 70,
49
- rotateY: 40,
50
- rotateZ: -50,
51
- selectScale: 1.6,
52
- selectRotateX: 40,
53
- selectRotateY: 40,
54
- selectRotateZ: -10
55
- }}
56
- transition={{ duration: 0.2 }}
57
- pickTransition={{ duration: 0.2 }}
58
- pickProperty={{ white: true }}
44
+ delay={100}
59
45
  />
60
46
  )
61
47
  }
@@ -73,7 +59,6 @@ function MyComponent() {
73
59
  | delay | delay of the animation firing interval |
74
60
  | offsetIndex | add an offset to the index of the components and images |
75
61
  | reverseIndex | reverse index order the default true |
76
- | loading | loading option of the eager or lazy the default auto |
77
62
  | className | className of the component |
78
63
  | classImages | className of the images |
79
64
  | classImageSelect | className of the select image |
@@ -81,17 +66,15 @@ function MyComponent() {
81
66
  | animate | object in the animation property |
82
67
  | initial | object in the animation property |
83
68
  | transition | object in the transition property |
84
- | pickScale | whether to turn off pick after selection, default true |
85
- | pickTransition | object in the tansition property |
69
+ | pickTransition | object in the transition property |
86
70
  | pickProperty | object in the pick property |
87
71
 
88
72
  ## MagicCircle Properties
89
73
 
90
- | Property | Meaning |
91
- | --------- | --------------------------------------------------- |
92
- | radius | radius of the circle |
93
- | dynamic | dynamic or static for rotation the default true |
94
- | clockwise | direction of rotation when dynamic the default true |
74
+ | Property | Meaning |
75
+ | -------- | ----------------------------------------------- |
76
+ | radius | radius of the circle |
77
+ | dynamic | dynamic or static for rotation the default true |
95
78
 
96
79
  ## MagicStraight Properties
97
80
 
@@ -134,4 +117,4 @@ It is Inherits framer motion transition object other than intera.
134
117
 
135
118
  ## License
136
119
 
137
- MIT License
120
+ The MIT License.
package/dist/MagicCircle/index.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import React from 'react';
2
2
  import type { MagicCircleProps } from '../types';
3
- export declare const MagicCircle: ({ images, height, width, dynamic, clockwise, radius, start, delay, controller, offsetIndex, reverseIndex, loading, className, classImages, classImageSelect, classImageUnique, animate, initial, transition, pickScale, pickProperty, pickTransition }: MagicCircleProps) => React.JSX.Element;
3
+ export declare const MagicCircle: ({ images, height, width, dynamic, scrollDirection, radius, start, delay, controller, offsetIndex, reverseIndex, loading, className, classImages, classImageSelect, classImageUnique, animate, initial, transition, pickScale, pickProperty, pickTransition }: MagicCircleProps) => React.JSX.Element;
package/dist/MagicCircle/index.js CHANGED
@@ -31,10 +31,13 @@ const react_1 = __importStar(require("react"));
31
31
  const framer_motion_1 = require("framer-motion");
32
32
  const styles_module_css_1 = __importDefault(require("./styles.module.css"));
33
33
  const PickImage_1 = __importDefault(require("../common/PickImage"));
34
- const MagicCircle = ({ images, height, width, dynamic = true, clockwise = true, radius, start, delay = 100, controller, offsetIndex = 0, reverseIndex = true, loading, className, classImages, classImageSelect, classImageUnique, animate, initial, transition, pickScale = true, pickProperty, pickTransition }) => {
34
+ const MagicCircle = ({ images, height, width, dynamic = true, scrollDirection = true, radius, start, delay = 100, controller, offsetIndex = 0, reverseIndex = true, loading, className, classImages, classImageSelect, classImageUnique, animate, initial, transition, pickScale = true, pickProperty, pickTransition }) => {
35
35
  const [count, setCount] = (0, react_1.useState)(0);
36
36
  const [touchStartY, setTouchStartY] = (0, react_1.useState)(0);
37
37
  const [touchStartX, setTouchStartX] = (0, react_1.useState)(0);
38
+ const [initialX, setInitialX] = (0, react_1.useState)(0);
39
+ const [initialY, setInitialY] = (0, react_1.useState)(0);
40
+ const [isDragging, setIsDragging] = (0, react_1.useState)(false);
38
41
  const [hasShift, setHasShift] = (0, react_1.useState)(false);
39
42
  const [hasDelayed, setHasDelayed] = (0, react_1.useState)(true);
40
43
  const [select, setSelect] = (0, react_1.useState)(start);
@@ -60,13 +63,13 @@ const MagicCircle = ({ images, height, width, dynamic = true, clockwise = true,
60
63
  return setCount(count - centralAngle);
61
64
  }, [centralAngle, count, dynamic, images.length, select]);
62
65
  // Function of the desktop.
63
- const handleWheel = (0, react_1.useCallback)((e) => {
66
+ const handleScroll = (0, react_1.useCallback)((e) => {
64
67
  const delta = e.deltaY;
65
68
  if (delta < 0)
66
- clockwise ? shiftLeft() : shiftRight();
69
+ scrollDirection ? shiftLeft() : shiftRight();
67
70
  if (delta > 0)
68
- clockwise ? shiftRight() : shiftLeft();
69
- }, [clockwise, shiftLeft, shiftRight]);
71
+ scrollDirection ? shiftRight() : shiftLeft();
72
+ }, [scrollDirection, shiftLeft, shiftRight]);
70
73
  // Get a start y and x position in touchStart Y and X.
71
74
  const handleTouchStart = (e) => {
72
75
  const touch = e.touches[0];
@@ -76,72 +79,171 @@ const MagicCircle = ({ images, height, width, dynamic = true, clockwise = true,
76
79
  // Function of the mobile.
77
80
  const handleTouchMove = (0, react_1.useCallback)((event) => {
78
81
  const touch = event.touches[0];
79
- const delta = hasPick ? touch.clientX : touch.clientY;
80
- if (hasPick ? delta < touchStartX : delta < touchStartY)
81
- clockwise ? shiftLeft() : shiftRight();
82
- if (hasPick ? delta > touchStartX : delta > touchStartY)
83
- clockwise ? shiftRight() : shiftLeft();
84
- hasPick ? setTouchStartX(delta) : setTouchStartY(delta);
85
- }, [clockwise, hasPick, shiftLeft, shiftRight, touchStartX, touchStartY]);
82
+ const outer = refOuter.current;
83
+ const outerHalfWidth = outer.clientWidth / 2;
84
+ const outerHalfHeight = outer.clientHeight / 2;
85
+ const outerRect = outer.getBoundingClientRect();
86
+ const boundarX = touch.clientX - outerRect.left;
87
+ const boundarY = touch.clientY - outerRect.top;
88
+ const deltaX = touch.clientX;
89
+ const deltaY = touch.clientY;
90
+ const absDistanceX = Math.abs(deltaX - touchStartX);
91
+ const absDistanceY = Math.abs(deltaY - touchStartY);
92
+ if (absDistanceX > absDistanceY) {
93
+ if (boundarY > outerHalfHeight) {
94
+ if (deltaX < touchStartX)
95
+ shiftLeft();
96
+ if (deltaX > touchStartX)
97
+ shiftRight();
98
+ }
99
+ else {
100
+ if (deltaX > touchStartX)
101
+ shiftLeft();
102
+ if (deltaX < touchStartX)
103
+ shiftRight();
104
+ }
105
+ }
106
+ else if (boundarX > outerHalfWidth) {
107
+ if (deltaY > touchStartY)
108
+ shiftLeft();
109
+ if (deltaY < touchStartY)
110
+ shiftRight();
111
+ }
112
+ else {
113
+ if (deltaY < touchStartY)
114
+ shiftLeft();
115
+ if (deltaY > touchStartY)
116
+ shiftRight();
117
+ }
118
+ setTouchStartX(deltaX);
119
+ setTouchStartY(deltaY);
120
+ }, [shiftLeft, shiftRight, touchStartX, touchStartY]);
121
+ const handleMouseDown = (0, react_1.useCallback)((e) => {
122
+ setIsDragging(true);
123
+ setInitialX(e.clientX);
124
+ setInitialY(e.clientY);
125
+ }, []);
126
+ const handleMouseMove = (0, react_1.useCallback)((e) => {
127
+ if (isDragging) {
128
+ const outer = refOuter.current;
129
+ const outerHalfWidth = outer.clientWidth / 2;
130
+ const outerHalfHeight = outer.clientHeight / 2;
131
+ const outerRect = outer.getBoundingClientRect();
132
+ const boundarX = e.clientX - outerRect.left;
133
+ const boundarY = e.clientY - outerRect.top;
134
+ const deltaX = e.clientX - initialX;
135
+ const deltaY = e.clientY - initialY;
136
+ const absDistanceX = Math.abs(deltaX);
137
+ const absDistanceY = Math.abs(deltaY);
138
+ if (absDistanceX > absDistanceY) {
139
+ if (boundarY > outerHalfHeight) {
140
+ if (deltaX < 0)
141
+ shiftLeft();
142
+ if (deltaX > 0)
143
+ shiftRight();
144
+ }
145
+ else {
146
+ if (deltaX > 0)
147
+ shiftLeft();
148
+ if (deltaX < 0)
149
+ shiftRight();
150
+ }
151
+ }
152
+ else if (boundarX > outerHalfWidth) {
153
+ if (deltaY > 0)
154
+ shiftLeft();
155
+ if (deltaY < 0)
156
+ shiftRight();
157
+ }
158
+ else {
159
+ if (deltaY < 0)
160
+ shiftLeft();
161
+ if (deltaY > 0)
162
+ shiftRight();
163
+ }
164
+ setInitialX(e.clientX);
165
+ setInitialY(e.clientY);
166
+ }
167
+ }, [initialX, initialY, isDragging, shiftLeft, shiftRight]);
168
+ const handleMouseUp = (0, react_1.useCallback)(() => {
169
+ setIsDragging(false);
170
+ }, []);
86
171
  // Main functional, exit function if ref and hasDelayed does not exist.
87
172
  (0, react_1.useEffect)(() => {
88
173
  const outer = refOuter.current;
89
174
  const picker = refPicker.current;
90
- ``;
91
175
  const timeId = setTimeout(() => {
92
176
  setHasDelayed(true);
93
177
  }, delay);
94
178
  // Add handle event when component mount and deps update.
179
+ document.addEventListener('mouseup', handleMouseUp);
95
180
  if (!hasDelayed)
96
181
  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 });
182
+ picker.addEventListener('mousedown', handleMouseDown);
183
+ outer.addEventListener('mousedown', handleMouseDown);
184
+ document.addEventListener('mousemove', handleMouseMove);
185
+ outer.addEventListener('wheel', handleScroll);
186
+ outer.addEventListener('touchstart', handleTouchStart);
187
+ outer.addEventListener('touchmove', handleTouchMove);
188
+ picker.addEventListener('wheel', handleScroll);
189
+ picker.addEventListener('touchstart', handleTouchStart);
190
+ picker.addEventListener('touchmove', handleTouchMove);
103
191
  // Clean up event and timeId when component is unmount.
104
192
  return () => {
105
- outer.removeEventListener('wheel', handleWheel);
193
+ clearTimeout(timeId);
194
+ document.removeEventListener('mouseup', handleMouseUp);
195
+ picker.removeEventListener('mousedown', handleMouseDown);
196
+ outer.removeEventListener('mousedown', handleMouseDown);
197
+ document.removeEventListener('mousemove', handleMouseMove);
198
+ outer.removeEventListener('wheel', handleScroll);
106
199
  outer.removeEventListener('touchstart', handleTouchStart);
107
200
  outer.removeEventListener('touchmove', handleTouchMove);
108
- picker.removeEventListener('wheel', handleWheel);
201
+ picker.removeEventListener('wheel', handleScroll);
109
202
  picker.removeEventListener('touchstart', handleTouchStart);
110
203
  picker.removeEventListener('touchmove', handleTouchMove);
111
- clearTimeout(timeId);
112
204
  };
113
- }, [handleTouchMove, handleWheel, hasDelayed, delay]);
205
+ }, [
206
+ delay,
207
+ handleMouseDown,
208
+ handleMouseMove,
209
+ handleMouseUp,
210
+ handleTouchMove,
211
+ handleScroll,
212
+ hasDelayed
213
+ ]);
114
214
  // The controll start or end.
115
215
  // Added event when component is mounted.
116
216
  (0, react_1.useEffect)(() => {
117
- const enterControll = (e) => {
217
+ const enterControl = (e) => {
118
218
  e.preventDefault();
119
219
  document.body.style.overflow = 'hidden';
120
220
  };
121
- const leaveControll = () => {
221
+ const leaveControl = () => {
122
222
  document.body.style.overflow = 'auto';
123
223
  };
124
224
  const outer = refOuter.current;
125
225
  const picker = refPicker.current;
126
226
  // Add event.
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);
227
+ outer.addEventListener('mouseover', enterControl, { passive: false });
228
+ outer.addEventListener('mouseout', leaveControl);
229
+ outer.addEventListener('touchmove', enterControl, { passive: false });
230
+ outer.addEventListener('touchend', leaveControl);
231
+ picker.addEventListener('mouseover', enterControl, { passive: false });
232
+ picker.addEventListener('mouseout', leaveControl);
233
+ picker.addEventListener('touchmove', enterControl, { passive: false });
234
+ picker.addEventListener('touchend', leaveControl);
135
235
  // Clean up event when component is unmount.
136
236
  return () => {
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);
237
+ outer.removeEventListener('mouseover', enterControl);
238
+ outer.removeEventListener('mouseout', leaveControl);
239
+ outer.removeEventListener('touchmove', enterControl);
240
+ outer.removeEventListener('touchend', leaveControl);
241
+ picker.removeEventListener('mouseover', enterControl);
242
+ picker.removeEventListener('mouseout', leaveControl);
243
+ picker.removeEventListener('touchmove', enterControl);
244
+ picker.removeEventListener('touchend', leaveControl);
245
+ // page unmount with leave control.
246
+ leaveControl();
145
247
  };
146
248
  }, []);
147
249
  // angle between.
@@ -169,7 +271,12 @@ const MagicCircle = ({ images, height, width, dynamic = true, clockwise = true,
169
271
  const zIndex = reverseIndex
170
272
  ? offsetIndex + images.length - 1 - index
171
273
  : offsetIndex + index;
172
- return (react_1.default.createElement(framer_motion_1.m.img, { key: zIndex, loading: loading, animate: {
274
+ return (react_1.default.createElement(framer_motion_1.m.img, { key: zIndex, className: classImages +
275
+ ' ' +
276
+ (hasSelect && classImageSelect) +
277
+ ' ' +
278
+ classImageUnique +
279
+ zIndex, src: image.src, alt: image.alt, role: "button", draggable: false, loading: loading, animate: {
173
280
  rotate: -count,
174
281
  scale: hasSelect ? animate === null || animate === void 0 ? void 0 : animate.selectScale : animate === null || animate === void 0 ? void 0 : animate.scale,
175
282
  rotateY: hasSelect
@@ -204,12 +311,7 @@ const MagicCircle = ({ images, height, width, dynamic = true, clockwise = true,
204
311
  }, transition: transition, onClick: () => {
205
312
  setSelect(index);
206
313
  hasSelect && pickScale && setHasPick(true);
207
- }, className: classImages +
208
- ' ' +
209
- (hasSelect && classImageSelect) +
210
- ' ' +
211
- classImageUnique +
212
- zIndex, src: image.src, alt: image.alt, style: {
314
+ }, style: {
213
315
  zIndex: hasSelect ? frontImage : zIndex,
214
316
  width: width + 'px',
215
317
  height: height + 'px',
package/dist/MagicCircle/styles.module.css CHANGED
@@ -2,6 +2,7 @@
2
2
  display: flex;
3
3
  align-items: center;
4
4
  justify-content: center;
5
+ user-select: none;
5
6
  }
6
7
 
7
8
  .inner {
package/dist/MagicStraight/index.js CHANGED
@@ -34,6 +34,9 @@ const PickImage_1 = __importDefault(require("../common/PickImage"));
34
34
  const MagicStraight = ({ images, height, width, vertical = true, margin = 0, selectOffsetX = 0, selectOffsetY = 0, start, controller, delay = 20, offsetIndex = 0, reverseIndex = true, loading, className, classImages, classImageSelect, classImageUnique, animate, initial, transition, pickScale = true, pickProperty, pickTransition }) => {
35
35
  const [touchStartY, setTouchStartY] = (0, react_1.useState)(0);
36
36
  const [touchStartX, setTouchStartX] = (0, react_1.useState)(0);
37
+ const [initialX, setInitialX] = (0, react_1.useState)(0);
38
+ const [initialY, setInitialY] = (0, react_1.useState)(0);
39
+ const [isDragging, setIsDragging] = (0, react_1.useState)(false);
37
40
  const [hasShift, setHasShift] = (0, react_1.useState)(false);
38
41
  const [hasDelayed, setHasDelayed] = (0, react_1.useState)(true);
39
42
  const [select, setSelect] = (0, react_1.useState)(start);
@@ -54,7 +57,7 @@ const MagicStraight = ({ images, height, width, vertical = true, margin = 0, sel
54
57
  setHasDelayed(false);
55
58
  }, [images.length, select]);
56
59
  // Wheel function of the desktop.
57
- const handleWheel = (0, react_1.useCallback)((e) => {
60
+ const handleScroll = (0, react_1.useCallback)((e) => {
58
61
  const delta = e.deltaY;
59
62
  if (delta < 0)
60
63
  shiftLeft();
@@ -93,6 +96,25 @@ const MagicStraight = ({ images, height, width, vertical = true, margin = 0, sel
93
96
  ? setTouchStartX(delta)
94
97
  : setTouchStartY(delta);
95
98
  }, [hasPick, shiftLeft, shiftRight, touchStartX, touchStartY, vertical]);
99
+ const handleMouseDown = (0, react_1.useCallback)((e) => {
100
+ setIsDragging(true);
101
+ setInitialX(e.clientX);
102
+ setInitialY(e.clientY);
103
+ }, []);
104
+ const handleMouseMove = (0, react_1.useCallback)((e) => {
105
+ if (isDragging) {
106
+ const deltaX = e.clientX - initialX;
107
+ const deltaY = e.clientY - initialY;
108
+ if (!vertical ? deltaX < 0 : deltaY < 0)
109
+ shiftLeft();
110
+ if (!vertical ? deltaX > 0 : deltaY > 0)
111
+ shiftRight();
112
+ !vertical ? setInitialX(e.clientX) : setInitialY(e.clientY);
113
+ }
114
+ }, [initialX, initialY, isDragging, shiftLeft, shiftRight, vertical]);
115
+ const handleMouseUp = (0, react_1.useCallback)(() => {
116
+ setIsDragging(false);
117
+ }, []);
96
118
  // Main functional, exit function if ref and hasDelayed does not exist.
97
119
  (0, react_1.useEffect)(() => {
98
120
  const outer = refOuter.current;
@@ -101,57 +123,73 @@ const MagicStraight = ({ images, height, width, vertical = true, margin = 0, sel
101
123
  setHasDelayed(true);
102
124
  }, delay);
103
125
  // Add handle event when component mount and deps update.
126
+ document.addEventListener('mouseup', handleMouseUp);
104
127
  if (!hasDelayed)
105
128
  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 });
129
+ picker.addEventListener('mousedown', handleMouseDown);
130
+ outer.addEventListener('mousedown', handleMouseDown);
131
+ document.addEventListener('mousemove', handleMouseMove);
132
+ outer.addEventListener('wheel', handleScroll);
133
+ outer.addEventListener('touchstart', handleTouchStart);
134
+ outer.addEventListener('touchmove', handleTouchMove);
135
+ picker.addEventListener('wheel', handleScroll);
136
+ picker.addEventListener('touchstart', handleTouchStart);
137
+ picker.addEventListener('touchmove', handleTouchMove);
112
138
  // Clean up event and timeId when component is unmount.
113
139
  return () => {
114
- outer.removeEventListener('wheel', handleWheel);
140
+ clearTimeout(timeId);
141
+ outer.removeEventListener('wheel', handleScroll);
115
142
  outer.removeEventListener('touchstart', handleTouchStart);
116
143
  outer.removeEventListener('touchmove', handleTouchMove);
117
- picker.removeEventListener('wheel', handleWheel);
144
+ document.removeEventListener('mouseup', handleMouseUp);
145
+ picker.removeEventListener('mousedown', handleMouseDown);
146
+ outer.removeEventListener('mousedown', handleMouseDown);
147
+ document.removeEventListener('mousemove', handleMouseMove);
118
148
  picker.removeEventListener('touchstart', handleTouchStart);
119
149
  picker.removeEventListener('touchmove', handleTouchMove);
120
- clearTimeout(timeId);
121
150
  };
122
- }, [handleTouchMove, handleWheel, hasDelayed, delay]);
151
+ }, [
152
+ delay,
153
+ handleMouseDown,
154
+ handleMouseMove,
155
+ handleMouseUp,
156
+ handleTouchMove,
157
+ handleScroll,
158
+ hasDelayed
159
+ ]);
123
160
  // The controll start or end.
124
161
  // Added event when component is mounted.
125
162
  (0, react_1.useEffect)(() => {
126
- const enterControll = (e) => {
163
+ const enterControl = (e) => {
127
164
  e.preventDefault();
128
165
  document.body.style.overflow = 'hidden';
129
166
  };
130
- // leave ref area.
131
- const leaveControll = () => {
167
+ const leaveControl = () => {
132
168
  document.body.style.overflow = 'auto';
133
169
  };
134
170
  const outer = refOuter.current;
135
171
  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);
172
+ // Add event.
173
+ outer.addEventListener('mouseover', enterControl, { passive: false });
174
+ outer.addEventListener('mouseout', leaveControl);
175
+ outer.addEventListener('touchmove', enterControl, { passive: false });
176
+ outer.addEventListener('touchend', leaveControl);
177
+ picker.addEventListener('mouseover', enterControl, { passive: false });
178
+ picker.addEventListener('mouseout', leaveControl);
179
+ picker.addEventListener('touchmove', enterControl, { passive: false });
180
+ picker.addEventListener('touchend', leaveControl);
145
181
  // Clean up event when component is unmount.
146
182
  return () => {
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);
183
+ outer.removeEventListener('mouseover', enterControl);
184
+ outer.removeEventListener('mouseout', leaveControl);
185
+ outer.removeEventListener('touchmove', enterControl);
186
+ outer.removeEventListener('touchend', leaveControl);
187
+ picker.removeEventListener('mouseover', enterControl);
188
+ picker.removeEventListener('mouseout', leaveControl);
189
+ picker.removeEventListener('touchmove', enterControl);
190
+ picker.removeEventListener('touchend', leaveControl);
191
+ // page unmount with leave control.
192
+ leaveControl();
155
193
  };
156
194
  }, []);
157
195
  // average calculation.
@@ -186,7 +224,12 @@ const MagicStraight = ({ images, height, width, vertical = true, margin = 0, sel
186
224
  const zIndex = reverseIndex
187
225
  ? offsetIndex + images.length - 1 - index
188
226
  : offsetIndex + index;
189
- return (react_1.default.createElement(framer_motion_1.m.img, { key: zIndex, loading: loading, animate: {
227
+ return (react_1.default.createElement(framer_motion_1.m.img, { key: zIndex, className: classImages +
228
+ ' ' +
229
+ (hasSelect && classImageSelect) +
230
+ ' ' +
231
+ classImageUnique +
232
+ index, src: image.src, alt: image.alt, role: "button", draggable: false, loading: loading, animate: {
190
233
  y: hasSelect
191
234
  ? vertical
192
235
  ? (average - index) * height +
@@ -231,12 +274,7 @@ const MagicStraight = ({ images, height, width, vertical = true, margin = 0, sel
231
274
  }, transition: transition, onClick: () => {
232
275
  setSelect(index);
233
276
  hasSelect && pickScale && setHasPick(true);
234
- }, className: classImages +
235
- ' ' +
236
- (hasSelect && classImageSelect) +
237
- ' ' +
238
- classImageUnique +
239
- index, src: image.src, alt: image.alt, role: "button", style: {
277
+ }, style: {
240
278
  zIndex: hasSelect ? frontImage : zIndex,
241
279
  width: width + 'px',
242
280
  height: height + 'px',
package/dist/MagicStraight/styles.module.css CHANGED
@@ -2,4 +2,5 @@
2
2
  display: flex;
3
3
  align-items: center;
4
4
  justify-content: center;
5
+ user-select: none;
5
6
  }
package/dist/common/PickImage/index.js CHANGED
@@ -18,7 +18,7 @@ const PickImage = ({ onClick, classPick, hasPick, hasShift, argRef, argKey, src,
18
18
  opacity: hasPick ? 1 : 0,
19
19
  pointerEvents: hasPick ? 'auto' : 'none'
20
20
  }, style: { backdropFilter: backdropFilter, background: background }, transition: transition },
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: {
21
+ react_1.default.createElement(framer_motion_1.m.img, { key: argKey, className: classPick, src: src, alt: alt, width: width, height: height, draggable: false, animate: {
22
22
  zIndex: zIndex + 1,
23
23
  scale: scale,
24
24
  opacity: hasPick ? 1 : 0,
package/dist/types.d.ts CHANGED
@@ -70,7 +70,7 @@ type MagicProperty = CommonProperty & (OffPick | OnPick);
70
70
  export type MagicCircleProps = MagicProperty & {
71
71
  radius: number;
72
72
  dynamic?: boolean;
73
- clockwise?: boolean;
73
+ scrollDirection?: boolean;
74
74
  };
75
75
  export type MagicStraightProps = MagicProperty & {
76
76
  vertical?: boolean;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "react-magic-card",
3
- "version": "0.2.1",
4
- "description": "image gallery components with framer motion",
3
+ "version": "1.0.0",
4
+ "description": "React Component library for images gallery using the framer motion animation.",
5
5
  "main": "dist/index.js",
6
6
  "typings": "dist/index.d.ts",
7
7
  "repository": {
@@ -20,11 +20,10 @@
20
20
  },
21
21
  "keywords": [
22
22
  "react",
23
- "art",
24
- "photograph",
25
- "illust",
26
- "gallery",
27
- "animation"
23
+ "component",
24
+ "animation",
25
+ "images",
26
+ "gallery"
28
27
  ],
29
28
  "license": "MIT",
30
29
  "dependencies": {