react-magic-card 0.1.6 → 0.1.8

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 (8) hide show
  1. package/README.md +28 -26
  2. package/dist/MagicCircle/index.d.ts +1 -1
  3. package/dist/MagicCircle/index.js +27 -22
  4. package/dist/MagicStraight/index.d.ts +1 -1
  5. package/dist/MagicStraight/index.js +18 -14
  6. package/dist/common/PickImage/index.js +0 -1
  7. package/dist/types.d.ts +3 -2
  8. package/package.json +1 -1
package/README.md CHANGED
@@ -54,40 +54,42 @@ function MyComponent() {
54
54
  selectRotateZ: -10
55
55
  }}
56
56
  transition={{ duration: 0.2 }}
57
- pickTransition={{ duration: 0.4 }}
58
- pickProperty={{ white: true, alpha: 0.4, blur: 4, scale: 2, offset: 220 }}
57
+ pickTransition={{ duration: 0.2 }}
58
+ pickProperty={{ white: true }}
59
59
  />
60
60
  )
61
61
  }
62
62
  ```
63
63
 
64
- | Property | Explanation |
64
+ | Property | Meaning |
65
65
  | ---------------- | ------------------------------------------------------------------------ |
66
66
  | images | array of images and objects containing the src and alt properties. |
67
- | width | width of a single image. |
68
- | height | height of a single image. |
67
+ | width | width of the single image. |
68
+ | height | height of the single image. |
69
69
  | start | index number of the starting scale position. |
70
70
  | controller | diameter plus the value of the controller is the size of the controller. |
71
- | className | class name of the component. |
72
- | classImage | class name of the images. |
73
- | classImageUnique | index number is assigned to the end of the class name set for this. |
71
+ | className | className of the component. |
72
+ | classImages | className of the images. |
73
+ | classImageSelect | className of the select image. |
74
+ | classImageUnique | className of the index number is assigned to the end. |
74
75
  | animate | object in the animation property. |
75
76
  | initial | object in the animation property. |
76
77
  | transition | object in the transition property. |
77
78
  | pickTransition | object in the transition property. |
78
79
  | pickProperty | object in the pick property. |
79
80
 
80
- | Only in MagicCircle | Explanation |
81
- | ------------------- | ----------------------------------------------- |
82
- | dynamic | indicating whether dynamic rotation is allowed. |
83
- | radius | radius of the circle. |
81
+ | Only MagicCircle | Meaning |
82
+ | ---------------- | ---------------------------------------------------- |
83
+ | radius | radius of the circle. |
84
+ | dynamic | dynamic or static for rotation the default true. |
85
+ | clockwise | direction of rotation when dynamic the default true. |
84
86
 
85
- | Only in MagicStraight | Explanation |
86
- | --------------------- | ----------------------------------- |
87
- | vertical | vertical or horizontal boolean flag |
88
- | margin | spacing of the between images |
89
- | selectOffsetX | X-axis position |
90
- | selectOffsetY | Y-axis position |
87
+ | Only MagicStraight | Meaning |
88
+ | ------------------ | --------------------------------------- |
89
+ | vertical | vertical or horizontal the default true |
90
+ | margin | spacing of the between images |
91
+ | selectOffsetX | X-axis position |
92
+ | selectOffsetY | Y-axis position |
91
93
 
92
94
  ## Animation property
93
95
 
@@ -108,14 +110,14 @@ It Inherits framer motion transition properties other than intera.
108
110
 
109
111
  ## Pick property
110
112
 
111
- | Property | Explanation |
112
- | --------- | ---------------------------------------------------------- |
113
- | classPick | class name of the pick image |
114
- | white | white or black boolean flag for background |
115
- | alpha | background transparency a number between 0 ~ 1 |
116
- | blur | blur intensity a number between 1 ~ 20 a preferred |
117
- | scale | scale of the pick image |
118
- | offset | offset of the appearance position from the center position |
113
+ | Property | Meaning |
114
+ | --------- | --------------------------------------------------------- |
115
+ | classPick | class name of the pick image |
116
+ | white | white or black for background the default true |
117
+ | alpha | background transparency of a number between 0 ~ 1 |
118
+ | blur | blur intensity of a number between 1 ~ 20 a preferred |
119
+ | scale | scale of the pick image |
120
+ | offset | offset of an appearance position from the center position |
119
121
 
120
122
  ## License
121
123
 
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, radius, controller, start, dynamic, wheelDelay, animate, initial, transition, className, classImage, classImageUnique, selectCursor, pickProperty, pickTransition }: MagicCircleProps) => React.JSX.Element;
3
+ export declare const MagicCircle: ({ images, height, width, radius, controller, start, dynamic, clockwise, wheelDelay, animate, initial, transition, className, classImages, classImageSelect, classImageUnique, pickProperty, pickTransition }: MagicCircleProps) => React.JSX.Element;
package/dist/MagicCircle/index.js CHANGED
@@ -31,7 +31,7 @@ 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, radius, controller, start, dynamic = true, wheelDelay, animate, initial, transition, className, classImage, classImageUnique, selectCursor = 'pointer', pickProperty, pickTransition }) => {
34
+ const MagicCircle = ({ images, height, width, radius, controller, start, dynamic = true, clockwise = true, wheelDelay, animate, initial, transition, className, classImages, classImageSelect, classImageUnique, 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);
@@ -45,28 +45,28 @@ const MagicCircle = ({ images, height, width, radius, controller, start, dynamic
45
45
  // Functions of the rotation and select and delay.
46
46
  // turn left
47
47
  const shiftLeft = (0, react_1.useCallback)(() => {
48
- setSelect(select == images.length - 1 ? 0 : select + 1);
49
- setHasShift(false);
48
+ setSelect(select == 0 ? images.length - 1 : select - 1);
49
+ setHasShift(true);
50
50
  setHasDelayed(false);
51
51
  if (dynamic)
52
- return setCount(count - centralAngle);
52
+ return setCount(count + centralAngle);
53
53
  }, [centralAngle, count, dynamic, images.length, select]);
54
54
  // turn right
55
55
  const shiftRight = (0, react_1.useCallback)(() => {
56
- setSelect(select == 0 ? images.length - 1 : select - 1);
57
- setHasShift(true);
56
+ setSelect(select == images.length - 1 ? 0 : select + 1);
57
+ setHasShift(false);
58
58
  setHasDelayed(false);
59
59
  if (dynamic)
60
- return setCount(count + centralAngle);
60
+ return setCount(count - centralAngle);
61
61
  }, [centralAngle, count, dynamic, images.length, select]);
62
62
  // Function of the desktop.
63
63
  const handleWheel = (0, react_1.useCallback)((e) => {
64
64
  const delta = e.deltaY;
65
- if (delta > 0)
66
- shiftLeft();
67
65
  if (delta < 0)
68
- shiftRight();
69
- }, [shiftLeft, shiftRight]);
66
+ clockwise ? shiftLeft() : shiftRight();
67
+ if (delta > 0)
68
+ clockwise ? shiftRight() : shiftLeft();
69
+ }, [clockwise, shiftLeft, shiftRight]);
70
70
  // Get a start y and x position in touchStart Y and X.
71
71
  const handleTouchStart = (e) => {
72
72
  const touch = e.touches[0];
@@ -77,13 +77,13 @@ const MagicCircle = ({ images, height, width, radius, controller, start, dynamic
77
77
  const handleTouchMove = (0, react_1.useCallback)((event) => {
78
78
  const touch = event.touches[0];
79
79
  const delta = hasPick ? touch.clientX : touch.clientY;
80
- if (delta > (touchStartY || touchStartX))
81
- shiftRight();
82
80
  if (delta < (touchStartY || touchStartX))
83
- shiftLeft();
81
+ clockwise ? shiftLeft() : shiftRight();
82
+ if (delta > (touchStartY || touchStartX))
83
+ clockwise ? shiftRight() : shiftLeft();
84
84
  setTouchStartX(delta);
85
85
  setTouchStartY(delta);
86
- }, [hasPick, shiftLeft, shiftRight, touchStartX, touchStartY]);
86
+ }, [clockwise, hasPick, shiftLeft, shiftRight, touchStartX, touchStartY]);
87
87
  // Main functional, exit function if ref and hasDelayed does not exist.
88
88
  (0, react_1.useEffect)(() => {
89
89
  const elm1Div = div1Ref.current;
@@ -131,10 +131,9 @@ const MagicCircle = ({ images, height, width, radius, controller, start, dynamic
131
131
  elms.forEach(elm => {
132
132
  if (!elm)
133
133
  return;
134
- elm.addEventListener('mouseover', enterControll);
134
+ elm.addEventListener('mouseover', enterControll, { passive: false });
135
135
  elm.addEventListener('mouseout', leaveControll);
136
- elm.addEventListener('touchmove', enterControll);
137
- elm.addEventListener('touchcancel', leaveControll);
136
+ elm.addEventListener('touchmove', enterControll, { passive: false });
138
137
  elm.addEventListener('touchend', leaveControll);
139
138
  });
140
139
  // Clean up event when component is unmount.
@@ -145,7 +144,6 @@ const MagicCircle = ({ images, height, width, radius, controller, start, dynamic
145
144
  elm.removeEventListener('mouseover', enterControll);
146
145
  elm.removeEventListener('mouseout', leaveControll);
147
146
  elm.removeEventListener('touchmove', enterControll);
148
- elm.removeEventListener('touchcancel', leaveControll);
149
147
  elm.removeEventListener('touchend', leaveControll);
150
148
  });
151
149
  };
@@ -192,8 +190,12 @@ const MagicCircle = ({ images, height, width, radius, controller, start, dynamic
192
190
  }, transition: transition, onClick: () => {
193
191
  setSelect(index);
194
192
  hasSelect && setHasPick(true);
195
- }, className: classImage + ' ' + classImageUnique + index, src: image.src, alt: image.alt, style: {
196
- cursor: hasSelect ? selectCursor : 'default',
193
+ }, className: classImages +
194
+ ' ' +
195
+ (hasSelect && classImageSelect) +
196
+ ' ' +
197
+ classImageUnique +
198
+ index, src: image.src, alt: image.alt, style: {
197
199
  width: width + 'px',
198
200
  height: height + 'px',
199
201
  left: radius * Math.cos(index * angle) +
@@ -206,6 +208,9 @@ const MagicCircle = ({ images, height, width, radius, controller, start, dynamic
206
208
  'px'
207
209
  } }));
208
210
  }))),
209
- 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 })));
211
+ react_1.default.createElement(PickImage_1.default, { onClick: () => {
212
+ leaveControll();
213
+ setHasPick(false);
214
+ }, 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 })));
210
215
  };
211
216
  exports.MagicCircle = MagicCircle;
package/dist/MagicStraight/index.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import React from 'react';
2
2
  import type { MagicStraightProps } from '../types';
3
- export declare const MagicStraight: ({ images, height, width, start, controller, wheelDelay, vertical, className, classImage, classImageUnique, animate, initial, transition, margin, selectOffsetX, selectOffsetY, selectCursor, pickProperty, pickTransition }: MagicStraightProps) => React.JSX.Element;
3
+ export declare const MagicStraight: ({ images, height, width, start, controller, wheelDelay, vertical, className, classImages, classImageSelect, classImageUnique, animate, initial, transition, margin, selectOffsetX, selectOffsetY, pickProperty, pickTransition }: MagicStraightProps) => React.JSX.Element;
package/dist/MagicStraight/index.js CHANGED
@@ -31,7 +31,7 @@ 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 MagicStraight = ({ images, height, width, start, controller, wheelDelay, vertical, className, classImage, classImageUnique, animate, initial, transition, margin = 0, selectOffsetX = 0, selectOffsetY = 0, selectCursor = 'pointer', pickProperty, pickTransition }) => {
34
+ const MagicStraight = ({ images, height, width, start, controller, wheelDelay, vertical, className, classImages, classImageSelect, classImageUnique, animate, initial, transition, margin = 0, selectOffsetX = 0, selectOffsetY = 0, pickProperty, pickTransition }) => {
35
35
  const [touchStartY, setTouchStartY] = (0, react_1.useState)(0);
36
36
  const [touchStartX, setTouchStartX] = (0, react_1.useState)(0);
37
37
  const [hasShift, setHasShift] = (0, react_1.useState)(false);
@@ -56,10 +56,10 @@ const MagicStraight = ({ images, height, width, start, controller, wheelDelay, v
56
56
  // Wheel function of the desktop.
57
57
  const handleWheel = (0, react_1.useCallback)((e) => {
58
58
  const delta = e.deltaY;
59
- if (delta > 0)
60
- shiftRight();
61
59
  if (delta < 0)
62
60
  shiftLeft();
61
+ if (delta > 0)
62
+ shiftRight();
63
63
  }, [shiftLeft, shiftRight]);
64
64
  // Get a start y and x position in touchStart Y and X.
65
65
  const handleTouchStart = (e) => {
@@ -75,10 +75,10 @@ const MagicStraight = ({ images, height, width, start, controller, wheelDelay, v
75
75
  : !vertical
76
76
  ? touch.clientX
77
77
  : touch.clientY;
78
- if (delta > (touchStartX || touchStartY))
79
- shiftRight();
80
78
  if (delta < (touchStartX || touchStartY))
81
79
  shiftLeft();
80
+ if (delta > (touchStartX || touchStartY))
81
+ shiftRight();
82
82
  setTouchStartX(delta);
83
83
  setTouchStartY(delta);
84
84
  }, [hasPick, shiftLeft, shiftRight, touchStartX, touchStartY, vertical]);
@@ -129,10 +129,9 @@ const MagicStraight = ({ images, height, width, start, controller, wheelDelay, v
129
129
  elms.forEach(elm => {
130
130
  if (!elm)
131
131
  return;
132
- elm.addEventListener('mouseover', enterControll);
132
+ elm.addEventListener('mouseover', enterControll, { passive: false });
133
133
  elm.addEventListener('mouseout', leaveControll);
134
- elm.addEventListener('touchmove', enterControll);
135
- elm.addEventListener('touchcancel', leaveControll);
134
+ elm.addEventListener('touchmove', enterControll, { passive: false });
136
135
  elm.addEventListener('touchend', leaveControll);
137
136
  });
138
137
  // Clean up event when component is unmount.
@@ -143,7 +142,6 @@ const MagicStraight = ({ images, height, width, start, controller, wheelDelay, v
143
142
  elm.removeEventListener('mouseover', enterControll);
144
143
  elm.removeEventListener('mouseout', leaveControll);
145
144
  elm.removeEventListener('touchmove', enterControll);
146
- elm.removeEventListener('touchcancel', leaveControll);
147
145
  elm.removeEventListener('touchend', leaveControll);
148
146
  });
149
147
  };
@@ -153,9 +151,8 @@ const MagicStraight = ({ images, height, width, start, controller, wheelDelay, v
153
151
  for (let i = 1; i < images.length; i++)
154
152
  total += i;
155
153
  const average = total / images.length;
156
- const clasess = className + ' ' + styles_module_css_1.default.outer;
157
154
  return (react_1.default.createElement(framer_motion_1.LazyMotion, { features: framer_motion_1.domAnimation },
158
- react_1.default.createElement("div", { ref: div1Ref, className: clasess, style: {
155
+ react_1.default.createElement("div", { ref: div1Ref, className: className + ' ' + styles_module_css_1.default.outer, style: {
159
156
  width: !vertical ? height + controller + 'px' : 'fit-content',
160
157
  height: vertical ? width + controller + 'px' : 'fit-content',
161
158
  padding: vertical
@@ -198,18 +195,25 @@ const MagicStraight = ({ images, height, width, start, controller, wheelDelay, v
198
195
  }, transition: transition, onClick: () => {
199
196
  setSelect(index);
200
197
  hasSelect && setHasPick(true);
201
- }, className: classImage + ' ' + classImageUnique + index, src: image.src, alt: image.alt, role: "button", style: {
198
+ }, className: classImages +
199
+ ' ' +
200
+ (hasSelect && classImageSelect) +
201
+ ' ' +
202
+ classImageUnique +
203
+ index, src: image.src, alt: image.alt, role: "button", style: {
202
204
  zIndex: hasSelect
203
205
  ? hasPick
204
206
  ? 0
205
207
  : images.length + 1
206
208
  : reverseIndex,
207
- cursor: hasSelect ? selectCursor : 'default',
208
209
  width: width + 'px',
209
210
  height: height + 'px',
210
211
  margin: vertical ? margin + 'px' + ' 0' : '0 ' + margin + 'px'
211
212
  } }));
212
213
  })),
213
- 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 })));
214
+ react_1.default.createElement(PickImage_1.default, { onClick: () => {
215
+ leaveControll();
216
+ setHasPick(false);
217
+ }, 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 })));
214
218
  };
215
219
  exports.MagicStraight = MagicStraight;
package/dist/common/PickImage/index.js CHANGED
@@ -11,7 +11,6 @@ const PickImage = ({ onClick, classPick, hasPick, hasShift, argRef, argKey, src,
11
11
  zIndex: zIndex,
12
12
  opacity: hasPick ? 1 : 0,
13
13
  pointerEvents: hasPick ? 'auto' : 'none',
14
- visibility: hasPick ? 'visible' : 'hidden',
15
14
  backdropFilter: `blur(${blur}px)`,
16
15
  background: white
17
16
  ? `rgba(255, 255, 255, ${alpha})`
package/dist/types.d.ts CHANGED
@@ -46,18 +46,19 @@ type MagicProperty = {
46
46
  start: number;
47
47
  wheelDelay: number;
48
48
  className?: string;
49
- classImage?: string;
49
+ classImages?: string;
50
+ classImageSelect?: string;
50
51
  classImageUnique?: string;
51
52
  animate?: AnimationProperty;
52
53
  initial?: AnimationProperty;
53
54
  transition?: TransitionProperty;
54
- selectCursor?: 'pointer' | 'zoom-in' | 'crosshair' | 'help';
55
55
  pickProperty?: PickProperty;
56
56
  pickTransition?: TransitionProperty;
57
57
  };
58
58
  export type MagicCircleProps = MagicProperty & {
59
59
  radius: number;
60
60
  dynamic?: boolean;
61
+ clockwise?: boolean;
61
62
  };
62
63
  export type MagicStraightProps = MagicProperty & {
63
64
  vertical?: boolean;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-magic-card",
3
- "version": "0.1.6",
3
+ "version": "0.1.8",
4
4
  "description": "image gallery component with framer motion",
5
5
  "main": "dist/index.js",
6
6
  "typings": "dist/index.d.ts",