react-magic-card 0.1.7 → 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 (7) hide show
  1. package/README.md +28 -26
  2. package/dist/MagicCircle/index.d.ts +1 -1
  3. package/dist/MagicCircle/index.js +23 -19
  4. package/dist/MagicStraight/index.d.ts +1 -1
  5. package/dist/MagicStraight/index.js +14 -11
  6. package/dist/types.d.ts +3 -2
  7. 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,9 +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);
136
+ elm.addEventListener('touchmove', enterControll, { passive: false });
137
137
  elm.addEventListener('touchend', leaveControll);
138
138
  });
139
139
  // Clean up event when component is unmount.
@@ -190,8 +190,12 @@ const MagicCircle = ({ images, height, width, radius, controller, start, dynamic
190
190
  }, transition: transition, onClick: () => {
191
191
  setSelect(index);
192
192
  hasSelect && setHasPick(true);
193
- }, className: classImage + ' ' + classImageUnique + index, src: image.src, alt: image.alt, style: {
194
- cursor: hasSelect ? selectCursor : 'default',
193
+ }, className: classImages +
194
+ ' ' +
195
+ (hasSelect && classImageSelect) +
196
+ ' ' +
197
+ classImageUnique +
198
+ index, src: image.src, alt: image.alt, style: {
195
199
  width: width + 'px',
196
200
  height: height + 'px',
197
201
  left: radius * Math.cos(index * angle) +
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,9 +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);
134
+ elm.addEventListener('touchmove', enterControll, { passive: false });
135
135
  elm.addEventListener('touchend', leaveControll);
136
136
  });
137
137
  // Clean up event when component is unmount.
@@ -151,9 +151,8 @@ const MagicStraight = ({ images, height, width, start, controller, wheelDelay, v
151
151
  for (let i = 1; i < images.length; i++)
152
152
  total += i;
153
153
  const average = total / images.length;
154
- const clasess = className + ' ' + styles_module_css_1.default.outer;
155
154
  return (react_1.default.createElement(framer_motion_1.LazyMotion, { features: framer_motion_1.domAnimation },
156
- 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: {
157
156
  width: !vertical ? height + controller + 'px' : 'fit-content',
158
157
  height: vertical ? width + controller + 'px' : 'fit-content',
159
158
  padding: vertical
@@ -196,13 +195,17 @@ const MagicStraight = ({ images, height, width, start, controller, wheelDelay, v
196
195
  }, transition: transition, onClick: () => {
197
196
  setSelect(index);
198
197
  hasSelect && setHasPick(true);
199
- }, 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: {
200
204
  zIndex: hasSelect
201
205
  ? hasPick
202
206
  ? 0
203
207
  : images.length + 1
204
208
  : reverseIndex,
205
- cursor: hasSelect ? selectCursor : 'default',
206
209
  width: width + 'px',
207
210
  height: height + 'px',
208
211
  margin: vertical ? margin + 'px' + ' 0' : '0 ' + margin + 'px'
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.7",
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",